modified: package.json

	modified:   pnpm-lock.yaml
	new file:   src/app/_components/carousel.tsx
	modified:   src/app/_components/container.tsx
	modified:   src/app/_components/more-stories.tsx
	new file:   src/app/_components/tag.tsx
	new file:   src/app/_components/tagAction.tsx
	modified:   src/app/blog/page.tsx

Author: mukharomdev

package.json

@@ -22,10 +22,12 @@
     "react-dom": "^19.0.0",
     "react-emoji-render": "^2.0.1",
     "react-icons": "^5.5.0",
+    "react-slick": "^0.30.3",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.1",
     "remark-html": "^16.0.1",
     "remark-parse": "^11.0.0",
+    "slick-carousel": "^1.8.1",
     "unified": "^11.0.5"
   },
   "devDependencies": {
@@ -34,6 +36,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@types/react-slick": "^0.23.13",
     "eslint": "^9",
     "eslint-config-next": "15.1.7",
     "postcss": "^8",

pnpm-lock.yaml

@@ -0,0 +1,26 @@
+// components/Carousel.js
+"use client"
+import React from 'react';
+import Slider from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+
+const Carousel = ({children}:React.PropsWithChildren) => {
+    const settings = {
+        infinite: true,
+        slidesToShow: 2,
+        slidesToScroll: 1,
+        autoplay: true,
+        autoplaySpeed: 2000,
+        rtl: true
+      };
+  return (
+    <div className="slider-container">
+      <Slider {...settings}>
+        {children}
+      </Slider>
+    </div>
+  );
+};
+
+export default Carousel;

src/app/_components/carousel.tsx

@@ -3,7 +3,7 @@ type Props = {
 };
 
 const Container = ({ children }: Props) => {
-  return <div className="container mx-auto px-5">{children}</div>;
+  return <div className=" mx-auto px-5">{children}</div>;
 };
 
 export default Container;

src/app/_components/container.tsx

@@ -1,5 +1,6 @@
 import { Post } from "@/interfaces/post";
 import { PostPreview } from "./post-preview";
+import Carousel from "./carousel"
 
 type Props = {
   posts: Post[];
@@ -14,7 +15,8 @@ export function MoreStories({ posts }: Props) {
       {/* update pertama */}
       {/* <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">     */}
       {/* update kedua */}
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
+    <Carousel>
+    {/* <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4"> */}
      {posts.map((post) => (
           <PostPreview
             key={post.slug}
@@ -26,7 +28,8 @@ coverImage={post.coverImage}
             excerpt={post.excerpt}            
           />
         ))}
-       </div>
+       {/* </div> */}
+      </Carousel>
     </section>
   );
 }

src/app/_components/more-stories.tsx

@@ -0,0 +1,36 @@
+// components/Tag.js
+"use client"
+import React from 'react';
+
+
+type Props = {
+  label: string;
+  color:string;
+  slug: string;
+  Close?: any;
+};
+export function handleClose(label:string) {
+  console.log(`Tag "${label}" closed!`);
+  // Lakukan operasi server di sini, seperti memanggil API atau mengakses database.
+}
+
+export const Tag = ({ label, color = 'bg-blue-500', Close }:Props) => {
+    const handleClick = () => {
+        if (Close) {
+          Close(label);
+        }
+      };
+    
+    
+  return (
+    <div className={`inline-flex items-center ${color} text-white px-2 py-1 rounded-md text-sm mr-2`}>
+      {label}
+      {Close && (
+        <button className="ml-2 text-white hover:text-gray-200" onClick={handleClick}>
+          &times;
+        </button>
+      )}
+    </div>
+  );
+};
+

src/app/_components/tag.tsx

@@ -0,0 +1,15 @@
+import {Tag,handleClose} from "@/app/_components/tag"
+
+type Props = {
+  label: string;
+  color:string;
+  slug: string;
+  Close?: any;
+};
+
+export default function TagRelease(props:Props[]){
+  return(
+  <div>
+   {props.map(Tag)}
+  </div>)
+}

src/app/_components/tagAction.tsx

@@ -3,14 +3,17 @@ 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';
 
 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])
+ 
   return (
     <main>
       <Container>
@@ -24,6 +27,11 @@ export default function Index() {
           excerpt={heroPost.excerpt}
         />
         {morePosts.length > 0 && <MoreStories posts={morePosts} />}
+        {/* <Tag
+          label={label}
+          color={color?"bg-blue-500": ""}
+          Close={()=>handleClose(label)}
+          /> */}
       </Container>
     </main>
   );