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

2025-02-04 00:51:59 +08:00
parent 7b498173fe
commit a0f37af772
8 changed files with 113 additions and 4 deletions
@@ -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>
+  )
 }