Merge pull request #26 from Steph3097/sp-add-chat-with-seller-button

Feat: Add Chat with Seller button
KaizeNodeLabs · Nov 23, 2024 · 44b3a1f · 44b3a1f
2 parents f38cbc7 + d82997d
commit 44b3a1f
Showing 1 changed file with 33 additions and 12 deletions.
diff --git a/frontend/app/marketplace/page.tsx b/frontend/app/marketplace/page.tsx
@@ -18,7 +18,12 @@ import {
 	SidebarTrigger,
 } from "@/app/components/ui/sidebar";
 import { Slider } from "@/app/components/ui/slider";
-import { Menu as HamIcon, Search, ShoppingCart } from "lucide-react";
+import {
+	Menu as HamIcon,
+	MessageSquareMore,
+	Search,
+	ShoppingCart,
+} from "lucide-react";
 import { Dispatch, SetStateAction, useState } from "react";
 import ImageCarousel from "../components/ui/image-carrousel";
 
@@ -64,9 +69,18 @@ const products: Product[] = [
 		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" },
+			{
+				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",
+			},
 		],
 	},
 	{
@@ -179,7 +193,9 @@ function SidebarComponent({
 							max={1500}
 							step={10}
 							value={priceRange}
-							onValueChange={(value) => setPriceRange(value as [number, number])}
+							onValueChange={(value) =>
+								setPriceRange(value as [number, number])
+							}
 							className="mb-3"
 						/>
 						<div className="flex justify-between text-lg">
@@ -221,13 +237,13 @@ function HeaderComponent({ searchTerm, setSearchTerm }: HeaderComponentProps) {
 					<span className="sr-only">Toggle Sidebar</span>
 				</Button>
 			</SidebarTrigger>
-			<div className="flex items-center text-2xl space-x-3">
+			<div className="flex items-center text-2xl space-x-3 w-full md:w-auto">
 				<Input
 					type="search"
 					placeholder="Search products..."
 					value={searchTerm}
 					onChange={(e) => setSearchTerm(e.target.value)}
-					className="w-[16rem] h-[3rem]"
+					className="w-full h-[3rem] md:w-[16rem]"
 				/>
 				<Button size="icon" variant="ghost">
 					<Search className="h-5 w-5" />
@@ -254,12 +270,17 @@ function ProductList({ products }: ProductListProps) {
 						<CardContent>
 							<p className="text-lg text-gray-500">{product.category}</p>
 						</CardContent>
-						<CardFooter className="flex justify-between gap-2 items-center">
+						<CardFooter className="flex justify-between gap-2 items-center flex-wrap">
 							<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>
+							<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>
 				))}