-
diff --git a/frontend/app/components/marketplace/breadcrumb-navigation.tsx b/frontend/app/components/marketplace/breadcrumb-navigation.tsx
new file mode 100644
index 0000000..8e837b6
--- /dev/null
+++ b/frontend/app/components/marketplace/breadcrumb-navigation.tsx
@@ -0,0 +1,24 @@
+import {
+ Breadcrumb,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ BreadcrumbList,
+ BreadcrumbPage,
+ BreadcrumbSeparator,
+} from "@/app/components/ui/breadcrumb";
+
+export default function BreadcrumbNavigation() {
+ return (
+
+
+
+ Home
+
+
+
+ Marketplace
+
+
+
+ );
+}
diff --git a/frontend/app/components/marketplace/filters.tsx b/frontend/app/components/marketplace/filters.tsx
new file mode 100644
index 0000000..9fdd799
--- /dev/null
+++ b/frontend/app/components/marketplace/filters.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { Checkbox, Slider } from "@radix-ui/themes";
+import { useState } from "react";
+
+import { SidebarContent, SidebarHeader } from "@/app/components/ui/sidebar";
+
+const Filters = () => {
+ const [priceRange, setPriceRange] = useState<[number, number]>([0, 1500]);
+ const [selectedCategories, setSelectedCategories] = useState
([]);
+
+ const handleCategoryChange = (category: string) => {
+ setSelectedCategories((prev) =>
+ prev.includes(category)
+ ? prev.filter((c) => c !== category)
+ : [...prev, category],
+ );
+ };
+
+ return (
+ <>
+
+ Filters
+
+
+
+
+
Price range
+
+ setPriceRange(value as [number, number])
+ }
+ className="mb-3"
+ />
+
+ ${priceRange[0]}
+ ${priceRange[1]}
+
+
+
+
Categories
+
+ {["Electronics", "Furniture", "Appliances", "Sports"].map(
+ (category) => (
+
+ handleCategoryChange(category)}
+ />
+
+
+ ),
+ )}
+
+
+
+
+
-
+
diff --git a/frontend/app/components/products/Images.tsx b/frontend/app/components/products/Images.tsx
index e849428..fbfd19e 100644
--- a/frontend/app/components/products/Images.tsx
+++ b/frontend/app/components/products/Images.tsx
@@ -1,46 +1,45 @@
import Image from "next/image";
-import React from "react";
interface ImageProps {
- images: {
- src: string;
- alt: string;
- }[];
+ images: {
+ src: string;
+ alt: string;
+ }[];
}
const Images = ({ images }: ImageProps) => {
- if (!images || images.length === 0) {
- return No images available
;
- }
+ if (!images || images.length === 0) {
+ return No images available
;
+ }
- const mainImage = images[0];
+ const mainImage = images[0];
- return (
-
-
+ return (
+
+
- {images.length > 1 && (
-
- {images.map((image, index) => (
-
- ))}
-
- )}
-
- );
+ {images.length > 1 && (
+
+ {images.map((image, index) => (
+
+ ))}
+
+ )}
+
-
-
-
-
-
- {product.name}
-
-
-
-
-
-
- {product.category}
-
-
- {product.price ? `$${product.price}` : "Price not available"}
-
-
- {product.description}
-
-
-
-
- {renderStars(rating).map((star, index) => {
- if (star === "filled") {
- return ;
- } else if (star === "half") {
- return (
-
- );
- } else {
- return (
-
- );
- }
- })}
-
- {rating.toFixed(1)} / 5
-
-
-
-
-
-
-
-
-
-
-
-
+
+ {images.map((image, index) => (
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
Ship to
+
+
+ {showSearchBar ? (
+
+ setSearchTerm(e.target.value)}
+ className="w-full h-10 pr-10"
+ />
+
+
+ ) : null}
- setSearchTerm(e.target.value)}
- className="w-full h-8 pr-10"
- />
-
-
- ) : null}
-
-
-