legalgo-FE-reactrouter/app/components/ui/carousel-section.tsx

import useEmblaCarousel from 'embla-carousel-react'
import { useCallback } from 'react'
import { Link } from 'react-router'
import { twMerge } from 'tailwind-merge'

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 className="embla__container grid sm:auto-cols-[31%] sm:grid-flow-col sm:gap-x-8">
          {items.map(
            ({ featured, title, content, tags, slug, isPremium }, index) => (
              <div
                key={index}
                className={twMerge('embla__slide grid sm:gap-x-8')}
              >
                <img
                  className={twMerge(
                    'aspect-[5/4] w-full rounded-md object-cover',
                  )}
                  src={featured}
                  alt={title}
                />
                <div className={twMerge('flex flex-col justify-between gap-4')}>
                  <div
                    className={twMerge(
                      'my-3 flex gap-2 uppercase max-sm:text-sm',
                    )}
                  >
                    {tags?.map((item) => (
                      <span
                        key={index}
                        className="inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
                      >
                        {item}
                      </span>
                    ))}
                    {isPremium && (
                      <span className="inline-block rounded bg-[#D1C675] px-3 py-1 font-bold text-[#9D761D]">
                        Premium Content
                      </span>
                    )}
                  </div>

                  <div>
                    <h3
                      className={twMerge(
                        'mt-2 w-full text-xl font-bold sm:mt-0 sm:text-2xl',
                      )}
                    >
                      {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: `/detail/${slug}` })}
                    className="mb-5"
                  >
                    View More
                  </Button>
                </div>
              </div>
            ),
          )}
        </div>
      </div>
    </div>

    // <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>

    //   <div className={twMerge('grid sm:grid-cols-3 sm:gap-x-8')}>
    //     {items.map(
    //       ({ featured, title, content, tags, slug, isPremium }, index) => (
    //         <div
    //           key={index}
    //           className={twMerge('grid sm:gap-x-8')}
    //         >
    //           <img
    //             className={twMerge(
    //               'aspect-[5/4] w-full rounded-md object-cover',
    //             )}
    //             src={featured}
    //             alt={title}
    //           />
    //           <div className={twMerge('flex flex-col justify-between gap-4')}>
    //             <div
    //               className={twMerge(
    //                 'my-3 flex gap-2 uppercase max-sm:text-sm',
    //               )}
    //             >
    //               {tags?.map((item) => (
    //                 <span
    //                   key={index}
    //                   className="inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
    //                 >
    //                   {item}
    //                 </span>
    //               ))}
    //               {isPremium && (
    //                 <span className="inline-block rounded bg-[#D1C675] px-3 py-1 font-bold text-[#9D761D]">
    //                   Premium Content
    //                 </span>
    //               )}
    //             </div>

    //             <div>
    //               <h3
    //                 className={twMerge(
    //                   'mt-2 w-full text-xl font-bold sm:mt-0 sm:text-2xl',
    //                 )}
    //               >
    //                 {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: `/detail/${slug}` })}
    //               className="mb-5"
    //             >
    //               View More
    //             </Button>
    //           </div>
    //         </div>
    //       ),
    //     )}
    //   </div>

    //   <div className="my-5 mt-5 flex flex-row-reverse">
    //     <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>
  )
}