Removed star rating and reviews
Added tags, description, ingredients and subheading
This commit is contained in:
parent
8cdfd5598d
commit
7e1fa65cba
@ -1,9 +1,9 @@
|
||||
'use client';
|
||||
|
||||
import { HttpTypes } from '@medusajs/types';
|
||||
import { ShoppingCart, Star } from 'lucide-react';
|
||||
import { ShoppingCart } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import { useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
@ -21,6 +21,10 @@ export default function ProductDetails({ product }: ProductDetailsProps) {
|
||||
|
||||
const { addToCart } = useCart();
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedVariant(product.variants?.[0] as HttpTypes.StoreProductVariant);
|
||||
}, [product]);
|
||||
|
||||
return (
|
||||
<div className='px-4 py-8 pt-28'>
|
||||
<div className='grid md:grid-cols-2 gap-8 overflow-visible'>
|
||||
@ -46,40 +50,42 @@ export default function ProductDetails({ product }: ProductDetailsProps) {
|
||||
</div> */}
|
||||
</div>
|
||||
<div className='sticky top-20 self-start'>
|
||||
<h1 className='text-3xl font-bold mb-4'>{product.title}</h1>
|
||||
<div className='flex items-center mb-4'>
|
||||
<div className='flex text-yellow-400'>
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star key={i} className='w-5 h-5 fill-current' />
|
||||
<span className='text-s-title font-medium mb-4'>{product.title}</span>{' '}
|
||||
<span className='mb-4'>{product.subtitle}</span>
|
||||
{product.tags && product.tags.length > 0 && (
|
||||
<div className='flex flex-wrap mb-4'>
|
||||
{product.tags.map((tag) => (
|
||||
<span key={tag.id} className='mr-2 mb-2 px-2 py-1 border-dashed border-2 border-grey-200'>
|
||||
{tag.value}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<span className='ml-2 text-sm text-gray-600'>(128 reviews)</span>
|
||||
</div>
|
||||
<p className='text-2xl font-bold mb-4'>₹{selectedVariant?.calculated_price?.calculated_amount?.toFixed(2)}</p>
|
||||
)}
|
||||
<p className='mb-4'>₹{selectedVariant?.calculated_price?.calculated_amount?.toFixed(2)}</p>
|
||||
<p className='text-gray-600 mb-6'>{product.description}</p>
|
||||
|
||||
<div className='mb-6'>
|
||||
<h3 className='text-lg font-semibold mb-2'>Choose Variant:</h3>
|
||||
<RadioGroup
|
||||
defaultValue={product.variants?.[0].id}
|
||||
onValueChange={(value) =>
|
||||
setSelectedVariant(
|
||||
product.variants?.find((v) => v.id === value) ||
|
||||
(product.variants?.[0] as HttpTypes.StoreProductVariant),
|
||||
)
|
||||
}
|
||||
>
|
||||
{product.variants?.map((variant) => (
|
||||
<div key={variant.id} className='flex items-center space-x-2'>
|
||||
<RadioGroupItem value={variant.id} id={variant.id} />
|
||||
<Label htmlFor={variant.id}>
|
||||
{variant.title} - ₹{variant.calculated_price?.calculated_amount?.toFixed(2)}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
{product.variants && product.variants.length > 1 && (
|
||||
<div className='mb-6'>
|
||||
<h3 className='text-lg font-medium mb-2'>Variants:</h3>
|
||||
<RadioGroup
|
||||
defaultValue={product.variants?.[0].id}
|
||||
onValueChange={(value) =>
|
||||
setSelectedVariant(
|
||||
product.variants?.find((v) => v.id === value) ||
|
||||
(product.variants?.[0] as HttpTypes.StoreProductVariant),
|
||||
)
|
||||
}
|
||||
>
|
||||
{product.variants?.map((variant) => (
|
||||
<div key={variant.id} className='flex items-center space-x-2'>
|
||||
<RadioGroupItem value={variant.id} id={variant.id} />
|
||||
<Label htmlFor={variant.id}>
|
||||
{variant.title} - ₹{variant.calculated_price?.calculated_amount?.toFixed(2)}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</div>
|
||||
)}
|
||||
<div className='flex items-center mb-6'>
|
||||
<Button variant='outline' size='sm' onClick={() => setQuantity(Math.max(1, quantity - 1))}>
|
||||
-
|
||||
@ -92,42 +98,24 @@ export default function ProductDetails({ product }: ProductDetailsProps) {
|
||||
<Button className='w-full md:w-auto' onClick={() => addToCart(selectedVariant?.id as string, quantity)}>
|
||||
<ShoppingCart className='mr-2 h-4 w-4' /> Add to Cart
|
||||
</Button>
|
||||
|
||||
<h2 className='text-2xl font-bold mb-4'>Product Details</h2>
|
||||
<ul className='list-disc pl-5 space-y-2 text-gray-600'>
|
||||
<li>Single-origin cocoa beans from Ecuador</li>
|
||||
<li>Fair trade certified</li>
|
||||
{product.material && (
|
||||
<div className='mt-6'>
|
||||
<h2 className='text-lg font-medium mb-4'>Ingredients</h2>
|
||||
<p className='text-gray-600 relative overflow-hidden group'>
|
||||
{product.material}
|
||||
<span className='absolute bottom-0 left-0 h-[2px] bg-black w-full transform -translate-x-full transition-transform duration-500 group-hover:translate-x-0'></span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<h2 className='text-lg font-medium mb-4 mt-4'>Product Details</h2>
|
||||
<ul className='list-none pl-5 space-y-2 text-gray-600'>
|
||||
<li>Single-origin cocoa beans</li>
|
||||
<li>No artificial flavors or preservatives</li>
|
||||
<li>100g (3.5oz) bar</li>
|
||||
<li>Available in different cocoa percentages</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-12'>
|
||||
<h2 className='text-2xl font-bold mb-4'>Customer Reviews</h2>
|
||||
<div className='space-y-4'>
|
||||
{[...Array(3)].map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardContent className='p-4'>
|
||||
<div className='flex items-center mb-2'>
|
||||
<div className='flex text-yellow-400'>
|
||||
{[...Array(5)].map((_, j) => (
|
||||
<Star key={j} className='w-4 h-4 fill-current' />
|
||||
))}
|
||||
</div>
|
||||
<span className='ml-2 text-sm font-medium'>John Doe</span>
|
||||
</div>
|
||||
<p className='text-gray-600'>
|
||||
This chocolate is absolutely divine! The rich flavor and smooth texture make it a perfect treat for
|
||||
any chocolate lover. I especially love the 85% cocoa variant for its intense flavor.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-12'>
|
||||
<h2 className='text-2xl font-bold mb-4'>Related Products</h2>
|
||||
<div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
|
||||
@ -143,7 +131,7 @@ export default function ProductDetails({ product }: ProductDetailsProps) {
|
||||
/>
|
||||
<h3 className='font-bold mb-2'>Milk Chocolate Truffles</h3>
|
||||
<p className='text-gray-600 mb-2'>Smooth, creamy milk chocolate truffles</p>
|
||||
<p className='font-bold'>$9.99</p>
|
||||
<p className='font-bold'>₹{selectedVariant?.calculated_price?.calculated_amount?.toFixed(2)}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
|
Loading…
Reference in New Issue
Block a user