fix: order layout

app/collection/[name]/page.tsx

@@ -1,16 +0,0 @@
-import { ThreeItemGridItem } from 'components/grid/three-items';
-import { Product } from 'lib/woocomerce/models/product';
-import { woocommerce } from 'lib/woocomerce/woocommerce';
-
-export default async function ProductPage(props: { params: Promise<{ name: string }> }) {
-  const params = await props.params;
-  const products: Product[] = await woocommerce.get('products', { category: params.name });
-
-  return (
-    <section className="mx-auto grid max-w-screen-2xl gap-4 px-4 pb-4 md:grid-cols-6 md:grid-rows-2 lg:max-h-[calc(100vh-200px)]">
-      {products.map((product, index) => (
-        <ThreeItemGridItem key={product.id} size={index === 0 ? 'full' : 'half'} item={product} />
-      ))}
-    </section>
-  );
-}

app/collection/[slug]/page.tsx

@@ -0,0 +1,25 @@
+import { ProductCard } from 'components/product/product-card';
+import { Product } from 'lib/woocomerce/models/product';
+import { woocommerce } from 'lib/woocomerce/woocommerce';
+
+export default async function ProductPage(props: { params: Promise<{ slug: string }> }) {
+  const slug = (await props.params).slug;
+  const category = (await woocommerce.get('products/categories', { slug }))?.[0];
+  const products: Product[] = await woocommerce.get('products', { category: category.id.toString() });
+
+  return (
+    <div>
+      <div className="mb-2 mt-6 flex items-center justify-between px-4">
+        <span className="text-2xl font-bold">{category.name}</span>
+      </div>
+      <div className="mb-6 px-4">
+        <span>{category.description}</span>
+      </div>
+      <section className="mx-auto grid max-w-screen-2xl flex-col gap-4 px-4 pb-4 md:grid-cols-8 md:grid-rows-2">
+        {products.map((product) => (
+          <ProductCard key={product.id} product={product} />
+        ))}
+      </section>
+    </div>
+  );
+}

app/page.tsx

@@ -32,9 +32,6 @@ async function ProductsByCategory() {
           <div className="mb-2 mt-6 flex items-center justify-between px-4">
             <span className="text-2xl font-bold">{category.name}</span>
           </div>
-          <div className="mb-6 px-4">
-            <span>{category.description}</span>
-          </div>
           <Suspense
             fallback={
               <div className="mx-auto grid max-w-screen-2xl gap-4 px-4 pb-4 md:grid-cols-6 md:grid-rows-2">

app/product/[name]/page.tsx

@@ -8,6 +8,7 @@ import { ProductDescription } from 'components/product/product-description';
 import { VariantSelector } from 'components/product/variant-selector';
 import Prose from 'components/prose';
 import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
+import { isStrinInteger } from 'lib/utils';
 import { Image } from 'lib/woocomerce/models/base';
 import { Product, ProductVariations } from 'lib/woocomerce/models/product';
 import { woocommerce } from 'lib/woocomerce/woocommerce';
@@ -18,9 +19,12 @@ export async function generateMetadata(props: {
   params: Promise<{ name: string }>;
 }): Promise<Metadata> {
   const params = await props.params;
-  const product: Product | undefined = (
-    await woocommerce.get('products', { slug: params.name })
-  )?.[0];
+  let product: Product | undefined = undefined;
+  if (isStrinInteger(params.name)) {
+    product = await woocommerce.get(`products/${params.name}`);
+  } else {
+    product = (await woocommerce.get('products', { slug: params.name }))?.[0];
+  }
 
   if (!product) return notFound();
 
@@ -79,9 +83,12 @@ async function RelatedProducts({ product }: { product: Product }) {
 
 export default async function ProductPage(props: { params: Promise<{ name: string }> }) {
   const params = await props.params;
-  const product: Product | undefined = (
-    await woocommerce.get('products', { slug: params.name })
-  )?.[0];
+  let product: Product | undefined = undefined;
+  if (isStrinInteger(params.name)) {
+    product = await woocommerce.get(`products/${params.name}`);
+  } else {
+    product = (await woocommerce.get('products', { slug: params.name }))?.[0];
+  }
   let variations: ProductVariations[] = [];
   if (product?.variations?.length) {
     variations = await woocommerce.get(`products/${product?.id}/variations`);
@@ -89,10 +96,6 @@ export default async function ProductPage(props: { params: Promise<{ name: strin
 
   if (!product) return notFound();
 
-  const relatedProducts = await Promise.all(
-    product.related_ids?.map(async (id) => woocommerce.get(`products/${id}`)) || []
-  );
-
   const productJsonLd = {
     '@context': 'https://schema.org',
     '@type': 'Product',

app/profile/@user/orders/page.tsx

@@ -13,28 +13,27 @@ export default async function OrdersPage() {
     <section className="mt-4 grid max-w-screen-2xl gap-4 px-4 pb-4">
       <h1 className="text-2xl font-bold">Orders</h1>
       {orders.map((order) => (
-        <Link href={`/profile/orders/${order.id}`} key={order.id} className="flex flex-col">
-          <div className="mt-4">
-            <label
-              htmlFor="name"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-            >
-              Name
-            </label>
-            <input
-              type="text"
-              id="name"
-              value={order.order_key}
-              className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
-              disabled
-            />
+        <div key={order.id} className="flex flex-col rounded border border-neutral-300 dark:border-neutral-700 p-4">
+          <div className="grid grid-cols-3 gap-6">
+            <div className="flex flex-col">
+              <span>ID ORDINE:</span>
+              <span>{order.id}</span>
+            </div>
+            <div className="flex flex-col">
+              <span>EFFETTUATO IL:</span>
+              <span>{new Date(order.date_created).toLocaleDateString()}</span>
+            </div>
+            <div className="flex flex-col">
+              <span>TOTALE:</span>
+              <span>{order.total} {order.currency}</span>
+            </div>
           </div>
           {order.line_items.map((item, i) => (
             <li
               key={i}
-              className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700"
+              className="flex w-full flex-col"
             >
-              <div className="relative flex w-full flex-row justify-between px-1 py-4">
+              <Link href={`/product/${item.product_id}`} className="flex w-full flex-row justify-between px-1 py-4">
                 <div className="flex flex-row">
                   <div className="relative h-16 w-16 overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
                     <Image
@@ -45,7 +44,7 @@ export default async function OrdersPage() {
                       src={item.image?.src || ''}
                     />
                   </div>
-                  <div className="flex flex-1 flex-col text-base">
+                  <div className="flex flex-1 flex-col ms-4 text-base hover:underline">
                     <span className="leading-tight">{item.name}</span>
                   </div>
                 </div>
@@ -56,25 +55,13 @@ export default async function OrdersPage() {
                     currencyCode={order.currency}
                   />
                 </div>
-              </div>
+              </Link>
             </li>
           ))}
-          <div className="mt-4">
-            <label
-              htmlFor="total"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-            >
-              Total
-            </label>
-            <input
-              type="text"
-              id="total"
-              value={order.total}
-              className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
-              disabled
-            />
+          <div className="flex flex-row-reverse mt-4">
+            <Link href={`/profile/orders/${order.id}`} className="hover:text-indigo-500">Vedi dettagli</Link>
           </div>
-        </Link>
+        </div>
       ))}
     </section>
   );

components/layout/footer.tsx

@@ -26,7 +26,7 @@ export default async function Footer() {
     },
     ...categories.map((category) => ({
       title: category.name,
-      path: path.join('/collection', category.id.toString())
+      path: path.join('/collection', category.slug.toString())
     }))
   ] as Menu[];
   const currentYear = new Date().getFullYear();

components/layout/navbar/index.tsx

@@ -25,7 +25,7 @@ export async function Navbar() {
     },
     ...categories.map((category) => ({
       title: category.name,
-      path: path.join('/collection', category.id.toString())
+      path: path.join('/collection', category.slug)
     }))
   ] as Menu[];
 

lib/utils.ts

@@ -16,3 +16,9 @@ export const getCountries = (): { name: string; icon: string }[] =>
     name: country,
     icon: flag_base64
   }));
+
+export const isStrinInteger = (value: string) => {
+  const parsed = parseInt(value, 10);
+  
+  return !isNaN(parsed) && parsed.toString() === value.trim();
+}