Skip to content

Commit cd41f98

Browse files
author
fangedShadow
committed
listing overview add back
1 parent 2c48964 commit cd41f98

5 files changed

Lines changed: 479 additions & 0 deletions

File tree

‎src/components/LBDashboard/ListingOverview/ImageCarousel.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
.carousel-container {
2+
position: relative;
3+
width: 100%;
4+
height: 100%;
5+
max-width: 100%;
6+
margin: auto;
7+
overflow: hidden;
8+
}
9+
10+
.carousel-wrapper {
11+
width: 100%;
12+
overflow: hidden;
13+
}
14+
15+
.carousel-track {
16+
display: flex;
17+
transition: transform 0.5s ease-in-out;
18+
}
19+
20+
.carousel-image {
21+
width: 100%;
22+
height: 100%;
23+
max-width: 100%;
24+
flex-shrink: 0;
25+
object-fit: cover;
26+
}
27+
28+
.arrow {
29+
position: absolute;
30+
top: 50%;
31+
transform: translateY(-50%);
32+
background-color: rgba(0, 0, 0, 0.5);
33+
color: white;
34+
border: none;
35+
padding: 10px;
36+
border-radius: 50%;
37+
cursor: pointer;
38+
z-index: 10;
39+
}
40+
41+
.arrow.left {
42+
left: 10px;
43+
}
44+
45+
.arrow.right {
46+
right: 10px;
47+
}
48+
49+
.carousel-indicators {
50+
display: flex;
51+
justify-content: center;
52+
margin-top: 5%;
53+
bottom: 2% !important;
54+
}
55+
56+
.indicator {
57+
width: 10px;
58+
height: 10px;
59+
margin: 0 5px;
60+
background-color: #bbb;
61+
border-radius: 50%;
62+
cursor: pointer;
63+
transition: background-color 0.3s ease;
64+
}
65+
66+
.indicator.active {
67+
background-color: #333;
68+
}

‎src/components/LBDashboard/ListingOverview/ImageCarousel.jsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { useState } from 'react';
2+
import './ImageCarousel.css';
3+
4+
export default function ImageCarousel({ images }) {
5+
const [currentIndex, setCurrentIndex] = useState(0);
6+
7+
if (!images || images.length === 0) return <p>No images available</p>;
8+
9+
const handleNext = () => {
10+
setCurrentIndex(prev => (prev + 1) % images.length);
11+
};
12+
13+
const handlePrev = () => {
14+
setCurrentIndex(prev => (prev - 1 + images.length) % images.length);
15+
};
16+
17+
const handleIndicatorClick = index => {
18+
setCurrentIndex(index);
19+
};
20+
21+
return (
22+
<div className="carousel-container">
23+
<div className="carousel-wrapper">
24+
<div
25+
className="carousel-track"
26+
style={{ transform: `translateX(-${currentIndex * 100}%)` }}
27+
>
28+
{images.map((image, index) => (
29+
<img key={image} className="carousel-image" src={image} alt={`Slide ${index + 1}`} />
30+
))}
31+
</div>
32+
</div>
33+
<button type="button" className="arrow left" onClick={handlePrev}>
34+
❮
35+
</button>
36+
<button type="button" className="arrow right" onClick={handleNext}>
37+
❯
38+
</button>
39+
<div className="carousel-indicators">
40+
{images.map((image, index) => (
41+
<span
42+
key={image}
43+
className={`indicator ${index === currentIndex ? 'active' : ''}`}
44+
onClick={() => handleIndicatorClick(index)}
45+
/>
46+
))}
47+
</div>
48+
</div>
49+
);
50+
}

‎src/components/LBDashboard/ListingOverview/ListOverview.jsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import React, { useEffect } from 'react';
2+
import './Listoverview.css';
3+
import logo from '../../../assets/images/logo2.png';
4+
import mapIcon from '../../../assets/images/mapIcon.png';
5+
import ImageCarousel from './ImageCarousel';
6+
7+
function ListOverview() {
8+
const [listing, setListing] = React.useState({});
9+
10+
const data = {
11+
title: 'Title',
12+
images: [
13+
'https://nikonrumors.com/wp-content/uploads/2014/03/Nikon-1-V3-sample-photo.jpg',
14+
'https://photographylife.com/wp-content/uploads/2023/05/Nikon-Z8-Official-Samples-00002.jpg',
15+
],
16+
description:
17+
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam vitae, ex officiis iusto, quos eveniet consequatur minima nesciunt, doloremque cupiditate totam at quia asperiores rem reprehenderit explicabo perferendis aliquam tempora!',
18+
unitAmenities: ['Amenity x', 'Amenity y'],
19+
villageAmenities: ['Amenity c', 'Amenity v'],
20+
location: 'Location',
21+
};
22+
23+
useEffect(() => {
24+
setListing(data);
25+
}, []);
26+
27+
return (
28+
<div className="main-container">
29+
<div className="logo-container">
30+
<img src={logo} alt="One Community Logo" />
31+
</div>
32+
<div className="content-container">
33+
<div className="container-top" />
34+
<div className="container-main">
35+
<div className="details-left">
36+
<div className="listing-details mobile-display">
37+
<h1>{listing.title}</h1>
38+
</div>
39+
<div className="image-carousel">
40+
<ImageCarousel images={listing.images} />
41+
</div>
42+
<div className="amenities">
43+
<div>
44+
<h2>Available amenities in this unit:</h2>
45+
<ol>
46+
{listing.unitAmenities?.map(amenity => (
47+
<li key={amenity}>{amenity}</li>
48+
))}
49+
</ol>
50+
</div>
51+
<div>
52+
<h2>Village level amenities:</h2>
53+
<ol>
54+
{listing.villageAmenities?.map(amenity => (
55+
<li key={amenity}>{amenity}</li>
56+
))}
57+
</ol>
58+
</div>
59+
</div>
60+
<div className="location">
61+
<img src={mapIcon} alt="Map Icon" />
62+
<a href="/">{listing.location}</a>
63+
</div>
64+
</div>
65+
<div className="details-right">
66+
<div className="listing-details">
67+
<h1 className="desktop-display">{listing.title}</h1>
68+
<p>{listing.description}</p>
69+
</div>
70+
<div className="rent-form">
71+
<label htmlFor="from">
72+
Rent from
73+
<input type="date" name="from" id="from" />
74+
</label>
75+
<label htmlFor="to">
76+
Rent to
77+
<input type="date" name="to" id="to" />
78+
</label>
79+
<button type="button">Proceed to submit with details</button>
80+
</div>
81+
<div className="error-message">
82+
<h6>The Dates you picked are not available</h6>
83+
<a href="/">Click here to see available dates</a>
84+
</div>
85+
<div className="chat-host">
86+
<button type="button">
87+
<img
88+
width="24"
89+
height="24"
90+
src="https://img.icons8.com/material-outlined/24/chat.png"
91+
alt="chat"
92+
/>
93+
Chat with the Host
94+
</button>
95+
</div>
96+
</div>
97+
</div>
98+
</div>
99+
</div>
100+
);
101+
}
102+
103+
export default ListOverview;

0 commit comments

Comments
 (0)