From 08920eae30784e6805960540593a190ad096fd99 Mon Sep 17 00:00:00 2001
From: Bran18 <andreyfdez18@gmail.com>
Date: Thu, 21 Nov 2024 19:57:26 -0600
Subject: [PATCH 1/6] feat: back to home btn + route guard

---
 frontend/app/marketplace/page.tsx | 53 +++++++++++++++++++++++--------
 1 file changed, 39 insertions(+), 14 deletions(-)

diff --git a/frontend/app/marketplace/page.tsx b/frontend/app/marketplace/page.tsx
index 178d7d5..7a57c54 100644
--- a/frontend/app/marketplace/page.tsx
+++ b/frontend/app/marketplace/page.tsx
@@ -1,12 +1,13 @@
 'use client';
-import { useState, Dispatch, SetStateAction } from 'react';
+import { useState, type Dispatch, type SetStateAction } from 'react';
 import { Slider } from "@/app/components/ui/slider";
 import { Checkbox } from "@/app/components/ui/checkbox";
 import { Button } from "@/app/components/ui/button";
 import { Input } from "@/app/components/ui/input";
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/app/components/ui/card";
 import { Sidebar, SidebarContent, SidebarHeader, SidebarProvider, SidebarTrigger } from "@/app/components/ui/sidebar";
-import { Search, Menu as HamIcon } from "lucide-react";
+import { Search, Menu as HamIcon, Home } from "lucide-react";
+import { usePathname, useRouter } from 'next/navigation';
 
 interface Product {
   id: number;
@@ -77,7 +78,15 @@ export default function Marketplace() {
   );
 }
 
