206 lines
11 KiB
TypeScript
206 lines
11 KiB
TypeScript
'use client'
|
|
import { Button, Card, CardFooter, ScrollShadow } from '@nextui-org/react'
|
|
import Image from 'next/image'
|
|
import { EyeIcon } from '../icons'
|
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
|
import 'swiper/css';
|
|
import 'swiper/css/pagination';
|
|
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
|
|
import Link from 'next/link';
|
|
import GPRKominfo from '../SocialMedia/GprKominfo';
|
|
import { useEffect, useState } from 'react';
|
|
import { getListArticle } from '@/service/article';
|
|
|
|
export default function HeaderNews() {
|
|
const [article, setArticle] = useState();
|
|
|
|
useEffect(() => {
|
|
async function getArticle() {
|
|
const response = await getListArticle();
|
|
console.log("res", response?.data?.data);
|
|
}
|
|
getArticle();
|
|
}, []);
|
|
|
|
const newsData = [
|
|
{
|
|
id: 1,
|
|
title: 'Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari',
|
|
date: '21-07-2023 13:50',
|
|
views: 82,
|
|
imageUrl: '/headernews.png'
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari',
|
|
date: '21-07-2023 13:50',
|
|
views: 82,
|
|
imageUrl: '/headernews.png'
|
|
},
|
|
{
|
|
id: 3,
|
|
title: 'Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari',
|
|
date: '21-07-2023 13:50',
|
|
views: 82,
|
|
imageUrl: '/headernews.png'
|
|
},
|
|
{
|
|
id: 4,
|
|
title: 'Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari',
|
|
date: '21-07-2023 13:50',
|
|
views: 82,
|
|
imageUrl: '/headernews.png'
|
|
},
|
|
{
|
|
id: 5,
|
|
title: 'Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari',
|
|
date: '21-07-2023 13:50',
|
|
views: 82,
|
|
imageUrl: '/headernews.png'
|
|
},
|
|
{
|
|
id: 6,
|
|
title: 'Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari',
|
|
date: '21-07-2023 13:50',
|
|
views: 82,
|
|
imageUrl: '/headernews.png'
|
|
},
|
|
];
|
|
return (
|
|
<div className='lg:flex items-center bg-white gap-3 p-2'>
|
|
<div className='w-auto lg:w-[25%] p-2 bg-[#020101] text-white rounded-md'>
|
|
<p className='text-lg font-bold h-10 text-center'>Berita Terkini</p>
|
|
<ScrollShadow hideScrollBar className=" h-[443px]">
|
|
<div className='text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md'>
|
|
<p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
|
|
<p className='py-[2px]'>21-07-2023 13:50</p>
|
|
<p className='flex items-center gap-1'><EyeIcon />82</p>
|
|
</div>
|
|
<div className='text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md'>
|
|
<p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
|
|
<p className='py-[2px]'>21-07-2023 13:50</p>
|
|
<p className='flex items-center gap-1'><EyeIcon />82</p>
|
|
</div>
|
|
<div className='text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md'>
|
|
<p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
|
|
<p className='py-[2px]'>21-07-2023 13:50</p>
|
|
<p className='flex items-center gap-1'><EyeIcon />82</p>
|
|
</div>
|
|
<div className='text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md'>
|
|
<p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
|
|
<p className='py-[2px]'>21-07-2023 13:50</p>
|
|
<p className='flex items-center gap-1'><EyeIcon />82</p>
|
|
</div>
|
|
</ScrollShadow>
|
|
<div className='m-2'>
|
|
<Link href='/news/all'>
|
|
<Button
|
|
className='w-full bg-[#DD8306] font-bold rounded-bl-md rounded-br-md focus:outline-none'
|
|
radius='none'
|
|
>
|
|
Lihat Semua
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className='w-auto lg:w-[50%]'>
|
|
<div>
|
|
<Swiper
|
|
centeredSlides={true}
|
|
autoplay={{
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
}}
|
|
pagination={{
|
|
clickable: true,
|
|
}}
|
|
navigation={true}
|
|
modules={[Autoplay, Pagination, Navigation]}
|
|
className="mySwiper"
|
|
>
|
|
{newsData.map((newsItem) => (
|
|
<SwiperSlide key={newsItem.id}>
|
|
<Card
|
|
isFooterBlurred
|
|
radius="lg"
|
|
className="border-none"
|
|
>
|
|
<Image
|
|
alt="headernews"
|
|
className="object-cover"
|
|
height={660}
|
|
src={newsItem.imageUrl}
|
|
width={460}
|
|
layout="responsive"
|
|
/>
|
|
<CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
|
|
<div className='text-white'>
|
|
<Link href={`news/detail/${newsItem.id}`}>
|
|
<p className='text-left font-semibold'>{newsItem.title}</p>
|
|
</Link>
|
|
<p className='py-[2px] text-left text-sm'>{newsItem.date}</p>
|
|
<p className='flex items-center gap-1 text-sm'><EyeIcon />{newsItem.views}</p>
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
{/* <Card
|
|
isFooterBlurred
|
|
radius="lg"
|
|
className="border-none"
|
|
>
|
|
<Image
|
|
alt="headernews"
|
|
className="object-cover"
|
|
height={660}
|
|
src="/headernews.png"
|
|
width={460}
|
|
layout="responsive"
|
|
/>
|
|
<CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
|
|
<div className='text-white'>
|
|
<p className='text-left font-semibold'>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
|
|
<p className='py-[2px] text-left text-sm'>21-07-2023 13:50</p>
|
|
<p className='flex items-center gap-1 text-sm'><EyeIcon />82</p>
|
|
</div>
|
|
</CardFooter>
|
|
</Card> */}
|
|
</div>
|
|
<div className='w-auto lg:w-[25%] p-2 rounded-md text-white dark:text-black '>
|
|
<GPRKominfo />
|
|
{/* <div className='text-lg font-bold border-5 border-blue-950 rounded-tr-lg rounded-tl-lg'>
|
|
<img src="/gprheader.png" alt="gpr" className='w-full' />
|
|
</div>
|
|
<div className='overflow-y-scroll h-[343px] border-5 border-blue-950 text-black'>
|
|
<div className='text-xs text-left m-2 p-2 bg-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
|
|
<p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
|
|
<p className='py-[2px]'>21-07-2023 13:50</p>
|
|
<p className='flex items-center gap-1'><EyeIcon />82</p>
|
|
</div>
|
|
<div className='text-xs text-left m-2 p-2 bg-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
|
|
<p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
|
|
<p className='py-[2px]'>21-07-2023 13:50</p>
|
|
<p className='flex items-center gap-1'><EyeIcon />82</p>
|
|
</div>
|
|
<div className='text-xs text-left m-2 p-2 bg-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
|
|
<p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
|
|
<p className='py-[2px]'>21-07-2023 13:50</p>
|
|
<p className='flex items-center gap-1'><EyeIcon />82</p>
|
|
</div>
|
|
<div className='text-xs text-left m-2 p-2 bg-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
|
|
<p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
|
|
<p className='py-[2px]'>21-07-2023 13:50</p>
|
|
<p className='flex items-center gap-1'><EyeIcon />82</p>
|
|
</div>
|
|
</div>
|
|
<div className=' border-5 border-blue-950 rounded-bl-lg rounded-br-lg'>
|
|
<img src="/gprfooter.png" alt="gpr" className='w-full' />
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|