feat: update news items with new titles, content, and slugs for improved organization

app/components/ui/carousel.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { Link, useLocation } from 'react-router'
 import { twMerge } from 'tailwind-merge'
 
@@ -8,11 +9,139 @@ 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">
@@ -30,23 +159,28 @@ export const Carousel = (properties: TNews) => {
               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:grid sm:gap-x-8',
+          'grid sm:gap-x-8',
           type === 'hero' ? 'grid-cols-1' : 'sm:grid-cols-3',
         )}
       >
-        {items.map(({ featured, title, content, tags, slug }, index) => (
+        {items
+          .slice(currentIndex * itemsPerPage, (currentIndex + 1) * itemsPerPage)
+          .map(({ featured, title, content, tags, slug }, index) => (
             <div
               key={index}
               className={twMerge(
@@ -108,6 +242,7 @@ export const Carousel = (properties: TNews) => {
             </div>
           ))}
       </div>
+
       {hasCategory && (
         <div className="my-5 mt-5 flex flex-row-reverse">
           <div className="flex gap-2.5">
@@ -116,12 +251,14 @@ export const Carousel = (properties: TNews) => {
               className="cursor-pointer"
               width={45}
               height={45}
+              onClick={previousSlide}
             />
             <CarouselNextIcon
               color="#2E2F7C"
               className="cursor-pointer"
               width={45}
               height={45}
+              onClick={nextSlide}
             />
           </div>
         </div>

app/pages/news/data.ts

@@ -6,7 +6,21 @@ export const SPOTLIGHT: TNews = {
   type: 'hero',
   items: [
     {
-      title: 'Hotman Paris Membuka Perpustakaan di tengah Diskotik',
+      title: '01 Hotman Paris Membuka Perpustakaan di tengah Diskotik',
+      content:
+        'Pengacara Kondang, Hotman Paris Hutapea, membuka sebuah perpustakaan baru di dalam diskotik nya yang berlokasi di daerah Jakarta Pusat, Hotman berkata Perpustakaan ini dibuka dengan harapan untuk meningkatkan gairah membaca masyarakat Indonesia, namun sayangnya..',
+      featured: '/images/news-1.jpg',
+      slug: 'hotman-paris-membuka-perpustakaan-di-tengah-diskotik',
+    },
+    {
+      title: '02 Travelling as a way of self-discovery and progress',
+      content:
+        'Pengacara Kondang, Hotman Paris Hutapea, membuka sebuah perpustakaan baru di dalam diskotik nya yang berlokasi di daerah Jakarta Pusat, Hotman berkata Perpustakaan ini dibuka dengan harapan untuk meningkatkan gairah membaca masyarakat Indonesia, namun sayangnya..',
+      featured: 'https://placehold.co/600x400.png',
+      slug: 'hotman-paris-membuka-perpustakaan-di-tengah-diskotik',
+    },
+    {
+      title: '03 Travelling as a way of self-discovery and progress',
       content:
         'Pengacara Kondang, Hotman Paris Hutapea, membuka sebuah perpustakaan baru di dalam diskotik nya yang berlokasi di daerah Jakarta Pusat, Hotman berkata Perpustakaan ini dibuka dengan harapan untuk meningkatkan gairah membaca masyarakat Indonesia, namun sayangnya..',
       featured: '/images/news-1.jpg',
@@ -21,13 +35,38 @@ export const BERITA: TNews = {
   type: 'grid',
   items: [
     {
-      title: 'Travelling as a way of self-discovery and progress',
+      title: '01 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'],
       slug: 'travelling-as-a-way-of-self-discovery-and-progress',
     },
+    {
+      title: '02 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',
+      tags: ['Hukum'],
+      slug: 'how-does-writing-influence-your-personal-brand',
+    },
+    {
+      title: '03 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',
+      tags: ['Hukum Property', 'PREMIUM CONTENT'],
+      isPremium: true,
+      slug: 'helping-a-local-business-reinvent-itself',
+    },
+    {
+      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'],
+      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
+    },
     {
       title: 'How does writing influence your personal brand?',
       content:
@@ -61,6 +100,14 @@ export const KAJIAN: TNews = {
       tags: ['Hukum Property', 'PREMIUM CONTENT'],
       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', 'PREMIUM CONTENT'],
+      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
+    },
     {
       title: 'How does writing influence your personal brand?',
       content: