refactor: clean up Carousel component by removing commented-out code

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,10 +9,23 @@ 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]">
@@ -30,84 +44,90 @@ 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
-          <div
+          .slice(currentIndex * itemsPerPage, (currentIndex + 1) * itemsPerPage)
-            key={index}
+          .map(({ featured, title, content, tags, slug }, 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
+              key={index}
               className={twMerge(
-                'flex flex-col justify-between',
+                'grid sm:gap-x-8',
-                type === 'hero' ? 'gap-7' : 'gap-4',
+                type === 'hero' ? 'grid-cols-1 sm:grid-cols-3' : '',
               )}
             >
-              <div className={`${type === 'hero' ? 'hidden' : ''} `}>
+              <img
-                {tags?.map((item, index) => (
+                className={twMerge(
-                  <span
+                  'w-full object-cover',
-                    key={index}
+                  type === 'hero'
-                    className="my-3 mr-2 inline-block rounded bg-gray-200 px-3 py-1"
+                    ? 'col-span-2 aspect-[174/100]'
-                  >
+                    : 'aspect-[5/4] rounded-md',
-                    {item}
+                )}
-                  </span>
+                src={featured}
-                ))}
+                alt={title}
-              </div>
+              />
-
+              <div
-              <div>
+                className={twMerge(
-                <h3
+                  'flex flex-col justify-between',
-                  className={twMerge(
+                  type === 'hero' ? 'gap-7' : 'gap-4',
-                    '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
+                <div className={`${type === 'hero' ? 'hidden' : ''} `}>
-              </Button>
+                  {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>
+          ))}
-        ))}
       </div>
+
       {hasCategory && (
         <div className="my-5 mt-5 flex flex-row-reverse">
           <div className="flex gap-2.5">
@@ -116,12 +136,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/components/ui/pagination.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { ChevronIcon } from '~/components/icons/chevron'
 import { ChevronDoubleIcon } from '~/components/icons/chevron-double'
 
-interface PaginationProperties {
+type PaginationProperties = {
   currentPage: number
   totalPages: number
   onPageChange: (page: number) => void

app/components/ui/title-dashboard.tsx

@@ -0,0 +1,13 @@
+type TitleDashboardProperties = {
+  title: string
+}
+export const TitleDashboard = (properties: TitleDashboardProperties) => {
+  const { title } = properties
+  return (
+    <div className="container mx-auto">
+      <div className="mb-5 flex items-center justify-between">
+        <h1 className="text-xl font-bold">{title}</h1>
+      </div>
+    </div>
+  )
+}

app/pages/dashboard-advertisements/index.tsx

@@ -0,0 +1,9 @@
+import { TitleDashboard } from '~/components/ui/title-dashboard'
+
+export const AdvertisementsPage = () => {
+  return (
+    <div className="relative">
+      <TitleDashboard title="Advertisement" />
+    </div>
+  )
+}

app/pages/dashboard-users/index.tsx

@@ -2,6 +2,7 @@ import { Field, Input, Label, Select } from '@headlessui/react'
 
 import { SearchIcon } from '~/components/icons/search'
 import { Pagination } from '~/components/ui/pagination'
+import { TitleDashboard } from '~/components/ui/title-dashboard'
 
 import { USERS } from './data'
 
@@ -19,11 +20,7 @@ export const UsersPage = () => {
 
   return (
     <div className="relative">
-      <div className="container mx-auto">
+      <TitleDashboard title="Users" />
-        <section className="mb-5 flex items-center justify-between">
-          <h1 className="text-xl font-bold">User</h1>
-        </section>
-      </div>
       {/* filter section */}
 
       <div className="mb-8 flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">

app/pages/news-detail/data.ts

@@ -2,39 +2,34 @@ import type { TNews, TNewsDetail } from '~/types/news'
 
 export const CONTENT: TNewsDetail = {
   title: 'Hotman Paris Membuka Perpustakaan di tengah Diskotik',
-  content: `<div class="container">
+  content: `  <section>
-        <h1>Pengertian dan Jenis Hukum</h1><p>Hukum adalah sistem aturan yang dibuat dan ditegakkan oleh lembaga berwenang untuk mengatur perilaku manusia dalam masyarakat. Hukum bertujuan untuk menciptakan ketertiban, keadilan, dan keseimbangan dalam kehidupan sosial.</p>
+        <h1>Introduction</h1>
-        
+    </secti>
-        <h2>Jenis-Jenis Hukum</h2>
+    <section>
-        <h3>1. Hukum Berdasarkan Sumbernya</h3>
+        <p>Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis montes, sit sit. Tellus aliquam enim urna, etiam. Mauris posuere vulputate arcu amet, vitae nisi, tellus tincidunt. At feugiat sapien varius id.</p>
-        <ul>
+        <p>Eget quis mi enim, leo lacinia pharetra, semper. Eget in volutpat mollis at volutpat lectus velit, sed auctor. Porttitor fames arcu quis fusce augue enim. Quis at habitant diam at. Suscipit tristique risus, at donec. In turpis vel et quam imperdiet. Ipsum molestie aliquet sodales id est ac volutpat.</p>
-            <li><strong>Hukum Undang-Undang:</strong> Hukum yang tertulis dan dibuat oleh pemerintah atau legislatif.</li>
+        <figure>
-            <li><strong>Hukum Kebiasaan:</strong> Hukum yang berkembang berdasarkan adat dan kebiasaan masyarakat.</li>
+            <img src="/images/dummy-image.png" alt="Image caption goes here">
-            <li><strong>Hukum Yurisprudensi:</strong> Hukum yang ditetapkan berdasarkan keputusan hakim sebelumnya.</li>
+            <figcaption>Image caption goes here</figcaption>
-            <li><strong>Hukum Traktat:</strong> Hukum yang berasal dari perjanjian antarnegara.</li>
+        </figure>
-        </ul>
+        <p>Dolor enim eu tortor urna sed duis nulla. Aliquam vestibulum, nulla odio nisl vitae. In aliquet pellentesque aenean hac vestibulum turpis mi bibendum diam. Tempor integer aliquam in vitae malesuada fringilla.</p>
-        
+        <blockquote>
-        <h3>2. Hukum Berdasarkan Wilayah Berlakunya</h3>
+            <p>"Ipsum sit mattis nulla quam nulla. Gravida id gravida ac enim mauris id. Non pellentesque congue eget consectetur turpis. Sapien, dictum molestie sem tempor. Diam elit, orci, tincidunt aenean tempus."</p>
-        <ul>
+        </blockquote>
-            <li><strong>Hukum Nasional:</strong> Hukum yang berlaku dalam suatu negara tertentu.</li>
+        <p>Tristique odio senectus nam posuere ornare leo metus, ultricies. Blandit duis ultricies vulputate morbi feugiat cras placerat elit. Aliquam tellus lorem sed ac. Montes, sed mattis pellentesque suscipit accumsan. Cursus viverra aenean magna risus elementum faucibus molestie pellentesque. Arcu ultricies sed mauris vestibulum.</p>
-            <li><strong>Hukum Internasional:</strong> Hukum yang mengatur hubungan antara negara-negara.</li>
+    </section>
-        </ul>
+    <section>
-        
+        <h2>Conclusion</h2>
-        <h3>3. Hukum Berdasarkan Isinya</h3>
+        <p>Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est ultricies ultricies. Duis est sit sed leo nisl, blandit elit sagittis. Quisque tristique consequat quam sed. Nisl at scelerisque amet nulla purus habitasse.</p>
-        <ul>
+        <p>Nunc sed faucibus bibendum feugiat sed interdum. Ipsum egestas condimentum mi massa. In tincidunt pharetra consectetur sed duis facilisis metus. Etiam egestas in nec sed et. Quis lobortis at sit dictum eget nibh tortor commodo cursus.</p>
-            <li><strong>Hukum Publik:</strong> Hukum yang mengatur hubungan antara negara dengan warga negara, termasuk hukum pidana, tata negara, dan administrasi.</li>
+        <p>Odio felis sagittis, morbi feugiat tortor vitae feugiat fusce aliquet. Nam elementum urna nisi aliquet erat dolor enim. Ornare id morbi eget ipsum. Aliquam senectus neque ut id eget consectetur dictum. Donec posuere pharetra odio consequat scelerisque et, nunc tortor. Nulla adipiscing erat a erat. Condimentum lorem posuere gravida enim posuere cursus diam.</p>
-            <li><strong>Hukum Privat:</strong> Hukum yang mengatur hubungan antarindividu, seperti hukum perdata dan dagang.</li>
+    </section>
-        </ul>
+    <section>       
-        
+            <span>MOM</span>
-        <h3>4. Hukum Berdasarkan Bentuknya</h3>
+            <span>FOOD</span>
-        <ul>
+            <span>BOOKS</span>
-            <li><strong>Hukum Tertulis:</strong> Hukum yang dicantumkan dalam peraturan resmi seperti undang-undang.</li>
+            <span>WORDPRESS</span>
-            <li><strong>Hukum Tidak Tertulis:</strong> Hukum yang hidup dalam masyarakat dan diakui oleh norma sosial.</li>
+    </section>`,
-        </ul>
-        
-        <h2>Kesimpulan</h2>
-        <p>Hukum memainkan peran penting dalam mengatur kehidupan masyarakat. Dengan adanya hukum, ketertiban dan keadilan dapat terwujud. Memahami jenis-jenis hukum membantu kita dalam mengetahui hak dan kewajiban sebagai warga negara.</p>
-    </div>`,
   featured: '/images/news-1.jpg',
   slug: 'hotman-paris-membuka-perpustakaan-di-tengah-diskotik',
   author: 'John Doe',

app/pages/news-detail/index.tsx

@@ -40,11 +40,15 @@ export const NewsDetailPage = () => {
             <img
               src={featured}
               alt={title}
-              className="object-center"
+              className="h-[600px] w-full object-cover object-center"
             />
           </div>
 
-          <article className="prose prose-stone">{htmlParse(content)}</article>
+          <div className="mt-8 flex items-center justify-center">
+            <article className="prose prose-stone">
+              {htmlParse(content)}
+            </article>
+          </div>
           <div className="flex items-end justify-between border-b-3 border-b-gray-300 py-4">
             <div className="flex flex-col">
               <p className="mb-2">Share this post</p>

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:

app/routes/_layout.admin.dashboard.advertisements.tsx

@@ -1,4 +1,6 @@
+import { AdvertisementsPage } from '~/pages/dashboard-advertisements'
+
 const DashboardAdvertisementsLayout = () => {
-  return <div>Advertisements Page</div>
+  return <AdvertisementsPage />
 }
 export default DashboardAdvertisementsLayout