Browse Source

🚀 Added SectionGridCategoryBox component

📦 Includes Next.js and TypeScript code
🎉 Initial implementation for Redux integration
🔗 Connected with TaxonomyType data
📚 Ready for further development
main
John Doe 1 year ago
parent
commit
0e82d07bfe
  1. 123
      src/components/SectionGridCategoryBox.tsx

123
src/components/SectionGridCategoryBox.tsx

@ -0,0 +1,123 @@
import CardCategoryBox1 from "@/components/CardCategoryBox1";
import Heading from "@/shared/Heading";
import { TaxonomyType } from "@/data/types";
import React from "react";
export interface SectionGridCategoryBoxProps {
categories?: TaxonomyType[];
headingCenter?: boolean;
categoryCardType?: "card1";
className?: string;
gridClassName?: string;
}
const DEMO_CATS: TaxonomyType[] = [
{
id: "1",
href: "/listing-stay-map",
name: "New Yourk",
taxonomy: "category",
count: 1882,
thumbnail:
"https://images.pexels.com/photos/64271/queen-of-liberty-statue-of-liberty-new-york-liberty-statue-64271.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260",
},
{
id: "2",
href: "/listing-stay-map",
name: "Singapore",
taxonomy: "category",
count: 8288,
thumbnail:
"https://images.pexels.com/photos/7740160/pexels-photo-7740160.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
},
{
id: "3",
href: "/listing-stay-map",
name: "Paris",
taxonomy: "category",
count: 1288,
thumbnail:
"https://images.pexels.com/photos/739407/pexels-photo-739407.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
},
{
id: "4",
href: "/listing-stay-map",
name: "London",
taxonomy: "category",
count: 112,
thumbnail:
"https://images.pexels.com/photos/460672/pexels-photo-460672.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260",
},
{
id: "5",
href: "/listing-stay-map",
name: "Tokyo",
taxonomy: "category",
count: 323,
thumbnail:
"https://images.pexels.com/photos/4151484/pexels-photo-4151484.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260",
},
{
id: "6",
href: "/listing-stay-map",
name: "Maldives",
taxonomy: "category",
count: 2223,
thumbnail:
"https://images.pexels.com/photos/3250613/pexels-photo-3250613.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
},
{
id: "7",
href: "/listing-stay-map",
name: "New Yourk",
taxonomy: "category",
count: 1775,
thumbnail:
"https://images.pexels.com/photos/64271/queen-of-liberty-statue-of-liberty-new-york-liberty-statue-64271.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260",
},
{
id: "8",
href: "/listing-stay-map",
name: "Singapore",
taxonomy: "category",
count: 1288,
thumbnail:
"https://images.pexels.com/photos/7740160/pexels-photo-7740160.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
},
];
const SectionGridCategoryBox: React.FC<SectionGridCategoryBoxProps> = ({
categories = DEMO_CATS,
categoryCardType = "card1",
headingCenter = true,
className = "",
gridClassName = "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
}) => {
let CardComponentName = CardCategoryBox1;
switch (categoryCardType) {
case "card1":
CardComponentName = CardCategoryBox1;
break;
default:
CardComponentName = CardCategoryBox1;
}
return (
<div className={`nc-SectionGridCategoryBox relative ${className}`}>
<Heading
desc="Discover great places near where you live"
isCenter={headingCenter}
>
Explore nearby
</Heading>
<div className={`grid ${gridClassName} gap-5 sm:gap-6 md:gap-8`}>
{categories.map((item, i) => (
<CardComponentName key={i} taxonomy={item} />
))}
</div>
</div>
);
};
export default SectionGridCategoryBox;
Loading…
Cancel
Save