From 6a7095473faa5e5cfd34d2058dbadedb6366fb4e Mon Sep 17 00:00:00 2001
From: amd123 <iam.ahmadsholeh@gmail.com>
Date: Fri, 12 Jan 2024 13:41:06 +0700
Subject: [PATCH] update

---
 components/landing/campaign.tsx  |  54 ++-------------
 components/page/similar-news.tsx | 114 +++++++++++++++++--------------
 2 files changed, 67 insertions(+), 101 deletions(-)

diff --git a/components/landing/campaign.tsx b/components/landing/campaign.tsx
index a6aa6e2..9d52495 100644
--- a/components/landing/campaign.tsx
+++ b/components/landing/campaign.tsx
@@ -1,10 +1,9 @@
 'use client'
-import { Button } from '@nextui-org/button'
-import { Card, CardBody, CardFooter, Image } from '@nextui-org/react'
-import Slider from 'react-slick'
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
+import { Button } from '@nextui-org/button';
+import { Card, CardBody, CardFooter, Image } from '@nextui-org/react';
 import Link from 'next/link';
+import "slick-carousel/slick/slick-theme.css";
+import "slick-carousel/slick/slick.css";
 
 export default function Campaign() {
     const settings = {
@@ -37,20 +36,6 @@ export default function Campaign() {
             imageUrl: '/kampanye3.png',
             link: '/link2',
         },
-        // {
-        //     id: 4,
-        //     date: '03/04/2024 17:30 WIB',
-        //     title: 'Judul Artikel 4',
-        //     imageUrl: '/vm4.jpg',
-        //     link: '/link4',
-        // },
-        // {
-        //     id: 5,
-        //     date: '03/05/2024 18:45 WIB',
-        //     title: 'Judul Artikel 5',
-        //     imageUrl: '/vm5.jpg',
-        //     link: '/link5',
-        // },
     ];
 
     return (
@@ -90,37 +75,6 @@ export default function Campaign() {
                     </Button>
                 </div>
             </div>
-
-            {/* <div className='border-2 border-green-600 container mx-auto'>
-                <h2> Single Item</h2>
-                <Slider {...settings}>
-                    <div>
-                        <h3>1</h3>
-                    </div>
-                    <div>
-                        <h3>2</h3>
-                    </div>
-                    <div>
-                        <h3>3</h3>
-                    </div>
-                    <div>
-                        <h3>4</h3>
-                    </div>
-                    <div>
-                        <h3>5</h3>
-                    </div>
-                    <div>
-                        <h3>6</h3>
-                    </div>
-                </Slider>
-            </div> */}
-            {/* <div className='flex justify-start relative bottom-[135px] z-0 left-0 '>
-                    <Image
-                        alt='anisbaswedan'
-                        className='rounded-lg'
-                        src="/anis1.png"
-                    />
-                </div> */}
         </div>
     )
 }
diff --git a/components/page/similar-news.tsx b/components/page/similar-news.tsx
index 8db9dcf..ae610e6 100644
--- a/components/page/similar-news.tsx
+++ b/components/page/similar-news.tsx
@@ -1,61 +1,73 @@
 'use client'
-import { Card, CardBody } from '@nextui-org/react'
-import Image from 'next/image'
+import { Card, CardBody, CardFooter, Image } from '@nextui-org/react'
+import Link from 'next/link';
 import React from 'react'
 
 export default function SimilarNews() {
+
+    const headlineData = [
+        {
+            id: 1,
+            date: '03/02/2024 15:45 WIB',
+            title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
+            imageUrl: '/headline1.png',
+            link: '/link2',
+        },
+        {
+            id: 2,
+            date: '03/02/2024 15:45 WIB',
+            title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
+            imageUrl: '/headline2.png',
+            link: '/link2',
+        },
+        {
+            id: 3,
+            date: '03/02/2024 15:45 WIB',
+            title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
+            imageUrl: '/headline3.png',
+            link: '/link2',
+        },
+        {
+            id: 4,
+            date: '03/02/2024 15:45 WIB',
+            title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
+            imageUrl: '/headline4.png',
+            link: '/link2',
+        },
+        {
+            id: 5,
+            date: '03/02/2024 15:45 WIB',
+            title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
+            imageUrl: '/headline5.png',
+            link: '/link2',
+        },
+
+    ];
     return (
         <div className='border-2'>
             <p className='text-center pb-10 text-3xl font-bold text-[#FF3900]'>Berita Serupa</p>
-            <div className='flex justify-center gap-3 pb-5'>
-                <Card className='max-h-max w-[250px] items-center rounded-lg'>
-                    <CardBody>
-                        <Image
-                            alt='visimisi'
-                            className='rounded-lg'
-                            src="/vm1.jpg"
-                            height={150}
-                            width={220}
-                        />
-                    </CardBody>
-                    <div className='px-3 pb-2'>
-                        <p className='text-xs '>03/01/2024 14:30 WIB</p>
-                        <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
-                        <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
-                    </div>
-                </Card>
-                <Card className='max-h-max w-[250px] items-center rounded-lg'>
-                    <CardBody>
-                        <Image
-                            alt='visimisi'
-                            className='rounded-lg'
-                            src="/vm1.jpg"
-                            height={150}
-                            width={220}
-                        />
-                    </CardBody>
-                    <div className='px-3 pb-2'>
-                        <p className='text-xs '>03/01/2024 14:30 WIB</p>
-                        <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
-                        <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
-                    </div>
-                </Card>
-                <Card className='max-h-max w-[250px] items-center rounded-lg'>
-                    <CardBody>
-                        <Image
-                            alt='visimisi'
-                            className='rounded-lg'
-                            src="/vm1.jpg"
-                            height={150}
-                            width={220}
-                        />
-                    </CardBody>
-                    <div className='px-3 pb-2'>
-                        <p className='text-xs '>03/01/2024 14:30 WIB</p>
-                        <p className='leading-tight text-sm font-semibold'>MNC  Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
-                        <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
-                    </div>
-                </Card>
+            <div className="gap-2 grid grid-cols-2 sm:grid-cols-5 mx-auto md:mx-10">
+                {headlineData.map((item, index) => (
+                    <Card shadow="sm" key={index}>
+                        <CardBody className="overflow-visible p-0">
+                            <Image
+                                shadow="sm"
+                                radius="lg"
+                                width="100%"
+                                alt={item.title}
+                                className="w-full object-cover "
+                                src={item.imageUrl}
+                            />
+                        </CardBody>
+                        <CardFooter className="text-small text-left flex flex-col items-start">
+                            <div >{item.date}</div>
+                            <div className='font-bold'>{item.title}</div>
+                            <Link href={`/headline/detail/${item.id}`}>
+                                <p className='font-semibold text-[#1A328E]'>Lihat Selengkapnya</p>
+                            </Link>
+                        </CardFooter>
+                    </Card>
+                ))}
             </div>
         </div>
     )