grand commit

components/shared/store/feature-card-front.tsx

@@ -0,0 +1,71 @@
+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