tanshu/kakawa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Removed star rating and reviews

Browse Source 
Added tags, description, ingredients and subheading
This commit is contained in:
Amritanshu Agrawal 2024-10-18 10:02:20 +05:30
parent 8cdfd5598d
commit 7e1fa65cba
1 changed files with 52 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/app/(storefront)/products/[handle]/ProductDetails.tsx
View File

@ -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>
))}