10xdevian · June 14, 2024 17:12 · Jun 14, 2024 · Jun 14, 2024
diff --git a/Category.json → ...ngle products dynamic route Category.json b/Category.json → ...ngle products dynamic route Category.json
diff --git a/Category.json b/Category.json
@@ -0,0 +1,18 @@
+{
+  "categories": [
+    {
+      "id": 1,
+      "title": "Television",
+      "description": "A wide range of high-quality televisions.",
+      "image": "/json/categories/television.jpg",
+      "key": "CATEGORY_TELEVISION"
+    },
+    {
+      "id": 2,
+      "title": "Mobile",
+      "description": "Latest smartphones and accessories.",
+      "image": "/json/categories/mobiles.jpg",
+      "key": "CATEGORY_MOBILE"
+    },
+      ]
+}
diff --git a/app-api-categories-page.js b/app-api-categories-page.js
@@ -0,0 +1,9 @@
+import fs from "fs"
+import path from "path"
+
+export function getCategories() {
+    const filePath = path.join(process.cwd() , "categories.json");
+    const fileContent = fs.readFileSync(filePath , 'utf8');
+    const categories = JSON.parse(fileContent);
+    return categories;
+}
diff --git a/app-api-products-page.js b/app-api-products-page.js
@@ -0,0 +1,14 @@
+import fs from "fs";
+import path from "path";
+
+export function getProduct(id) {
+  const filePath = path.join(process.cwd(), "products.json");
+  const fileContent = fs.readFileSync(filePath, "utf8");
+  const products = JSON.parse(fileContent);
+
+  if (id) {
+    return products.find(product => product.id === parseInt(id));
+  }
+
+  return products;
+}
diff --git a/app-store-page.js b/app-store-page.js
@@ -0,0 +1,44 @@
+import React from "react";
+import { getCategories } from "../api/categories/route";
+import { getProduct } from "../api/products/route";
+import CategoryListing from "@/components/CategoryListing";
+import ProductListing from "@/components/ProductListing";
+
+const Page = async () => {
+  const categories = await getCategories();
+  // console.log(categories)
+
+  const products = await getProduct();
+  // console.log(products)
+
+  const allTelevision = products.filter((product) => {
+    return product.category_id == 1;
+  });
+
+  const allMobiles = products.filter((product) => {
+    return product.category_id == 2;
+  });
+
+  const allClothes = products.filter((product) => {
+    return product.category_id == 3;
+  });
+
+  const allFurniture = products.filter((product) => {
+    return product.category_id == 4;
+  });
+  return (
+
+      <CategoryListing data={categories} title="Category of Products " />
+
+      <ProductListing data={allTelevision} title="Televisions" />
+
+      <ProductListing data={allMobiles} title="Mobiles" />
+
+      <ProductListing data={allClothes} title="Clothes" />
+
+      <ProductListing data={allFurniture} title="Furniture" />
+      <ProductListing data={products} title="All Products" />
+
+  );
+};
+export default Page;
diff --git a/components-category b/components-category
@@ -0,0 +1,39 @@
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+import PropTypes from "prop-types";
+
+const CategoryListing = ({ data, title }) => {
+  // Check if data.categories exists and is an array
+  const categories = Array.isArray(data.categories) ? data.categories : [];
+  // console.log(categories)
+
+  return (
+
+        <h1 >{title}</h1>
+
+        {categories.map((category) => (
+          <Link
+            href="#"
+            className=" w-auto p-3 rounded-md shadow-lg "
+            key={category.id}
+          >
+            <div className=" w-[20rem] h-[20rem]  relative  ">
+              <Image
+                src={category.image}
+                fill
+                alt={`${category.title} image`}
+                className="p-4 rounded-md"
+              />
+            </div>
+            <h1 className="flex justify-center items-center  pt-4 pb-4 text-3xl  font-bold ">
+              {category.title}
+            </h1>
+          </Link>
+        ))}
+
+  );
+};
+
+CategoryListing.displayName = "CategoryListing";
+export default CategoryListing;
diff --git a/components-productDetailspage b/components-productDetailspage
@@ -0,0 +1,40 @@
+import Image from "next/image";
+import React from "react";
+
+const ProductDetailsPage = ({ data }) => {
+  if (!data) return null; // Handle case where data is not yet available
+
+  return (
+
+          <h1>{data.brand}</h1>
+        </div>
+        <div className="w-auto h-[40rem] flex justify-center items-center relative">
+          <Image
+            src={data.images[0]}
+            fill
+            alt={data.title}
+            className="p-10 rounded-sm"
+          />
+        </div>
+        <div className="flex flex-col gap-3">
+          <h1 className="flex justify-center items-center pt-4 pb-4 text-3xl font-bold">
+            {data.title}
+          </h1>
+          <p>{data.short_description}</p>
+          <h3 className="text-3xl">
+            Current Price <span>{data.currentPrice}</span>
+          </h3>
+          <h3 className="text-3xl">
+            Starting Price <span>{data.initialPrice}</span>
+          </h3>
+          <p>{data.ratings} Star</p>
+          <p>{data.detail_description}</p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+ProductDetailsPage.displayName = "ProductDetailsPage";
+
+export default ProductDetailsPage;
diff --git a/components-productsListing b/components-productsListing
@@ -0,0 +1,63 @@
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+
+const ProductListing = ({ data, title, id }) => {
+  if (!data) return null; // Handle case where data is not yet available
+
+  return (
+        <h1 className="text-3xl ml-4 text-white font-semibold">{title}</h1>
+          {data.map((product) => {
+            return (
+              <Link
+              href={`products/${product.id}`}
+                className=" w-[30rem] p-3 rounded-md shadow-lg "
+                key={product.id}
+              >
+
+                  <h1>{product.brand}</h1>
+
+                <div className=" w-auto  h-[40rem] flex justify-center items-center  relative  ">
+                  <Image
+                    src={product.images[0]}
+                    fill
+                    alt={product.title}
+                    className="p-10 rounded-sm"
+                  />
+                </div>
+                <div className="flex flex-col gap-3 ">
+                  <h1 className="flex justify-center items-center  pt-4 pb-4 text-3xl  font-bold ">
+                    {product.title}
+                  </h1>
+                  <p>{product.short_description}</p>
+
+                  <h3 className="text-3xl">
+                    Current Price <span>{product.currentPrice}</span>
+                  </h3>
+                  <h3 className="text-3xl">
+                    Starting Price <span>{product.initialPrice}</span>
+                  </h3>
+                  <p>{product.ratings} Star </p>
+                  <p>{product.detail_description}</p>
+                </div>
+              </Link>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+ProductListing.displayName = "ProductListing";
+
+export default ProductListing;
+
+
+
+
+
+
+
+
+
diff --git a/products-[id]-page.js b/products-[id]-page.js
@@ -0,0 +1,21 @@
+// app/products/[id]/page.js
+import { getProduct } from '@/app/api/products/route';
+import ProductDetailsPage from '@/components/ProductDetailsPage';
+import React from 'react';
+
+export async function generateStaticParams() {
+  const products = getProduct();
+  return products.map((product) => ({ id: product.id.toString() }));
+}
+
+const ProductPage = ({ params }) => {
+  const product = getProduct(params.id);
+
+  return (
+    <div>
+      <ProductDetailsPage data={product} />
+    </div>
+  );
+};
+
+export default ProductPage;
diff --git a/products.json b/products.json
@@ -0,0 +1,37 @@
+[
+  {
+    "id": 1,
+    "category_id": 1,
+    "title": "Samsung 55 QLED",
+    "slug": "samsung-55-qled",
+    "short_description": "Experience the vibrant colors and stunning clarity with Samsung's 55-inch QLED TV.",
+    "detail_description": "Samsung's 55-inch QLED TV offers an immersive viewing experience with Quantum Dot technology that delivers over a billion shades of color. The Ultra HD resolution ensures crystal-clear images, while the smart features provide easy access to your favorite streaming services.",
+    "images": [
+      "/json/product/samsungOled-1.jpg",
+      "/json/product/samsungOled-2.jpg"
+    ],
+    "isFeatured": true,
+    "isTrending": true,
+    "brand": "Samsung",
+    "keywords": ["Samsung", "QLED", "55-inch", "Smart TV", "4K"],
+    "initialPrice": 1200.0,
+    "currentPrice": 999.99,
+    "ratings": 4.8
+  },
+  {
+    "id": 2,
+    "category_id": 1,
+    "title": "LG 65 OLED",
+    "slug": "lg-65-oled",
+    "short_description": "Dive into the depth of black and vibrant colors with LG's 65-inch OLED TV.",
+    "detail_description": "LG's 65-inch OLED TV features self-lighting pixels that can turn on and off individually to deliver perfect black, over a billion rich colors, and infinite contrast. With AI ThinQ, your TV becomes a central hub of the smart home, and the webOS platform makes streaming content easier than ever.",
+    "images": ["/json/product/Lg-1.jpg", "/json/product/Lg-2.jpg"],
+    "isFeatured": true,
+    "isTrending": false,
+    "brand": "LG",
+    "keywords": ["LG", "OLED", "65-inch", "Smart TV", "4K"],
+    "initialPrice": 2500.0,
+    "currentPrice": 2199.99,
+    "ratings": 4.9
+  },
+  ]