-function SidebarComponent({ priceRange, setPriceRange, selectedCategories, handleCategoryChange }: SidebarComponentProps) {
+function SidebarComponent({
+  priceRange,
+  setPriceRange,
+  selectedCategories,
+  handleCategoryChange,
+}: SidebarComponentProps) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const showHomeButton = pathname?.includes("/marketplace");
   return (
     <Sidebar>
       <SidebarHeader className="p-6 border-b">
@@ -85,6 +94,18 @@ function SidebarComponent({ priceRange, setPriceRange, selectedCategories, handl
       </SidebarHeader>
       <SidebarContent className="p-6">
         <div className="space-y-8">
+          {showHomeButton && (
+            <div className="mb-6">
+              <Button
+                variant="outline"
+                className="w-full flex items-center justify-center gap-2"
+                onClick={() => router.push("/")}
+              >
+                <Home className="h-4 w-4" />
+                Home
+              </Button>
+            </div>
+          )}
           <div>
             <h3 className="mb-2 text-lg font-medium">Price range</h3>
             <Slider
@@ -92,7 +113,7 @@ function SidebarComponent({ priceRange, setPriceRange, selectedCategories, handl
               max={1500}
               step={10}
               value={priceRange}
-              onValueChange={setPriceRange}
+              onVolumeChange={setPriceRange}
               className="mb-3"
             />
             <div className="flex justify-between text-lg">
@@ -103,16 +124,20 @@ function SidebarComponent({ priceRange, setPriceRange, selectedCategories, handl
           <div>
             <h3 className="mb-2 text-lg font-medium">Categories</h3>
             <div className="space-y-3">
-              {["Electronics", "Furniture", "Appliances", "Sports"].map((category) => (
-                <div key={category} className="flex items-center">
-                  <Checkbox
-                    id={category}
-                    checked={selectedCategories.includes(category)}
-                    onCheckedChange={() => handleCategoryChange(category)}
-                  />
-                  <label htmlFor={category} className="ml-3 text-lg">{category}</label>
-                </div>
-              ))}
+              {["Electronics", "Furniture", "Appliances", "Sports"].map(
+                (category) => (
+                  <div key={category} className="flex items-center">
+                    <Checkbox
+                      id={category}
+                      checked={selectedCategories.includes(category)}
+                      onCheckedChange={() => handleCategoryChange(category)}
+                    />
+                    <label htmlFor={category} className="ml-3 text-lg">
+                      {category}
+                    </label>
+                  </div>
+                )
+              )}
             </div>
           </div>
         </div>

From 767c9cffa0e0d5a4fc222e9519f3dcc016fe8ad9 Mon Sep 17 00:00:00 2001
From: Bran18 <andreyfdez18@gmail.com>
Date: Thu, 21 Nov 2024 20:16:54 -0600
Subject: [PATCH 2/6] chore: typo + dev notes

---
 frontend/app/marketplace/page.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/app/marketplace/page.tsx b/frontend/app/marketplace/page.tsx
index 7a57c54..8d9f154 100644
--- a/frontend/app/marketplace/page.tsx
+++ b/frontend/app/marketplace/page.tsx
@@ -86,6 +86,7 @@ function SidebarComponent({
 }: SidebarComponentProps) {
   const pathname = usePathname();
   const router = useRouter();
+  // * Shows home button only on marketplace path but can be extended to other pages if needed
   const showHomeButton = pathname?.includes("/marketplace");
   return (
     <Sidebar>
@@ -113,7 +114,7 @@ function SidebarComponent({
               max={1500}
               step={10}
               value={priceRange}
-              onVolumeChange={setPriceRange}
+              onValueChange={setPriceRange}
               className="mb-3"
             />
             <div className="flex justify-between text-lg">

From 667c5a8e435855f6158ec0260ec0585ab6b11d35 Mon Sep 17 00:00:00 2001
From: Bran18 <andreyfdez18@gmail.com>
Date: Fri, 22 Nov 2024 08:28:28 -0600
Subject: [PATCH 3/6] feat: reposition home navigation btn

---
 frontend/app/marketplace/page.tsx | 47 ++++++++++++++++---------------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/frontend/app/marketplace/page.tsx b/frontend/app/marketplace/page.tsx
index 8d9f154..4ab8290 100644
--- a/frontend/app/marketplace/page.tsx
+++ b/frontend/app/marketplace/page.tsx
@@ -84,10 +84,6 @@ function SidebarComponent({
   selectedCategories,
   handleCategoryChange,
 }: SidebarComponentProps) {
-  const pathname = usePathname();
-  const router = useRouter();
-  // * Shows home button only on marketplace path but can be extended to other pages if needed
-  const showHomeButton = pathname?.includes("/marketplace");
   return (
     <Sidebar>
       <SidebarHeader className="p-6 border-b">
@@ -95,18 +91,6 @@ function SidebarComponent({
       </SidebarHeader>
       <SidebarContent className="p-6">
         <div className="space-y-8">
-          {showHomeButton && (
-            <div className="mb-6">
-              <Button
-                variant="outline"
-                className="w-full flex items-center justify-center gap-2"
-                onClick={() => router.push("/")}
-              >
-                <Home className="h-4 w-4" />
-                Home
-              </Button>
-            </div>
-          )}
           <div>
             <h3 className="mb-2 text-lg font-medium">Price range</h3>
             <Slider
@@ -147,15 +131,33 @@ function SidebarComponent({
   );
 }
 
+
 function HeaderComponent({ searchTerm, setSearchTerm }: HeaderComponentProps) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const showHomeButton = pathname?.includes("/marketplace");
+
   return (
     <header className="flex items-center justify-between p-6 border-b">
-      <SidebarTrigger>
-        <Button variant="outline" size="icon">
-          <HamIcon className="h-6 w-6" />
-          <span className="sr-only">Toggle Sidebar</span>
-        </Button>
-      </SidebarTrigger>
+      <div className="flex items-center gap-4">
+        <SidebarTrigger>
+          <Button variant="outline" size="icon">
+            <HamIcon className="h-6 w-6" />
+            <span className="sr-only">Toggle Sidebar</span>
+          </Button>
+        </SidebarTrigger>
+        {showHomeButton && (
+          <Button
+            variant="outline"
+            size="sm"
+            className="flex items-center gap-2"
+            onClick={() => router.push("/")}
+          >
+            <Home className="h-6 w-6" />
+            Home
+          </Button>
+        )}
+      </div>
       <div className="flex items-center text-2xl space-x-3">
         <Input
           type="search"
@@ -173,6 +175,7 @@ function HeaderComponent({ searchTerm, setSearchTerm }: HeaderComponentProps) {
   );
 }
 
+
 function ProductList({ products }: ProductListProps) {
   return (
     <main className="p-8">

From 1c5bec7ae3f2a82197847b5d6a87e9bf577e99a6 Mon Sep 17 00:00:00 2001
From: Bran18 <andreyfdez18@gmail.com>
Date: Fri, 22 Nov 2024 08:39:25 -0600
Subject: [PATCH 4/6] chore: code formarting + type import

---
 frontend/app/marketplace/page.tsx | 421 +++++++++++++++---------------
 1 file changed, 215 insertions(+), 206 deletions(-)

diff --git a/frontend/app/marketplace/page.tsx b/frontend/app/marketplace/page.tsx
index 75ef981..e06e9d3 100644
--- a/frontend/app/marketplace/page.tsx
+++ b/frontend/app/marketplace/page.tsx
@@ -2,218 +2,228 @@
 
 import { Button } from "@/app/components/ui/button";
 import {
-	Card,
-	CardContent,
-	CardFooter,
-	CardHeader,
-	CardTitle,
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
 } from "@/app/components/ui/card";
 import { Checkbox } from "@/app/components/ui/checkbox";
 import { Input } from "@/app/components/ui/input";
 import {
-	Sidebar,
-	SidebarContent,
-	SidebarHeader,
-	SidebarProvider,
-	SidebarTrigger,
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  SidebarProvider,
+  SidebarTrigger,
 } from "@/app/components/ui/sidebar";
 import { Slider } from "@/app/components/ui/slider";
 import { Menu as HamIcon, Search, ShoppingCart, Home } from "lucide-react";
-import { Dispatch, SetStateAction, useState } from "react";
+import { type Dispatch, type SetStateAction, useState } from "react";
 import ImageCarousel from "../components/ui/image-carrousel";
-import { usePathname, useRouter } from 'next/navigation';
+import { usePathname, useRouter } from "next/navigation";
 
 interface Product {
-	id: number;
-	images: { src: string; alt: string }[];
-	name: string;
-	price: number;
-	category: string;
+  id: number;
+  images: { src: string; alt: string }[];
+  name: string;
+  price: number;
+  category: string;
 }
 
 interface SidebarComponentProps {
-	priceRange: [number, number];
-	setPriceRange: Dispatch<SetStateAction<[number, number]>>;
-	selectedCategories: string[];
-	handleCategoryChange: (category: string) => void;
+  priceRange: [number, number];
+  setPriceRange: Dispatch<SetStateAction<[number, number]>>;
+  selectedCategories: string[];
+  handleCategoryChange: (category: string) => void;
 }
 
 interface HeaderComponentProps {
-	searchTerm: string;
-	setSearchTerm: Dispatch<SetStateAction<string>>;
+  searchTerm: string;
+  setSearchTerm: Dispatch<SetStateAction<string>>;
 }
 
 interface ProductListProps {
-	products: Product[];
+  products: Product[];
 }
 
 const products: Product[] = [
-	{
-		id: 1,
-		name: "MacBook Pro 14",
-		price: 1299,
-		category: "Electronics",
-		images: [
-			{ src: "/images/macbook-pro-14.webp", alt: "MacBook Pro 14" },
-			{ src: "/images/macbook-pro-14.webp", alt: "MacBook Pro 14" },
-			{ src: "/images/macbook-pro-14.webp", alt: "MacBook Pro 14" },
-		],
-	},
-	{
-		id: 2,
-		name: "Samsung Galaxy S24 FE",
-		price: 699,
-		category: "Electronics",
-		images: [
-			{ src: "/images/samsung-galaxy-s24-fe.webp", alt: "Samsung Galaxy S24 FE" },
-			{ src: "/images/samsung-galaxy-s24-fe.webp", alt: "Samsung Galaxy S24 FE" },
-			{ src: "/images/samsung-galaxy-s24-fe.webp", alt: "Samsung Galaxy S24 FE" },
-		],
-	},
-	{
-		id: 3,
-		name: "Ergonomic Chair",
-		price: 299,
-		category: "Furniture",
-		images: [
-			{ src: "/images/ergonomic-chair.jpg", alt: "Ergonomic Chair" },
-			{ src: "/images/ergonomic-chair.jpg", alt: "Ergonomic Chair" },
-			{ src: "/images/ergonomic-chair.jpg", alt: "Ergonomic Chair" },
-		],
-	},
-	{
-		id: 4,
-		name: "Coffee Maker",
-		price: 89,
-		category: "Appliances",
-		images: [
-			{ src: "/images/coffee-maker.webp", alt: "Coffee Maker" },
-			{ src: "/images/coffee-maker.webp", alt: "Coffee Maker" },
-			{ src: "/images/coffee-maker.webp", alt: "Coffee Maker" },
-		],
-	},
-	{
-		id: 5,
-		name: "Running Shoes",
-		price: 129,
-		category: "Sports",
-		images: [
-			{ src: "/images/running-shoes.jpg", alt: "Running Shoes" },
-			{ src: "/images/running-shoes.jpg", alt: "Running Shoes" },
-			{ src: "/images/running-shoes.jpg", alt: "Running Shoes" },
-		],
-	},
-	{
-		id: 6,
-		name: "Wireless Earbuds",
-		price: 159,
-		category: "Electronics",
-		images: [
-			{ src: "/images/wireless-earbuds.jpg", alt: "Wireless Earbuds" },
-			{ src: "/images/wireless-earbuds.jpg", alt: "Wireless Earbuds" },
-			{ src: "/images/wireless-earbuds.jpg", alt: "Wireless Earbuds" },
-		],
-	},
+  {
+    id: 1,
+    name: "MacBook Pro 14",
+    price: 1299,
+    category: "Electronics",
+    images: [
+      { src: "/images/macbook-pro-14.webp", alt: "MacBook Pro 14" },
+      { src: "/images/macbook-pro-14.webp", alt: "MacBook Pro 14" },
+      { src: "/images/macbook-pro-14.webp", alt: "MacBook Pro 14" },
+    ],
+  },
+  {
+    id: 2,
+    name: "Samsung Galaxy S24 FE",
+    price: 699,
+    category: "Electronics",
+    images: [
+      {
+        src: "/images/samsung-galaxy-s24-fe.webp",
+        alt: "Samsung Galaxy S24 FE",
+      },
+      {
+        src: "/images/samsung-galaxy-s24-fe.webp",
+        alt: "Samsung Galaxy S24 FE",
+      },
+      {
+        src: "/images/samsung-galaxy-s24-fe.webp",
+        alt: "Samsung Galaxy S24 FE",
+      },
+    ],
+  },
+  {
+    id: 3,
+    name: "Ergonomic Chair",
+    price: 299,
+    category: "Furniture",
+    images: [
+      { src: "/images/ergonomic-chair.jpg", alt: "Ergonomic Chair" },
+      { src: "/images/ergonomic-chair.jpg", alt: "Ergonomic Chair" },
+      { src: "/images/ergonomic-chair.jpg", alt: "Ergonomic Chair" },
+    ],
+  },
+  {
+    id: 4,
+    name: "Coffee Maker",
+    price: 89,
+    category: "Appliances",
+    images: [
+      { src: "/images/coffee-maker.webp", alt: "Coffee Maker" },
+      { src: "/images/coffee-maker.webp", alt: "Coffee Maker" },
+      { src: "/images/coffee-maker.webp", alt: "Coffee Maker" },
+    ],
+  },
+  {
+    id: 5,
+    name: "Running Shoes",
+    price: 129,
+    category: "Sports",
+    images: [
+      { src: "/images/running-shoes.jpg", alt: "Running Shoes" },
+      { src: "/images/running-shoes.jpg", alt: "Running Shoes" },
+      { src: "/images/running-shoes.jpg", alt: "Running Shoes" },
+    ],
+  },
+  {
+    id: 6,
+    name: "Wireless Earbuds",
+    price: 159,
+    category: "Electronics",
+    images: [
+      { src: "/images/wireless-earbuds.jpg", alt: "Wireless Earbuds" },
+      { src: "/images/wireless-earbuds.jpg", alt: "Wireless Earbuds" },
+      { src: "/images/wireless-earbuds.jpg", alt: "Wireless Earbuds" },
+    ],
+  },
 ];
 
 export default function Marketplace() {
-	const [priceRange, setPriceRange] = useState<[number, number]>([0, 1500]);
-	const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
-	const [searchTerm, setSearchTerm] = useState<string>("");
+  const [priceRange, setPriceRange] = useState<[number, number]>([0, 1500]);
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+  const [searchTerm, setSearchTerm] = useState<string>("");
 
-	const handleCategoryChange = (category: string) => {
-		setSelectedCategories((prev) =>
-			prev.includes(category)
-				? prev.filter((c) => c !== category)
-				: [...prev, category],
-		);
-	};
+  const handleCategoryChange = (category: string) => {
+    setSelectedCategories((prev) =>
+      prev.includes(category)
+        ? prev.filter((c) => c !== category)
+        : [...prev, category]
+    );
+  };
 
-	const filteredProducts = products.filter(
-		(product) =>
-			(searchTerm === "" ||
-				product.name.toLowerCase().includes(searchTerm.toLowerCase())) &&
-			(selectedCategories.length === 0 ||
-				selectedCategories.includes(product.category)) &&
-			product.price >= priceRange[0] &&
-			product.price <= priceRange[1],
-	);
+  const filteredProducts = products.filter(
+    (product) =>
+      (searchTerm === "" ||
+        product.name.toLowerCase().includes(searchTerm.toLowerCase())) &&
+      (selectedCategories.length === 0 ||
+        selectedCategories.includes(product.category)) &&
+      product.price >= priceRange[0] &&
+      product.price <= priceRange[1]
+  );
 
-	return (
-		<SidebarProvider>
-			<div className="flex h-screen overflow-hidden">
-				<SidebarComponent
-					priceRange={priceRange}
-					setPriceRange={setPriceRange}
-					selectedCategories={selectedCategories}
-					handleCategoryChange={handleCategoryChange}
-				/>
-				<div className="flex-1 overflow-auto">
-					<HeaderComponent
-						searchTerm={searchTerm}
-						setSearchTerm={setSearchTerm}
-					/>
-					<ProductList products={filteredProducts} />
-				</div>
-			</div>
-		</SidebarProvider>
-	);
+  return (
+    <SidebarProvider>
+      <div className="flex h-screen overflow-hidden">
+        <SidebarComponent
+          priceRange={priceRange}
+          setPriceRange={setPriceRange}
+          selectedCategories={selectedCategories}
+          handleCategoryChange={handleCategoryChange}
+        />
+        <div className="flex-1 overflow-auto">
+          <HeaderComponent
+            searchTerm={searchTerm}
+            setSearchTerm={setSearchTerm}
+          />
+          <ProductList products={filteredProducts} />
+        </div>
+      </div>
+    </SidebarProvider>
+  );
 }
 
 function SidebarComponent({
-	priceRange,
-	setPriceRange,
-	selectedCategories,
-	handleCategoryChange,
+  priceRange,
+  setPriceRange,
+  selectedCategories,
+  handleCategoryChange,
 }: SidebarComponentProps) {
-	return (
-		<Sidebar>
-			<SidebarHeader className="p-6 border-b">
-				<h2 className="text-xl font-semibold">Filters</h2>
-			</SidebarHeader>
-			<SidebarContent className="p-6">
-				<div className="space-y-8">
-					<div>
-						<h3 className="mb-2 text-lg font-medium">Price range</h3>
-						<Slider
-							min={0}
-							max={1500}
-							step={10}
-							value={priceRange}
-							onValueChange={(value) => setPriceRange(value as [number, number])}
-							className="mb-3"
-						/>
-						<div className="flex justify-between text-lg">
-							<span>${priceRange[0]}</span>
-							<span>${priceRange[1]}</span>
-						</div>
-					</div>
-					<div>
-						<h3 className="mb-2 text-lg font-medium">Categories</h3>
-						<div className="space-y-3">
-							{["Electronics", "Furniture", "Appliances", "Sports"].map(
-								(category) => (
-									<div key={category} className="flex items-center">
-										<Checkbox
-											id={category}
-											checked={selectedCategories.includes(category)}
-											onCheckedChange={() => handleCategoryChange(category)}
-										/>
-										<label htmlFor={category} className="ml-3 text-lg">
-											{category}
-										</label>
-									</div>
-								),
-							)}
-						</div>
-					</div>
-				</div>
-			</SidebarContent>
-		</Sidebar>
-	);
+  return (
+    <Sidebar>
+      <SidebarHeader className="p-6 border-b">
+        <h2 className="text-xl font-semibold">Filters</h2>
+      </SidebarHeader>
+      <SidebarContent className="p-6">
+        <div className="space-y-8">
+          <div>
+            <h3 className="mb-2 text-lg font-medium">Price range</h3>
+            <Slider
+              min={0}
+              max={1500}
+              step={10}
+              value={priceRange}
+              onValueChange={(value) =>
+                setPriceRange(value as [number, number])
+              }
+              className="mb-3"
+            />
+            <div className="flex justify-between text-lg">
+              <span>${priceRange[0]}</span>
+              <span>${priceRange[1]}</span>
+            </div>
+          </div>
+          <div>
+            <h3 className="mb-2 text-lg font-medium">Categories</h3>
+            <div className="space-y-3">
+              {["Electronics", "Furniture", "Appliances", "Sports"].map(
+                (category) => (
+                  <div key={category} className="flex items-center">
+                    <Checkbox
+                      id={category}
+                      checked={selectedCategories.includes(category)}
+                      onCheckedChange={() => handleCategoryChange(category)}
+                    />
+                    <label htmlFor={category} className="ml-3 text-lg">
+                      {category}
+                    </label>
+                  </div>
+                )
+              )}
+            </div>
+          </div>
+        </div>
+      </SidebarContent>
+    </Sidebar>
+  );
 }
 
-
 function HeaderComponent({ searchTerm, setSearchTerm }: HeaderComponentProps) {
   const pathname = usePathname();
   const router = useRouter();
@@ -257,33 +267,32 @@ function HeaderComponent({ searchTerm, setSearchTerm }: HeaderComponentProps) {
   );
 }
 
-
 function ProductList({ products }: ProductListProps) {
-	return (
-		<main className="p-8">
-			<h1 className="text-3xl font-bold mb-8">Products</h1>
-			<div className="flex flex-wrap justify-center gap-8">
-				{products?.map((product) => (
-					<Card key={product.id}>
-						<CardHeader>
-							<ImageCarousel images={product.images} />
-							<CardTitle className="text-xl font-medium">
-								{product.name}
-							</CardTitle>
-						</CardHeader>
-						<CardContent>
-							<p className="text-lg text-gray-500">{product.category}</p>
-						</CardContent>
-						<CardFooter className="flex justify-between gap-2 items-center">
-							<span className="text-3xl font-bold">${product.price}</span>
-							<Button>
-								<ShoppingCart className="mr-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
-								Add to Cart
-							</Button>
-						</CardFooter>
-					</Card>
-				))}
-			</div>
-		</main>
-	);
+  return (
+    <main className="p-8">
+      <h1 className="text-3xl font-bold mb-8">Products</h1>
+      <div className="flex flex-wrap justify-center gap-8">
+        {products?.map((product) => (
+          <Card key={product.id}>
+            <CardHeader>
+              <ImageCarousel images={product.images} />
+              <CardTitle className="text-xl font-medium">
+                {product.name}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-lg text-gray-500">{product.category}</p>
+            </CardContent>
+            <CardFooter className="flex justify-between gap-2 items-center">
+              <span className="text-3xl font-bold">${product.price}</span>
+              <Button>
+                <ShoppingCart className="mr-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
+                Add to Cart
+              </Button>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </main>
+  );
 }

From 26bf8bd3f5a18435c1da0dbbe6e42dcd2d282b2a Mon Sep 17 00:00:00 2001
From: Bran18 <andreyfdez18@gmail.com>
Date: Sat, 23 Nov 2024 09:22:27 -0600
Subject: [PATCH 5/6] fix: code formating

---
 frontend/app/marketplace/page.tsx | 317 +++++++++++++++---------------
 1 file changed, 161 insertions(+), 156 deletions(-)

diff --git a/frontend/app/marketplace/page.tsx b/frontend/app/marketplace/page.tsx
index d59921b..5bbc5c3 100644
--- a/frontend/app/marketplace/page.tsx
+++ b/frontend/app/marketplace/page.tsx
@@ -18,10 +18,15 @@ import {
   SidebarTrigger,
 } from "@/app/components/ui/sidebar";
 import { Slider } from "@/app/components/ui/slider";
-import { Dispatch, SetStateAction, useState } from "react";
 import ImageCarousel from "../components/ui/image-carrousel";
 import { usePathname, useRouter } from "next/navigation";
-import { Menu as HamIcon, MessageSquareMore, Search, ShoppingCart, Home } from "lucide-react";
+import {
+  Menu as HamIcon,
+  MessageSquareMore,
+  Search,
+  ShoppingCart,
+  Home,
+} from "lucide-react";
 import { type Dispatch, type SetStateAction, useState } from "react";
 
 interface Product {
@@ -49,81 +54,81 @@ interface ProductListProps {
 }
 
 const products: Product[] = [
-	{
-		id: 1,
-		name: "MacBook Pro 14",
-		price: 1299,
-		category: "Electronics",
-		images: [
-			{ src: "/images/macbook-pro-14.webp", alt: "MacBook Pro 14" },
-			{ src: "/images/macbook-pro-14.webp", alt: "MacBook Pro 14" },
-			{ src: "/images/macbook-pro-14.webp", alt: "MacBook Pro 14" },
-		],
-	},
-	{
-		id: 2,
-		name: "Samsung Galaxy S24 FE",
-		price: 699,
-		category: "Electronics",
-		images: [
-			{
-				src: "/images/samsung-galaxy-s24-fe.webp",
-				alt: "Samsung Galaxy S24 FE",
-			},
-			{
-				src: "/images/samsung-galaxy-s24-fe.webp",
-				alt: "Samsung Galaxy S24 FE",
-			},
-			{
-				src: "/images/samsung-galaxy-s24-fe.webp",
-				alt: "Samsung Galaxy S24 FE",
-			},
-		],
-	},
-	{
-		id: 3,
-		name: "Ergonomic Chair",
-		price: 299,
-		category: "Furniture",
-		images: [
-			{ src: "/images/ergonomic-chair.jpg", alt: "Ergonomic Chair" },
-			{ src: "/images/ergonomic-chair.jpg", alt: "Ergonomic Chair" },
-			{ src: "/images/ergonomic-chair.jpg", alt: "Ergonomic Chair" },
-		],
-	},
-	{
-		id: 4,
-		name: "Coffee Maker",
-		price: 89,
-		category: "Appliances",
-		images: [
-			{ src: "/images/coffee-maker.webp", alt: "Coffee Maker" },
-			{ src: "/images/coffee-maker.webp", alt: "Coffee Maker" },
-			{ src: "/images/coffee-maker.webp", alt: "Coffee Maker" },
-		],
-	},
-	{
-		id: 5,
-		name: "Running Shoes",
-		price: 129,
-		category: "Sports",
-		images: [
-			{ src: "/images/running-shoes.jpg", alt: "Running Shoes" },
-			{ src: "/images/running-shoes.jpg", alt: "Running Shoes" },
-			{ src: "/images/running-shoes.jpg", alt: "Running Shoes" },
-		],
-	},
-	{
-		id: 6,
-		name: "Wireless Earbuds",
-		price: 159,
-		category: "Electronics",
-		images: [
-			{ src: "/images/wireless-earbuds.jpg", alt: "Wireless Earbuds" },
-			{ src: "/images/wireless-earbuds.jpg", alt: "Wireless Earbuds" },
-			{ src: "/images/wireless-earbuds.jpg", alt: "Wireless Earbuds" },
-		],
-	},
+  {
+    id: 1,
+    name: "MacBook Pro 14",
+    price: 1299,
+    category: "Electronics",
+    images: [
+      { src: "/images/macbook-pro-14.webp", alt: "MacBook Pro 14" },
+      { src: "/images/macbook-pro-14.webp", alt: "MacBook Pro 14" },
+      { src: "/images/macbook-pro-14.webp", alt: "MacBook Pro 14" },
+    ],
+  },
+  {
+    id: 2,
+    name: "Samsung Galaxy S24 FE",
+    price: 699,
+    category: "Electronics",
+    images: [
+      {
+        src: "/images/samsung-galaxy-s24-fe.webp",
+        alt: "Samsung Galaxy S24 FE",
+      },
+      {
+        src: "/images/samsung-galaxy-s24-fe.webp",
+        alt: "Samsung Galaxy S24 FE",
+      },
+      {
+        src: "/images/samsung-galaxy-s24-fe.webp",
+        alt: "Samsung Galaxy S24 FE",
+      },
+    ],
+  },
+  {
+    id: 3,
+    name: "Ergonomic Chair",
+    price: 299,
+    category: "Furniture",
+    images: [
+      { src: "/images/ergonomic-chair.jpg", alt: "Ergonomic Chair" },
+      { src: "/images/ergonomic-chair.jpg", alt: "Ergonomic Chair" },
+      { src: "/images/ergonomic-chair.jpg", alt: "Ergonomic Chair" },
+    ],
+  },
+  {
+    id: 4,
+    name: "Coffee Maker",
+    price: 89,
+    category: "Appliances",
+    images: [
+      { src: "/images/coffee-maker.webp", alt: "Coffee Maker" },
+      { src: "/images/coffee-maker.webp", alt: "Coffee Maker" },
+      { src: "/images/coffee-maker.webp", alt: "Coffee Maker" },
+    ],
+  },
+  {
+    id: 5,
+    name: "Running Shoes",
+    price: 129,
+    category: "Sports",
+    images: [
+      { src: "/images/running-shoes.jpg", alt: "Running Shoes" },
+      { src: "/images/running-shoes.jpg", alt: "Running Shoes" },
+      { src: "/images/running-shoes.jpg", alt: "Running Shoes" },
+    ],
+  },
+  {
+    id: 6,
+    name: "Wireless Earbuds",
+    price: 159,
+    category: "Electronics",
+    images: [
+      { src: "/images/wireless-earbuds.jpg", alt: "Wireless Earbuds" },
+      { src: "/images/wireless-earbuds.jpg", alt: "Wireless Earbuds" },
+      { src: "/images/wireless-earbuds.jpg", alt: "Wireless Earbuds" },
+    ],
+  },
 ];
 
 export default function Marketplace() {
@@ -176,53 +181,53 @@ function SidebarComponent({
   selectedCategories,
   handleCategoryChange,
 }: SidebarComponentProps) {
-	return (
-		<Sidebar>
-			<SidebarHeader className="p-6 border-b">
-				<h2 className="text-xl font-semibold">Filters</h2>
-			</SidebarHeader>
-			<SidebarContent className="p-6">
-				<div className="space-y-8">
-					<div>
-						<h3 className="mb-2 text-lg font-medium">Price range</h3>
-						<Slider
-							min={0}
-							max={1500}
-							step={10}
-							value={priceRange}
-							onValueChange={(value) =>
-								setPriceRange(value as [number, number])
-							}
-							className="mb-3"
-						/>
-						<div className="flex justify-between text-lg">
-							<span>${priceRange[0]}</span>
-							<span>${priceRange[1]}</span>
-						</div>
-					</div>
-					<div>
-						<h3 className="mb-2 text-lg font-medium">Categories</h3>
-						<div className="space-y-3">
-							{["Electronics", "Furniture", "Appliances", "Sports"].map(
-								(category) => (
-									<div key={category} className="flex items-center">
-										<Checkbox
-											id={category}
-											checked={selectedCategories.includes(category)}
-											onCheckedChange={() => handleCategoryChange(category)}
-										/>
-										<label htmlFor={category} className="ml-3 text-lg">
-											{category}
-										</label>
-									</div>
-								),
-							)}
-						</div>
-					</div>
-				</div>
-			</SidebarContent>
-		</Sidebar>
-	);
+  return (
+    <Sidebar>
+      <SidebarHeader className="p-6 border-b">
+        <h2 className="text-xl font-semibold">Filters</h2>
+      </SidebarHeader>
+      <SidebarContent className="p-6">
+        <div className="space-y-8">
+          <div>
+            <h3 className="mb-2 text-lg font-medium">Price range</h3>
+            <Slider
+              min={0}
+              max={1500}
+              step={10}
+              value={priceRange}
+              onValueChange={(value) =>
+                setPriceRange(value as [number, number])
+              }
+              className="mb-3"
+            />
+            <div className="flex justify-between text-lg">
+              <span>${priceRange[0]}</span>
+              <span>${priceRange[1]}</span>
+            </div>
+          </div>
+          <div>
+            <h3 className="mb-2 text-lg font-medium">Categories</h3>
+            <div className="space-y-3">
+              {["Electronics", "Furniture", "Appliances", "Sports"].map(
+                (category) => (
+                  <div key={category} className="flex items-center">
+                    <Checkbox
+                      id={category}
+                      checked={selectedCategories.includes(category)}
+                      onCheckedChange={() => handleCategoryChange(category)}
+                    />
+                    <label htmlFor={category} className="ml-3 text-lg">
+                      {category}
+                    </label>
+                  </div>
+                )
+              )}
+            </div>
+          </div>
+        </div>
+      </SidebarContent>
+    </Sidebar>
+  );
 }
 
 function HeaderComponent({ searchTerm, setSearchTerm }: HeaderComponentProps) {
@@ -269,36 +274,36 @@ function HeaderComponent({ searchTerm, setSearchTerm }: HeaderComponentProps) {
 }
 
 function ProductList({ products }: ProductListProps) {
-	return (
-		<main className="p-8">
-			<h1 className="text-3xl font-bold mb-8">Products</h1>
-			<div className="flex flex-wrap justify-center gap-8">
-				{products?.map((product) => (
-					<Card key={product.id}>
-						<CardHeader>
-							<ImageCarousel images={product.images} />
-							<CardTitle className="text-xl font-medium">
-								{product.name}
-							</CardTitle>
-						</CardHeader>
-						<CardContent>
-							<p className="text-lg text-gray-500">{product.category}</p>
-						</CardContent>
-						<CardFooter className="flex justify-between gap-2 items-center flex-wrap">
-							<span className="text-3xl font-bold">${product.price}</span>
-							<div className="flex flex-col m-auto">
-								<Button className="mb-4">
-									<ShoppingCart className="mr-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
-									Add to Cart
-								</Button>
-								<Button className="text-[16px] !bg-[#F5F5F5] !text-black border border-[#D1D1D1] px-4 py-2 flex items-center gap-2 hover:bg-[#E0E0E0] hover:border-[#B3B3B3]">
-									<MessageSquareMore /> Chat with Seller
-								</Button>
-							</div>
-						</CardFooter>
-					</Card>
-				))}
-			</div>
-		</main>
-	);
+  return (
+    <main className="p-8">
+      <h1 className="text-3xl font-bold mb-8">Products</h1>
+      <div className="flex flex-wrap justify-center gap-8">
+        {products?.map((product) => (
+          <Card key={product.id}>
+            <CardHeader>
+              <ImageCarousel images={product.images} />
+              <CardTitle className="text-xl font-medium">
+                {product.name}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-lg text-gray-500">{product.category}</p>
+            </CardContent>
+            <CardFooter className="flex justify-between gap-2 items-center flex-wrap">
+              <span className="text-3xl font-bold">${product.price}</span>
+              <div className="flex flex-col m-auto">
+                <Button className="mb-4">
+                  <ShoppingCart className="mr-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
+                  Add to Cart
+                </Button>
+                <Button className="text-[16px] !bg-[#F5F5F5] !text-black border border-[#D1D1D1] px-4 py-2 flex items-center gap-2 hover:bg-[#E0E0E0] hover:border-[#B3B3B3]">
+                  <MessageSquareMore /> Chat with Seller
+                </Button>
+              </div>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </main>
+  );
 }

From 302db96a444e895831dcec73efeb4cfa22c5122d Mon Sep 17 00:00:00 2001
From: Bran18 <andreyfdez18@gmail.com>
Date: Sat, 23 Nov 2024 09:46:56 -0600
Subject: [PATCH 6/6] fix: responsive layout

---
 frontend/app/marketplace/page.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/app/marketplace/page.tsx b/frontend/app/marketplace/page.tsx
index 5bbc5c3..eb6cb55 100644
--- a/frontend/app/marketplace/page.tsx
+++ b/frontend/app/marketplace/page.tsx
@@ -237,7 +237,7 @@ function HeaderComponent({ searchTerm, setSearchTerm }: HeaderComponentProps) {
 
   return (
     <header className="flex items-center justify-between p-6 border-b">
-      <div className="flex items-center gap-4">
+      <div className="flex items-center gap-4 min-w-max">
         <SidebarTrigger>
           <Button variant="outline" size="icon">
             <HamIcon className="h-6 w-6" />
@@ -248,23 +248,27 @@ function HeaderComponent({ searchTerm, setSearchTerm }: HeaderComponentProps) {
           <Button
             variant="outline"
             size="sm"
-            className="flex items-center gap-2"
+            className="flex items-center gap-2 px-2"
             onClick={() => router.push("/")}
           >
-            <Home className="h-6 w-6" />
+            <Home className="h-5 w-5" />
             Home
           </Button>
         )}
       </div>
-      <div className="flex items-center text-2xl space-x-3">
+      <div className="relative w-full pl-2 max-w-[18.75rem] md:w-[18.75rem]">
         <Input
           type="search"
           placeholder="Search products..."
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}
-          className="w-[16rem] h-[3rem]"
+          className="w-full h-8 pr-10"
         />
-        <Button size="icon" variant="ghost">
+        <Button
+          size="icon"
+          variant="ghost"
+          className="absolute right-0 top-0 h-full"
+        >
           <Search className="h-5 w-5" />
           <span className="sr-only">Search</span>
         </Button>