From aaba2071659b6b96b24fd461a8b81be2ef76c879 Mon Sep 17 00:00:00 2001
From: "fredy.siswanto" <fredy.siswanto@komunal.co.id>
Date: Sun, 2 Mar 2025 12:15:31 +0700
Subject: [PATCH] feat: add KAJIAN section to news page and update content
 structure

---
 app/components/ui/carousel-section.tsx | 176 +------------------------
 app/data/contents.ts                   |  32 ++++-
 app/pages/news-detail/index.tsx        |   7 +-
 app/pages/news/index.tsx               |  13 +-
 4 files changed, 43 insertions(+), 185 deletions(-)

diff --git a/app/components/ui/carousel-section.tsx b/app/components/ui/carousel-section.tsx
index 0597254..a348b91 100644
--- a/app/components/ui/carousel-section.tsx
+++ b/app/components/ui/carousel-section.tsx
@@ -1,7 +1,6 @@
 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'
@@ -55,21 +54,21 @@ 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] sm:gap-x-8">
           {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">
+                <div className="flex flex-col justify-between">
                   <img
-                    className="aspect-[5/4] max-h-[300px] w-full rounded-md object-cover"
+                    className="aspect-[5/4] max-h-[280px] w-full rounded-md object-cover"
                     src={featured}
                     alt={title}
                   />
                   <div className={'flex flex-col justify-between gap-4'}>
-                    <div className={'flex uppercase'}>
+                    <div className={'flex text-sm uppercase'}>
                       {tags?.map((item) => (
                         <span
                           key={index}
@@ -102,7 +101,7 @@ export const CarouselSection = (properties: TNews) => {
                             },
                             to: '',
                           }
-                        : { as: Link, to: `/news/detail/${slug}` })}
+                        : { as: Link, to: `/detail/${slug}` })}
                       className="mb-5"
                     >
                       View More
@@ -112,173 +111,8 @@ 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/data/contents.ts b/app/data/contents.ts
index 2606211..cb2233b 100644
--- a/app/data/contents.ts
+++ b/app/data/contents.ts
@@ -89,29 +89,47 @@ export const BERITA: TNews = {
 
 export const KAJIAN: TNews = {
   title: 'KAJIAN',
-  description: 'Berita Terhangat hari ini',
+  description: 'Berita Terhangat hari ini ',
   type: 'grid',
   items: [
     {
-      title: 'Travelling as a way of self-discovery and progress',
+      title: 'Travelling as a way of self-discovery and progress ',
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       featured: '/images/news-2.jpg',
       tags: ['Hukum Property'],
       isPremium: true,
-      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
+      slug: 'travelling-as-a-way-of-self-discovery-and-progress ',
     },
     {
-      title: 'Travelling as a way of self-discovery and progress',
+      title: 'Travelling as a way of self-discovery and progress ',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      featured: '/images/news-2.jpg',
+      tags: ['Hukum Property'],
+      isPremium: true,
+      slug: 'travelling-as-a-way-of-self-discovery-and-progress ',
+    },
+    {
+      title: 'Travelling as a way of self-discovery and progress ',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      featured: '/images/news-2.jpg',
+      tags: ['Hukum Property'],
+      isPremium: true,
+      slug: 'travelling-as-a-way-of-self-discovery-and-progress ',
+    },
+    {
+      title: 'Travelling as a way of self-discovery and progress ',
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       featured: 'https://placehold.co/600x400.png',
       tags: ['Hukum Property'],
       isPremium: true,
-      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
+      slug: 'travelling-as-a-way-of-self-discovery-and-progress ',
     },
     {
-      title: 'How does writing influence your personal brand?',
+      title: 'How does writing influence your personal brand? ',
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       featured: '/images/news-3.jpg',
@@ -120,7 +138,7 @@ export const KAJIAN: TNews = {
       slug: 'how-does-writing-influence-your-personal-brand',
     },
     {
-      title: 'Helping a local business reinvent itself',
+      title: 'Helping a local business reinvent itself ',
       content:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
       featured: '/images/news-4.jpg',
diff --git a/app/pages/news-detail/index.tsx b/app/pages/news-detail/index.tsx
index eea5db5..954d239 100644
--- a/app/pages/news-detail/index.tsx
+++ b/app/pages/news-detail/index.tsx
@@ -4,13 +4,14 @@ import { Breadcrumb } from '~/components/ui/breadcrumb'
 import { Card } from '~/components/ui/card'
 import { CarouselSection } from '~/components/ui/carousel-section'
 import { IconsSocial } from '~/components/ui/social-share'
+import { BERITA } from '~/data/contents'
 
-import { BERITA, CONTENT } from './data'
+import { CONTENT } from './data'
 
 export const NewsDetailPage = () => {
   const { title, content, featured, slug, author, date, tags } = CONTENT
   return (
-    <div className="relative mx-5 sm:mx-10">
+    <div className="sm-max:mx-5 relative">
       <Card>
         <div className="py-5 sm:px-30">
           <Breadcrumb slug={slug} />
@@ -80,7 +81,7 @@ export const NewsDetailPage = () => {
         </div>
       </Card>
 
-      <Card className="hidden sm:block">
+      <Card className="bg-white p-5 max-sm:hidden">
         <CarouselSection {...BERITA} />
       </Card>
     </div>
diff --git a/app/pages/news/index.tsx b/app/pages/news/index.tsx
index 9004fcb..4ca0737 100644
--- a/app/pages/news/index.tsx
+++ b/app/pages/news/index.tsx
@@ -2,7 +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 { BERITA, SPOTLIGHT } from '~/data/contents'
+import { BERITA, KAJIAN, SPOTLIGHT } from '~/data/contents'
 
 export const NewsPage = () => {
   return (
@@ -13,9 +13,14 @@ export const NewsPage = () => {
       <div className="min-h-[400px] sm:min-h-[300px]">
         <Newsletter className="mr-0 sm:-ml-14" />
       </div>
-      <Card>
-        <CarouselSection {...BERITA} />
-      </Card>
+      <div>
+        <Card>
+          <CarouselSection {...BERITA} />
+        </Card>
+        <Card>
+          <CarouselSection {...KAJIAN} />
+        </Card>
+      </div>
     </div>
   )
 }