This commit is contained in:
amd123 2024-01-12 13:41:06 +07:00
parent 4874262a13
commit 6a7095473f
2 changed files with 67 additions and 101 deletions

View File

@ -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>
)
}

View File

@ -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>
)