60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import Image from 'next/image'
|
|
|
|
import CardBuyButton from '@/components/shared/store/card-buy-button'
|
|
import RateStars from '@/components/shared/store/stars'
|
|
import {Link} from '@/i18n/routing'
|
|
import {CategoryPageSqlSchema} from '@/lib/data/models/sqlSchemas'
|
|
import {Card, CardContent, CardFooter} from '@/ui/card'
|
|
|
|
export default function FeatureCardFront({
|
|
card
|
|
}: {
|
|
card: CategoryPageSqlSchema
|
|
}) {
|
|
return (
|
|
<Card className='relative aspect-card overflow-hidden border-[2px] border-brand-violet transition duration-300 hover:shadow-lg hover:shadow-brand-violet/50'>
|
|
<Link href={`/product/${card.productId}-${card.slug}`}>
|
|
<CardContent className='relative flex h-[76%] flex-col justify-between overflow-hidden pt-4'>
|
|
{/*<CarouselItem>*/}
|
|
<Image
|
|
className='transition duration-300 hover:scale-110'
|
|
src={card?.image || ''}
|
|
width={card.imageWidth || 100}
|
|
height={card.imageHeight || 100}
|
|
/*className='object-scale-down'*/
|
|
priority
|
|
alt={''}
|
|
sizes='100vw'
|
|
style={{
|
|
objectFit: 'contain',
|
|
width: '100%',
|
|
height: 'calc(100% - 24px)'
|
|
}}
|
|
/>
|
|
<RateStars />
|
|
{/*</CarouselItem>*/}
|
|
</CardContent>
|
|
</Link>
|
|
<div className='bw-card-footer flex h-[24%] items-center justify-between border-t-[2px] border-brand-violet px-2'>
|
|
<div className=''>
|
|
<p className='font-heading ml-1 border-b border-b-brand-violet pb-0.5 pl-1 pr-3'>
|
|
{card.title}
|
|
</p>
|
|
<p className='pl-2 text-[18px] font-bold text-brand-violet'>
|
|
{parseFloat(card.price as string).toFixed(2)}
|
|
</p>
|
|
</div>
|
|
<CardBuyButton
|
|
item={{
|
|
id: card.productId,
|
|
quantity: 1,
|
|
title: card.title,
|
|
price: parseFloat(card.price as string).toFixed(2)
|
|
}}
|
|
isIcon={false}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|