141 lines
4.9 KiB
TypeScript
141 lines
4.9 KiB
TypeScript
import useEmblaCarousel from 'embla-carousel-react'
|
|
import { Suspense, useCallback, useEffect, useState } from 'react'
|
|
import { Await, useRouteLoaderData } from 'react-router'
|
|
import { stripHtml } from 'string-strip-html'
|
|
|
|
import { ErrorAwait } from '~/components/error/await'
|
|
import { CarouselButton } from '~/components/ui/button-slide'
|
|
import { useNewsContext } from '~/contexts/news'
|
|
import type { loader } from '~/routes/_news'
|
|
import type { TNews } from '~/types/news'
|
|
import { getPremiumAttribute } from '~/utils/render'
|
|
|
|
import { Button } from './button'
|
|
import { Tags } from './tags'
|
|
|
|
export const CarouselSection = (properties: TNews) => {
|
|
const { setIsSuccessOpen } = useNewsContext()
|
|
const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
|
|
const { userData } = loaderData || {}
|
|
const { title, description, items } = properties
|
|
const [emblaReference, emblaApi] = useEmblaCarousel({
|
|
loop: false,
|
|
slidesToScroll: 1,
|
|
align: 'start',
|
|
})
|
|
|
|
const [canScrollNext, setCanScrollNext] = useState(false)
|
|
const [canScrollPrevious, setCanScrollPrevious] = useState(false)
|
|
|
|
const updateButtons = useCallback(() => {
|
|
if (emblaApi) {
|
|
setCanScrollPrevious(emblaApi.canScrollPrev())
|
|
setCanScrollNext(emblaApi.canScrollNext())
|
|
}
|
|
}, [emblaApi])
|
|
|
|
useEffect(() => {
|
|
if (emblaApi) {
|
|
updateButtons()
|
|
emblaApi.on('select', updateButtons)
|
|
}
|
|
}, [emblaApi, updateButtons])
|
|
|
|
const previousSlide = useCallback(() => {
|
|
if (canScrollPrevious && emblaApi) emblaApi.scrollPrev()
|
|
}, [emblaApi, canScrollPrevious])
|
|
|
|
const nextSlide = useCallback(() => {
|
|
if (canScrollNext && emblaApi) emblaApi.scrollNext()
|
|
}, [emblaApi, canScrollNext])
|
|
|
|
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">
|
|
<CarouselButton
|
|
direction="prev"
|
|
isEnabled={canScrollPrevious}
|
|
onClick={previousSlide}
|
|
/>
|
|
<CarouselButton
|
|
direction="next"
|
|
isEnabled={canScrollNext}
|
|
onClick={nextSlide}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="embla overflow-hidden"
|
|
ref={emblaReference}
|
|
>
|
|
<div className="embla__container col-span-3 flex max-h-[586px] sm:gap-x-8">
|
|
<Suspense fallback={<div>Loading...</div>}>
|
|
<Await
|
|
resolve={items}
|
|
errorElement={<ErrorAwait />}
|
|
>
|
|
{(value) =>
|
|
value.data.map(
|
|
(
|
|
{ featured_image, title, content, tags, slug, is_premium },
|
|
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 gap-3">
|
|
<img
|
|
className="aspect-[174/100] max-h-[280px] w-full rounded-md object-cover sm:aspect-[5/4]"
|
|
src={featured_image}
|
|
alt={title}
|
|
/>
|
|
<div className={'flex flex-col justify-between gap-4'}>
|
|
<div className="flex h-28 flex-col items-start justify-center gap-4">
|
|
<Tags
|
|
tags={tags || []}
|
|
is_premium={is_premium}
|
|
/>
|
|
<h3 className="mt-2 line-clamp-2 w-full text-xl font-bold sm:text-2xl lg:mt-0">
|
|
{title}
|
|
</h3>
|
|
</div>
|
|
<p className="text-md line-clamp-3 text-[#777777] sm:text-xl">
|
|
{stripHtml(content).result}
|
|
</p>
|
|
<Button
|
|
size="block"
|
|
{...getPremiumAttribute({
|
|
isPremium: is_premium,
|
|
slug,
|
|
onClick: () => setIsSuccessOpen('warning'),
|
|
userData,
|
|
})}
|
|
>
|
|
View More
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
),
|
|
)
|
|
}
|
|
</Await>
|
|
</Suspense>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|