< Belindas-closet-nextjs> _ <8 > _ < 444> _ < archive products - fixed>

app/archived-products/api/route.ts

@@ -0,0 +1,13 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET(req: NextRequest) {
+  const archivedProducts = [
+    { id: 1, name: 'Suits', shortDescription: 'Suits', image: '/images/Product1.jpg' },
+    { id: 2, name: 'Jeans', shortDescription: 'Blue Jeans', image: '/images/jeans.jpg' },
+    { id: 3, name: 'Dress', shortDescription: 'Red T-shirt', image: '/images/dress.jpg' },
+    // Add more products as needed
+  ];
+  return NextResponse.json(archivedProducts);
+}
+
+

app/archived-products/archived-products.css

@@ -0,0 +1,21 @@
+.archived-products-page {
+    padding: 20px;
+  }
+
+  .product-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 20px;
+  }
+
+  .product-tile {
+    border: 1px solid #ddd;
+    padding: 10px;
+    text-align: center;
+  }
+
+  .product-tile img {
+    max-width: 100%;
+    height: auto;
+  }
+

app/archived-products/page.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import './archived-products.css';
+import React from 'react';
+
+interface Product {
+  id: number;
+  name: string;
+  shortDescription: string;
+  image: string;
+}
+
+const ArchivedProductsPage: React.FC = () => {
+  const [products, setProducts] = useState<Product[]>([]);
+
+  useEffect(() => {
+    fetch('/archived-products/api')
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return response.json();
+      })
+      .then(data => setProducts(data))
+      .catch(error => console.error('Error fetching archived products:', error));
+  }, []);
+
+  return (
+    <div className="archived-products-page">
+      <h1>Archived Products</h1>
+      <div className="product-grid">
+        {products.map(product => (
+          <div key={product.id} className="product-tile">
+            <img src={product.image} alt={product.name} />
+            <h2>{product.name}</h2>
+            <p>{product.shortDescription}</p>
+          </div>
+        ))}
+      </div>
+      <style>{`
+        .archived-products-page {
+          padding: 20px;
+        }
+        .product-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          gap: 20px;
+        }
+        .product-tile {
+          border: 1px solid #ddd;
+          padding: 10px;
+          text-align: center;
+        }
+        .product-tile img {
+          max-width: 100%;
+          height: auto;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default ArchivedProductsPage;