244 lines
8.8 KiB
TypeScript
244 lines
8.8 KiB
TypeScript
"use client";
|
|
import {
|
|
Button,
|
|
Card,
|
|
CardFooter,
|
|
CircularProgress,
|
|
ScrollShadow,
|
|
} from "@nextui-org/react";
|
|
import Image from "next/image";
|
|
import { ChevronLeftIcon, ChevronRightIcon, EyeIcon } from "../icons";
|
|
import { Swiper, SwiperSlide, useSwiper } from "swiper/react";
|
|
import "swiper/css";
|
|
import "swiper/css/navigation";
|
|
|
|
import { Autoplay, Pagination, Navigation, Controller } 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";
|
|
import { convertDateFormat, textEllipsis } from "@/utils/global";
|
|
import { useTranslations } from "next-intl";
|
|
import { data } from "autoprefixer";
|
|
import { Controller as FormController } from "react-hook-form";
|
|
import { Nabla } from "next/font/google";
|
|
|
|
export default function HeaderNews() {
|
|
const [article, setArticle] = useState<any>([]);
|
|
const t = useTranslations("Landing");
|
|
|
|
useEffect(() => {
|
|
async function getArticle() {
|
|
const req = { page: 1, search: "", limit: "10" };
|
|
const response = await getListArticle(req);
|
|
setArticle(response?.data?.data);
|
|
}
|
|
getArticle();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex flex-col lg:flex-row gap-3 lg:gap-8 bg-white p-1 lg:p-8 lg:h-[70vh]">
|
|
<div className="lg:hidden w-full h-full">
|
|
{article ? (
|
|
<Swiper
|
|
centeredSlides={true}
|
|
autoplay={{
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
}}
|
|
navigation={true}
|
|
className="mySwiper"
|
|
modules={[Autoplay, Controller, Navigation]}
|
|
onSwiper={(swiper) => {
|
|
swiper.navigation.nextEl?.classList.add(
|
|
"bg-white/70",
|
|
"!text-black",
|
|
"rounded-full",
|
|
"!w-[24px]",
|
|
"!h-[24px]"
|
|
);
|
|
swiper.navigation.prevEl?.classList.add(
|
|
"bg-white/70",
|
|
"!text-black",
|
|
"rounded-full",
|
|
"!w-[24px]",
|
|
"!h-[24px]"
|
|
);
|
|
}}
|
|
>
|
|
{article?.map((newsItem: any) => (
|
|
<SwiperSlide key={newsItem.id}>
|
|
<Card isFooterBlurred radius="lg" className="border-none">
|
|
<img
|
|
alt="headernews"
|
|
src={
|
|
newsItem?.thumbnailUrl == ""
|
|
? "no-image.jpg"
|
|
: newsItem?.thumbnailUrl
|
|
}
|
|
className="h-[25vh] object-cover"
|
|
/>
|
|
|
|
<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-black dark:text-white">
|
|
<Link
|
|
href={`news/detail/${newsItem.id}-${newsItem?.slug}`}
|
|
>
|
|
<p className="text-left font-semibold">
|
|
{textEllipsis(newsItem.title, 40)}
|
|
</p>
|
|
</Link>
|
|
<p className="py-[2px] text-left text-sm">
|
|
{convertDateFormat(newsItem.createdAt)} WIB
|
|
</p>
|
|
<p className="flex items-center gap-1 text-sm">
|
|
<EyeIcon className="text-black dark:text-white" />
|
|
{newsItem.viewCount === null ? 0 : newsItem.viewCount}
|
|
</p>
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
) : (
|
|
<CircularProgress aria-label="Loading..." size="lg" />
|
|
)}
|
|
</div>
|
|
<div className="w-auto lg:w-[25%] p-2 dark:bg-stone-800 bg-[#f0f0f0] shadow-lg dark:text-white text-black rounded-xl mb-2 md:mb-0 h-[50vh] lg:h-[67vh]">
|
|
<p className="text-lg font-bold h-10 text-center dark:text-white text-black">
|
|
{t("berita")}
|
|
</p>
|
|
<ScrollShadow hideScrollBar className="h-[34vh] lg:h-[53vh] ">
|
|
{article?.map((data: any) => (
|
|
<div
|
|
className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md flex flex-row gap-2"
|
|
key={data.id}
|
|
>
|
|
<img
|
|
alt="headernews"
|
|
src={
|
|
data?.thumbnailUrl == "" ? "no-image.jpg" : data?.thumbnailUrl
|
|
}
|
|
className="object-cover w-[18%] rounded-md"
|
|
/>
|
|
<div>
|
|
<Link
|
|
href={`/news/detail/${data?.id}-${data?.slug}`}
|
|
key={data?.id}
|
|
className="lg:hidden"
|
|
>
|
|
{textEllipsis(data.title, 40)}
|
|
</Link>
|
|
<Link
|
|
href={`/news/detail/${data?.id}-${data?.slug}`}
|
|
key={data?.id}
|
|
className="hidden lg:block"
|
|
>
|
|
{data.title}{" "}
|
|
</Link>
|
|
<div className="flex flex-row gap-2 text-[10px]">
|
|
<p className="py-[2px]">
|
|
{convertDateFormat(data.createdAt)} WIB
|
|
</p>
|
|
<p className="flex items-center gap-1">
|
|
<EyeIcon size={14} />
|
|
{data.viewCount === null ? 0 : data.viewCount}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</ScrollShadow>
|
|
<div className="m-2">
|
|
<Link href="/news/all">
|
|
<Button
|
|
className="w-full bg-[#DD8306] text-white font-bold rounded-md focus:outline-none"
|
|
radius="none"
|
|
>
|
|
{t("semua")}
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="hidden lg:block w-full lg:w-[50%] h-[67vh]">
|
|
{article ? (
|
|
<Swiper
|
|
centeredSlides={true}
|
|
autoplay={{
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
}}
|
|
navigation={true}
|
|
modules={[Autoplay, Controller, Navigation]}
|
|
className="mySwiper"
|
|
onSwiper={(swiper) => {
|
|
swiper.navigation.nextEl?.classList.add(
|
|
"bg-white/70",
|
|
"!text-black",
|
|
"rounded-full",
|
|
"!w-[48px]",
|
|
"!h-[48px]"
|
|
);
|
|
swiper.navigation.prevEl?.classList.add(
|
|
"bg-white/70",
|
|
"!text-black",
|
|
"rounded-full",
|
|
"!w-[48px]",
|
|
"!h-[48px]"
|
|
);
|
|
}}
|
|
>
|
|
{article?.map((newsItem: any) => (
|
|
<SwiperSlide key={newsItem.id} className="h-[67vh]">
|
|
<Card
|
|
isFooterBlurred
|
|
radius="lg"
|
|
className="border-none h-[67vh] shadow-none"
|
|
>
|
|
<img
|
|
alt="headernews"
|
|
src={
|
|
newsItem?.thumbnailUrl == ""
|
|
? "no-image.jpg"
|
|
: newsItem?.thumbnailUrl
|
|
}
|
|
className="w-full h-[67vh] object-cover rounded-lg"
|
|
/>
|
|
|
|
<CardFooter className="mb-1 max-h-[20vh] 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}-${newsItem?.slug}`}
|
|
>
|
|
<p className="text-left font-semibold text-2xl">
|
|
{newsItem.title}
|
|
</p>
|
|
</Link>
|
|
<div className="flex flex-row gap-1">
|
|
<p className="py-[2px] text-left text-sm">
|
|
{convertDateFormat(newsItem.createdAt)} WIB
|
|
</p>
|
|
<p className="flex items-center gap-1 text-sm">
|
|
<EyeIcon />
|
|
{newsItem.viewCount === null ? 0 : newsItem.viewCount}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
) : (
|
|
<CircularProgress aria-label="Loading..." size="lg" />
|
|
)}
|
|
</div>
|
|
<div className="lg:w-[25%] rounded-md text-white dark:text-black ">
|
|
<GPRKominfo />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|