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

import { useState } from 'react'
import { Link, useLocation } from 'react-router'
import { twMerge } from 'tailwind-merge'

import { CarouselNextIcon } from '~/components/icons/carousel-next'
import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
import type { TNews } from '~/types/news'

import { Button } from './button'

export const Carousel = (properties: TNews) => {
  const [currentIndex, setCurrentIndex] = useState(0)
  const location = useLocation()
  const hasCategory = location.pathname.includes('/category/')

  const { title, description, items, type } = properties
  const itemsPerPage = type === 'hero' ? 1 : 3
  const totalPages = Math.ceil(items.length / itemsPerPage)

  const nextSlide = () => {
    setCurrentIndex((previousIndex) => (previousIndex + 1) % totalPages)
  }

  const previousSlide = () => {
    setCurrentIndex(
      (previousIndex) => (previousIndex - 1 + totalPages) % totalPages,
    )
  }
  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>
    //     {!hasCategory && (
    //       <div className="flex gap-2.5">
    //         <CarouselPreviousIcon
    //           color="#DCDCDC"
    //           className="cursor-pointer"
    //           width={45}
    //           height={45}
    //         />
    //         <CarouselNextIcon
    //           color="#2E2F7C"
    //           className="cursor-pointer"
    //           width={45}
    //           height={45}
    //         />
    //       </div>
    //     )}
    //   </div>
    //   <div
    //     className={twMerge(
    //       'grid sm:grid sm:gap-x-8',
    //       type === 'hero' ? 'grid-cols-1' : 'sm:grid-cols-3',
    //     )}
    //   >
    //     {items.map(({ featured, title, content, tags, slug }, index) => (
    //       <div
    //         key={index}
    //         className={twMerge(
    //           'grid sm:gap-x-8',
    //           type === 'hero' ? 'grid-cols-1 sm:grid-cols-3' : '',
    //         )}
    //       >
    //         <img
    //           className={twMerge(
    //             'w-full object-cover',
    //             type === 'hero'
    //               ? 'col-span-2 aspect-[174/100]'
    //               : 'aspect-[5/4] rounded-md',
    //           )}
    //           src={featured}
    //           alt={title}
    //         />
    //         <div
    //           className={twMerge(
    //             'flex flex-col justify-between',
    //             type === 'hero' ? 'gap-7' : 'gap-4',
    //           )}
    //         >
    //           <div className={`${type === 'hero' ? 'hidden' : ''} `}>
    //             {tags?.map((item, index) => (
    //               <span
    //                 key={index}
    //                 className="my-3 mr-2 inline-block rounded bg-gray-200 px-3 py-1"
    //               >
    //                 {item}
    //               </span>
    //             ))}
    //           </div>

    //           <div>
    //             <h3
    //               className={twMerge(
    //                 'mt-2 w-full font-bold lg:mt-0',
    //                 type === 'hero'
    //                   ? 'text-2xl sm:text-4xl'
    //                   : 'text-xl sm:text-2xl',
    //               )}
    //             >
    //               {title}
    //             </h3>
    //             <p className="text-md mt-5 text-[#777777] sm:text-xl">
    //               {content}
    //             </p>
    //           </div>
    //           <Button
    //             size="block"
    //             as={Link}
    //             to={`detail/${slug}`}
    //             className={twMerge('', type === 'hero' ? '' : 'mb-5')}
    //           >
    //             View More
    //           </Button>
    //         </div>
    //       </div>
    //     ))}
    //   </div>
    //   {hasCategory && (
    //     <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}
    //         />
    //         <CarouselNextIcon
    //           color="#2E2F7C"
    //           className="cursor-pointer"
    //           width={45}
    //           height={45}
    //         />
    //       </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>
        {!hasCategory && (
          <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={twMerge(
          'grid sm:gap-x-8',
          type === 'hero' ? 'grid-cols-1' : 'sm:grid-cols-3',
        )}
      >
        {items
          .slice(currentIndex * itemsPerPage, (currentIndex + 1) * itemsPerPage)
          .map(({ featured, title, content, tags, slug }, index) => (
            <div
              key={index}
              className={twMerge(
                'grid sm:gap-x-8',
                type === 'hero' ? 'grid-cols-1 sm:grid-cols-3' : '',
              )}
            >
              <img
                className={twMerge(
                  'w-full object-cover',
                  type === 'hero'
                    ? 'col-span-2 aspect-[174/100]'
                    : 'aspect-[5/4] rounded-md',
                )}
                src={featured}
                alt={title}
              />
              <div
                className={twMerge(
                  'flex flex-col justify-between',
                  type === 'hero' ? 'gap-7' : 'gap-4',
                )}
              >
                <div className={`${type === 'hero' ? 'hidden' : ''} `}>
                  {tags?.map((item, index) => (
                    <span
                      key={index}
                      className="my-3 mr-2 inline-block rounded bg-gray-200 px-3 py-1"
                    >
                      {item}
                    </span>
                  ))}
                </div>

                <div>
                  <h3
                    className={twMerge(
                      'mt-2 w-full font-bold lg:mt-0',
                      type === 'hero'
                        ? 'text-2xl sm:text-4xl'
                        : 'text-xl sm:text-2xl',
                    )}
                  >
                    {title}
                  </h3>
                  <p className="text-md mt-5 text-[#777777] sm:text-xl">
                    {content}
                  </p>
                </div>
                <Button
                  size="block"
                  as={Link}
                  to={`detail/${slug}`}
                  className={twMerge('', type === 'hero' ? '' : 'mb-5')}
                >
                  View More
                </Button>
              </div>
            </div>
          ))}
      </div>

      {hasCategory && (
        <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>
  )
}