feat:new landing
This commit is contained in:
Rama Priyanto
parent
80fd365755
commit
f94e21d953
|
|
@ -1,4 +1,5 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
import BannerHumasNew from "@/components/landing/banner-new";
|
||||||
import BannerHumas from "@/components/landing/BannerHumas";
|
import BannerHumas from "@/components/landing/BannerHumas";
|
||||||
import BodyLayout from "@/components/landing/BodyLayout";
|
import BodyLayout from "@/components/landing/BodyLayout";
|
||||||
import HeaderNews from "@/components/landing/HeaderNews";
|
import HeaderNews from "@/components/landing/HeaderNews";
|
||||||
|
|
@ -18,7 +19,7 @@ export default function Home() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<HumasLayout>
|
<HumasLayout>
|
||||||
<BannerHumas />
|
<BannerHumasNew />
|
||||||
<HeaderNews />
|
<HeaderNews />
|
||||||
<BodyLayout />
|
<BodyLayout />
|
||||||
</HumasLayout>
|
</HumasLayout>
|
||||||
|
|
|
||||||
|
|
@ -331,7 +331,7 @@ export const ChevronUpIcon = ({
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
className="fill-default-400"
|
className={fill}
|
||||||
d="m6.293 13.293 1.414 1.414L12 10.414l4.293 4.293 1.414-1.414L12 7.586z"
|
d="m6.293 13.293 1.414 1.414L12 10.414l4.293 4.293 1.414-1.414L12 7.586z"
|
||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,27 @@
|
||||||
"use client";
|
"use client";
|
||||||
import CategorySatker from "./CategorySatker";
|
import AddsCarousel from "./adds-carousel";
|
||||||
import ENewsPolri from "./ENewsPolri";
|
|
||||||
import MediaSocial from "./MediaSocial";
|
|
||||||
import MedolUpdate from "./MedolUpdate";
|
import MedolUpdate from "./MedolUpdate";
|
||||||
import PolriApps from "./PolriApps";
|
import SocialMediaNew from "./social-media";
|
||||||
import RegionalNews from "./RegionalNews";
|
|
||||||
import SidebarNav from "./SidebarNav";
|
|
||||||
|
|
||||||
export default function BodyLayout() {
|
export default function BodyLayout() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="lg:flex bg-white text-black p-2 lg:p-8 gap-9">
|
<div className="lg:flex bg-white dark:bg-black text-black p-2 lg:p-8 gap-9">
|
||||||
<div className="lg:w-[75%] space-y-7">
|
{/* <div className="lg:w-[75%] space-y-7">
|
||||||
<CategorySatker />
|
<CategorySatker />
|
||||||
<RegionalNews />
|
<RegionalNews />
|
||||||
<PolriApps />
|
<PolriApps />
|
||||||
<MedolUpdate />
|
<MedolUpdate />
|
||||||
<MediaSocial />
|
<MediaSocial />
|
||||||
{/* <ENewsPolri /> */}
|
<ENewsPolri />
|
||||||
</div>
|
</div> */}
|
||||||
<div className="w-full lg:w-[25%]">
|
{/* <div className="w-full lg:w-[25%]">
|
||||||
<SidebarNav />
|
<SidebarNav />
|
||||||
|
</div> */}
|
||||||
|
<div className="w-full space-y-5">
|
||||||
|
<AddsCarousel />
|
||||||
|
<MedolUpdate />
|
||||||
|
<SocialMediaNew />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
|
|
@ -57,308 +57,323 @@ export default function HeaderNews() {
|
||||||
limit: "10",
|
limit: "10",
|
||||||
sortBy: "view_count",
|
sortBy: "view_count",
|
||||||
sort: "desc",
|
sort: "desc",
|
||||||
|
isPublish: true,
|
||||||
};
|
};
|
||||||
const response = await getListArticle(req);
|
const response = await getListArticle(req);
|
||||||
setHotNews(response?.data?.data);
|
setHotNews(response?.data?.data);
|
||||||
console.log("sadadasdasd", response?.data?.data);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
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="w-full">
|
||||||
<div className="lg:hidden w-full h-full">
|
<div className="flex flex-col lg:flex-row gap-3 lg:gap-8 bg-white dark:bg-black p-1 lg:p-8 lg:h-[55vh] w-[75%] lg:mx-auto">
|
||||||
{article ? (
|
<div className="lg:hidden w-full h-full">
|
||||||
<Swiper
|
{article ? (
|
||||||
centeredSlides={true}
|
<Swiper
|
||||||
autoplay={{
|
centeredSlides={true}
|
||||||
delay: 5000,
|
autoplay={{
|
||||||
disableOnInteraction: false,
|
delay: 5000,
|
||||||
}}
|
disableOnInteraction: false,
|
||||||
navigation={true}
|
}}
|
||||||
className="mySwiper"
|
navigation={true}
|
||||||
modules={[Autoplay, Controller, Navigation]}
|
className="mySwiper"
|
||||||
onSwiper={(swiper) => {
|
modules={[Autoplay, Controller, Navigation]}
|
||||||
swiper.navigation.nextEl?.classList.add(
|
onSwiper={(swiper) => {
|
||||||
"bg-white/70",
|
swiper.navigation.nextEl?.classList.add(
|
||||||
"!text-black",
|
"bg-white/70",
|
||||||
"rounded-full",
|
"!text-black",
|
||||||
"!w-[24px]",
|
"rounded-full",
|
||||||
"!h-[24px]"
|
"!w-[24px]",
|
||||||
);
|
"!h-[24px]"
|
||||||
swiper.navigation.prevEl?.classList.add(
|
);
|
||||||
"bg-white/70",
|
swiper.navigation.prevEl?.classList.add(
|
||||||
"!text-black",
|
"bg-white/70",
|
||||||
"rounded-full",
|
"!text-black",
|
||||||
"!w-[24px]",
|
"rounded-full",
|
||||||
"!h-[24px]"
|
"!w-[24px]",
|
||||||
);
|
"!h-[24px]"
|
||||||
}}
|
);
|
||||||
>
|
}}
|
||||||
{article?.map((newsItem: any, index: number) => (
|
|
||||||
<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] ">
|
|
||||||
{hotNews?.map((data: any, index: number) => (
|
|
||||||
<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
|
{article?.map((newsItem: any, index: number) => (
|
||||||
height={480}
|
<SwiperSlide key={newsItem?.id}>
|
||||||
width={480}
|
<Card isFooterBlurred radius="lg" className="border-none">
|
||||||
alt="headernews"
|
{/* <Image
|
||||||
src={
|
width={1920}
|
||||||
data?.thumbnailUrl == ""
|
height={1080}
|
||||||
? "/no-image.jpg"
|
alt="headernews"
|
||||||
: data?.thumbnailUrl
|
src={
|
||||||
}
|
newsItem?.thumbnailUrl == ""
|
||||||
className="object-cover w-[60px] h-[60px] rounded-md"
|
? "/no-image.jpg"
|
||||||
/>
|
: newsItem?.thumbnailUrl
|
||||||
<div>
|
}
|
||||||
<Link
|
className="h-[25vh] object-cover"
|
||||||
href={`/news/detail/${data?.id}-${data?.slug}`}
|
/> */}
|
||||||
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-gradient-to-r from-red-700 to-[#bb3523] 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]">
|
<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">
|
||||||
{article ? (
|
<div className="text-black dark:text-white">
|
||||||
<Swiper
|
<Link
|
||||||
centeredSlides={true}
|
href={`news/detail/${newsItem.id}-${newsItem?.slug}`}
|
||||||
autoplay={{
|
>
|
||||||
delay: 5000,
|
<p className="text-left font-semibold">
|
||||||
disableOnInteraction: false,
|
{textEllipsis(newsItem.title, 40)}
|
||||||
}}
|
</p>
|
||||||
navigation={true}
|
</Link>
|
||||||
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, index: number) => (
|
|
||||||
<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">
|
<p className="py-[2px] text-left text-sm">
|
||||||
{convertDateFormat(newsItem.createdAt)} WIB
|
{convertDateFormat(newsItem.createdAt)} WIB
|
||||||
</p>
|
</p>
|
||||||
<p className="flex items-center gap-1 text-sm">
|
<p className="flex items-center gap-1 text-sm">
|
||||||
<EyeIcon />
|
<EyeIcon className="text-black dark:text-white" />
|
||||||
{newsItem.viewCount === null ? 0 : newsItem.viewCount}
|
{newsItem.viewCount === null ? 0 : newsItem.viewCount}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</CardFooter>
|
||||||
</CardFooter>
|
</Card>
|
||||||
</Card>
|
</SwiperSlide>
|
||||||
</SwiperSlide>
|
))}
|
||||||
))}
|
</Swiper>
|
||||||
</Swiper>
|
) : (
|
||||||
) : (
|
<CircularProgress aria-label="Loading..." size="lg" />
|
||||||
<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"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{t("terkini")}
|
|
||||||
</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>
|
</div>
|
||||||
{selectedTab === "media" ? (
|
<div className="w-auto lg:w-[25%] p-2 dark:bg-stone-800 bg-[#f0f0f0] dark:text-white text-black rounded-xl mb-2 md:mb-0 h-[37vh] lg:h-[50vh]">
|
||||||
<div className="lg:!h-[62vh] p-2 dark:bg-stone-800 bg-[#f0f0f0] dark:text-white text-black rounded-lg">
|
<p className="text-base font-bold text-center dark:text-white text-black">
|
||||||
<ScrollShadow hideScrollBar className=" h-[54vh]">
|
{t("berita")}
|
||||||
{article?.map((list: any, index: number) => (
|
</p>
|
||||||
<div
|
<ScrollShadow hideScrollBar className="h-[33vh] lg:h-[39vh] ">
|
||||||
key={list?.id}
|
{hotNews?.map((data: any, index: number) => (
|
||||||
className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md"
|
<div
|
||||||
>
|
className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md flex flex-row gap-2"
|
||||||
<Link href={`news/detail/${list?.id}`}>
|
key={data?.id}
|
||||||
<p className="text-left font-semibold">{list?.title}</p>
|
>
|
||||||
|
{/* <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}`}
|
||||||
|
className="lg:hidden"
|
||||||
|
>
|
||||||
|
{textEllipsis(data.title, 40)}
|
||||||
</Link>
|
</Link>
|
||||||
<div className="flex flex-row gap-1">
|
<Link
|
||||||
<p className="py-[2px] text-left text-xs">
|
href={`/news/detail/${data?.id}-${data?.slug}`}
|
||||||
{convertDateFormat(list?.createdAt)} WIB
|
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>
|
||||||
<p className="flex items-center gap-1 text-xs">
|
<p className="flex items-center gap-1">
|
||||||
<EyeIcon />
|
<EyeIcon size={14} />
|
||||||
{list?.viewCount === null ? 0 : list?.viewCount}
|
{data.viewCount === null ? 0 : data.viewCount}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</ScrollShadow>
|
||||||
|
<div className="m-2">
|
||||||
|
<Link href="/news/all">
|
||||||
|
<Button
|
||||||
|
className="w-full bg-gradient-to-r from-red-700 to-[#bb3523] 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-[50vh]">
|
||||||
|
{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-[40px]",
|
||||||
|
"!h-[40px]"
|
||||||
|
);
|
||||||
|
swiper.navigation.prevEl?.classList.add(
|
||||||
|
"bg-white/70",
|
||||||
|
"!text-black",
|
||||||
|
"rounded-full",
|
||||||
|
"!w-[40px]",
|
||||||
|
"!h-[40px]"
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{article?.map((newsItem: any, index: number) => (
|
||||||
|
<SwiperSlide key={newsItem?.id} className="h-[50vh]">
|
||||||
|
<Card
|
||||||
|
isFooterBlurred
|
||||||
|
radius="lg"
|
||||||
|
className="border-none h-[50vh] shadow-none"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
alt="headernews"
|
||||||
|
width={1440}
|
||||||
|
height={1080}
|
||||||
|
src={
|
||||||
|
newsItem?.thumbnailUrl == ""
|
||||||
|
? "/no-image.jpg"
|
||||||
|
: newsItem?.thumbnailUrl
|
||||||
|
}
|
||||||
|
className="w-full !h-[50vh] 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>
|
||||||
))}
|
))}
|
||||||
</ScrollShadow>
|
</Swiper>
|
||||||
<Button
|
) : (
|
||||||
className="w-full bg-gradient-to-r from-red-700 to-[#bb3523] text-white font-bold rounded-md focus:outline-none"
|
<CircularProgress aria-label="Loading..." size="lg" />
|
||||||
radius="none"
|
)}
|
||||||
>
|
</div>
|
||||||
Lihat Semua
|
<div className="lg:w-[25%] h-[50vh] rounded-md text-white dark:text-black ">
|
||||||
</Button>
|
{/* <GPRKominfo /> */}
|
||||||
</div>
|
|
||||||
) : (
|
{selectedTab === "media" ? (
|
||||||
<div className="lg:!h-[62vh] dark:bg-stone-800 bg-[#f0f0f0] dark:text-white text-black rounded-lg flex flex-col p-2 lg:p-8 gap-2 lg:gap-5">
|
<div className="lg:!h-[50vh] p-2 dark:bg-stone-800 bg-[#f0f0f0] dark:text-white text-black rounded-lg">
|
||||||
<Link
|
<div className="text-sm flex flex-row gap-3 mx-2 mb-2">
|
||||||
target="_blank"
|
<a
|
||||||
href="https://www.youtube.com/watch?v=6_g_PyiFcNo"
|
onClick={() => setSelectedTab("media")}
|
||||||
className="border-b-2 py-2 lg:py-4"
|
className={
|
||||||
>
|
"text-black border-b-3 border-red-400 cursor-pointer p-0"
|
||||||
IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - POLRI PRESISI UNTUK
|
}
|
||||||
INDONESIA
|
>
|
||||||
</Link>
|
{t("terkini")}
|
||||||
<Link
|
</a>
|
||||||
target="_blank"
|
<a
|
||||||
href="https://www.youtube.com/watch?v=p0AJEwvJ7gU"
|
onClick={() => setSelectedTab("video")}
|
||||||
className="border-b-2 py-2 lg:py-4"
|
className={"text-slate-300 cursor-pointer"}
|
||||||
>
|
>
|
||||||
ILM DIVHUMAS POLRI - POLRI PRESISI MENGAWAL PROSES VAKSINASI UNTUK
|
Video Virtual
|
||||||
MENGATASI PANDEMI COVID 19
|
</a>
|
||||||
</Link>
|
</div>
|
||||||
<Link
|
<ScrollShadow hideScrollBar className="h-[39vh]">
|
||||||
target="_blank"
|
{article?.map((list: any, index: number) => (
|
||||||
href="https://www.youtube.com/watch?v=jaihQPjxcy4"
|
<div
|
||||||
className="border-b-2 py-2 lg:py-4"
|
key={list?.id}
|
||||||
>
|
className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md"
|
||||||
IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - INDONESIA MENOLAK
|
>
|
||||||
RADIKALISME
|
<Link href={`news/detail/${list?.id}`}>
|
||||||
</Link>
|
<p className="text-left font-semibold">{list?.title}</p>
|
||||||
<Link
|
</Link>
|
||||||
target="_blank"
|
<div className="flex flex-row gap-1">
|
||||||
href="https://www.youtube.com/watch?v=umPEo0FYTQk"
|
<p className="py-[2px] text-left text-xs">
|
||||||
className="border-b-2 py-2 lg:py-4"
|
{convertDateFormat(list?.createdAt)} WIB
|
||||||
>
|
</p>
|
||||||
IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - BHABINKAMTIBMAS SAHABAT
|
<p className="flex items-center gap-1 text-xs">
|
||||||
MASYARAKAT
|
<EyeIcon />
|
||||||
</Link>
|
{list?.viewCount === null ? 0 : list?.viewCount}
|
||||||
</div>
|
</p>
|
||||||
)}
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</ScrollShadow>
|
||||||
|
<Button
|
||||||
|
className="w-full bg-gradient-to-r from-red-700 to-[#bb3523] text-white font-bold rounded-md focus:outline-none"
|
||||||
|
radius="none"
|
||||||
|
>
|
||||||
|
Lihat Semua
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="lg:!h-[35vh] dark:bg-stone-800 bg-[#f0f0f0] dark:text-white text-black rounded-lg flex flex-col p-2 lg:p-8 gap-2 lg:gap-5">
|
||||||
|
<div className="text-[15px] flex flex-row gap-10">
|
||||||
|
<a
|
||||||
|
onClick={() => setSelectedTab("media")}
|
||||||
|
className={"text-slate-300 cursor-pointer py-2"}
|
||||||
|
>
|
||||||
|
{t("terkini")}
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
onClick={() => setSelectedTab("video")}
|
||||||
|
className={
|
||||||
|
"text-black border-b-3 border-red-400 cursor-pointer py-2"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Video Virtual
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
target="_blank"
|
||||||
|
href="https://www.youtube.com/watch?v=6_g_PyiFcNo"
|
||||||
|
className="border-b-2 py-2 lg:py-4"
|
||||||
|
>
|
||||||
|
IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - POLRI PRESISI UNTUK
|
||||||
|
INDONESIA
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
target="_blank"
|
||||||
|
href="https://www.youtube.com/watch?v=p0AJEwvJ7gU"
|
||||||
|
className="border-b-2 py-2 lg:py-4"
|
||||||
|
>
|
||||||
|
ILM DIVHUMAS POLRI - POLRI PRESISI MENGAWAL PROSES VAKSINASI
|
||||||
|
UNTUK MENGATASI PANDEMI COVID 19
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
target="_blank"
|
||||||
|
href="https://www.youtube.com/watch?v=jaihQPjxcy4"
|
||||||
|
className="border-b-2 py-2 lg:py-4"
|
||||||
|
>
|
||||||
|
IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - INDONESIA MENOLAK
|
||||||
|
RADIKALISME
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
target="_blank"
|
||||||
|
href="https://www.youtube.com/watch?v=umPEo0FYTQk"
|
||||||
|
className="border-b-2 py-2 lg:py-4"
|
||||||
|
>
|
||||||
|
IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - BHABINKAMTIBMAS
|
||||||
|
SAHABAT MASYARAKAT
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@ import {
|
||||||
topNewsInp,
|
topNewsInp,
|
||||||
topNewsTbn,
|
topNewsTbn,
|
||||||
} from "@/service/third-party-service";
|
} from "@/service/third-party-service";
|
||||||
import { convertDateFormatNoTime } from "@/utils/global";
|
import { convertDateFormatNoTime, textEllipsis } from "@/utils/global";
|
||||||
import PolriTvWidget from "../ui/social-media/polri-tv";
|
import PolriTvWidget from "../ui/social-media/polri-tv";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
|
|
@ -62,7 +62,6 @@ export default function MedolUpdate() {
|
||||||
const res = await topNewsInp(resLog?.data?.access_token);
|
const res = await topNewsInp(resLog?.data?.access_token);
|
||||||
// setInpUpdate(res?.data);
|
// setInpUpdate(res?.data);
|
||||||
setInpUpdate(res?.data?.data);
|
setInpUpdate(res?.data?.data);
|
||||||
console.log("reelog", res?.data?.data);
|
|
||||||
|
|
||||||
// getDataImage(res?.data);
|
// getDataImage(res?.data);
|
||||||
}
|
}
|
||||||
|
|
@ -77,15 +76,47 @@ export default function MedolUpdate() {
|
||||||
setInpUpdate(temp);
|
setInpUpdate(temp);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const formatDate = (dateString: string): string => {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
|
||||||
|
let timeZone = "Asia/Jakarta";
|
||||||
|
let timeZoneAbbr = "WIB";
|
||||||
|
|
||||||
|
if (dateString.includes("+09:00")) {
|
||||||
|
timeZone = "Asia/Jayapura";
|
||||||
|
timeZoneAbbr = "WIT";
|
||||||
|
} else if (dateString.includes("+08:00")) {
|
||||||
|
timeZone = "Asia/Makassar";
|
||||||
|
timeZoneAbbr = "WITA";
|
||||||
|
}
|
||||||
|
|
||||||
|
const options: Intl.DateTimeFormatOptions = {
|
||||||
|
day: "2-digit",
|
||||||
|
month: "2-digit",
|
||||||
|
year: "numeric",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
hour12: false,
|
||||||
|
timeZone,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Format tanggal
|
||||||
|
const formattedDate = new Intl.DateTimeFormat("id-ID", options)
|
||||||
|
.format(date)
|
||||||
|
.replace(/\//g, "-"); // Ubah '/' menjadi '-'
|
||||||
|
|
||||||
|
return `${formattedDate} ${timeZoneAbbr}`;
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="border-2 rounded-lg py-2">
|
<div className="border-1 rounded-xl py-2 w-[75%] mx-auto">
|
||||||
<div className="text-2xl font-semibold underline underline-offset-4 text-center decoration-red-600 ">
|
<div className="text-xl font-semibold w-full">
|
||||||
Top 5 News Update
|
<p className="border-b-2 border-red-600 w-fit mx-auto">Media Update</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-white text-black p-1 md:p-5 space-y-5">
|
<div className="bg-white text-black p-1 md:p-5 space-y-5">
|
||||||
<Tabs
|
<Tabs
|
||||||
classNames={{
|
classNames={{
|
||||||
tabList: "bg-white shadow-lg border p-2 rounded-md",
|
tabList: "bg-white shadow-lg border p-2 rounded-lg",
|
||||||
tab: "group-data-[selected=true]:bg-[#bb3523] bg-white p-0 mx-2",
|
tab: "group-data-[selected=true]:bg-[#bb3523] bg-white p-0 mx-2",
|
||||||
tabContent: [
|
tabContent: [
|
||||||
"group-data-[selected=true]:text-[white] text-[#bb3523]",
|
"group-data-[selected=true]:text-[white] text-[#bb3523]",
|
||||||
|
|
@ -107,7 +138,10 @@ export default function MedolUpdate() {
|
||||||
breakpoints={{
|
breakpoints={{
|
||||||
// When the window width is less than 640px
|
// When the window width is less than 640px
|
||||||
720: {
|
720: {
|
||||||
slidesPerView: 2, // Set slidesPerView to 1 on mobile
|
slidesPerView: 3, // Set slidesPerView to 1 on mobile
|
||||||
|
},
|
||||||
|
1080: {
|
||||||
|
slidesPerView: 4,
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
pagination={true}
|
pagination={true}
|
||||||
|
|
@ -142,15 +176,17 @@ export default function MedolUpdate() {
|
||||||
radius="lg"
|
radius="lg"
|
||||||
width="300%"
|
width="300%"
|
||||||
alt="tes"
|
alt="tes"
|
||||||
className="object-cover !h-[30vh]"
|
className="object-cover !h-[20vh]"
|
||||||
src={newsItem.thumbnailLink}
|
src={newsItem.thumbnailLink}
|
||||||
/>
|
/>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
<CardFooter className="flex flex-col items-start text-left">
|
<CardFooter className="flex flex-col items-start text-left">
|
||||||
<p className="text-xs">
|
<p className="text-xs">
|
||||||
{convertDateFormatNoTime(newsItem?.createdAt)}
|
{formatDate(newsItem?.createdAt)}
|
||||||
</p>
|
</p>
|
||||||
<b className="">{newsItem?.title}</b>
|
<b className="text-sm">
|
||||||
|
{textEllipsis(newsItem?.title, 50)}
|
||||||
|
</b>
|
||||||
</CardFooter>
|
</CardFooter>
|
||||||
</Card>
|
</Card>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
@ -179,7 +215,10 @@ export default function MedolUpdate() {
|
||||||
breakpoints={{
|
breakpoints={{
|
||||||
// When the window width is less than 640px
|
// When the window width is less than 640px
|
||||||
720: {
|
720: {
|
||||||
slidesPerView: 2, // Set slidesPerView to 1 on mobile
|
slidesPerView: 3, // Set slidesPerView to 1 on mobile
|
||||||
|
},
|
||||||
|
1080: {
|
||||||
|
slidesPerView: 4,
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
pagination={true}
|
pagination={true}
|
||||||
|
|
@ -214,13 +253,16 @@ export default function MedolUpdate() {
|
||||||
radius="lg"
|
radius="lg"
|
||||||
width="300%"
|
width="300%"
|
||||||
alt="tes"
|
alt="tes"
|
||||||
className="object-cover !h-[30vh]"
|
className="object-cover !h-[20vh]"
|
||||||
src={newsItem?.image}
|
src={newsItem?.image}
|
||||||
/>
|
/>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
<CardFooter className="flex flex-col items-start text-left">
|
<CardFooter className="flex flex-col items-start text-left">
|
||||||
{convertDateFormatNoTime(newsItem?.date)}
|
{/* {convertDateFormatNoTime(newsItem?.date)} */}
|
||||||
<b className="">{newsItem?.title}</b>
|
<p className="text-xs">{formatDate(newsItem?.date)}</p>
|
||||||
|
<b className="text-sm">
|
||||||
|
{textEllipsis(newsItem?.title, 50)}
|
||||||
|
</b>
|
||||||
</CardFooter>
|
</CardFooter>
|
||||||
</Card>
|
</Card>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
@ -249,7 +291,10 @@ export default function MedolUpdate() {
|
||||||
breakpoints={{
|
breakpoints={{
|
||||||
// When the window width is less than 640px
|
// When the window width is less than 640px
|
||||||
720: {
|
720: {
|
||||||
slidesPerView: 2, // Set slidesPerView to 1 on mobile
|
slidesPerView: 3, // Set slidesPerView to 1 on mobile
|
||||||
|
},
|
||||||
|
1080: {
|
||||||
|
slidesPerView: 4,
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
pagination={true}
|
pagination={true}
|
||||||
|
|
@ -287,13 +332,16 @@ export default function MedolUpdate() {
|
||||||
radius="lg"
|
radius="lg"
|
||||||
width="300%"
|
width="300%"
|
||||||
alt="tes"
|
alt="tes"
|
||||||
className="object-cover !h-[30vh]"
|
className="object-cover !h-[20vh]"
|
||||||
src={newsItem?.thumbnail}
|
src={newsItem?.thumbnail}
|
||||||
/>
|
/>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
<CardFooter className="flex flex-col items-start text-left">
|
<CardFooter className="flex flex-col items-start text-left">
|
||||||
{newsItem?.created_at}
|
{/* {newsItem?.created_at} */}
|
||||||
<b className="">{newsItem?.judul}</b>
|
<p className="text-xs">{newsItem?.created_at}</p>
|
||||||
|
<b className="text-sm">
|
||||||
|
{textEllipsis(newsItem?.judul, 50)}
|
||||||
|
</b>
|
||||||
</CardFooter>
|
</CardFooter>
|
||||||
</Card>
|
</Card>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
|
||||||
|
|
@ -51,31 +51,33 @@ export default function NewsTicker() {
|
||||||
<span className="mr-2"></span> BREAKING NEWS
|
<span className="mr-2"></span> BREAKING NEWS
|
||||||
<div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clipPath-triangle"></div>
|
<div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clipPath-triangle"></div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
{article && (
|
||||||
className={`w-full px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${
|
<div
|
||||||
animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"
|
className={`w-full px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${
|
||||||
}`}
|
animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"
|
||||||
>
|
}`}
|
||||||
<Link
|
|
||||||
href={`news/detail/${article[currentNewsIndex]?.id}-${article[currentNewsIndex]?.slug}`}
|
|
||||||
className="hidden lg:block"
|
|
||||||
>
|
>
|
||||||
<p className="text-sm lg:text-base">
|
<Link
|
||||||
{article[currentNewsIndex]?.title}
|
href={`news/detail/${article[currentNewsIndex]?.id}-${article[currentNewsIndex]?.slug}`}
|
||||||
|
className="hidden lg:block"
|
||||||
|
>
|
||||||
|
<p className="text-sm lg:text-base">
|
||||||
|
{article[currentNewsIndex]?.title}
|
||||||
|
</p>
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href={`news/detail/${article[currentNewsIndex]?.id}-${article[currentNewsIndex]?.slug}`}
|
||||||
|
className="lg:hidden"
|
||||||
|
>
|
||||||
|
<p className="text-sm lg:text-base">
|
||||||
|
{textEllipsis(article[currentNewsIndex]?.title, 28)}
|
||||||
|
</p>
|
||||||
|
</Link>
|
||||||
|
<p className="text-xs">
|
||||||
|
{convertDateFormat(article[currentNewsIndex]?.createdAt)}
|
||||||
</p>
|
</p>
|
||||||
</Link>
|
</div>
|
||||||
<Link
|
)}
|
||||||
href={`news/detail/${article[currentNewsIndex]?.id}-${article[currentNewsIndex]?.slug}`}
|
|
||||||
className="lg:hidden"
|
|
||||||
>
|
|
||||||
<p className="text-sm lg:text-base">
|
|
||||||
{textEllipsis(article[currentNewsIndex]?.title, 28)}
|
|
||||||
</p>
|
|
||||||
</Link>
|
|
||||||
<p className="text-xs">
|
|
||||||
{convertDateFormat(article[currentNewsIndex]?.createdAt)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-row text-white h-full gap-[1px]">
|
<div className="flex flex-row text-white h-full gap-[1px]">
|
||||||
<a
|
<a
|
||||||
className="bg-[#bb3523] h-full flex items-center"
|
className="bg-[#bb3523] h-full flex items-center"
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
CardFooter,
|
||||||
|
CircularProgress,
|
||||||
|
ScrollShadow,
|
||||||
|
} from "@heroui/react";
|
||||||
|
import { ChevronLeftIcon, ChevronRightIcon, EyeIcon } from "../icons";
|
||||||
|
import { Swiper, SwiperSlide, useSwiper } from "swiper/react";
|
||||||
|
import "swiper/css";
|
||||||
|
import "swiper/css/navigation";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
import { Autoplay, Pagination, Navigation, Controller } from "swiper/modules";
|
||||||
|
const datas = [
|
||||||
|
{ id: 1, src: "/props-1.png" },
|
||||||
|
{ id: 2, src: "/props-2.png" },
|
||||||
|
{ id: 2, src: "/props-3.png" },
|
||||||
|
];
|
||||||
|
export default function AddsCarousel() {
|
||||||
|
return (
|
||||||
|
<div className="w-[75%] mx-auto">
|
||||||
|
{datas ? (
|
||||||
|
<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-[40px]",
|
||||||
|
"!h-[40px]"
|
||||||
|
);
|
||||||
|
swiper.navigation.prevEl?.classList.add(
|
||||||
|
"bg-white/70",
|
||||||
|
"!text-black",
|
||||||
|
"rounded-full",
|
||||||
|
"!w-[40px]",
|
||||||
|
"!h-[40px]"
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{datas?.map((newsItem: any, index: number) => (
|
||||||
|
<SwiperSlide key={newsItem?.id} className="h-[50vh]">
|
||||||
|
<Card
|
||||||
|
isFooterBlurred
|
||||||
|
radius="lg"
|
||||||
|
className="border-none h-[50vh] shadow-none"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
alt="headernews"
|
||||||
|
width={1440}
|
||||||
|
height={1080}
|
||||||
|
src={newsItem?.src == "" ? "/no-image.jpg" : newsItem?.src}
|
||||||
|
className="w-full !h-[50vh] object-cover rounded-lg"
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
</SwiperSlide>
|
||||||
|
))}
|
||||||
|
</Swiper>
|
||||||
|
) : (
|
||||||
|
<CircularProgress aria-label="Loading..." size="lg" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,233 @@
|
||||||
|
"use client";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import Image from "next/image";
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import {
|
||||||
|
ChevronDownIcon,
|
||||||
|
ChevronLeftIcon,
|
||||||
|
ChevronRightIcon,
|
||||||
|
ChevronUpIcon,
|
||||||
|
FbIconNav,
|
||||||
|
IdnIcon,
|
||||||
|
IgIcon,
|
||||||
|
SearchIcon,
|
||||||
|
SearchIcons,
|
||||||
|
TtIcon,
|
||||||
|
TwIcon,
|
||||||
|
UKIcon,
|
||||||
|
YtIcon,
|
||||||
|
} from "../icons";
|
||||||
|
import Link from "next/link";
|
||||||
|
import {
|
||||||
|
Dropdown,
|
||||||
|
DropdownTrigger,
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownItem,
|
||||||
|
Button,
|
||||||
|
Input,
|
||||||
|
} from "@heroui/react";
|
||||||
|
import storedLanguage from "@/store/language-store";
|
||||||
|
import { ThemeSwitch } from "../theme-switch";
|
||||||
|
|
||||||
|
const images = [
|
||||||
|
"/landing-1.jpg",
|
||||||
|
"/landing-2.jpg",
|
||||||
|
"/landing-3.jpg",
|
||||||
|
"/landing-4.jpg",
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function BannerHumasNew() {
|
||||||
|
const t = useTranslations("Banner");
|
||||||
|
const [currentIndex, setCurrentIndex] = useState(0);
|
||||||
|
const [resetTimer, setResetTimer] = useState(0);
|
||||||
|
const [onOpen, setOnOpen] = useState(false);
|
||||||
|
const [searchValue, setSearchValue] = useState("");
|
||||||
|
const language = storedLanguage((state) => state.locale);
|
||||||
|
const setLanguage = storedLanguage((state) => state.setLocale);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
|
||||||
|
}, 25000);
|
||||||
|
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [resetTimer]);
|
||||||
|
const nextImage = () => {
|
||||||
|
setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
|
||||||
|
setResetTimer((prev) => prev + 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const prevImage = () => {
|
||||||
|
setCurrentIndex(
|
||||||
|
(prevIndex) => (prevIndex - 1 + images.length) % images.length
|
||||||
|
);
|
||||||
|
setResetTimer((prev) => prev + 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-fit relative text-white overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="flex w-full h-[78vh] lg:h-[60vh] transition-transform duration-700 ease-in-out"
|
||||||
|
style={{ transform: `translateX(-${currentIndex * 100}%)` }}
|
||||||
|
>
|
||||||
|
{images.map((img, index) => (
|
||||||
|
<Link href="" key={index} className="w-full shrink-0">
|
||||||
|
<Image
|
||||||
|
src={img}
|
||||||
|
width={1440}
|
||||||
|
height={1080}
|
||||||
|
alt={`humasbanner-${index}`}
|
||||||
|
className="w-full h-full object-cover object-center opacity-[25] dark:opacity-70"
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="absolute inset-0 bg-black bg-opacity-40" />
|
||||||
|
<div className="absolute z-50 lg:mt-[50px] top-44 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center w-full lg:w-[75%]">
|
||||||
|
<div className="flex flex-col gap-3 justify-between">
|
||||||
|
<div className="flex justify-between items-center mb-10">
|
||||||
|
<div className="flex flex-col gap-1 justify-start items-start">
|
||||||
|
<p className="text-5xl font-bold text-left leading-0">
|
||||||
|
SELAMAT DATANG DI WEBSITE RESMI DIVISI HUMAS POLRI
|
||||||
|
</p>
|
||||||
|
<p>OBYEKTIF - DIPERCAYA - PARTISIPASI</p>
|
||||||
|
</div>
|
||||||
|
<Image
|
||||||
|
src="/divhumas.png"
|
||||||
|
width={720}
|
||||||
|
height={720}
|
||||||
|
alt="logo-humas"
|
||||||
|
className="w-[200px]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<div className="flex flex-row gap-6">
|
||||||
|
<Dropdown onOpenChange={setOnOpen}>
|
||||||
|
<DropdownTrigger>
|
||||||
|
<Button
|
||||||
|
className="w-[200px] bg-white dark:bg-stone-900"
|
||||||
|
radius="sm"
|
||||||
|
endContent={
|
||||||
|
onOpen ? <ChevronUpIcon /> : <ChevronDownIcon />
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<p className="text-left w-full font-bold text-md">Menu</p>
|
||||||
|
</Button>
|
||||||
|
</DropdownTrigger>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownItem key="pemas">Pelayanan Masyarakat</DropdownItem>
|
||||||
|
<DropdownItem key="info">Informasi Publik</DropdownItem>
|
||||||
|
<DropdownItem key="tentang">Tentang</DropdownItem>
|
||||||
|
<DropdownItem key="apps">Aplikasi Polri</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
<Link href={`https://eppid.polri.go.id/`}>
|
||||||
|
<Button className="bg-white dark:bg-stone-900" radius="sm">
|
||||||
|
<p className="font-bold w-full ">e-PPID Polri</p>
|
||||||
|
</Button>{" "}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<Input
|
||||||
|
label=""
|
||||||
|
placeholder="Temukkan Informasi Publik Terkini Dari Polri"
|
||||||
|
type="text"
|
||||||
|
value={searchValue}
|
||||||
|
onValueChange={setSearchValue}
|
||||||
|
className="max-w-md"
|
||||||
|
endContent={
|
||||||
|
<Link
|
||||||
|
href={`/news/all?search=${searchValue}`}
|
||||||
|
className="text-black"
|
||||||
|
>
|
||||||
|
<SearchIcons />
|
||||||
|
</Link>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* <p className="text-[30px] lg:text-[42px] lg:leading-10 font-bold pb-1 md:pb-5">
|
||||||
|
{t("jumbotron")}
|
||||||
|
</p> */}
|
||||||
|
{/* <p className="text-xs md:text-medium">{`"${t("phrase")}"`}</p> */}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={prevImage}
|
||||||
|
className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black/50 text-white px-2 py-2 rounded-full hover:bg-black/70 transition"
|
||||||
|
>
|
||||||
|
<ChevronLeftIcon />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={nextImage}
|
||||||
|
className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black/50 text-white px-2 py-2 rounded-full hover:bg-black/70 transition"
|
||||||
|
>
|
||||||
|
<ChevronRightIcon />
|
||||||
|
</button>
|
||||||
|
<div className="absolute bottom-4 right-60">
|
||||||
|
<div className="flex">
|
||||||
|
<div className="flex gap-1 lg:gap-3 items-center">
|
||||||
|
<Link
|
||||||
|
href="https://www.facebook.com/DivHumasPolri?_rdc=1&_rdr"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<div className="bg-white p-1.5 rounded-md">
|
||||||
|
<FbIconNav size={16} />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="https://www.instagram.com/divisihumaspolri/"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<div className="bg-white p-0.5 rounded-md">
|
||||||
|
<IgIcon size={24} />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="https://www.youtube.com/user/pidhumaspolri"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<div className="bg-white p-0.5 rounded-md">
|
||||||
|
<YtIcon size={24} />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
<Link href="https://twitter.com/DivHumas_Polri" target="_blank">
|
||||||
|
<div className="bg-white p-1 rounded-md">
|
||||||
|
<TwIcon size={20} />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
<Link href="https://www.tiktok.com/@divhumas_polri" target="_blank">
|
||||||
|
<div className="bg-white p-0.5 rounded-md">
|
||||||
|
<TtIcon size={24} />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-md py-0.5 px-1">
|
||||||
|
<ThemeSwitch />
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
className="cursor-pointer"
|
||||||
|
onClick={() =>
|
||||||
|
language === "id" ? setLanguage("en") : setLanguage("id")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{language === "id" ? <IdnIcon /> : <UKIcon />}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
// <div
|
||||||
|
// className={`w-full h-[60vh] bg-cover bg-center rounded-lg shadow-lg`}
|
||||||
|
// style={{ backgroundImage: `url('/landing-3.jpg')` }}
|
||||||
|
// />
|
||||||
|
// <div
|
||||||
|
// className={`w-full h-[60vh] bg-cover bg-center rounded-lg shadow-lg relative`}
|
||||||
|
// >
|
||||||
|
// <div
|
||||||
|
// className="absolute inset-0 bg-black bg-opacity-100 bg-cover bg-center object-cover"
|
||||||
|
// style={{ backgroundImage: `url('/landing-3.jpg')` }}
|
||||||
|
// />
|
||||||
|
// <div className="flex flex-row p-4">Your Text Here</div>
|
||||||
|
// </div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -20,7 +20,7 @@ export default function FooterNew() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mb-[60px] relative text-xs leading-4 md:leading-loose lg:leading-8 font-semibold">
|
<div className="mb-[60px] relative text-xs leading-4 md:leading-loose lg:leading-8 font-semibold">
|
||||||
<div className="py-10 px-36 flex flex-col gap-4 text-white bg-gradient-to-r from-red-400 via-[#bd4434] to-[#bb3523] from-3% via-50% to-70% ">
|
<div className="py-10 px-36 flex flex-col gap-4 text-white bg-gradient-to-r from-[#A88155] via-[#ad1719] to-[#AA0004] from-3% via-50% to-70% ">
|
||||||
<div className="flex justify-center text-2xl">Channel Humas Polri</div>
|
<div className="flex justify-center text-2xl">Channel Humas Polri</div>
|
||||||
<div className="flex flex-row gap-4 justify-around items-center">
|
<div className="flex flex-row gap-4 justify-around items-center">
|
||||||
<Link href="">
|
<Link href="">
|
||||||
|
|
@ -159,7 +159,7 @@ export default function FooterNew() {
|
||||||
<Button className="mt-1 text-black bg-white ">
|
<Button className="mt-1 text-black bg-white ">
|
||||||
<p className="text-xs">Kontributor Wilayah</p>
|
<p className="text-xs">Kontributor Wilayah</p>
|
||||||
</Button>
|
</Button>
|
||||||
</Link>{" "}
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
"use client";
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
CardBody,
|
||||||
|
CardFooter,
|
||||||
|
Image,
|
||||||
|
Tab,
|
||||||
|
Tabs,
|
||||||
|
} from "@heroui/react";
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { Swiper, SwiperSlide } from "swiper/react";
|
||||||
|
import "swiper/css";
|
||||||
|
import "swiper/css/navigation";
|
||||||
|
import "swiper/css/pagination";
|
||||||
|
import { Navigation, Pagination } from "swiper/modules";
|
||||||
|
import { topNewsMediahub } from "@/service/medol-news-update";
|
||||||
|
import Link from "next/link";
|
||||||
|
import {
|
||||||
|
getImageInp,
|
||||||
|
inpLogin,
|
||||||
|
topNewsInp,
|
||||||
|
topNewsTbn,
|
||||||
|
} from "@/service/third-party-service";
|
||||||
|
import { convertDateFormatNoTime, textEllipsis } from "@/utils/global";
|
||||||
|
import PolriTvWidget from "../ui/social-media/polri-tv";
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import TwitterWidget from "../ui/social-media/twitter";
|
||||||
|
import InstagramWidget from "../ui/social-media/instagram";
|
||||||
|
import YoutubeWidget from "../ui/social-media/youtube";
|
||||||
|
|
||||||
|
export default function SocialMediaNew() {
|
||||||
|
const [selectedTab, setSelectedTab] = useState<any>("x");
|
||||||
|
const [mediahubUpdate, setMediahubUpdate] = useState<any>([]);
|
||||||
|
const [tbnUpdate, setTbnUpdate] = useState([]);
|
||||||
|
const [inpUpdate, setInpUpdate] = useState([]);
|
||||||
|
|
||||||
|
const t = useTranslations("Landing");
|
||||||
|
return (
|
||||||
|
<div className="border-1 rounded-xl py-2 w-[75%] mx-auto">
|
||||||
|
<div className="text-xl font-semibold w-full">
|
||||||
|
<p className="border-b-2 border-red-600 w-fit mx-auto">
|
||||||
|
Media Sosial Humas
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white text-black p-1 md:p-5 space-y-5">
|
||||||
|
<Tabs
|
||||||
|
classNames={{
|
||||||
|
tabList: "bg-white shadow-lg border p-2 rounded-lg",
|
||||||
|
tab: "group-data-[selected=true]:bg-[#bb3523] bg-white p-0 mx-2",
|
||||||
|
tabContent: [
|
||||||
|
"group-data-[selected=true]:text-[white] text-[#bb3523]",
|
||||||
|
"group-data-[selected=true]:bg-[#bb3523] bg-white rounded-md px-4 py-2",
|
||||||
|
],
|
||||||
|
}}
|
||||||
|
aria-label="Options"
|
||||||
|
// color="[#bb3523]"
|
||||||
|
className="flex justify-center"
|
||||||
|
selectedKey={selectedTab}
|
||||||
|
onSelectionChange={setSelectedTab}
|
||||||
|
>
|
||||||
|
<Tab key="x" title="X">
|
||||||
|
<TwitterWidget />
|
||||||
|
</Tab>
|
||||||
|
<Tab key="ig" title="Instagram">
|
||||||
|
<InstagramWidget />
|
||||||
|
</Tab>
|
||||||
|
<Tab key="yt" title="Youtube">
|
||||||
|
<YoutubeWidget />
|
||||||
|
</Tab>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -21,8 +21,8 @@ export const HumasLayout = ({ children }: Props) => {
|
||||||
if (!hasMounted) return null;
|
if (!hasMounted) return null;
|
||||||
return (
|
return (
|
||||||
<section className="flex flex-col">
|
<section className="flex flex-col">
|
||||||
<NavbarHumas size="sm" />
|
{/* <NavbarHumas size="sm" /> */}
|
||||||
<NavbarHumas size="lg" />
|
{/* <NavbarHumas size="lg" /> */}
|
||||||
<NewsTicker />
|
<NewsTicker />
|
||||||
|
|
||||||
{children}
|
{children}
|
||||||
|
|
|
||||||
|
|
@ -10,68 +10,74 @@ import clsx from "clsx";
|
||||||
import { SunFilledIcon, MoonFilledIcon } from "@/components/icons";
|
import { SunFilledIcon, MoonFilledIcon } from "@/components/icons";
|
||||||
|
|
||||||
export interface ThemeSwitchProps {
|
export interface ThemeSwitchProps {
|
||||||
className?: string;
|
className?: string;
|
||||||
classNames?: SwitchProps["classNames"];
|
classNames?: SwitchProps["classNames"];
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ThemeSwitch: FC<ThemeSwitchProps> = ({
|
export const ThemeSwitch: FC<ThemeSwitchProps> = ({
|
||||||
className,
|
className,
|
||||||
classNames,
|
classNames,
|
||||||
}) => {
|
}) => {
|
||||||
const { theme, setTheme } = useTheme();
|
const { theme, setTheme } = useTheme();
|
||||||
const isSSR = useIsSSR();
|
const isSSR = useIsSSR();
|
||||||
|
|
||||||
const onChange = () => {
|
const onChange = () => {
|
||||||
theme === "light" ? setTheme("dark") : setTheme("light");
|
theme === "light" ? setTheme("dark") : setTheme("light");
|
||||||
};
|
};
|
||||||
|
|
||||||
const {
|
const {
|
||||||
Component,
|
Component,
|
||||||
slots,
|
slots,
|
||||||
isSelected,
|
isSelected,
|
||||||
getBaseProps,
|
getBaseProps,
|
||||||
getInputProps,
|
getInputProps,
|
||||||
getWrapperProps,
|
getWrapperProps,
|
||||||
} = useSwitch({
|
} = useSwitch({
|
||||||
isSelected: theme === "light" || isSSR,
|
isSelected: theme === "light" || isSSR,
|
||||||
"aria-label": `Switch to ${theme === "light" || isSSR ? "dark" : "light"} mode`,
|
"aria-label": `Switch to ${
|
||||||
onChange,
|
theme === "light" || isSSR ? "dark" : "light"
|
||||||
});
|
} mode`,
|
||||||
|
onChange,
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Component
|
<Component
|
||||||
{...getBaseProps({
|
{...getBaseProps({
|
||||||
className: clsx(
|
className: clsx(
|
||||||
"px-px transition-opacity hover:opacity-80 cursor-pointer",
|
"px-px transition-opacity hover:opacity-80 cursor-pointer",
|
||||||
className,
|
className,
|
||||||
classNames?.base
|
classNames?.base
|
||||||
),
|
),
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<VisuallyHidden>
|
<VisuallyHidden>
|
||||||
<input {...getInputProps()} />
|
<input {...getInputProps()} />
|
||||||
</VisuallyHidden>
|
</VisuallyHidden>
|
||||||
<div
|
<div
|
||||||
{...getWrapperProps()}
|
{...getWrapperProps()}
|
||||||
className={slots.wrapper({
|
className={slots.wrapper({
|
||||||
class: clsx(
|
class: clsx(
|
||||||
[
|
[
|
||||||
"w-auto h-auto",
|
"w-auto h-auto",
|
||||||
"bg-transparent",
|
"bg-transparent",
|
||||||
"rounded-lg",
|
"rounded-lg",
|
||||||
"flex items-center justify-center",
|
"flex items-center justify-center",
|
||||||
"group-data-[selected=true]:bg-transparent",
|
"group-data-[selected=true]:bg-transparent",
|
||||||
"!text-default-500",
|
"!text-default-500",
|
||||||
"pt-px",
|
"pt-px",
|
||||||
"px-0",
|
"px-0",
|
||||||
"mx-0",
|
"mx-0",
|
||||||
],
|
],
|
||||||
classNames?.wrapper
|
classNames?.wrapper
|
||||||
),
|
),
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
{!isSelected || isSSR ? <SunFilledIcon size={22} /> : <MoonFilledIcon size={22} />}
|
{!isSelected || isSSR ? (
|
||||||
</div>
|
<SunFilledIcon size={16} />
|
||||||
</Component>
|
) : (
|
||||||
);
|
<MoonFilledIcon size={16} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Component>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 691 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 761 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 321 KiB |
Loading…
Reference in New Issue