refactor headernews

2024-03-07 13:59:14 +07:00 · 2024-03-07 13:59:14 +07:00 · 34736287c3
parent a2cc9add14
commit 34736287c3
4 changed files with 117 additions and 24 deletions
--- a/Page/HeaderNews.tsx
+++ b/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
-                        className='w-full bg-[#DD8306] font-bold rounded-bl-md rounded-br-md focus:outline-none'
-                        radius='none'
-                    >
-                        Lihat Semua
-                    </Button>
+                    <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 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
--- a/components/detail/ListNews.tsx
+++ b/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'>
-            <Breadcrumbs color="primary" className="pt-5">
-                <BreadcrumbItem>Beranda</BreadcrumbItem>
+        <div className='self-center mx-auto text-black py-5'>
+            <Breadcrumbs color="primary" >
+                <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="font-medium">{news.title}</div>
-                            <div className="flex pb-2">
+                        <div className="px-3 py-3">
+                            <div className="font-medium text-sm leading-5 ">{news.title}</div>
+                            <div className="flex pb-1">
                                <div className="text-xs">{news.date}</div>
                                {/* <div>jam</div>
                                <div>creator</div> */}
--- a/components/navbar/NavbarHumas.tsx
+++ b/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>
--- a/styles/globals.css
+++ b/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);
+  }