🚀 Added SectionGridCategoryBox component

📦 Includes Next.js and TypeScript code 🎉 Initial implementation for Redux integration 🔗 Connected with TaxonomyType data 📚 Ready for further development
1 year ago · 0e82d07bfe
1 changed files with 123 additions and 0 deletions
--- a/src/components/SectionGridCategoryBox.tsx
+++ b/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;