73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
CarouselNext,
|
|
CarouselPrevious,
|
|
} from '@/components/ui/carousel';
|
|
import Autoplay from 'embla-carousel-autoplay';
|
|
import Image from 'next/image';
|
|
|
|
const images = [
|
|
{
|
|
title: 'Beautiful overview, everything is clickable to get more details',
|
|
url: '/demo/overview-min.png',
|
|
},
|
|
{
|
|
title: 'Histogram, perfect for showing active users',
|
|
url: '/demo/histogram-min.png',
|
|
},
|
|
{ title: 'Make your overview public', url: '/demo/overview-share-min.png' },
|
|
{
|
|
title: 'See real time events from your users',
|
|
url: '/demo/events-min.png',
|
|
},
|
|
{ title: 'The classic line chart', url: '/demo/line-min.png' },
|
|
{
|
|
title: 'Bar charts to see your most popular content',
|
|
url: '/demo/bar-min.png',
|
|
},
|
|
{ title: 'Get nice metric cards with graphs', url: '/demo/metrics-min.png' },
|
|
{ title: 'See where your events comes from', url: '/demo/worldmap-min.png' },
|
|
{ title: 'The classic pie chart', url: '/demo/pie-min.png' },
|
|
];
|
|
|
|
export function HomeCarousel() {
|
|
return (
|
|
<div className="mx-auto max-w-6xl p-4">
|
|
<div className="relative">
|
|
<div className="rounded-lg w-full max-w-6xl aspect-video dashed absolute -left-5 -top-5"></div>
|
|
<Carousel
|
|
className="w-full"
|
|
opts={{ loop: true }}
|
|
plugins={[
|
|
Autoplay({
|
|
delay: 2000,
|
|
}),
|
|
]}
|
|
>
|
|
<CarouselContent>
|
|
{images.map((item) => (
|
|
<CarouselItem key={item.url}>
|
|
<div className="aspect-video rounded-md overflow-hidden">
|
|
<Image
|
|
className="w-full h-full object-cover"
|
|
src={item.url}
|
|
width={1080}
|
|
height={608}
|
|
alt={item.title}
|
|
/>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious className="hidden md:visible" />
|
|
<CarouselNext className="hidden md:visible" />
|
|
</Carousel>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|