feat: implement CategorySection component and update carousel usage in news pages

2025-03-01 15:44:23 +07:00
parent 422f3fcba5
commit a749759164
5 changed files with 295 additions and 7 deletions
@@ -0,0 +1,123 @@
+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 CategorySection = (properties: TNews) => {
+  const { setIsSuccessOpen } = useNewsContext()
+
+  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">
+        {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>
+  )
+}