Add src/app/properties/page.tsx
This commit is contained in:
110
src/app/properties/page.tsx
Normal file
110
src/app/properties/page.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import { Instagram, Facebook, Linkedin } from "lucide-react";
|
||||
|
||||
const propertiesData = [
|
||||
{
|
||||
id: "1", category: "Villa", name: "Luxury Beachfront Villa", price: "$1,500/night", rating: 5,
|
||||
reviewCount: "87 reviews", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination6.webp", imageAlt: "Beachfront Villa"},
|
||||
{
|
||||
id: "2", category: "Chalet", name: "Swiss Mountain Chalet", price: "$1,200/night", rating: 4,
|
||||
reviewCount: "62 reviews", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination5.webp", imageAlt: "Mountain Chalet"},
|
||||
{
|
||||
id: "3", category: "Lodge", name: "Serengeti Safari Lodge", price: "$1,800/night", rating: 5,
|
||||
reviewCount: "95 reviews", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination1.webp", imageAlt: "Safari Lodge"},
|
||||
{
|
||||
id: "4", category: "Estate", name: "Amalfi Coast Estate", price: "$2,000/night", rating: 5,
|
||||
reviewCount: "78 reviews", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination4.webp", imageAlt: "Amalfi Estate"},
|
||||
{
|
||||
id: "5", category: "Ryokan", name: "Kyoto Traditional Ryokan", price: "$900/night", rating: 4,
|
||||
reviewCount: "41 reviews", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination3.webp", imageAlt: "Kyoto Ryokan"},
|
||||
{
|
||||
id: "6", category: "Lodge", name: "Patagonia Wilderness Lodge", price: "$1,100/night", rating: 4,
|
||||
reviewCount: "53 reviews", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination2.webp", imageAlt: "Patagonia Lodge"},
|
||||
];
|
||||
|
||||
export default function PropertiesPage() {
|
||||
const [search, setSearch] = useState("");
|
||||
const [locationFilter, setLocationFilter] = useState("All");
|
||||
const [typeFilter, setTypeFilter] = useState("All");
|
||||
const [priceFilter, setPriceFilter] = useState("All");
|
||||
|
||||
const filteredProperties = propertiesData.filter(property => {
|
||||
const matchesSearch = property.name.toLowerCase().includes(search.toLowerCase());
|
||||
const matchesLocation = locationFilter === "All" || property.imageAlt?.includes(locationFilter);
|
||||
const matchesType = typeFilter === "All" || property.category === typeFilter;
|
||||
const matchesPrice = priceFilter === "All" || (function() {
|
||||
const price = parseFloat(property.price.replace(/[^0-9.-]+/g,""));
|
||||
if (priceFilter === "$500-1000") return price >= 500 && price < 1000;
|
||||
if (priceFilter === "$1000-1500") return price >= 1000 && price < 1500;
|
||||
if (priceFilter === "$1500-2000") return price >= 1500 && price < 2000;
|
||||
if (priceFilter === "2000+") return price >= 2000;
|
||||
return true;
|
||||
})();
|
||||
return matchesSearch && matchesLocation && matchesType && matchesPrice;
|
||||
});
|
||||
|
||||
const filters = [
|
||||
{ label: "Location", options: ["All", "Maldives", "Switzerland", "Tanzania", "Amalfi Coast", "Kyoto", "Patagonia"], selected: locationFilter, onChange: setLocationFilter },
|
||||
{ label: "Property Type", options: ["All", "Villa", "Chalet", "Lodge", "Estate", "Ryokan"], selected: typeFilter, onChange: setTypeFilter },
|
||||
{ label: "Price Range", options: ["All", "$500-1000", "$1000-1500", "$1500-2000", "2000+"], selected: priceFilter, onChange: setPriceFilter },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Destinations", id: "destinations" },
|
||||
{ name: "Reviews", id: "reviews" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Properties", href: "/properties" },
|
||||
{ name: "Booking", href: "/booking" }
|
||||
]}
|
||||
brandName="Luxuria"
|
||||
button={{ text: "Plan Your Trip", href: "/booking" }}
|
||||
/>
|
||||
<div className="min-h-screen py-32 lg:py-40">
|
||||
<ProductCatalog
|
||||
layout="page"
|
||||
products={filteredProperties}
|
||||
searchValue={search}
|
||||
onSearchChange={setSearch}
|
||||
searchPlaceholder="Search properties..."
|
||||
filters={filters}
|
||||
emptyMessage="No properties match your criteria."
|
||||
className="pt-12"
|
||||
/>
|
||||
</div>
|
||||
<FooterCard
|
||||
logoText="Luxuria"
|
||||
copyrightText="© 2025 Luxuria Travel | Luxury Journeys Worldwide"
|
||||
socialLinks={[
|
||||
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
||||
{ icon: Facebook, href: "#", ariaLabel: "Facebook" },
|
||||
{ icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
|
||||
]}
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user