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

import { Suspense } from 'react'
import { Await, useRouteLoaderData } from 'react-router'
import { stripHtml } from 'string-strip-html'
import { twMerge } from 'tailwind-merge'

import { ErrorAwait } from '~/components/error/await'
import { CarouselNextIcon } from '~/components/icons/carousel-next'
import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
import { ImageSkeletonIcon } from '~/components/icons/image-skeleton'
import { Button } from '~/components/ui/button'
import { useNewsContext } from '~/contexts/news'
import type { loader } from '~/routes/_news'
import type { TNews } from '~/types/news'
import { getPremiumAttribute } from '~/utils/render'

import { Tags } from './tags'

export const CategorySection = (properties: TNews) => {
  const { setIsSuccessOpen } = useNewsContext()
  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
  const { userData } = loaderData || {}

  const { title, description, items } = properties

  const nextSlide = () => {
    // patch data next page
  }

  const previousSlide = () => {
    // patch previous page
  }

  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>

      <div className="grid sm:grid-cols-3 sm:gap-x-8">
        <Suspense
          fallback={Array.from({ length: 3 }).map((_, index) => (
            <div
              key={index}
              className="grid gap-3 sm:gap-x-8"
            >
              <div className="flex h-[280px] w-full items-center justify-center rounded-md bg-gray-300 dark:bg-gray-700">
                <ImageSkeletonIcon />
              </div>
              <div className="flex w-full flex-col gap-4">
                <div className="flex flex-col gap-4">
                  <div className="h-6 w-full rounded-full bg-gray-200 dark:bg-gray-700"></div>
                  <div className="h-6 w-[20%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
                </div>
                <div className="flex flex-col gap-2.5">
                  <div className="h-5 max-w-[80%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
                  <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
                  <div className="h-5 max-w-[50%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
                </div>
              </div>
              <div className="h-[50px] w-full bg-gray-200 dark:bg-gray-700" />
              <span className="sr-only">Loading...</span>
            </div>
          ))}
        >
          <Await
            resolve={items}
            errorElement={<ErrorAwait />}
          >
            {(value) =>
              value.data.map(
                (
                  { featured_image, title, content, tags, slug, is_premium },
                  index,
                ) => (
                  <div
                    key={index}
                    className="grid gap-3 sm:gap-x-8"
                  >
                    <img
                      className="aspect-[174/100] w-full rounded-md object-cover sm:aspect-[5/4]"
                      src={featured_image}
                      alt={title}
                    />
                    <div className="flex flex-col justify-between gap-4">
                      <Tags
                        tags={tags}
                        is_premium={is_premium}
                      />

                      <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 line-clamp-3 text-[#777777] sm:text-xl">
                          {stripHtml(content).result}
                        </p>
                      </div>
                      <Button
                        size="block"
                        {...getPremiumAttribute({
                          isPremium: is_premium,
                          slug,
                          onClick: () => setIsSuccessOpen('warning'),
                          userData,
                        })}
                        className="mb-5"
                      >
                        View More
                      </Button>
                    </div>
                  </div>
                ),
              )
            }
          </Await>
        </Suspense>
      </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>
  )
}