feat:new landing
This commit is contained in:
Rama Priyanto
parent
80fd365755
commit
f94e21d953
|
|
@ -1,4 +1,5 @@
|
|||
"use client";
|
||||
import BannerHumasNew from "@/components/landing/banner-new";
|
||||
import BannerHumas from "@/components/landing/BannerHumas";
|
||||
import BodyLayout from "@/components/landing/BodyLayout";
|
||||
import HeaderNews from "@/components/landing/HeaderNews";
|
||||
|
|
@ -18,7 +19,7 @@ export default function Home() {
|
|||
return (
|
||||
<>
|
||||
<HumasLayout>
|
||||
<BannerHumas />
|
||||
<BannerHumasNew />
|
||||
<HeaderNews />
|
||||
<BodyLayout />
|
||||
</HumasLayout>
|
||||
|
|
|
|||
|
|
@ -331,7 +331,7 @@ export const ChevronUpIcon = ({
|
|||
{...props}
|
||||
>
|
||||
<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"
|
||||
></path>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,27 @@
|
|||
"use client";
|
||||
import CategorySatker from "./CategorySatker";
|
||||
import ENewsPolri from "./ENewsPolri";
|
||||
import MediaSocial from "./MediaSocial";
|
||||
import AddsCarousel from "./adds-carousel";
|
||||
import MedolUpdate from "./MedolUpdate";
|
||||
import PolriApps from "./PolriApps";
|
||||
import RegionalNews from "./RegionalNews";
|
||||
import SidebarNav from "./SidebarNav";
|
||||
import SocialMediaNew from "./social-media";
|
||||
|
||||
export default function BodyLayout() {
|
||||
return (
|
||||
<>
|
||||
<div className="lg:flex bg-white text-black p-2 lg:p-8 gap-9">
|
||||
<div className="lg:w-[75%] space-y-7">
|
||||
<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">
|
||||
<CategorySatker />
|
||||
<RegionalNews />
|
||||
<PolriApps />
|
||||
<MedolUpdate />
|
||||
<MediaSocial />
|
||||
{/* <ENewsPolri /> */}
|
||||
</div>
|
||||
<div className="w-full lg:w-[25%]">
|
||||
<ENewsPolri />
|
||||
</div> */}
|
||||
{/* <div className="w-full lg:w-[25%]">
|
||||
<SidebarNav />
|
||||
</div> */}
|
||||
<div className="w-full space-y-5">
|
||||
<AddsCarousel />
|
||||
<MedolUpdate />
|
||||
<SocialMediaNew />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -57,308 +57,323 @@ export default function HeaderNews() {
|
|||
limit: "10",
|
||||
sortBy: "view_count",
|
||||
sort: "desc",
|
||||
isPublish: true,
|
||||
};
|
||||
const response = await getListArticle(req);
|
||||
setHotNews(response?.data?.data);
|
||||
console.log("sadadasdasd", response?.data?.data);
|
||||
}
|
||||
|
||||
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, 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}
|
||||
<div className="w-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">
|
||||
<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]"
|
||||
);
|
||||
}}
|
||||
>
|
||||
<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
|
||||
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>
|
||||
{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"
|
||||
/> */}
|
||||
|
||||
<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, 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">
|
||||
<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 />
|
||||
<EyeIcon className="text-black dark:text-white" />
|
||||
{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"
|
||||
}
|
||||
>
|
||||
{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>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
) : (
|
||||
<CircularProgress aria-label="Loading..." size="lg" />
|
||||
)}
|
||||
</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, index: number) => (
|
||||
<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>
|
||||
<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]">
|
||||
<p className="text-base font-bold text-center dark:text-white text-black">
|
||||
{t("berita")}
|
||||
</p>
|
||||
<ScrollShadow hideScrollBar className="h-[33vh] lg:h-[39vh] ">
|
||||
{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
|
||||
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>
|
||||
<div className="flex flex-row gap-1">
|
||||
<p className="py-[2px] text-left text-xs">
|
||||
{convertDateFormat(list?.createdAt)} WIB
|
||||
<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 text-xs">
|
||||
<EyeIcon />
|
||||
{list?.viewCount === null ? 0 : list?.viewCount}
|
||||
<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-[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>
|
||||
<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-[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">
|
||||
<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>
|
||||
)}
|
||||
</Swiper>
|
||||
) : (
|
||||
<CircularProgress aria-label="Loading..." size="lg" />
|
||||
)}
|
||||
</div>
|
||||
<div className="lg:w-[25%] h-[50vh] rounded-md text-white dark:text-black ">
|
||||
{/* <GPRKominfo /> */}
|
||||
|
||||
{selectedTab === "media" ? (
|
||||
<div className="lg:!h-[50vh] p-2 dark:bg-stone-800 bg-[#f0f0f0] dark:text-white text-black rounded-lg">
|
||||
<div className="text-sm flex flex-row gap-3 mx-2 mb-2">
|
||||
<a
|
||||
onClick={() => setSelectedTab("media")}
|
||||
className={
|
||||
"text-black border-b-3 border-red-400 cursor-pointer p-0"
|
||||
}
|
||||
>
|
||||
{t("terkini")}
|
||||
</a>
|
||||
<a
|
||||
onClick={() => setSelectedTab("video")}
|
||||
className={"text-slate-300 cursor-pointer"}
|
||||
>
|
||||
Video Virtual
|
||||
</a>
|
||||
</div>
|
||||
<ScrollShadow hideScrollBar className="h-[39vh]">
|
||||
{article?.map((list: any, index: number) => (
|
||||
<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-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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import {
|
|||
topNewsInp,
|
||||
topNewsTbn,
|
||||
} 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 { useTranslations } from "next-intl";
|
||||
|
||||
|
|
@ -62,7 +62,6 @@ export default function MedolUpdate() {
|
|||
const res = await topNewsInp(resLog?.data?.access_token);
|
||||
// setInpUpdate(res?.data);
|
||||
setInpUpdate(res?.data?.data);
|
||||
console.log("reelog", res?.data?.data);
|
||||
|
||||
// getDataImage(res?.data);
|
||||
}
|
||||
|
|
@ -77,15 +76,47 @@ export default function MedolUpdate() {
|
|||
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 (
|
||||
<div className="border-2 rounded-lg py-2">
|
||||
<div className="text-2xl font-semibold underline underline-offset-4 text-center decoration-red-600 ">
|
||||
Top 5 News Update
|
||||
<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 Update</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-md",
|
||||
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]",
|
||||
|
|
@ -107,7 +138,10 @@ export default function MedolUpdate() {
|
|||
breakpoints={{
|
||||
// When the window width is less than 640px
|
||||
720: {
|
||||
slidesPerView: 2, // Set slidesPerView to 1 on mobile
|
||||
slidesPerView: 3, // Set slidesPerView to 1 on mobile
|
||||
},
|
||||
1080: {
|
||||
slidesPerView: 4,
|
||||
},
|
||||
}}
|
||||
pagination={true}
|
||||
|
|
@ -142,15 +176,17 @@ export default function MedolUpdate() {
|
|||
radius="lg"
|
||||
width="300%"
|
||||
alt="tes"
|
||||
className="object-cover !h-[30vh]"
|
||||
className="object-cover !h-[20vh]"
|
||||
src={newsItem.thumbnailLink}
|
||||
/>
|
||||
</CardBody>
|
||||
<CardFooter className="flex flex-col items-start text-left">
|
||||
<p className="text-xs">
|
||||
{convertDateFormatNoTime(newsItem?.createdAt)}
|
||||
{formatDate(newsItem?.createdAt)}
|
||||
</p>
|
||||
<b className="">{newsItem?.title}</b>
|
||||
<b className="text-sm">
|
||||
{textEllipsis(newsItem?.title, 50)}
|
||||
</b>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Link>
|
||||
|
|
@ -179,7 +215,10 @@ export default function MedolUpdate() {
|
|||
breakpoints={{
|
||||
// When the window width is less than 640px
|
||||
720: {
|
||||
slidesPerView: 2, // Set slidesPerView to 1 on mobile
|
||||
slidesPerView: 3, // Set slidesPerView to 1 on mobile
|
||||
},
|
||||
1080: {
|
||||
slidesPerView: 4,
|
||||
},
|
||||
}}
|
||||
pagination={true}
|
||||
|
|
@ -214,13 +253,16 @@ export default function MedolUpdate() {
|
|||
radius="lg"
|
||||
width="300%"
|
||||
alt="tes"
|
||||
className="object-cover !h-[30vh]"
|
||||
className="object-cover !h-[20vh]"
|
||||
src={newsItem?.image}
|
||||
/>
|
||||
</CardBody>
|
||||
<CardFooter className="flex flex-col items-start text-left">
|
||||
{convertDateFormatNoTime(newsItem?.date)}
|
||||
<b className="">{newsItem?.title}</b>
|
||||
{/* {convertDateFormatNoTime(newsItem?.date)} */}
|
||||
<p className="text-xs">{formatDate(newsItem?.date)}</p>
|
||||
<b className="text-sm">
|
||||
{textEllipsis(newsItem?.title, 50)}
|
||||
</b>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Link>
|
||||
|
|
@ -249,7 +291,10 @@ export default function MedolUpdate() {
|
|||
breakpoints={{
|
||||
// When the window width is less than 640px
|
||||
720: {
|
||||
slidesPerView: 2, // Set slidesPerView to 1 on mobile
|
||||
slidesPerView: 3, // Set slidesPerView to 1 on mobile
|
||||
},
|
||||
1080: {
|
||||
slidesPerView: 4,
|
||||
},
|
||||
}}
|
||||
pagination={true}
|
||||
|
|
@ -287,13 +332,16 @@ export default function MedolUpdate() {
|
|||
radius="lg"
|
||||
width="300%"
|
||||
alt="tes"
|
||||
className="object-cover !h-[30vh]"
|
||||
className="object-cover !h-[20vh]"
|
||||
src={newsItem?.thumbnail}
|
||||
/>
|
||||
</CardBody>
|
||||
<CardFooter className="flex flex-col items-start text-left">
|
||||
{newsItem?.created_at}
|
||||
<b className="">{newsItem?.judul}</b>
|
||||
{/* {newsItem?.created_at} */}
|
||||
<p className="text-xs">{newsItem?.created_at}</p>
|
||||
<b className="text-sm">
|
||||
{textEllipsis(newsItem?.judul, 50)}
|
||||
</b>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -51,31 +51,33 @@ export default function NewsTicker() {
|
|||
<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>
|
||||
<div
|
||||
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"
|
||||
{article && (
|
||||
<div
|
||||
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"
|
||||
}`}
|
||||
>
|
||||
<p className="text-sm lg:text-base">
|
||||
{article[currentNewsIndex]?.title}
|
||||
<Link
|
||||
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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-row text-white h-full gap-[1px]">
|
||||
<a
|
||||
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 (
|
||||
<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 flex-row gap-4 justify-around items-center">
|
||||
<Link href="">
|
||||
|
|
@ -159,7 +159,7 @@ export default function FooterNew() {
|
|||
<Button className="mt-1 text-black bg-white ">
|
||||
<p className="text-xs">Kontributor Wilayah</p>
|
||||
</Button>
|
||||
</Link>{" "}
|
||||
</Link>
|
||||
</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;
|
||||
return (
|
||||
<section className="flex flex-col">
|
||||
<NavbarHumas size="sm" />
|
||||
<NavbarHumas size="lg" />
|
||||
{/* <NavbarHumas size="sm" /> */}
|
||||
{/* <NavbarHumas size="lg" /> */}
|
||||
<NewsTicker />
|
||||
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -10,68 +10,74 @@ import clsx from "clsx";
|
|||
import { SunFilledIcon, MoonFilledIcon } from "@/components/icons";
|
||||
|
||||
export interface ThemeSwitchProps {
|
||||
className?: string;
|
||||
classNames?: SwitchProps["classNames"];
|
||||
className?: string;
|
||||
classNames?: SwitchProps["classNames"];
|
||||
}
|
||||
|
||||
export const ThemeSwitch: FC<ThemeSwitchProps> = ({
|
||||
className,
|
||||
classNames,
|
||||
className,
|
||||
classNames,
|
||||
}) => {
|
||||
const { theme, setTheme } = useTheme();
|
||||
const isSSR = useIsSSR();
|
||||
const { theme, setTheme } = useTheme();
|
||||
const isSSR = useIsSSR();
|
||||
|
||||
const onChange = () => {
|
||||
theme === "light" ? setTheme("dark") : setTheme("light");
|
||||
};
|
||||
const onChange = () => {
|
||||
theme === "light" ? setTheme("dark") : setTheme("light");
|
||||
};
|
||||
|
||||
const {
|
||||
Component,
|
||||
slots,
|
||||
isSelected,
|
||||
getBaseProps,
|
||||
getInputProps,
|
||||
getWrapperProps,
|
||||
} = useSwitch({
|
||||
isSelected: theme === "light" || isSSR,
|
||||
"aria-label": `Switch to ${theme === "light" || isSSR ? "dark" : "light"} mode`,
|
||||
onChange,
|
||||
});
|
||||
const {
|
||||
Component,
|
||||
slots,
|
||||
isSelected,
|
||||
getBaseProps,
|
||||
getInputProps,
|
||||
getWrapperProps,
|
||||
} = useSwitch({
|
||||
isSelected: theme === "light" || isSSR,
|
||||
"aria-label": `Switch to ${
|
||||
theme === "light" || isSSR ? "dark" : "light"
|
||||
} mode`,
|
||||
onChange,
|
||||
});
|
||||
|
||||
return (
|
||||
<Component
|
||||
{...getBaseProps({
|
||||
className: clsx(
|
||||
"px-px transition-opacity hover:opacity-80 cursor-pointer",
|
||||
className,
|
||||
classNames?.base
|
||||
),
|
||||
})}
|
||||
>
|
||||
<VisuallyHidden>
|
||||
<input {...getInputProps()} />
|
||||
</VisuallyHidden>
|
||||
<div
|
||||
{...getWrapperProps()}
|
||||
className={slots.wrapper({
|
||||
class: clsx(
|
||||
[
|
||||
"w-auto h-auto",
|
||||
"bg-transparent",
|
||||
"rounded-lg",
|
||||
"flex items-center justify-center",
|
||||
"group-data-[selected=true]:bg-transparent",
|
||||
"!text-default-500",
|
||||
"pt-px",
|
||||
"px-0",
|
||||
"mx-0",
|
||||
],
|
||||
classNames?.wrapper
|
||||
),
|
||||
})}
|
||||
>
|
||||
{!isSelected || isSSR ? <SunFilledIcon size={22} /> : <MoonFilledIcon size={22} />}
|
||||
</div>
|
||||
</Component>
|
||||
);
|
||||
return (
|
||||
<Component
|
||||
{...getBaseProps({
|
||||
className: clsx(
|
||||
"px-px transition-opacity hover:opacity-80 cursor-pointer",
|
||||
className,
|
||||
classNames?.base
|
||||
),
|
||||
})}
|
||||
>
|
||||
<VisuallyHidden>
|
||||
<input {...getInputProps()} />
|
||||
</VisuallyHidden>
|
||||
<div
|
||||
{...getWrapperProps()}
|
||||
className={slots.wrapper({
|
||||
class: clsx(
|
||||
[
|
||||
"w-auto h-auto",
|
||||
"bg-transparent",
|
||||
"rounded-lg",
|
||||
"flex items-center justify-center",
|
||||
"group-data-[selected=true]:bg-transparent",
|
||||
"!text-default-500",
|
||||
"pt-px",
|
||||
"px-0",
|
||||
"mx-0",
|
||||
],
|
||||
classNames?.wrapper
|
||||
),
|
||||
})}
|
||||
>
|
||||
{!isSelected || isSSR ? (
|
||||
<SunFilledIcon size={16} />
|
||||
) : (
|
||||
<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