119 lines
4.1 KiB
TypeScript
119 lines
4.1 KiB
TypeScript
import useEmblaCarousel from 'embla-carousel-react'
|
|
import { useCallback } from 'react'
|
|
import { Link } from 'react-router'
|
|
|
|
import { CarouselNextIcon } from '~/components/icons/carousel-next'
|
|
import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
|
|
import { Button } from '~/components/ui/button'
|
|
import { useNewsContext } from '~/contexts/news'
|
|
import type { TNews } from '~/types/news'
|
|
|
|
export const CarouselSection = (properties: TNews) => {
|
|
const { setIsSuccessOpen } = useNewsContext()
|
|
const { title, description, items } = properties
|
|
const [emblaReference, emblaApi] = useEmblaCarousel({ loop: false })
|
|
|
|
const previousSlide = useCallback(() => {
|
|
if (emblaApi) emblaApi.scrollPrev()
|
|
}, [emblaApi])
|
|
|
|
const nextSlide = useCallback(() => {
|
|
if (emblaApi) emblaApi.scrollNext()
|
|
}, [emblaApi])
|
|
return (
|
|
<div className="">
|
|
<div className="mt-3 mb-3 flex items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
|
|
<div className="grid">
|
|
<h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
|
|
{title}
|
|
</h2>
|
|
<p className="text-xl font-light text-[#777777] italic sm:text-2xl">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex gap-2.5">
|
|
<CarouselPreviousIcon
|
|
color="#DCDCDC"
|
|
className="cursor-pointer"
|
|
width={45}
|
|
height={45}
|
|
onClick={previousSlide}
|
|
/>
|
|
<CarouselNextIcon
|
|
color="#2E2F7C"
|
|
className="cursor-pointer"
|
|
width={45}
|
|
height={45}
|
|
onClick={nextSlide}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="embla overflow-hidden"
|
|
ref={emblaReference}
|
|
>
|
|
<div className="embla__container col-span-3 flex max-h-[586px]">
|
|
{items.map(
|
|
({ featured, title, content, tags, slug, isPremium }, index) => (
|
|
<div
|
|
className="embla__slide w-full min-w-0 flex-none sm:w-1/3"
|
|
key={index}
|
|
>
|
|
<div className="flex flex-col justify-between max-sm:mt-2">
|
|
<img
|
|
className="aspect-[5/4] max-h-[300px] w-full rounded-md object-cover"
|
|
src={featured}
|
|
alt={title}
|
|
/>
|
|
<div className={'flex flex-col justify-between gap-4'}>
|
|
<div className={'flex uppercase'}>
|
|
{tags?.map((item) => (
|
|
<span
|
|
key={index}
|
|
className="my-3 mr-2 inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
|
|
>
|
|
{item}
|
|
</span>
|
|
))}
|
|
{isPremium && (
|
|
<span className="my-3 mr-2 inline-block rounded bg-[#D1C675] px-3 py-1 font-bold text-[#9D761D]">
|
|
Premium Content
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="mt-2 w-full text-xl font-bold sm:text-2xl lg:mt-0">
|
|
{title}
|
|
</h3>
|
|
<p className="text-md mt-5 text-[#777777] sm:text-xl">
|
|
{content}
|
|
</p>
|
|
</div>
|
|
<Button
|
|
size="block"
|
|
{...(isPremium
|
|
? {
|
|
onClick: () => {
|
|
setIsSuccessOpen('warning')
|
|
},
|
|
to: '',
|
|
}
|
|
: { as: Link, to: `/news/detail/${slug}` })}
|
|
className="mb-5"
|
|
>
|
|
View More
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
),
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|