refactor headernews

components/Landing Page/HeaderNews.tsx

@@ -1,10 +1,11 @@
+'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 { Pagination } from 'swiper/modules';
+import { Autoplay, Pagination, Navigation } from 'swiper/modules';
 import Link from 'next/link';
 import GPRKominfo from '../SocialMedia/GprKominfo';
 
@@ -24,6 +25,34 @@ export default function HeaderNews() {
             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'>
@@ -52,17 +81,31 @@ export default function HeaderNews() {
                     </div>
                 </ScrollShadow>
                 <div className='m-2'>
-                    <Button
+                    <Link href='/news/all'>
-                        className='w-full bg-[#DD8306] font-bold rounded-bl-md rounded-br-md focus:outline-none'
+                        <Button
-                        radius='none'
+                            className='w-full bg-[#DD8306] font-bold rounded-bl-md rounded-br-md focus:outline-none'
-                    >
+                            radius='none'
-                        Lihat Semua
+                        >
-                    </Button>
+                            Lihat Semua
+                        </Button>
+                    </Link>
                 </div>
             </div>
             <div className='w-auto lg:w-[50%]'>
                 <div>
-                    <Swiper pagination={true} modules={[Pagination]} className="mySwiper">
+                    <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

components/detail/ListNews.tsx

@@ -44,7 +44,7 @@ export default function ListNews() {
             id: 3,
             thumnbnail: '/headernews.png',
             title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
-            date: "06 Maret, 2024 16:14 HUMAS POLRI",
+            date: "06 Maret, 2024 16:14 HUMAS ",
             description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
         },
         {
@@ -93,20 +93,20 @@ export default function ListNews() {
     ]
 
     return (
-        <div className=' max-w-7xl self-center text-black'>
+        <div className='self-center mx-auto text-black py-5'>
-            <Breadcrumbs color="primary" className="pt-5">
+            <Breadcrumbs color="primary" >
-                <BreadcrumbItem>Beranda</BreadcrumbItem>
+                <BreadcrumbItem href="/">Beranda</BreadcrumbItem>
                 <BreadcrumbItem>Berita</BreadcrumbItem>
             </Breadcrumbs>
             <div className="flex-wrap grid  grid-cols-1 md:grid-cols-2 lg:grid-cols-3 pt-5 place-items-center gap-7">
                 {listNews.map((news) => (
-                    <div className="h-[400px] w-[300px] bg-[#eeeeee] text-xs">
+                    <div className="h-auto w-[300px] text-xs">
                         <div className="h-[50%]">
                             <img src={news.thumnbnail} alt="" className="w-max" />
                         </div>
-                        <div className="px-3 py-5">
+                        <div className="px-3 py-3">
-                            <div className="font-medium">{news.title}</div>
+                            <div className="font-medium text-sm leading-5 ">{news.title}</div>
-                            <div className="flex pb-2">
+                            <div className="flex pb-1">
                                 <div className="text-xs">{news.date}</div>
                                 {/* <div>jam</div>
                                 <div>creator</div> */}

components/navbar/NavbarHumas.tsx

@@ -29,12 +29,12 @@ export default function NavbarHumas() {
     return (
         <Navbar maxWidth='full' height="8rem" className='dark:bg-[#1F1A17]'>
             <div className='w-full h-full flex'>
-                <div className='w-1/3 md:w-1/12 flex items-center justify-center'>
+                <div className='min-w-max md:w-1/12 flex items-center justify-center'>
                     <Link href={'/'}>
-                        <img src="/logohumas.png" alt="logo" />
+                        <img src="/logohumas.png" alt="logo" className='min-w-max' />
                     </Link>
                 </div>
-                <div className='w-11/12  hidden md:flex flex-col justify-cente pt-3 space-y-3'>
+                <div className='w-auto md:w-11/12  hidden md:flex flex-col justify-cente pt-3 space-y-3'>
                     <div className='flex items-center justify-end gap-1 md:gap-5'>
                         <div className="flex gap-1 lg:gap-3 items-center">
                             <div><FbIcon /></div>
@@ -45,7 +45,7 @@ export default function NavbarHumas() {
                         </div>
                         <div ><IdnIcon /></div>
                     </div>
-                    <div className='flex flex-wrap items-center justify-around'>
+                    <div className='flex flex-wrap items-center justify-around '>
                         <Link href={'/'}>
                             <div>Beranda</div>
                         </Link>
@@ -219,7 +219,7 @@ export default function NavbarHumas() {
                         <div>
                             <Link href={'/kontak-kami'}>Kontak</Link></div>
                         <div className='flex items-center gap-3'>
-                            <div>{searchInput}</div>
+                            <div className='hidden lg:block'>{searchInput}</div>
                             <div><ThemeSwitch /></div>
                         </div>
                     </div>

styles/globals.css

@@ -2,6 +2,56 @@
 @tailwind components;
 @tailwind utilities;
 
-        /* *{
+     
-            border: 1px solid green;
+.swiper {
-        } */
+    width: 100%;
+    height: 100%;
+  }
+  
+  .swiper-slide {
+    text-align: center;
+    font-size: 18px;
+    background: #fff;
+  
+    /* Center slide text vertically */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .swiper-slide img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  
+  .autoplay-progress {
+    position: absolute;
+    right: 16px;
+    bottom: 16px;
+    z-index: 10;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    color: var(--swiper-theme-color);
+  }
+  
+  .autoplay-progress svg {
+    --progress: 0;
+    position: absolute;
+    left: 0;
+    top: 0px;
+    z-index: 10;
+    width: 100%;
+    height: 100%;
+    stroke-width: 4px;
+    stroke: var(--swiper-theme-color);
+    fill: none;
+    stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
+    stroke-dasharray: 125.6;
+    transform: rotate(-90deg);
+  }