239 lines
9.9 KiB
TypeScript
239 lines
9.9 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 "../ui/social-media/gpr-kominfo";
|
|
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>
|
|
);
|
|
}
|