From d60470704eb20db692b9b3fd7b2e06d42291dda3 Mon Sep 17 00:00:00 2001 From: sebas hidalgo Date: Thu, 24 Apr 2025 20:22:55 -0600 Subject: [PATCH 1/3] feat: redesign product datails page --- .../marketplace/[productSlug]/page.tsx | 187 ++++++++++-------- apps/frontend/components/products/Images.tsx | 43 ++-- apps/frontend/locales/en.ts | 6 + apps/frontend/locales/es.ts | 6 + 4 files changed, 148 insertions(+), 94 deletions(-) diff --git a/apps/frontend/app/(routes)/marketplace/[productSlug]/page.tsx b/apps/frontend/app/(routes)/marketplace/[productSlug]/page.tsx index c1b91224..c72a75ff 100644 --- a/apps/frontend/app/(routes)/marketplace/[productSlug]/page.tsx +++ b/apps/frontend/app/(routes)/marketplace/[productSlug]/page.tsx @@ -1,12 +1,24 @@ "use client"; -import { Share2, ShoppingBag, Star } from "lucide-react"; +import { + Clock, + Heart, + MapPin, + MessageSquareMore, + Share2, + ShoppingBag, + Star, +} from "lucide-react"; import { useTranslations } from "next-intl"; import { useEffect, useState } from "react"; import Images from "@/components/products/Images"; import NotFound from "@/components/products/not-found"; +import { Avatar, AvatarFallback } from "@/components/ui/avatar"; +import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; +import { Card, CardContent } from "@/components/ui/card"; +import { Separator } from "@/components/ui/separator"; import { useUtils } from "@/hooks/useUtils"; import { GET_CATEGORIES, @@ -170,93 +182,108 @@ const ProductDetails = ({ params }: ProductDetailsProps) => { } return ( -
-
+
+
-
-
-

{product.name}

-

- ${product.price.toFixed(2)} -

-
- -
-

{t("common.product.category")}:

-

- {product.category} -

-
- -
-

{t("common.product.quantity")}:

-
- - {quantity} - -
-
- - {product.rating && ( -
- {renderStars(product.rating).map((star, index) => { - if (star === "filled") { - return ; - } - if (star === "half") { - return ( - - ); - } - return ; - })} - - {product.rating.toFixed(1)} {t("common.product.reviews")} - +
+
+
+ {product.category} +

+ {t("common.product.posted")} +

- )} - {product.description && (
-

- {t("common.product.description")}: -

-

- {product.description} +

{product.name}

+

+ ${product.price.toFixed(2)}

- )} - -
- - -
-
+ + {t("common.product.condition")} + + {product.description && ( + + +

+ {t("common.product.description")} +

+

+ {product.description} +

+ + + )} + +
+ + +
+ + +
+
+
+ + + +
+ + +
+
+ + T + + +
+

TechTreasures

+
+ +

+ {t("common.seller.reviews")} +

+
+
+
+ +

+ {t("common.seller.memberSince")} +

+
+ +

+ San + Francisco, CA +

+

+ {" "} + {t("common.seller.responseTime")} +

+ + + + +
+
); }; diff --git a/apps/frontend/components/products/Images.tsx b/apps/frontend/components/products/Images.tsx index fbfd19e9..436149e3 100644 --- a/apps/frontend/components/products/Images.tsx +++ b/apps/frontend/components/products/Images.tsx @@ -1,4 +1,11 @@ import Image from "next/image"; +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, +} from "../ui/carousel"; interface ImageProps { images: { @@ -12,28 +19,36 @@ const Images = ({ images }: ImageProps) => { return

No images available

; } - const mainImage = images[0]; - return ( -
- {mainImage.alt} +
+ + + {images.map((image, index) => ( + + {image.alt} + + ))} + + + + {images.length > 1 && ( -
+
{images.map((image, index) => ( {image.alt} ))}
diff --git a/apps/frontend/locales/en.ts b/apps/frontend/locales/en.ts index f58a4abf..f81729ad 100644 --- a/apps/frontend/locales/en.ts +++ b/apps/frontend/locales/en.ts @@ -175,6 +175,8 @@ export const en = { quantity: "Quantity", description: "Description", reviews: "/ 5", + posted: "Posted 2 days ago • 142 views", + condition: "Like New", buttons: { buy: "Buy Now", share: "Share", @@ -188,6 +190,10 @@ export const en = { description: "Join SafeSwap and reach thousands of potential buyers today!", btn_label: "Become a Seller", + memberSince: "• Member since January 2022", + reviews: "4.9 (253) reviews", + responseTime: "Usually responds within 2 hours", + viewProfile: "View Seller Profile", }, createProduct: { diff --git a/apps/frontend/locales/es.ts b/apps/frontend/locales/es.ts index e0644326..2eb09227 100644 --- a/apps/frontend/locales/es.ts +++ b/apps/frontend/locales/es.ts @@ -176,6 +176,8 @@ export const es = { quantity: "Cantidad", description: "Descripción", reviews: "/ 5", + posted: "Publicado hace 2 días • 142 vistas", + condition: "Como Nuevo", buttons: { buy: "Comprar Ahora", share: "Compartir", @@ -189,6 +191,10 @@ export const es = { description: "¡Únete a SafeSwap y llega a miles de compradores hoy mismo!", btn_label: "Conviértete en Vendedor", + memberSince: "• Miembro desde Eneno 2022", + reviews: "4.9 (253) reseñas", + responseTime: "Usualmente responde en 2 horas", + viewProfile: "Ver Perfil del Vendedor", }, createProduct: { From cbc6a8cbad06abe12e5d957e43bb7b225c7e7739 Mon Sep 17 00:00:00 2001 From: sebas hidalgo Date: Fri, 25 Apr 2025 14:06:26 -0600 Subject: [PATCH 2/3] fix: delelte unused variables --- .../app/(routes)/marketplace/[productSlug]/page.tsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/apps/frontend/app/(routes)/marketplace/[productSlug]/page.tsx b/apps/frontend/app/(routes)/marketplace/[productSlug]/page.tsx index c72a75ff..3787d37f 100644 --- a/apps/frontend/app/(routes)/marketplace/[productSlug]/page.tsx +++ b/apps/frontend/app/(routes)/marketplace/[productSlug]/page.tsx @@ -48,11 +48,9 @@ interface UIProduct extends FormattedProduct { const ProductDetails = ({ params }: ProductDetailsProps) => { const t = useTranslations(); - const { renderStars } = useUtils(); const [product, setProduct] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); - const [quantity, setQuantity] = useState(1); // State for data const [productsData, setProductsData] = useState( @@ -155,14 +153,6 @@ const ProductDetails = ({ params }: ProductDetailsProps) => { } }, [productsData, categoriesData, imagesData, params.productSlug]); - const handleIncreaseQuantity = () => { - setQuantity((prev) => prev + 1); - }; - - const handleDecreaseQuantity = () => { - setQuantity((prev) => (prev > 1 ? prev - 1 : 1)); - }; - if (loading) { return (
Loading...
From 7edf65d5d5b577f631a46653402e2dfb098f663a Mon Sep 17 00:00:00 2001 From: sebas hidalgo Date: Fri, 25 Apr 2025 14:08:33 -0600 Subject: [PATCH 3/3] fix: delete unused import --- apps/frontend/app/(routes)/marketplace/[productSlug]/page.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/frontend/app/(routes)/marketplace/[productSlug]/page.tsx b/apps/frontend/app/(routes)/marketplace/[productSlug]/page.tsx index 3787d37f..79639a2f 100644 --- a/apps/frontend/app/(routes)/marketplace/[productSlug]/page.tsx +++ b/apps/frontend/app/(routes)/marketplace/[productSlug]/page.tsx @@ -19,7 +19,6 @@ import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { Separator } from "@/components/ui/separator"; -import { useUtils } from "@/hooks/useUtils"; import { GET_CATEGORIES, GET_PRODUCTS,