75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
'use client'
|
|
|
|
import Autoplay from 'embla-carousel-autoplay'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import * as React from 'react'
|
|
|
|
import {Button} from '@/components/ui/button'
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
CarouselNext,
|
|
CarouselPrevious
|
|
} from '@/components/ui/carousel'
|
|
import {cn} from '@/lib/utils'
|
|
|
|
export function HomeCarousel({
|
|
items
|
|
}: {
|
|
items: {
|
|
image: string
|
|
url: string
|
|
title: string
|
|
buttonCaption: string
|
|
}[]
|
|
}) {
|
|
const plugin = React.useRef(Autoplay({delay: 5000, stopOnInteraction: true}))
|
|
|
|
return (
|
|
<Carousel
|
|
dir='ltr'
|
|
plugins={[plugin.current]}
|
|
className='mx-auto w-full'
|
|
onMouseEnter={plugin.current.stop}
|
|
onMouseLeave={plugin.current.reset}
|
|
>
|
|
<CarouselContent>
|
|
{items.map(item => (
|
|
<CarouselItem key={item.title}>
|
|
<Link href={item.url}>
|
|
<div className='relative -m-0.5 flex aspect-univisium items-center justify-center'>
|
|
<Image
|
|
src={item.image}
|
|
alt={item.title}
|
|
fill
|
|
className='object-cover'
|
|
priority
|
|
/>
|
|
<div className='absolute left-16 top-1/2 hidden w-1/3 -translate-y-1/2 transform md:left-32'>
|
|
<h2
|
|
className={cn(
|
|
'mb-4 text-lg font-bold text-primary shadow-brand-violet drop-shadow-xl md:text-6xl'
|
|
)}
|
|
>
|
|
{`${item.title}`}
|
|
</h2>
|
|
<Button className='hidden md:block'>
|
|
{`${item.buttonCaption}`}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
{/*<CarouselPrevious className='left-0 h-[78px] w-[78px] text-6xl md:left-12' />
|
|
<CarouselNext className='right-0 h-[78px] w-[78px] md:right-12' />*/}
|
|
|
|
<CarouselPrevious className='absolute left-[1rem] top-1/2 z-10 h-[78px] w-[78px] -translate-y-1/2 transform' />
|
|
<CarouselNext className='absolute right-[1rem] top-1/2 z-10 h-[78px] w-[78px] -translate-y-1/2 transform' />
|
|
</Carousel>
|
|
)
|
|
}
|