45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import Image from 'next/image'
|
|
import * as React from 'react'
|
|
|
|
import {cards} from '@/lib/data'
|
|
import {Card, CardContent} from '@/ui/card'
|
|
import {Carousel, CarouselContent, CarouselItem} from '@/ui/carousel'
|
|
|
|
export default function FeatureCards() {
|
|
return (
|
|
<Carousel className='mx-auto w-full'>
|
|
<CarouselContent className='-ml-2 md:-ml-4'>
|
|
{cards.map((card: any) => (
|
|
<CarouselItem
|
|
key={card.title}
|
|
className='pl-3 md:basis-1/3 lg:basis-1/4 xl:basis-1/5'
|
|
>
|
|
<div className='p-1'>
|
|
<Card className='border-[2px] border-brand-violet'>
|
|
<CardContent className='aspect-card flex items-center justify-center p-1'>
|
|
<CarouselItem>
|
|
<Image
|
|
src={card.image}
|
|
width={256}
|
|
height={256}
|
|
className='object-scale-down'
|
|
priority
|
|
alt={''}
|
|
/>
|
|
</CarouselItem>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
</Carousel>
|
|
|
|
/*<div className='container grid grid-cols-1 md:grid-cols-2 md:gap-44 lg:grid-cols-4'>
|
|
{cards.map((card: any) => (
|
|
<ProductCard card={card} key={card.title} />
|
|
))}
|
|
</div>*/
|
|
)
|
|
}
|