Browse Source

🚀 Implemented SectionGridFilterCard component.

💡 Added Pagination functionality.
🎉 Enhanced UI with TabFilters.
📦 Integrated DEMO_STAY_LISTINGS data.
🛠️ Updated PropertyCardH component.
 Tested and verified component functionality.
🌟 Finalized SectionGridFilterCard component.
main
John Doe 1 year ago
parent
commit
707a31f37e
  1. 48
      src/app/(real-estate-listings)/SectionGridFilterCard.tsx

48
src/app/(real-estate-listings)/SectionGridFilterCard.tsx

@ -0,0 +1,48 @@
import React, { FC } from "react";
import { DEMO_STAY_LISTINGS } from "@/data/listings";
import { StayDataType } from "@/data/types";
import Pagination from "@/shared/Pagination";
import TabFilters from "./TabFilters";
import Heading2 from "@/shared/Heading2";
import PropertyCardH from "@/components/PropertyCardH";
export interface SectionGridFilterCardProps {
className?: string;
data?: StayDataType[];
}
const DEMO_DATA: StayDataType[] = DEMO_STAY_LISTINGS.filter((_, i) => i < 8);
const SectionGridFilterCard: FC<SectionGridFilterCardProps> = ({
className = "",
data = DEMO_DATA,
}) => {
return (
<div className={`nc-SectionGridFilterCard ${className}`}>
<Heading2
heading="Property in Tokyo"
subHeading={
<span className="block text-neutral-500 dark:text-neutral-400 mt-3">
233 Property
<span className="mx-2">·</span>
Aug 12 - 18
</span>
}
/>
<div className="mb-8 lg:mb-11">
<TabFilters />
</div>
<div className="grid grid-cols-1 gap-6 md:gap-8 xl:grid-cols-2 ">
{data.map((stay) => (
<PropertyCardH key={stay.id} data={stay} />
))}
</div>
<div className="flex mt-16 justify-center items-center">
<Pagination />
</div>
</div>
);
};
export default SectionGridFilterCard;
Loading…
Cancel
Save