diff --git a/src/app/page.tsx b/src/app/page.tsx index f17b4ea..0f379ef 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -15,7 +15,7 @@ export default function Home() { <>
- +
diff --git a/src/components/authentication/login.tsx b/src/components/authentication/login.tsx new file mode 100644 index 0000000..9f1885e --- /dev/null +++ b/src/components/authentication/login.tsx @@ -0,0 +1,20 @@ +import localFont from "next/font/local"; + + +const figtree = localFont({ + src: [ + { + path: '../../../public/Fonts/figtree/figtree.ttf', + }, + ], +}) + +const Login = () => { + return ( +
+

Login

+
+ ) +} + +export default Login diff --git a/src/components/authentication/signup.tsx b/src/components/authentication/signup.tsx new file mode 100644 index 0000000..5982ce9 --- /dev/null +++ b/src/components/authentication/signup.tsx @@ -0,0 +1,20 @@ +import localFont from "next/font/local"; + + +const figtree = localFont({ + src: [ + { + path: '../../../public/Fonts/figtree/figtree.ttf', + }, + ], +}) + +const Signup = () => { + return ( +
+

Signup

+
+ ) +} + +export default Signup diff --git a/src/components/details/features.tsx b/src/components/details/features.tsx index 2c0b4bd..7d5312e 100644 --- a/src/components/details/features.tsx +++ b/src/components/details/features.tsx @@ -26,7 +26,7 @@ const property: Property = { guests: 4, bedrooms: 2, beds: 2, - baths: 2, + bathrooms: 2, rating: 4.81, reviewCount: 5, price: 25000, @@ -50,7 +50,7 @@ const property: Property = { joined: "2020", isSuperhost: true }, - images: [ + photos: [ "/hotel-banner.png", "/hotel-banner.png", "/hotel-banner.png", @@ -98,14 +98,18 @@ const property: Property = { rating: 5, comment: "Host was super helpful and gave great local recommendations. The house is even better than the photos." } - ] + ], + propertyType: "house", + placeType: "entire", + instantBook: true, + safety: ["camera", "alarm"] } function Features() { return (
- + {/* Main Content */}
@@ -116,7 +120,7 @@ function Features() { guests={property.guests} bedrooms={property.bedrooms} beds={property.beds} - baths={property.baths} + bathrooms={property.bathrooms} /> diff --git a/src/components/details/host-info.tsx b/src/components/details/host-info.tsx index d1ac7a9..a1b0306 100644 --- a/src/components/details/host-info.tsx +++ b/src/components/details/host-info.tsx @@ -6,16 +6,16 @@ interface HostInfoProps { guests: number; bedrooms: number; beds: number; - baths: number; + bathrooms: number; } -export function HostInfo({ host, guests, bedrooms, beds, baths }: HostInfoProps) { +export function HostInfo({ host, guests, bedrooms, beds, bathrooms }: HostInfoProps) { return (

Hosted by {host.name}

- {guests} guests · {bedrooms} bedrooms · {beds} beds · {baths} baths + {guests} guests · {bedrooms} bedrooms · {beds} beds · {bathrooms} baths

diff --git a/src/components/details/image-grid.tsx b/src/components/details/image-grid.tsx index bcf64d4..5b31ad0 100644 --- a/src/components/details/image-grid.tsx +++ b/src/components/details/image-grid.tsx @@ -1,16 +1,16 @@ import Image from "next/image"; interface ImageGridProps { - images: string[]; + photos: string[]; } -export function ImageGrid({ images }: ImageGridProps) { +export function ImageGrid({ photos }: ImageGridProps) { return (
Main view
View 2
View 3
View 4
View 5 - `flex flex-col items-center justify-center gap-3 p-6 border-2 border-black cursor-pointer transition-all hover:bg-gray-50 ${selected ? 'bg-[#E7FE78]' : 'bg-white'}`; + `flex flex-col items-center justify-center gap-4 p-6 border-2 border-black cursor-pointer transition-all ${selected ? 'bg-[#E7FE78]' : 'bg-white hover:bg-gray-50'}`; interface FormData { propertyType?: string; @@ -51,19 +61,103 @@ interface FormData { price?: string; instantBook?: boolean; safety?: string[]; + title?: string; // Added title for preview + photos?: string[]; } type FormValue = string | number | boolean | string[] | undefined; interface StepProps { - onNext: () => void; - onBack: () => void; data: FormData; updateData: (key: keyof FormData, value: FormValue) => void; } -/* Property Type */ -const PropertyType = ({ onNext, data, updateData }: StepProps) => { +/* --- Live Preview Component --- */ +const LivePreview = ({ data }: { data: FormData }) => { + // Helpers to derive display values + const getCity = () => { + if (!data.location) return "YOUR CITY"; + const parts = data.location.split(','); + return parts[0].trim().toUpperCase(); + }; + + const getTitle = () => { + if (data.title) return data.title; + const type = data.propertyType ? data.propertyType.charAt(0).toUpperCase() + data.propertyType.slice(1) : "Property"; + const place = data.placeType === 'entire' ? 'Entire place' : data.placeType === 'room' ? 'Private room' : 'Shared room'; + return `${type} · ${place}`; + }; + + const getPrice = () => { + return data.price ? `₨${parseInt(data.price).toLocaleString()}` : "₨0"; + }; + + return ( +
+
+
+

Preview

+
+ New +
+
+ + {/* Card Replica */} +
+ {/* Image Placeholder */} +
+ {data.photos && data.photos.length > 0 ? ( + Preview + ) : ( +
+ + Cover Photo +
+ )} +
+ + {/* Details */} +
+
+

+ {getCity()} +

+
+ + New +
+
+ +

+ {getTitle()} +

+ +

+ {getPrice()} + night +

+
+
+ + {/* Live Updates Summary */} +
+
+ Guests + {data.guests || 0} +
+
+ Amenities + {data.amenities?.length || 0} selected +
+
+
+
+ ); +}; + +/* --- Step Components --- */ + +const PropertyType = ({ data, updateData }: StepProps) => { const types = [ { id: 'house', label: 'House', icon: House }, { id: 'flat', label: 'Flat', icon: Buildings }, @@ -71,23 +165,19 @@ const PropertyType = ({ onNext, data, updateData }: StepProps) => { { id: 'guesthouse', label: 'Guesthouse', icon: Bed }, ]; - const handleSelect = (id: string) => { - updateData('propertyType', id); - onNext(); - }; - return ( -
+

What kind of place will you host?

+

Select the category that best describes your property.

{types.map((type) => ( ))} @@ -96,54 +186,45 @@ const PropertyType = ({ onNext, data, updateData }: StepProps) => { ) } -/* Property Place Type */ -const PropertyPlaceType = ({ onNext, onBack, data, updateData }: StepProps) => { +const PropertyPlaceType = ({ data, updateData }: StepProps) => { const places = [ - { id: 'entire', label: 'An entire place', description: 'Guests have the whole place to themselves.' }, - { id: 'room', label: 'A room', description: 'Guests have their own room in a home, plus access to shared spaces.' }, + { id: 'entire', label: 'An entire place', description: 'Guests have the entire property to themselves, with full privacy and unrestricted access.' }, + { id: 'room', label: 'A room', description: 'Guests have their own private room within the home, along with comfortable access to shared spaces.' }, { id: 'shared', label: 'A shared room', description: 'Guests sleep in a room or common area that may be shared with others.' }, ]; - const handleSelect = (id: string) => { - updateData('placeType', id); - onNext(); - }; - return ( -
+

What type of place will guests have?

+

Choose the level of privacy your guests will enjoy.

{places.map((place) => ( ))}
-
- -
) } -/* Property Location */ -const PropertyLocation = ({ onNext, onBack, data, updateData }: StepProps) => { +const PropertyLocation = ({ data, updateData }: StepProps) => { return ( -
+

Where's your place located?

-
+

Your address is only shared with guests after they've made a reservation.

+
- + { onChange={(e) => updateData('location', e.target.value)} />
- {/* Placeholder for map */} -
- Map Preview +
+
+ + Map Preview
-
- - -
) } -/* Property Capacity */ -const PropertyCapacity = ({ onNext, onBack, data, updateData }: StepProps) => { +const PropertyCapacity = ({ data, updateData }: StepProps) => { const counters: { key: keyof FormData; label: string }[] = [ { key: 'guests', label: 'Guests' }, { key: 'bedrooms', label: 'Bedrooms' }, @@ -184,76 +257,46 @@ const PropertyCapacity = ({ onNext, onBack, data, updateData }: StepProps) => { }; return ( -
+

Share some basics about your place

+

You'll add more details later, like bed types.

{counters.map((item) => ( -
- {item.label} -
+
+ {item.label} +
- {data[item.key] || 0} + {data[item.key] || 0}
))}
-
- - -
) } -/* Property Photos */ -const PropertyPhotos = ({ onNext, onBack }: StepProps) => { - return ( -
-

Add some photos of your house

-
- -
-

Drag your photos here

-

Choose at least 5 photos

-
- -
-
- - -
-
- ) -} - -/* Property Amenities */ -const PropertyAmenities = ({ onNext, onBack, data, updateData }: StepProps) => { +const PropertyAmenities = ({ data, updateData }: StepProps) => { const amenities = [ { id: 'wifi', label: 'Wi-Fi', icon: WifiHigh }, - { id: 'kitchen', label: 'Kitchen', icon: House }, - { id: 'parking', label: 'Free parking', icon: Farm }, - { id: 'pool', label: 'Pool', icon: Buildings }, + { id: 'kitchen', label: 'Kitchen', icon: CookingPot }, + { id: 'parking', label: 'Free parking', icon: Car }, + { id: 'pool', label: 'Pool', icon: SwimmingPool }, + { id: 'ac', label: 'Air conditioning', icon: Wind }, // Using House as placeholder for AC if needed + { id: 'tv', label: 'TV', icon: TelevisionSimple }, ]; const toggleAmenity = (id: string) => { @@ -265,159 +308,184 @@ const PropertyAmenities = ({ onNext, onBack, data, updateData }: StepProps) => { }; return ( -
+

What does your place offer?

+

You can add more amenities after you publish.

{amenities.map((amenity) => ( ))}
-
- - -
) } -/* Property Description */ -const PropertyDescription = ({ onNext, onBack, data, updateData }: StepProps) => { +const PropertyDescription = ({ data, updateData }: StepProps) => { return ( -
+

How would you describe your place?

-
-