393 lines
25 KiB
TypeScript
393 lines
25 KiB
TypeScript
'use client'
|
|
import { Card, CardBody, Tab, Tabs } from '@nextui-org/react'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link';
|
|
import React from 'react'
|
|
|
|
export default function Headline() {
|
|
|
|
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='h-screen space-y-5 pt-10 bg-[#F1F4FE]'>
|
|
<div className='mx-7 space-y-4'>
|
|
<div className='text-3xl font-bold z-10 text-black'>Headline News</div>
|
|
<div>
|
|
<div className="flex w-full flex-col">
|
|
<Tabs
|
|
aria-label="Options"
|
|
size='sm'
|
|
color='primary'
|
|
className='pb-5 pt-4'
|
|
radius='full'
|
|
// disabledKeys={["audio", "foto", "teks"]}
|
|
>
|
|
<Tab key="audiovisual" title="Audio Visual">
|
|
<div className='flex justify-center gap-4'>
|
|
{headlineData.map((data) => (
|
|
<Card key={data.id} className='max-h-max w-[250px] items-center rounded-lg'>
|
|
<CardBody>
|
|
<Image
|
|
alt='visimisi'
|
|
className='rounded-lg'
|
|
src={data.imageUrl}
|
|
height={150}
|
|
width={220}
|
|
/>
|
|
</CardBody>
|
|
<div className='px-3 pb-2'>
|
|
<p className='text-xs'>{data.date}</p>
|
|
<p className='leading-tight text-sm font-semibold'>{data.title}</p>
|
|
<Link href={`headline/detail/${data.id}`}>
|
|
<p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkapnya</p>
|
|
</Link>
|
|
</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>
|
|
<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>
|
|
</Tab>
|
|
<Tab key="audio" title="Audio">
|
|
<div className='flex justify-center gap-4'>
|
|
<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>
|
|
<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>
|
|
</Tab>
|
|
<Tab key="foto" title="Foto">
|
|
<div className='flex justify-center gap-4'>
|
|
<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>
|
|
<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>
|
|
</Tab>
|
|
<Tab key="teks" title="Teks">
|
|
<div className='flex justify-center gap-4'>
|
|
<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>
|
|
<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>
|
|
</Tab>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div >
|
|
)
|
|
}
|