72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
import {ProductResource} from '@prisma/client'
|
|
import {Star, StarHalf} from 'lucide-react'
|
|
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 {Button} from '@/ui/button'
|
|
import {Card, CardContent, CardFooter} from '@/ui/card'
|
|
import {CarouselItem} from '@/ui/carousel'
|
|
|
|
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-[81%] 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-[19%] items-center justify-between border-t-[2px] border-brand-violet px-4'>
|
|
<div className=''>
|
|
<p className='ml-2 border-b border-b-brand-violet pl-2 pr-6 text-[16px]'>
|
|
{card.title}
|
|
</p>
|
|
<p className='pl-4 text-[16px] 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={true}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
// id: number
|
|
// quantity: number
|
|
// title: string
|
|
// price: string | any
|
|
// image?: string | null
|
|
// imageWidth?: number | null
|
|
// imageHeight?: number | null
|