From e50c1739006b889b069fa9c226dbcf2ecd0c8ddd Mon Sep 17 00:00:00 2001
From: Ahmed Almadhoob <me@amstalks.com>
Date: Mon, 23 Sep 2024 16:48:00 +0300
Subject: [PATCH 1/2] Improve the dynamic links of categories

---
 src/components/Category/Categories.component.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Category/Categories.component.tsx b/src/components/Category/Categories.component.tsx
index c085bef9f..292f0b6df 100644
--- a/src/components/Category/Categories.component.tsx
+++ b/src/components/Category/Categories.component.tsx
@@ -11,9 +11,7 @@ const Categories = ({ categories }: ICategoriesProps) => (
       {categories.map(({ id, name, slug }) => (
         <Link
           key={uuidv4()}
-          as={`/kategori/${slug}?id=${id}`}
-          href="/kategori/[id]"
-          passHref
+          href={`/kategori/${encodeURIComponent(slug)}?id=${encodeURIComponent(id)}`}
         >
           <div className="p-6 cursor-pointer">
             <div className="flex items-center justify-center w-full h-16 text-center border border-gray-300 rounded-lg shadow hover:shadow-outline">

From c7375f381bbf44eb68ab8387466d53548c8c79bb Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Mon, 23 Sep 2024 21:48:53 +0200
Subject: [PATCH 2/2] Update DisplayProducts.component.tsx

---
 src/components/Product/DisplayProducts.component.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Product/DisplayProducts.component.tsx b/src/components/Product/DisplayProducts.component.tsx
index 6857013eb..891f4ed2c 100644
--- a/src/components/Product/DisplayProducts.component.tsx
+++ b/src/components/Product/DisplayProducts.component.tsx
@@ -48,7 +48,10 @@ interface IDisplayProductsProps {
 
 const DisplayProducts = ({ products }: IDisplayProductsProps) => (
   <section className="container mx-auto bg-white">
-    <div id="product-container" className="flex flex-wrap items-center mb-[120px] md:mb-0">
+    <div
+      id="product-container"
+      className="flex flex-wrap items-center mb-[120px] md:mb-0"
+    >
       {products ? (
         products.map(
           ({
@@ -103,7 +106,6 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => (
                     )}
                   </span>
                 </Link>
-
                 <Link
                   href={`/produkt/${encodeURIComponent(
                     slug,
@@ -132,7 +134,9 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => (
                 )}
                 {/* Display regular price when not on sale */}
                 {!onSale && (
-                  <p className="pt-1 text-center text-gray-900 text-xl">{price}</p>
+                  <p className="pt-1 text-center text-gray-900 text-xl">
+                    {price}
+                  </p>
                 )}
               </div>
             );