modified: src/app/_components/carousel.tsx

	modified:   src/app/_components/tag.tsx
	modified:   src/app/_components/tagAction.tsx
	modified:   src/app/blog/page.tsx

Author: mukharomdev

src/app/_components/carousel.tsx

@@ -8,7 +8,7 @@ import 'slick-carousel/slick/slick-theme.css';
 const Carousel = ({children}:React.PropsWithChildren) => {
     const settings = {
         infinite: true,
-        slidesToShow: 2,
+        slidesToShow: 1,
         slidesToScroll: 1,
         autoplay: true,
         autoplaySpeed: 2000,

src/app/_components/tag.tsx

@@ -6,10 +6,9 @@ import React from 'react';
 type Props = {
   label: string;
   color:string;
-  slug: string;
   Close?: any;
 };
-export function handleClose(label:string) {
+export function handleClose(label?:string) {
   console.log(`Tag "${label}" closed!`);
   // Lakukan operasi server di sini, seperti memanggil API atau mengakses database.
 }
@@ -19,6 +18,7 @@ export const Tag = ({ label, color = 'bg-blue-500', Close }:Props) => {
         if (Close) {
           Close(label);
         }
+       
       };
 
 

src/app/_components/tagAction.tsx

@@ -1,15 +1,32 @@
+"use client"
+
 import {Tag,handleClose} from "@/app/_components/tag"
 
-type Props = {
+interface Tags {
   label: string;
-  color:string;
-  slug: string;
-  Close?: any;
-};
-
-export default function TagRelease(props:Props[]){
-  return(
-  <div>
-   {props.map(Tag)}
-  </div>)
-}
+  color: string;
+  Close?:any;
+}
+
+interface TagActionProps {
+  tags: Tags[];
+}
+
+
+export default function TagAction(props:TagActionProps){
+  if(!props.tags)return;
+  return (
+    <div>
+      {props.tags.map((tag,i) => (
+       
+        <Tag
+          key={i}
+          label={tag.label}
+          color={tag.color}
+          Close={handleClose}
+        />
+      ))
+    }
+    </div>
+  );
+};

src/app/blog/page.tsx

@@ -3,16 +3,27 @@ import { HeroPost } from "@/app/_components/hero-post";
 import { Intro } from "@/app/_components/intro";
 import { MoreStories } from "@/app/_components/more-stories";
 import { getAllPosts } from "@/lib/api";
-// import { handleClose } from '@/app/_components/tagAction';
+// import TagAction from '@/app/_components/tagAction';
+
+// interface Tag {
+//   label: string;
+//   color: string;
+//   Close?:any;
+// }
+
+// interface TagActionProps {
+//   tags: Tag[];
+// }
+
 
 export default function Index() {
   const allPosts = getAllPosts();
   const heroPost = allPosts[0];
   const morePosts = allPosts.slice(1);
   /* edit */
-  const label = allPosts.map(lbl=>lbl.title)
-  const color = ""
-  console.log(label[0])
+  //const Label= allPosts.map(lbl=>lbl.title)
+  
+ 
 
   return (
     <main>
@@ -27,10 +38,9 @@ export default function Index() {
           excerpt={heroPost.excerpt}
         />
         {morePosts.length > 0 && <MoreStories posts={morePosts} />}
-        {/* <Tag
-          label={label}
-          color={color?"bg-blue-500": ""}
-          Close={()=>handleClose(label)}
+        {/* <TagAction 
+            tags={Label}
+          
           /> */}
       </Container>
     </main>