feat: enhance Carousel component with dynamic data and new TNews type

app/components/ui/carousel.tsx

@@ -1,3 +1,31 @@
-export const Carousel = () => {
-  return <div>Carousel</div>
+import { twMerge } from 'tailwind-merge'
+
+import type { TNews } from '~/types/news'
+
+export const Carousel = (properties: TNews) => {
+  const { title, description, items, type } = properties
+  return (
+    <div>
+      <div>
+        <h2>{title}</h2>
+        <p>{description}</p>
+      </div>
+      <div
+        className={twMerge(
+          type === 'hero' ? 'grid grid-cols-1' : 'grid grid-cols-3',
+        )}
+      >
+        {items.map(({ image, title, content }, index) => (
+          <div key={index}>
+            <img
+              src={image}
+              alt={title}
+            />
+            <h3>{title}</h3>
+            <p>{content}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
 }

app/pages/news/data.ts

@@ -0,0 +1,67 @@
+import type { TNews } from '~/types/news'
+
+export const SPOTLIGHT: TNews = {
+  title: 'SPOTLIGHT',
+  description: 'Berita Terhangat hari ini',
+  type: 'hero',
+  items: [
+    {
+      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..',
+      image: '/images/news-1.jpg',
+    },
+  ],
+}
+
+export const BERITA: TNews = {
+  title: 'BERITA',
+  description: 'Berita Terhangat hari ini',
+  type: 'grid',
+  items: [
+    {
+      title: 'Travelling as a way of self-discovery and progress',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      image: '/images/news-2.jpg',
+    },
+    {
+      title: 'How does writing influence your personal brand?',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      image: '/images/news-3.jpg',
+    },
+    {
+      title: 'Helping a local business reinvent itself',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      image: '/images/news-4.jpg',
+    },
+  ],
+}
+
+export const KAJIAN: TNews = {
+  title: 'KAJIAN',
+  description: 'Berita Terhangat hari ini',
+  type: 'grid',
+  items: [
+    {
+      title: 'Travelling as a way of self-discovery and progress',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      image: '/images/news-2.jpg',
+    },
+    {
+      title: 'How does writing influence your personal brand?',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      image: '/images/news-3.jpg',
+    },
+    {
+      title: 'Helping a local business reinvent itself',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      image: '/images/news-4.jpg',
+    },
+  ],
+}

app/pages/news/index.tsx

@@ -1,17 +1,21 @@
 import { Card } from '~/components/ui/card'
 import { Carousel } from '~/components/ui/carousel'
 
+import { BERITA, KAJIAN, SPOTLIGHT } from './data'
 import { Newsletter } from './newsletter'
 
 export const NewsPage = () => {
   return (
     <div className="relative">
       <Card>
-        <Carousel />
+        <Carousel {...SPOTLIGHT} />
       </Card>
       <Newsletter />
       <Card>
-        <Carousel />
+        <Carousel {...BERITA} />
+      </Card>
+      <Card>
+        <Carousel {...KAJIAN} />
       </Card>
     </div>
   )

app/types/news.ts

@@ -0,0 +1,10 @@
+export type TNews = {
+  title: string
+  description: string
+  type: 'hero' | 'grid'
+  items: {
+    title: string
+    content: string
+    image: string
+  }[]
+}