app/components/ui/carousel.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react'
 import { Link, useLocation } from 'react-router'
 import { twMerge } from 'tailwind-merge'
 
@@ -9,23 +8,10 @@ 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]">
@@ -44,90 +30,84 @@ 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:gap-x-8',
+          'grid sm:grid sm:gap-x-8',
           type === 'hero' ? 'grid-cols-1' : 'sm:grid-cols-3',
         )}
       >
-        {items
+        {items.map(({ featured, title, content, tags, slug }, index) => (
-          .slice(currentIndex * itemsPerPage, (currentIndex + 1) * itemsPerPage)
+          <div
-          .map(({ featured, title, content, tags, slug }, index) => (
+            key={index}
-            <div
+            className={twMerge(
-              key={index}
+              'grid sm:gap-x-8',
+              type === 'hero' ? 'grid-cols-1 sm:grid-cols-3' : '',
+            )}
+          >
+            <img
               className={twMerge(
-                'grid sm:gap-x-8',
+                'w-full object-cover',
-                type === 'hero' ? 'grid-cols-1 sm:grid-cols-3' : '',
+                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',
               )}
             >
-              <img
+              <div className={`${type === 'hero' ? 'hidden' : ''} `}>
-                className={twMerge(
+                {tags?.map((item, index) => (
-                  'w-full object-cover',
+                  <span
-                  type === 'hero'
+                    key={index}
-                    ? 'col-span-2 aspect-[174/100]'
+                    className="my-3 mr-2 inline-block rounded bg-gray-200 px-3 py-1"
-                    : '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}
+                    {item}
-                  </h3>
+                  </span>
-                  <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>
+                <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">
@@ -136,14 +116,12 @@ 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'
 
-type PaginationProperties = {
+interface PaginationProperties {
   currentPage: number
   totalPages: number
   onPageChange: (page: number) => void

app/components/ui/title-dashboard.tsx

@@ -1,13 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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,7 +2,6 @@ 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'
 
@@ -20,7 +19,11 @@ export const UsersPage = () => {
 
   return (
     <div className="relative">
-      <TitleDashboard title="Users" />
+      <div className="container mx-auto">
+        <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,34 +2,39 @@ import type { TNews, TNewsDetail } from '~/types/news'
 
 export const CONTENT: TNewsDetail = {
   title: 'Hotman Paris Membuka Perpustakaan di tengah Diskotik',
-  content: `  <section>
+  content: `<div class="container">
-        <h1>Introduction</h1>
+        <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>
-    </secti>
+        
-    <section>
+        <h2>Jenis-Jenis Hukum</h2>
-        <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>
+        <h3>1. Hukum Berdasarkan Sumbernya</h3>
-        <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>
+        <ul>
-        <figure>
+            <li><strong>Hukum Undang-Undang:</strong> Hukum yang tertulis dan dibuat oleh pemerintah atau legislatif.</li>
-            <img src="/images/dummy-image.png" alt="Image caption goes here">
+            <li><strong>Hukum Kebiasaan:</strong> Hukum yang berkembang berdasarkan adat dan kebiasaan masyarakat.</li>
-            <figcaption>Image caption goes here</figcaption>
+            <li><strong>Hukum Yurisprudensi:</strong> Hukum yang ditetapkan berdasarkan keputusan hakim sebelumnya.</li>
-        </figure>
+            <li><strong>Hukum Traktat:</strong> Hukum yang berasal dari perjanjian antarnegara.</li>
-        <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>
+        </ul>
-        <blockquote>
+        
-            <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>
+        <h3>2. Hukum Berdasarkan Wilayah Berlakunya</h3>
-        </blockquote>
+        <ul>
-        <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 Nasional:</strong> Hukum yang berlaku dalam suatu negara tertentu.</li>
-    </section>
+            <li><strong>Hukum Internasional:</strong> Hukum yang mengatur hubungan antara negara-negara.</li>
-    <section>
+        </ul>
-        <h2>Conclusion</h2>
+        
-        <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>
+        <h3>3. Hukum Berdasarkan Isinya</h3>
-        <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>
+        <ul>
-        <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 Publik:</strong> Hukum yang mengatur hubungan antara negara dengan warga negara, termasuk hukum pidana, tata negara, dan administrasi.</li>
-    </section>
+            <li><strong>Hukum Privat:</strong> Hukum yang mengatur hubungan antarindividu, seperti hukum perdata dan dagang.</li>
-    <section>       
+        </ul>
-            <span>MOM</span>
+        
-            <span>FOOD</span>
+        <h3>4. Hukum Berdasarkan Bentuknya</h3>
-            <span>BOOKS</span>
+        <ul>
-            <span>WORDPRESS</span>
+            <li><strong>Hukum Tertulis:</strong> Hukum yang dicantumkan dalam peraturan resmi seperti undang-undang.</li>
-    </section>`,
+            <li><strong>Hukum Tidak Tertulis:</strong> Hukum yang hidup dalam masyarakat dan diakui oleh norma sosial.</li>
+        </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,15 +40,11 @@ export const NewsDetailPage = () => {
             <img
               src={featured}
               alt={title}
-              className="h-[600px] w-full object-cover object-center"
+              className="object-center"
             />
           </div>
 
-          <div className="mt-8 flex items-center justify-center">
+          <article className="prose prose-stone">{htmlParse(content)}</article>
-            <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,21 +6,7 @@ export const SPOTLIGHT: TNews = {
   type: 'hero',
   items: [
     {
-      title: '01 Hotman Paris Membuka Perpustakaan di tengah Diskotik',
+      title: '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',
@@ -34,36 +20,11 @@ export const BERITA: TNews = {
   description: 'Berita Terhangat hari ini',
   type: 'grid',
   items: [
-    {
-      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',
+      featured: '/images/news-2.jpg',
       tags: ['Hukum Property'],
       slug: 'travelling-as-a-way-of-self-discovery-and-progress',
     },
@@ -100,14 +61,6 @@ 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,6 +1,4 @@
-import { AdvertisementsPage } from '~/pages/dashboard-advertisements'
-
 const DashboardAdvertisementsLayout = () => {
-  return <AdvertisementsPage />
+  return <div>Advertisements Page</div>
 }
 export default DashboardAdvertisementsLayout