319 lines
12 KiB
TypeScript
319 lines
12 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");
|
|
const [selectedTab, setSelectedTab] = useState("media");
|
|
|
|
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">
|
|
<Image
|
|
width={1920}
|
|
height={1080}
|
|
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}
|
|
>
|
|
<Image
|
|
height={480}
|
|
width={480}
|
|
alt="headernews"
|
|
src={
|
|
data?.thumbnailUrl == ""
|
|
? "/no-image.jpg"
|
|
: data?.thumbnailUrl
|
|
}
|
|
className="object-cover w-[60px] h-[60px] 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"
|
|
>
|
|
{textEllipsis(data.title, 66)}
|
|
</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"
|
|
>
|
|
<Image
|
|
alt="headernews"
|
|
width={1440}
|
|
height={1080}
|
|
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-lg lg: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%] h-[67vh] rounded-md text-white dark:text-black ">
|
|
{/* <GPRKominfo /> */}
|
|
<div className="text-[15px] flex flex-row gap-10">
|
|
<a
|
|
onClick={() => setSelectedTab("media")}
|
|
className={
|
|
selectedTab === "media"
|
|
? "text-black border-b-3 border-red-400 cursor-pointer py-2"
|
|
: "text-slate-300 cursor-pointer py-2"
|
|
}
|
|
>
|
|
Media Update
|
|
</a>
|
|
<a
|
|
onClick={() => setSelectedTab("video")}
|
|
className={
|
|
selectedTab === "video"
|
|
? "text-black border-b-3 border-red-400 cursor-pointer py-2"
|
|
: "text-slate-300 cursor-pointer py-2"
|
|
}
|
|
>
|
|
Video Virtual
|
|
</a>
|
|
</div>
|
|
{selectedTab === "media" ? (
|
|
<div className="lg:!h-[62vh] p-2 dark:bg-stone-800 bg-[#f0f0f0] dark:text-white text-black rounded-lg">
|
|
<ScrollShadow hideScrollBar className=" h-[54vh]">
|
|
{article?.map((list: any) => (
|
|
<div
|
|
key={list.id}
|
|
className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md"
|
|
>
|
|
<Link href={`news/detail/${list?.id}`}>
|
|
<p className="text-left font-semibold">{list?.title}</p>
|
|
</Link>
|
|
<div className="flex flex-row gap-1">
|
|
<p className="py-[2px] text-left text-xs">
|
|
{convertDateFormat(list?.createdAt)} WIB
|
|
</p>
|
|
<p className="flex items-center gap-1 text-xs">
|
|
<EyeIcon />
|
|
{list?.viewCount === null ? 0 : list?.viewCount}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</ScrollShadow>
|
|
<Button
|
|
className="w-full bg-[#DD8306] text-white font-bold rounded-md focus:outline-none"
|
|
radius="none"
|
|
>
|
|
Lihat Semua
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="w-full">
|
|
<iframe
|
|
width="100%"
|
|
height="410"
|
|
src="https://www.youtube.com/embed/7oRcWfl9lxE?si=G_CZfXak_AiHjGzG"
|
|
title="YouTube video player"
|
|
frameBorder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
referrerPolicy="strict-origin-when-cross-origin"
|
|
allowFullScreen
|
|
></iframe>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|