397 lines
24 KiB
TypeScript
397 lines
24 KiB
TypeScript
'use client'
|
|
import { Card, CardBody, CardFooter, Image, Tab, Tabs } from '@nextui-org/react'
|
|
import Link from 'next/link';
|
|
import React, { useRef } from 'react'
|
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
|
import "swiper/css";
|
|
import "swiper/css/pagination";
|
|
import "swiper/css/free-mode";
|
|
import { FreeMode, Navigation } from 'swiper/modules';
|
|
|
|
export default function Headline() {
|
|
|
|
const sliderRef = useRef(null);
|
|
|
|
|
|
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='space-y-5 pt-10 pb-10 bg-[#F1F4FE]'>
|
|
<div className='lg:mx-16 space-y-4'>
|
|
<div className='text-3xl font-bold z-10 text-black'>Headline News</div>
|
|
<div className="flex w-full flex-col">
|
|
<Tabs
|
|
aria-label="Options"
|
|
size='lg'
|
|
color='primary'
|
|
className='pb-5 pt-4'
|
|
radius='full'
|
|
disabledKeys={["audio", "foto", "teks"]}
|
|
>
|
|
<Tab key="audiovisual" title="Audio Visual">
|
|
<Swiper ref={sliderRef}
|
|
breakpoints={{
|
|
450: {
|
|
slidesPerView: 1,
|
|
spaceBetween: 5,
|
|
},
|
|
700: {
|
|
slidesPerView: 2,
|
|
spaceBetween: 15,
|
|
},
|
|
900: {
|
|
slidesPerView: 4,
|
|
spaceBetween: 15,
|
|
},
|
|
}}
|
|
freeMode={true}
|
|
navigation={true}
|
|
modules={[FreeMode, Navigation]}
|
|
className="max-w-[90%] w-4/5 lg:w-full ml-2 mr-2"
|
|
>
|
|
{headlineData.map((item) => (
|
|
<SwiperSlide key={item.title}>
|
|
<div className="flex flex-col relative overflow-hidden cursor-pointer rounded-lg ">
|
|
<Card>
|
|
<CardBody className="items-center">
|
|
<Image
|
|
shadow="sm"
|
|
radius="lg"
|
|
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>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
|
|
{/* <div className="gap-2 grid grid-cols-2 sm:grid-cols-5">
|
|
{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> */}
|
|
</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=' font-semibold text-[#1A328E] 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 >
|
|
)
|
|
}
|