product page

ethanniser · Oct 18, 2024 · 6126aaf · 6126aaf
1 parent 4645f1e
commit 6126aaf
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 24 deletions.
diff --git a/src/app/products/[category]/[subcategory]/[product]/page.tsx b/src/app/products/[category]/[subcategory]/[product]/page.tsx
@@ -1,8 +1,64 @@
+import { ProductLink } from "@/components/ui/product-card";
+import { getProductDetails, getRelatedProducts } from "@/db/utils";
+import { notFound } from "next/navigation";
+
 export default async function Page(props: {
   params: Promise<{
     product: string;
+    subcategory: string;
+    category: string;
   }>;
 }) {
-  const { product } = await props.params;
-  return <>{product}</>;
+  const { product, subcategory, category } = await props.params;
+  const urlDecodedProduct = decodeURIComponent(product);
+  const urlDecodedSubcategory = decodeURIComponent(subcategory);
+  const urlDecodedCategory = decodeURIComponent(category);
+  const productData = getProductDetails({
+    category: urlDecodedCategory,
+    subcategory: urlDecodedSubcategory,
+    product: urlDecodedProduct,
+  });
+  const related = getRelatedProducts({
+    category: urlDecodedCategory,
+    subcategory: urlDecodedSubcategory,
+    product: urlDecodedProduct,
+  });
+  if (!productData) {
+    return notFound();
+  }
+  return (
+    <div className="container mx-auto p-4">
+      <h1 className="border-t-2 pt-1 text-xl font-bold text-green-800">
+        {productData?.name}
+      </h1>
+      <div className="flex flex-col gap-2">
+        <div className="flex flex-row gap-2">
+          <img
+            src={productData?.name}
+            alt={productData?.name}
+            className="h-64 w-64 flex-shrink-0 border-2"
+          />
+          <p className="flex-grow text-base">{productData?.description}</p>
+        </div>
+        <button className="max-w-[150px] rounded-[2px] bg-green-800 px-2 py-1 text-sm font-semibold text-white">
+          Add to cart
+        </button>
+      </div>
+      <div className="pt-8">
+        <h2 className="text-lg font-bold text-green-800">
+          Explore more products
+        </h2>
+        <div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4">
+          {related?.map((item) => (
+            <ProductLink
+              key={item.name}
+              category={category}
+              subcategory={subcategory}
+              item={item}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/src/app/products/[category]/[subcategory]/page.tsx b/src/app/products/[category]/[subcategory]/page.tsx
@@ -1,7 +1,6 @@
-import Link from "next/link";
-import Image from "next/image";
 import { notFound } from "next/navigation";
 import { getSubcategoryDetails } from "@/db/utils";
+import { ProductLink } from "@/components/ui/product-card";
 
 export default async function Page(props: {
   params: Promise<{
@@ -24,27 +23,12 @@ export default async function Page(props: {
       <h1 className="mb-2 border-b-2 text-sm font-bold">690 Products</h1>
       <div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4">
         {sub.products.map((item) => (
-          <Link
+          <ProductLink
             key={item.name}
-            className="group flex h-full flex-row border px-4 py-2 hover:bg-gray-100"
-            href={`/products/${category}/${subcategory}/${item.name}`}
-          >
-            <div className="py-2">
-              <Image
-                src="/placeholder.svg?height=48&width=48"
-                alt={item.name}
-                width={48}
-                height={48}
-                className="h-12 w-12 flex-shrink-0 object-cover"
-              />
-            </div>
-            <div className="flex h-24 flex-grow flex-col items-start py-2">
-              <div className="text-sm font-medium text-gray-700 group-hover:underline">
-                {item.name}
-              </div>
-              <p className="overflow-hidden text-xs">{item.description}</p>
-            </div>
-          </Link>
+            category={category}
+            subcategory={subcategory}
+            item={item}
+          />
         ))}
       </div>
     </div>

diff --git a/src/components/ui/product-card.tsx b/src/components/ui/product-card.tsx
@@ -0,0 +1,34 @@
+import Link from "next/link";
+import Image from "next/image";
+export function ProductLink(props: {
+  category: string;
+  subcategory: string;
+  item: {
+    name: string;
+    description: string;
+  };
+}) {
+  const { category, subcategory, item } = props;
+  return (
+    <Link
+      className="group flex h-full flex-row border px-4 py-2 hover:bg-gray-100"
+      href={`/products/${category}/${subcategory}/${item.name}`}
+    >
+      <div className="py-2">
+        <Image
+          src="/placeholder.svg?height=48&width=48"
+          alt={item.name}
+          width={48}
+          height={48}
+          className="h-12 w-12 flex-shrink-0 object-cover"
+        />
+      </div>
+      <div className="flex h-24 flex-grow flex-col items-start py-2">
+        <div className="text-sm font-medium text-gray-700 group-hover:underline">
+          {item.name}
+        </div>
+        <p className="overflow-hidden text-xs">{item.description}</p>
+      </div>
+    </Link>
+  );
+}
diff --git a/src/db/utils.ts b/src/db/utils.ts
@@ -37,4 +37,54 @@ export function getAllCategories() {
 
 export function getAllCollections(){
     return artSupplies;
+}
+
+export function getProductDetails(input: {
+    category: string;
+    subcategory: string;
+    product: string;
+}){
+    const categoryData = artSupplies.find((c) =>
+        c.categories.find((cat) => cat.categoryName === input.category),
+      );
+      const cat = categoryData?.categories.find(
+        (cat) => cat.categoryName === input.category,
+      );
+      const screwTypes = cat?.categoryItems.find((collection) =>
+        collection.subcategories.find(
+          (sub) => sub.subcategoryName === input.subcategory,
+        ),
+      );
+      const sub = screwTypes?.subcategories.find(
+        (sub) => sub.subcategoryName === input.subcategory,
+      );
+      const product = sub?.products.find(
+        (prod) => prod.name === input.product,
+      );
+      return product;
+}
+
+export function getRelatedProducts(input: {
+    category: string;
+    subcategory: string;
+    product: string;
+}){
+    const categoryData = artSupplies.find((c) =>
+        c.categories.find((cat) => cat.categoryName === input.category),
+      );
+      const cat = categoryData?.categories.find(
+        (cat) => cat.categoryName === input.category,
+      );
+      const screwTypes = cat?.categoryItems.find((collection) =>
+        collection.subcategories.find(
+          (sub) => sub.subcategoryName === input.subcategory,
+        ),
+      );
+      const sub = screwTypes?.subcategories.find(
+        (sub) => sub.subcategoryName === input.subcategory,
+      );
+      const product = sub?.products.find(
+        (prod) => prod.name === input.product,
+      );
+      return sub?.products.filter((prod) => prod.name !== product?.name);
 }