Add src/app/products/page.tsx

src/app/products/page.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import { useState } from "react";
+
+export default function ProductsPage() {
+  const [search, setSearch] = useState("");
+
+  const products = [
+    { id: "p1", brand: "Inovit", name: "Soybean Meal", price: "High Quality", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/wooden-spoon-full-raw-buckwheat-marble-surface_114579-25380.jpg" },
+    { id: "p2", brand: "Inovit", name: "Corn Gluten Meal", price: "High Quality", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/barley-grains-out-bowl-marble-surface_114579-47809.jpg" },
+    { id: "p3", brand: "Inovit", name: "Meat & Bone Meal", price: "High Quality", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/spices-market-morocco_23-2148129885.jpg" },
+    { id: "p4", brand: "Inovit", name: "Sugar Beet Pulp", price: "High Quality", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/fresh-harvested-red-radish-plastic-crate-supermarket_23-2148209755.jpg" },
+    { id: "p5", brand: "Inovit", name: "Wheat Bran", price: "High Quality", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/buckwheat-seeds-isolated-grey_114579-24770.jpg" },
+    { id: "p6", brand: "Inovit", name: "Fish Meal", price: "High Quality", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/common-food-allergens-people_23-2149870515.jpg" }
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="largeSmall"
+        background="noiseDiagonalGradient"
+        cardStyle="solid"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="solid"
+        headingFontWeight="bold"
+    >
+      <NavbarStyleCentered
+        navItems={[
+            { name: "Home", id: "/" },
+            { name: "Products", id: "/products" },
+        ]}
+        brandName="Inovit"
+      />
+      <div className="pt-32 pb-20">
+        <ProductCatalog 
+            layout="page"
+            products={products.filter(p => p.name.toLowerCase().includes(search.toLowerCase()))}
+            searchValue={search}
+            onSearchChange={setSearch}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}