web-humas-fe/components/landing/headline.tsx

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