From a74975916455575e8d61825d263e8cb85fe94bae Mon Sep 17 00:00:00 2001
From: "fredy.siswanto" <fredy.siswanto@komunal.co.id>
Date: Sat, 1 Mar 2025 15:44:23 +0700
Subject: [PATCH] feat: implement CategorySection component and update carousel
 usage in news pages

---
 app/app.css                            |   4 +-
 app/components/ui/carousel-section.tsx | 168 ++++++++++++++++++++++++-
 app/components/ui/category-section.tsx | 123 ++++++++++++++++++
 app/pages/news-categories/index.tsx    |   4 +-
 app/pages/news/index.tsx               |   3 +-
 5 files changed, 295 insertions(+), 7 deletions(-)
 create mode 100644 app/components/ui/category-section.tsx

diff --git a/app/app.css b/app/app.css
index 4ef6f59..99be541 100644
--- a/app/app.css
+++ b/app/app.css
@@ -41,7 +41,7 @@ table.dataTable tbody > tr > td {
   min-width: 0;
 } */
 
-.embla__slide {
+/* .embla__slide {
   margin-right: 10px;
   flex: 0 0 auto;
   min-width: 0;
@@ -51,4 +51,4 @@ table.dataTable tbody > tr > td {
   .embla__slide {
     margin-right: 30px;
   }
-}
+} */
diff --git a/app/components/ui/carousel-section.tsx b/app/components/ui/carousel-section.tsx
index ebdda2c..0597254 100644
--- a/app/components/ui/carousel-section.tsx
+++ b/app/components/ui/carousel-section.tsx
@@ -1,6 +1,7 @@
 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'
@@ -54,7 +55,7 @@ export const CarouselSection = (properties: TNews) => {
         className="embla overflow-hidden"
         ref={emblaReference}
       >
-        <div className="embla__container col-span-3 flex max-h-[586px]">
+        {/* <div className="embla__container col-span-3 flex max-h-[586px]">
           {items.map(
             ({ featured, title, content, tags, slug, isPremium }, index) => (
               <div
@@ -111,8 +112,173 @@ export const CarouselSection = (properties: TNews) => {
               </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>
   )
 }
diff --git a/app/components/ui/category-section.tsx b/app/components/ui/category-section.tsx
new file mode 100644
index 0000000..fce4512
--- /dev/null
+++ b/app/components/ui/category-section.tsx
@@ -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>
+  )
+}
diff --git a/app/pages/news-categories/index.tsx b/app/pages/news-categories/index.tsx
index 6e754cd..1e8768d 100644
--- a/app/pages/news-categories/index.tsx
+++ b/app/pages/news-categories/index.tsx
@@ -1,5 +1,5 @@
 import { Card } from '~/components/ui/card'
-import { Carousel } from '~/components/ui/carousel'
+import { CategorySection } from '~/components/ui/category-section'
 
 import { BERITA } from './data'
 
@@ -7,7 +7,7 @@ export const NewsCategoriesPage = () => {
   return (
     <div className="relative">
       <Card>
-        <Carousel {...BERITA} />
+        <CategorySection {...BERITA} />
       </Card>
     </div>
   )
diff --git a/app/pages/news/index.tsx b/app/pages/news/index.tsx
index f4b95d0..9004fcb 100644
--- a/app/pages/news/index.tsx
+++ b/app/pages/news/index.tsx
@@ -2,8 +2,7 @@ import { Card } from '~/components/ui/card'
 import { CarouselHero } from '~/components/ui/carousel-hero'
 import { CarouselSection } from '~/components/ui/carousel-section'
 import { Newsletter } from '~/components/ui/newsletter'
-
-import { SPOTLIGHT, BERITA } from './data'
+import { BERITA, SPOTLIGHT } from '~/data/contents'
 
 export const NewsPage = () => {
   return (