humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixing home, all content, detail content

This commit is contained in:
Rama Priyanto 2025-01-15 18:08:49 +07:00
parent 6b93b8b79f
commit 2a9b676c5d
23 changed files with 895 additions and 534 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/news/all/layout.tsx
View File

@ -1,10 +1,9 @@
"use client"; "use client";
import { HumasLayout } from "@/components/layout/humas-layout";
export default function AllNewsLayout({ export default function AllNewsLayout({
children, children,
}: { }: {
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return <HumasLayout>{children}</HumasLayout>; return <>{children}</>;
} }

18
app/news/all/page.tsx
View File

@ -1,6 +1,20 @@
"use client";
import ListNews from "@/components/main/detail/list-news"; import ListNews from "@/components/main/detail/list-news";
import React from "react"; import React, { useEffect, useState } from "react";
import { HumasLayout } from "@/components/layout/humas-layout";
export default function ListNewsPage() { export default function ListNewsPage() {
return <ListNews />; const [hasMounted, setHasMounted] = useState(false);
useEffect(() => {
setHasMounted(true);
}, []);
// Render
if (!hasMounted) return null;
return (
<HumasLayout>
<ListNews />
</HumasLayout>
);
} }

5
app/news/detail/[id]/layout.tsx
View File

@ -1,10 +1,7 @@
"use client";
import { HumasLayout } from "@/components/layout/humas-layout";
export default function NewsLayout({ export default function NewsLayout({
children, children,
}: { }: {
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return <HumasLayout>{children}</HumasLayout>; return <>{children}</>;
} }

18
app/news/detail/[id]/page.tsx
View File

@ -1,6 +1,20 @@
"use client";
import { HumasLayout } from "@/components/layout/humas-layout";
import DetailPage from "@/components/main/detail/new-detail"; import DetailPage from "@/components/main/detail/new-detail";
import React from "react"; import React, { useEffect, useState } from "react";
export default function NewsPage() { export default function NewsPage() {
return <DetailPage />; const [hasMounted, setHasMounted] = useState(false);
useEffect(() => {
setHasMounted(true);
}, []);
// Render
if (!hasMounted) return null;
return (
<HumasLayout>
<DetailPage />
</HumasLayout>
);
} }

134
components/icons.tsx
View File

@ -1369,7 +1369,7 @@ export const Calender = ({
width="24" width="24"
height="24" height="24"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="currentColor"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<g clip-path="url(#clip0_988_15814)"> <g clip-path="url(#clip0_988_15814)">
@ -2190,3 +2190,135 @@ export const TimesIcon = ({
/> />
</svg> </svg>
); );
export const CalendarIcon = ({
size,
height = 24,
width = 24,
fill = "currentColor",
...props
}: IconSvgProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size || width}
height={size || height}
viewBox="0 0 24 24"
{...props}
>
<g fill="none">
<path fill="currentColor" d="M4 7v2h16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2" />
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M16 5h2a2 2 0 0 1 2 2v2H4V7a2 2 0 0 1 2-2h2m8 0V3m0 2H8m0-2v2M4 9.5V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9.5"
/>
</g>
</svg>
);
export const ClockIcon = ({
size,
height = 24,
width = 24,
fill = "currentColor",
...props
}: IconSvgProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size || width}
height={size || height}
viewBox="0 0 24 24"
{...props}
>
<path
fill="currentColor"
d="M11.5 3a9.5 9.5 0 0 1 9.5 9.5a9.5 9.5 0 0 1-9.5 9.5A9.5 9.5 0 0 1 2 12.5A9.5 9.5 0 0 1 11.5 3m0 1A8.5 8.5 0 0 0 3 12.5a8.5 8.5 0 0 0 8.5 8.5a8.5 8.5 0 0 0 8.5-8.5A8.5 8.5 0 0 0 11.5 4M11 7h1v5.42l4.7 2.71l-.5.87l-5.2-3z"
/>
</svg>
);
export const SquareFacebookIcon = ({
size,
height = 24,
width = 24,
fill = "currentColor",
...props
}: IconSvgProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size || width}
height={size || height}
viewBox="0 0 24 24"
{...props}
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M15.725 22v-7.745h2.6l.389-3.018h-2.99V9.31c0-.874.243-1.47 1.497-1.47h1.598v-2.7a21 21 0 0 0-2.33-.12c-2.304 0-3.881 1.407-3.881 3.99v2.227H10v3.018h2.607V22H3.104C2.494 22 2 21.506 2 20.896V3.104C2 2.494 2.494 2 3.104 2h17.792C21.506 2 22 2.494 22 3.104v17.792c0 .61-.494 1.104-1.104 1.104z"
/>
</svg>
);
export const SquareXIcon = ({
size,
height = 24,
width = 24,
fill = "currentColor",
...props
}: IconSvgProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size || width}
height={size || height}
viewBox="0 0 24 24"
{...props}
>
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
d="m13.081 10.712l-4.786-6.71a.6.6 0 0 0-.489-.252H5.28a.6.6 0 0 0-.488.948l6.127 8.59m2.162-2.576l6.127 8.59a.6.6 0 0 1-.488.948h-2.526a.6.6 0 0 1-.489-.252l-4.786-6.71m2.162-2.576l5.842-6.962m-8.004 9.538L5.077 20.25"
/>
</svg>
);
export const SquareLinkedInIcon = ({
size,
height = 24,
width = 24,
fill = "currentColor",
...props
}: IconSvgProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size || width}
height={size || height}
viewBox="0 0 24 24"
{...props}
>
<path
fill="currentColor"
d="M20.47 2H3.53a1.45 1.45 0 0 0-1.47 1.43v17.14A1.45 1.45 0 0 0 3.53 22h16.94a1.45 1.45 0 0 0 1.47-1.43V3.43A1.45 1.45 0 0 0 20.47 2M8.09 18.74h-3v-9h3ZM6.59 8.48a1.56 1.56 0 1 1 0-3.12a1.57 1.57 0 1 1 0 3.12m12.32 10.26h-3v-4.83c0-1.21-.43-2-1.52-2A1.65 1.65 0 0 0 12.85 13a2 2 0 0 0-.1.73v5h-3v-9h3V11a3 3 0 0 1 2.71-1.5c2 0 3.45 1.29 3.45 4.06Z"
/>
</svg>
);
export const SquareWhatsappIcon = ({
size,
height = 24,
width = 24,
fill = "currentColor",
...props
}: IconSvgProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size || width}
height={size || height}
viewBox="0 0 24 24"
{...props}
>
<path
fill="currentColor"
d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.95 9.95 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.95 9.95 0 0 1 2.001 12c0-5.523 4.477-10 10-10M8.593 7.3l-.2.008a1 1 0 0 0-.372.1a1.3 1.3 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413c.409.902 1.082 1.857 1.97 2.742c.214.213.424.427.65.626a9.45 9.45 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a2 2 0 0 0 .833-.231a5 5 0 0 0 .383-.22q.001.002.125-.09c.135-.1.218-.171.33-.288q.126-.13.21-.302c.078-.163.156-.474.188-.733c.024-.198.017-.306.014-.373c-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.5.5 0 0 0-.176-.041a.48.48 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13a1.4 1.4 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6 6 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.3 6.3 0 0 1-1.02-1.268l-.059-.095a1 1 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373c.118-.19.155-.385.093-.536q-.42-1.026-.868-2.041c-.059-.134-.234-.23-.393-.249q-.081-.01-.162-.016a3 3 0 0 0-.403.004z"
/>
</svg>
);

6
components/landing/BannerHumas.tsx
View File

@ -8,10 +8,10 @@ export default function BannerHumas() {
<img <img
src="headerbanner1.png" src="headerbanner1.png"
alt="humasbanner" alt="humasbanner"
className="w-full relative h-[33vh] lg:h-auto object-cover" className="w-full relative h-[33vh] lg:h-[95vh] object-cover"
/> />
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center w-full lg:w-[75%]"> <div className="absolute lg:mt-[50px] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center w-full lg:w-[75%]">
<p className="text-sm lg:text-[42px] lg:leading-10 font-bold pb-1 md:pb-5"> <p className="lg:text-[42px] lg:leading-10 font-bold pb-1 md:pb-5">
{t("jumbotron")} {t("jumbotron")}
</p> </p>
<p className="text-xs md:text-medium">{`"${t("phrase")}"`}</p> <p className="text-xs md:text-medium">{`"${t("phrase")}"`}</p>

2
components/landing/BodyLayout.tsx
View File

@ -9,7 +9,7 @@ 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 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">
{/* <MedolUpdate /> */} {/* <MedolUpdate /> */}
{/* <CategorySatker /> */} {/* <CategorySatker /> */}

10
components/landing/ENewsPolri.tsx
View File

@ -28,8 +28,8 @@ export default function ENewsPolri() {
}, []); }, []);
return ( return (
<div className="bg-[#1F1A17] text-center md:rounded-lg h-auto flex py-4 flex-col justify-between items-center rounded-md"> <div className="bg-[#f0f0f0] dark:bg-[#1F1A17] text-center md:rounded-lg h-auto flex py-4 flex-col justify-between items-center rounded-md">
<p className="text-white border-b-3 border-red-500 py-2 mb-3 text-xl"> <p className="text-black dark:text-white border-b-3 border-red-500 py-2 mb-3 text-xl">
E-Majalah Polri E-Majalah Polri
</p> </p>
@ -62,7 +62,7 @@ export default function ENewsPolri() {
className="h-[25vh] object-cover rounded-none" className="h-[25vh] object-cover rounded-none"
/> />
<CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute bottom-1 shadow-small z-10"> <CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute bottom-1 shadow-small z-10">
<div className="text-black dark:text-white"> <div className="text-white">
<Link href={`news/detail/${newsItem.id}`}> <Link href={`news/detail/${newsItem.id}`}>
<p className="text-left font-semibold text-sm"> <p className="text-left font-semibold text-sm">
{textEllipsis(newsItem.title, 40)} {textEllipsis(newsItem.title, 40)}
@ -72,7 +72,7 @@ export default function ENewsPolri() {
{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 className="text-black dark:text-white" /> <EyeIcon className="text-white" />
{newsItem.viewCount === null ? 0 : newsItem.viewCount} {newsItem.viewCount === null ? 0 : newsItem.viewCount}
</p> </p>
</div> </div>
@ -84,7 +84,7 @@ export default function ENewsPolri() {
</div> </div>
</div> </div>
<Link <Link
className="flex items-center gap-2 text-[#DD8306]" className="flex items-center gap-2 text-[#DD8306] mt-3"
href="/e-majalah-polri/daftar-majalah" href="/e-majalah-polri/daftar-majalah"
> >
Lihat Semua <ChevronRightIcon color="[#DD8306]" /> Lihat Semua <ChevronRightIcon color="[#DD8306]" />

2
components/landing/Footer.tsx
View File

@ -137,7 +137,7 @@ export default function Footer() {
</Link> </Link>
</div> </div>
</div> </div>
<div className="grid grid-cols-2 justify-center md:hidden absolute top-0 left-0 w-full gap-5 md:gap-4 px-2 md:px-10 lg:px-20 pt-5 md:pt-16 pb-5 md:pb-20 text-white"> <div className="grid grid-cols-2 justify-center md:hidden absolute top-0 left-0 w-full gap-5 md:gap-4 px-5 md:px-10 lg:px-20 pt-5 md:pt-16 pb-5 md:pb-20 text-white">
<div className="pb-2 md:pb-0 flex flex-col gap-2"> <div className="pb-2 md:pb-0 flex flex-col gap-2">
<Link href="/">Berita Terkini</Link> <Link href="/">Berita Terkini</Link>
<Link href="https://www.kpai.go.id/" target="_blank"> <Link href="https://www.kpai.go.id/" target="_blank">

249
components/landing/HeaderNews.tsx
View File

@ -14,6 +14,7 @@ import { useEffect, useState } from "react";
import { getListArticle } from "@/service/article"; import { getListArticle } from "@/service/article";
import { convertDateFormat, textEllipsis } from "@/utils/global"; import { convertDateFormat, textEllipsis } from "@/utils/global";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { data } from "autoprefixer";
export default function HeaderNews() { export default function HeaderNews() {
const [article, setArticle] = useState<any>([]); const [article, setArticle] = useState<any>([]);
@ -29,130 +30,146 @@ export default function HeaderNews() {
}, []); }, []);
return ( return (
<div className="bg-[#1F1A17] p-2 lg:p-8"> <div className="flex flex-col lg:flex-row gap-3 bg-white p-1 lg:p-8 lg:h-[70vh]">
<div className="flex flex-col lg:flex-row gap-3 bg-white p-1 lg:p-3 rounded-lg lg:h-[70vh]"> <div className="lg:hidden w-full h-full">
<div className="lg:hidden w-full h-full"> <Swiper
<Swiper centeredSlides={true}
centeredSlides={true} autoplay={{
// autoplay={{ delay: 5000,
// delay: 5000, disableOnInteraction: false,
// disableOnInteraction: false, }}
// }} navigation={true}
navigation={true} modules={[Navigation]}
modules={[Navigation]} className="mySwiper"
className="mySwiper" >
> {article?.map((newsItem: any) => (
{article?.map((newsItem: any) => ( <SwiperSlide key={newsItem.id}>
<SwiperSlide key={newsItem.id}> <Card isFooterBlurred radius="lg" className="border-none">
<Card isFooterBlurred radius="lg" className="border-none"> <img
<img alt="headernews"
alt="headernews" src="/headernews.png"
src="/headernews.png" className="h-[25vh] object-cover"
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">
<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">
<div className="text-black dark:text-white"> <Link href={`news/detail/${newsItem.id}-${newsItem?.slug}`}>
<Link href={`news/detail/${newsItem.id}`}> <p className="text-left font-semibold">
<p className="text-left font-semibold"> {textEllipsis(newsItem.title, 40)}
{textEllipsis(newsItem.title, 40)}
</p>
</Link>
<p className="py-[2px] text-left text-sm">
{convertDateFormat(newsItem.createdAt)} WIB
</p> </p>
<p className="flex items-center gap-1 text-sm"> </Link>
<EyeIcon className="text-black dark:text-white" /> <p className="py-[2px] text-left text-sm">
{newsItem.viewCount === null ? 0 : newsItem.viewCount} {convertDateFormat(newsItem.createdAt)} WIB
</p> </p>
</div> <p className="flex items-center gap-1 text-sm">
</CardFooter> <EyeIcon className="text-black dark:text-white" />
</Card> {newsItem.viewCount === null ? 0 : newsItem.viewCount}
</SwiperSlide> </p>
))} </div>
</Swiper> </CardFooter>
</Card>
</SwiperSlide>
))}
</Swiper>
</div>
<div className="w-auto lg:w-[25%] p-2 dark:bg-stone-800 bg-[#f0f0f0] shadow-lg dark:text-white text-black rounded-xl mb-2 md:mb-0 h-[50vh] lg:h-[67vh]">
<p className="text-lg font-bold h-10 text-center dark:text-white text-black">
{t("berita")}
</p>
<ScrollShadow hideScrollBar className="h-[34vh] lg:h-[53vh] ">
{article?.map((data: any) => (
<div
className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md flex flex-row gap-2"
key={data.id}
>
<img
alt="headernews"
src="/headernews.png"
className="object-cover w-[18%]"
/>
<div>
<Link
href={`/news/detail/${data?.id}-${data?.slug}`}
key={data?.id}
className="lg:hidden"
>
{textEllipsis(data.title, 40)}
</Link>
<Link
href={`/news/detail/${data?.id}-${data?.slug}`}
key={data?.id}
className="hidden lg:block"
>
{data.title}{" "}
</Link>
<p className="py-[2px]">
{convertDateFormat(data.createdAt)} WIB
</p>
<p className="flex items-center gap-1">
<EyeIcon />
{data.viewCount === null ? 0 : data.viewCount}
</p>
</div>
</div>
))}
</ScrollShadow>
<div className="m-2">
<Link href="/news/all">
<Button
className="w-full bg-[#DD8306] text-white font-bold rounded-bl-md rounded-br-md focus:outline-none"
radius="none"
>
{t("semua")}
</Button>
</Link>
</div> </div>
<div className="w-auto lg:w-[25%] p-2 bg-[#020101] text-white rounded-lg mb-2 md:mb-0 h-[50vh] lg:h-[67vh]"> </div>
<p className="text-lg font-bold h-10 text-center">{t("berita")}</p>
<ScrollShadow hideScrollBar className="h-[34vh] lg:h-[53vh] gap-3"> <div className="hidden lg:block w-full lg:w-[50%] h-[67vh]">
{article?.map((data: any) => ( <Swiper
<div autoplay={{
className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md flex flex-row gap-2" delay: 5000,
key={data.id} disableOnInteraction: false,
}}
navigation={true}
modules={[Autoplay, Navigation]}
className="mySwiper"
>
{article?.map((newsItem: any) => (
<SwiperSlide key={newsItem.id} className="h-[67vh]">
<Card
isFooterBlurred
radius="lg"
className="border-none h-[67vh]"
> >
<img <img
alt="headernews" alt="headernews"
src="/headernews.png" src="/headernews.png"
className="object-cover w-[18%]" className="w-full h-[67vh] object-cover"
/> />
<div> <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">
<p className="lg:hidden">{textEllipsis(data.title, 40)}</p> <div className="text-white">
<p className="hidden lg:block">{data.title}</p> <Link href={`news/detail/${newsItem.id}-${newsItem?.slug}`}>
<p className="py-[2px]"> <p className="text-left font-semibold">
{convertDateFormat(data.createdAt)} WIB {newsItem.title}
</p>
<p className="flex items-center gap-1">
<EyeIcon />
{data.viewCount === null ? 0 : data.viewCount}
</p>
</div>
</div>
))}
</ScrollShadow>
<div className="m-2">
<Link href="/news/all">
<Button
className="w-full bg-[#DD8306] text-white font-bold rounded-bl-md rounded-br-md focus:outline-none"
radius="none"
>
{t("semua")}
</Button>
</Link>
</div>
</div>
<div className="hidden lg:block w-full lg:w-[50%] h-full">
<Swiper
centeredSlides={true}
autoplay={{
delay: 5000,
disableOnInteraction: false,
}}
navigation={true}
modules={[Autoplay, Navigation]}
className="mySwiper"
>
{article?.map((newsItem: any) => (
<SwiperSlide key={newsItem.id}>
<Card isFooterBlurred radius="lg" className="border-none">
<img
alt="headernews"
src="/headernews.png"
className="h-[67vh] 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-white">
<Link href={`news/detail/${newsItem.id}`}>
<p className="text-left font-semibold">
{newsItem.title}
</p>
</Link>
<p className="py-[2px] text-left text-sm">
{convertDateFormat(newsItem.createdAt)} WIB
</p> </p>
<p className="flex items-center gap-1 text-sm"> </Link>
<EyeIcon /> <p className="py-[2px] text-left text-sm">
{newsItem.viewCount === null ? 0 : newsItem.viewCount} {convertDateFormat(newsItem.createdAt)} WIB
</p> </p>
</div> <p className="flex items-center gap-1 text-sm">
</CardFooter> <EyeIcon />
</Card> {newsItem.viewCount === null ? 0 : newsItem.viewCount}
</SwiperSlide> </p>
))} </div>
</Swiper> </CardFooter>
</div> </Card>
<div className="lg:w-[25%] rounded-md text-white dark:text-black "> </SwiperSlide>
<GPRKominfo /> ))}
</div> </Swiper>
</div>
<div className="lg:w-[25%] rounded-md text-white dark:text-black ">
<GPRKominfo />
</div> </div>
</div> </div>
); );

47
components/landing/MediaSocial.tsx
View File

@ -52,7 +52,7 @@ export default function MediaSocial() {
]; ];
return ( return (
<div className="space-y-5 md:space-y-7"> <div className="space-y-5 md:space-y-7 bg-white text-black rounded-lg ">
<p className="text-xl border-b-3 border-red-500 py-2 w-fit font-semibold"> <p className="text-xl border-b-3 border-red-500 py-2 w-fit font-semibold">
MediaSocial MediaSocial
</p> </p>
@ -62,15 +62,6 @@ export default function MediaSocial() {
<TwitterIcon color="#1DA1F2" /> <TwitterIcon color="#1DA1F2" />
<p className="pl-2 text-xl">Twitter</p> <p className="pl-2 text-xl">Twitter</p>
</div> </div>
<div className="text-xs text-[#DD8306]">
<Link
href="https://x.com/DivHumas_Polri"
target="_blank"
className="flex items-center"
>
Lihat Semua <ChevronRightIcon />
</Link>{" "}
</div>
</div> </div>
<div> <div>
<TwitterWidget /> <TwitterWidget />
@ -82,15 +73,6 @@ export default function MediaSocial() {
<IgIcon size={40} color="#1DA1F2" /> <IgIcon size={40} color="#1DA1F2" />
<p className="pl-2 text-xl">Instagram</p> <p className="pl-2 text-xl">Instagram</p>
</div> </div>
<div className="text-xs text-[#DD8306]">
<Link
href="https://www.instagram.com/divisihumaspolri/"
target="_blank"
className="flex items-center"
>
Lihat Semua <ChevronRightIcon />
</Link>{" "}
</div>
</div> </div>
<div className=""> <div className="">
<InstagramWidget /> <InstagramWidget />
@ -102,15 +84,6 @@ export default function MediaSocial() {
<FbIcon color="#1DA1F2" /> <FbIcon color="#1DA1F2" />
<p className="pl-2 text-xl">Facebook</p> <p className="pl-2 text-xl">Facebook</p>
</div> </div>
<div className="text-xs text-[#DD8306] flex items-center">
<Link
href="https://www.facebook.com/DivHumasPolri"
target="_blank"
className="flex items-center"
>
Lihat Semua <ChevronRightIcon />
</Link>
</div>
</div> </div>
<FacebookWidget /> <FacebookWidget />
</div> </div>
@ -120,15 +93,6 @@ export default function MediaSocial() {
<TtIcon color="#1DA1F2" size={40} /> <TtIcon color="#1DA1F2" size={40} />
<p className="pl-2 text-xl">Tiktok</p> <p className="pl-2 text-xl">Tiktok</p>
</div> </div>
<div className="text-xs text-[#DD8306] flex items-center">
<Link
href="https://www.tiktok.com/@divhumaspolriofficial"
target="_blank"
className="flex items-center"
>
Lihat Semua <ChevronRightIcon />
</Link>{" "}
</div>
</div> </div>
<FacebookWidget /> <FacebookWidget />
</div> </div>
@ -138,15 +102,6 @@ export default function MediaSocial() {
<YtIcon color="#1DA1F2" size={40} /> <YtIcon color="#1DA1F2" size={40} />
<p className="text-xl pl-2">Youtube</p> <p className="text-xl pl-2">Youtube</p>
</div> </div>
<div className="text-xs text-[#DD8306]">
<Link
href="https://www.youtube.com/channel/UCPiCGqy-07vQJUySV5Gs-kA"
className="flex items-center"
target="_blank"
>
Lihat Semua <ChevronRightIcon />
</Link>
</div>
</div> </div>
<div className=" rounded-md "> <div className=" rounded-md ">
<YoutubeWidget /> <YoutubeWidget />

4
components/landing/NewsTicker.tsx
View File

@ -46,13 +46,13 @@ export default function NewsTicker() {
}, [article.length]); }, [article.length]);
return ( return (
<div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between bg-stone-800"> <div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between dark:bg-stone-800 bg-gray-50">
<div className="relative px-4 py-2 font-semibold text-xs lg:text-sm flex items-center bg-amber-500 text-white w-[30%] lg:w-[10%]"> <div className="relative px-4 py-2 font-semibold text-xs lg:text-sm flex items-center bg-amber-500 text-white w-[30%] lg:w-[10%]">
<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-amber-500 transform translate-x-full clip-path-triangle"></div> <div className="absolute right-0 top-0 h-full w-4 bg-amber-500 transform translate-x-full clip-path-triangle"></div>
</div> </div>
<div <div
className={`w-full text-white px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${ 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" animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"
}`} }`}
> >

6
components/landing/SidebarNav.tsx
View File

@ -40,7 +40,7 @@ export default function SidebarNav() {
onClick={() => setSelectedTab("video")} onClick={() => setSelectedTab("video")}
className={ className={
selectedTab === "video" selectedTab === "video"
? "text-black border-b-3 border-red-400 cursor-pointer py-2" ? "text-black border-b-3 border-red-400 cursor-pointer py-2"
: "text-slate-300 cursor-pointer py-2" : "text-slate-300 cursor-pointer py-2"
} }
> >
@ -48,12 +48,12 @@ export default function SidebarNav() {
</a> </a>
</div> </div>
{selectedTab === "media" ? ( {selectedTab === "media" ? (
<div className="h-[410px] p-2 bg-[#020101] text-white rounded-md border-2 border-white"> <div className="h-[410px] p-2 dark:bg-stone-800 bg-[#f0f0f0] dark:text-white text-black rounded-lg">
<ScrollShadow hideScrollBar className=" h-[345px]"> <ScrollShadow hideScrollBar className=" h-[345px]">
{article?.map((list: any) => ( {article?.map((list: any) => (
<div <div
key={list.id} key={list.id}
className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md" className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md"
> >
<Link href={`news/detail/${list?.id}`}> <Link href={`news/detail/${list?.id}`}>
<p className="text-left font-semibold">{list?.title}</p> <p className="text-left font-semibold">{list?.title}</p>

10
components/layout/navbar/NavbarHumas.tsx
View File

@ -120,7 +120,7 @@ export default function NavbarHumas(props: { size: string }) {
<Navbar <Navbar
isBordered isBordered
maxWidth="full" maxWidth="full"
height={size === "sm" ? "4rem" : "8rem"} height={size === "sm" ? "6rem" : "8rem"}
className={`transition-all duration-300 ease-in-out backdrop-opacity-10 ${ className={`transition-all duration-300 ease-in-out backdrop-opacity-10 ${
size === "sm" size === "sm"
? "lg:hidden !bg-white dark:!bg-black " ? "lg:hidden !bg-white dark:!bg-black "
@ -129,14 +129,14 @@ export default function NavbarHumas(props: { size: string }) {
classNames={{ wrapper: "px-0" }} classNames={{ wrapper: "px-0" }}
> >
<div className="w-full h-full flex"> <div className="w-full h-full flex">
<div className="w-full hidden md:flex flex-row pt-3"> <div className="w-full hidden lg:flex flex-row">
<div <div
className={`flex flex-wrap items-center justify-between px-[50px] w-full ${ className={`flex flex-wrap items-center justify-between px-[50px] w-full ${
isOpen ? "bg-white dark:bg-[#1F1A17]" : "bg-transparent" isOpen ? "bg-white dark:bg-[#1F1A17]" : "bg-transparent"
}`} }`}
> >
<Link href={"/"}> <Link href={"/"}>
<img src="/logohumas.png" alt="logo" className="w-[75px]" /> <img src="/logohumas.png" alt="logo" className="w-[95px]" />
</Link> </Link>
<Dropdown <Dropdown
@ -1089,10 +1089,10 @@ export default function NavbarHumas(props: { size: string }) {
</div> </div>
</div> </div>
</div> </div>
<NavbarContent className="lg:hidden basis-1 px-4"> <NavbarContent className="lg:hidden px-2">
<div className="flex justify-between w-full"> <div className="flex justify-between w-full">
<Link href={"/"}> <Link href={"/"}>
<img src="/logohumas.png" alt="logo" className="w-[50px]" /> <img src="/logohumas.png" alt="logo" className="w-[78px]" />
</Link> </Link>
<div className="flex flex-row gap-3 items-center"> <div className="flex flex-row gap-3 items-center">
<ThemeSwitch /> <ThemeSwitch />

51
components/main/detail/comment.tsx
View File

@ -1,19 +1,38 @@
import { Button } from '@nextui-org/button' import { Button } from "@nextui-org/button";
import { Textarea } from '@nextui-org/input' import { Textarea } from "@nextui-org/input";
import React from 'react' import React from "react";
export default function Comment() { export default function Comment() {
return ( return (
<div className='p-1 md:p-3 lg:p-10 space-y-2 md:spacey-3 lg:space-y-5'> <div className="p-3 lg:p-10 space-y-2 md:spacey-3 lg:space-y-5">
<div><b>Berikan Komentar</b> &#40;0 Komentar&#41;</div> <div>
<Textarea <b>Berikan Komentar</b>
variant='bordered' </div>
placeholder="Masukkan Komentar Anda di sini.." <Textarea
className="" variant="bordered"
/> placeholder="Masukkan Komentar Anda di sini.."
<Button className='bg-[#DD8306]'> className="text-black"
Kirim classNames={{
</Button> input: ["w-full", "bg-transparent", "!text-black"],
</div> mainWrapper: ["w-full", "bg-transparent"],
) innerWrapper: ["bg-transparent"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"!border-1 border-gray-300",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
"border-1",
],
}}
/>
<Button className="bg-[#DD8306] text-white" radius="none">
Kirim
</Button>
</div>
);
} }

252
components/main/detail/list-news.tsx
View File

@ -4,158 +4,122 @@ import {
Breadcrumbs, Breadcrumbs,
Button, Button,
Input, Input,
Select, Pagination,
SelectItem,
SelectSection,
Table,
TableBody,
TableCell,
TableColumn,
TableHeader,
TableRow,
} from "@nextui-org/react"; } from "@nextui-org/react";
import { EyeFilledIcon, SearchIcon } from "../../icons"; import {
CalendarIcon,
Calender,
ChevronRightIcon,
ClockIcon,
EyeFilledIcon,
SearchIcon,
UserIcon,
} from "../../icons";
import Link from "next/link"; import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import { getListArticle } from "@/service/article";
import { formatMonthString, htmlToString, textEllipsis } from "@/utils/global";
export default function ListNews() { export default function ListNews() {
const searchInput = ( const [article, setArticle] = useState<any>([]);
<Input const [search, setSearch] = useState("");
aria-label="Search" const [page, setPage] = useState(1);
className="w-full" const [totalPage, setTotalPage] = useState(1);
classNames={{ const topRef = useRef<HTMLDivElement>(null);
inputWrapper: "bg-white hover:!bg-gray-100",
input: "text-sm",
}}
labelPlacement="outside"
placeholder="Search..."
startContent={
<SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
}
endContent={
<Button size="sm" className="bg-[#DD8306] font-semibold">
Cari
</Button>
}
type="search"
/>
);
const listNews = [ useEffect(() => {
{ getArticle();
id: 1, }, [page]);
thumnbnail: "/headernews.png",
title: async function getArticle() {
"Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara", // loading();
date: "06 Maret, 2024 16:14 HUMAS POLRI", topRef.current?.scrollIntoView({ behavior: "smooth" });
description:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!", const req = { page: page, search: search, limit: "9" };
}, const response = await getListArticle(req);
{ setArticle(response?.data?.data);
id: 2, setTotalPage(response?.data?.meta?.totalPage);
thumnbnail: "/headernews.png", // close();
title: }
"Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara",
date: "06 Maret, 2024 16:14 HUMAS POLRI",
description:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!",
},
{
id: 3,
thumnbnail: "/headernews.png",
title:
"Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara",
date: "06 Maret, 2024 16:14 HUMAS ",
description:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!",
},
{
id: 4,
thumnbnail: "/headernews.png",
title:
"Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara",
date: "06 Maret, 2024 16:14 HUMAS POLRI",
description:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!",
},
{
id: 5,
thumnbnail: "/headernews.png",
title:
"Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara",
date: "06 Maret, 2024 16:14 HUMAS POLRI",
description:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!",
},
{
id: 6,
thumnbnail: "/headernews.png",
title:
"Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara",
date: "06 Maret, 2024 16:14 HUMAS POLRI",
description:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!",
},
{
id: 7,
thumnbnail: "/headernews.png",
title:
"Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara",
date: "06 Maret, 2024 16:14 HUMAS POLRI",
description:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!",
},
{
id: 8,
thumnbnail: "/headernews.png",
title:
"Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara",
date: "06 Maret, 2024 16:14 HUMAS POLRI",
description:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!",
},
{
id: 9,
thumnbnail: "/headernews.png",
title:
"Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara",
date: "06 Maret, 2024 16:14 HUMAS POLRI",
description:
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!",
},
];
return ( return (
<div className="self-center mx-auto text-black py-5"> <div className="bg-white" ref={topRef}>
<Breadcrumbs color="primary"> <div className="text-black py-5 px-3 lg:w-[75vw] mx-auto bg-white">
<BreadcrumbItem href="/">Beranda</BreadcrumbItem> <div className="flex flex-row gap-4">
<BreadcrumbItem>Berita</BreadcrumbItem> <Link href="/" className="text-black font-semibold">
</Breadcrumbs> Beranda
<div className="flex-wrap grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 pt-5 place-items-center gap-7">
{listNews.map((news) => (
<Link href={`/news/detail/${news.id}`} key={news.id}>
<div className="h-auto w-[300px] text-xs">
<div className="h-[50%]">
<img src={news.thumnbnail} alt="" className="w-max" />
</div>
<div className="px-3 py-3">
<div className="font-medium text-sm leading-5 ">
{news.title}
</div>
<div className="flex pb-1">
<div className="text-xs">{news.date}</div>
{/* <div>jam</div>
<div>creator</div> */}
</div>
<div className="text-clip">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis
est quas soluta deserunt ullam. Sapiente facilis modi vitae.
Aspernatur excepturi quo amet omnis laudantium inventore
praesentium illum hic reiciendis error.
</div>
</div>
</div>
</Link> </Link>
))} <ChevronRightIcon />
<p className="text-black">Berita</p>
</div>
<div className="py-5 lg:py-10 lg:px-24 ">
<Input
aria-label="Search"
className="w-full"
classNames={{
inputWrapper: "bg-white hover:!bg-gray-100 border-1",
input: "text-sm !text-black",
}}
labelPlacement="outside"
placeholder="Search..."
value={search}
onValueChange={setSearch}
endContent={
<Button
onPress={getArticle}
size="sm"
className="bg-red-500 font-semibold"
>
<SearchIcon className="text-white" />
</Button>
}
type="search"
/>
</div>
<section
id="content"
className=" grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7"
>
{article?.map((news: any) => (
<Link
href={`/news/detail/${news?.id}-${news?.slug}`}
key={news?.id}
>
<div className="">
<img src="/headernews.png" alt="thumbnail" />
</div>
<div className="p-2 lg:p-5 bg-[#f0f0f0] h-[220px]">
<div className="font-semibold text-lg">{news?.title}</div>
<div className="flex flex-row items-center py-1 text-xs gap-2">
<div className="flex flex-row items-center gap-1">
<CalendarIcon size={18} />
<p>{formatMonthString(news?.updatedAt)}</p>
</div>
<div className="flex flex-row items-center">
<ClockIcon size={18} />
<p>{`${new Date(news?.updatedAt)
.getHours()
.toString()
.padStart(2, "0")}:${new Date(news?.updatedAt)
.getMinutes()
.toString()
.padStart(2, "0")}`}</p>
</div>
<div className="flex flex-row items-center gap-1">
<UserIcon size={14} />
<p>DIVISI HUMAS POLRI</p>
</div>
</div>
<div className="text-sm">
{textEllipsis(htmlToString(news?.description), 165)}
</div>
</div>
</Link>
))}
</section>
<div className="flex justify-center mt-5">
<Pagination page={page} total={totalPage} onChange={setPage} />
</div>
</div> </div>
</div> </div>
); );

48
components/main/detail/new-detail.tsx
View File

@ -6,10 +6,13 @@ import RelatedNews from "../../page/related-news";
import Comment from "./comment"; import Comment from "./comment";
import { getArticleById } from "@/service/article"; import { getArticleById } from "@/service/article";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import Link from "next/link";
import { ChevronLeftIcon, ChevronRightIcon } from "@/components/icons";
import { close, loading } from "@/config/swal";
export default function NewsDetailPage() { export default function NewsDetailPage() {
const params = useParams(); const params = useParams();
const id = params.id; const id: any = params?.id;
const [detailArticle, setDetailArticle] = useState(); const [detailArticle, setDetailArticle] = useState();
useEffect(() => { useEffect(() => {
@ -17,29 +20,40 @@ export default function NewsDetailPage() {
}, []); }, []);
const initFetch = async () => { const initFetch = async () => {
const res = await getArticleById(id); loading();
const res = await getArticleById(id?.split("-")[0]);
const data = res?.data?.data; const data = res?.data?.data;
setDetailArticle(data); setDetailArticle(data);
close();
}; };
return ( return (
<> <div className="bg-white">
<div className="text-black md:flex bg-white p-10"> <div className="px-5 lg:px-0 lg:w-[70vw] mx-auto py-8">
<div className="w-auto md:w-[75%]"> <div className="flex flex-row gap-4 items-end text-black">
<DetailNews data={detailArticle} /> <Link href="/" className=" font-semibold text-lg">
Beranda
</Link>
<ChevronRightIcon />
<p className=" text-lg">Berita</p>
</div> </div>
<div className="w-auto md:w-[25%] hidden md:block"> <div className="text-black lg:flex bg-white gap-4">
<DetailNews data={detailArticle} />
<div className="w-auto lg:w-[25%] hidden lg:block">
<SidebarDetail />
</div>
</div>
<div className="bg-gray-50 text-black dark:bg-stone-900 dark:text-white h-auto my-2 md:my-5 lg:my-10 px-3 lg:px-36 rounded-lg shadow-md">
<Comment />
</div>
<div className="bg-gray-50 text-black dark:bg-stone-900 dark:text-white lg:px-24 my-4 lg:my-8 pt-3 lg:pb-4 rounded-lg shadow-md h-fit">
<RelatedNews />
</div>
<div className="md:hidden text-black">
<SidebarDetail /> <SidebarDetail />
</div> </div>
</div> </div>
<div className="bg-[#eeeeee] text-black h-auto my-2 md:my-5 lg:my-10 px-3 md:px-36"> </div>
<Comment />
</div>
<div className="px-36">
<RelatedNews />
</div>
<div className="md:hidden text-black">
<SidebarDetail />
</div>
</>
); );
} }

208
components/page/detail-news.tsx
View File

@ -1,73 +1,171 @@
"use client"; "use client";
import { convertDateFormat, formatTextToHtmlTag } from "@/utils/global"; import {
convertDateFormat,
formatMonthString,
formatTextToHtmlTag,
} from "@/utils/global";
import Image from "next/image"; import Image from "next/image";
import { EyeIcon, EyeIconMdi } from "../icons"; import {
CalendarIcon,
ChevronLeftIcon,
ChevronRightIcon,
ClockIcon,
EyeIcon,
EyeIconMdi,
FacebookIcon,
SquareFacebookIcon,
SquareLinkedInIcon,
SquareWhatsappIcon,
SquareXIcon,
UserIcon,
} from "../icons";
import { Button } from "@nextui-org/button";
import { usePathname } from "next/navigation";
import Link from "next/link";
export default function DetailNews(props: { data: any }) { export default function DetailNews(props: { data: any }) {
const { data } = props; const { data } = props;
const pathname = usePathname();
const shareText = "Cek situs ini!";
const handleShare = (platform: string) => {
let shareLink = "";
const urls = "https://kontenhumas.com/" + pathname;
switch (platform) {
case "facebook":
shareLink = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
urls
)}`;
break;
case "x":
shareLink = `https://x.com/intent/tweet?url=${encodeURIComponent(
urls
)}&text=${encodeURIComponent(shareText)}`;
break;
case "linkedin":
shareLink = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(
urls
)}`;
break;
case "whatsapp":
shareLink = `https://wa.me/?text=${encodeURIComponent(
shareText + " " + urls
)}`;
break;
default:
break;
}
const popupWidth = 800;
const popupHeight = 600;
const left = window.screenX + (window.innerWidth - popupWidth) / 2;
const top = window.screenY + (window.innerHeight - popupHeight) / 2;
window.open(
shareLink,
"_blank",
`width=${popupWidth},height=${popupHeight},top=${top},left=${left},resizable=no,scrollbars=no,toolbar=no,menubar=no,status=no`
);
};
return ( return (
<div className="px-3 md:px-36"> <div className="flex flex-col gap-2 py-4">
<div className=" px-1 md:px-3"> <p className="font-semibold text-xl lg:text-3xl">{data?.title}</p>
<Image <div className="flex flex-row items-center py-1 text-xs lg:text-lg gap-2 lg:gap-4">
width={1100} <div className="flex flex-row items-center gap-1">
height={500} <UserIcon size={16} className="lg:hidden" />
<UserIcon size={22} className="hidden lg:block" />
<p className="uppercase">{data?.createdByName}</p>
</div>
<div className="flex flex-row items-center gap-1">
<CalendarIcon size={16} className="lg:hidden" />
<CalendarIcon size={24} className="hidden lg:block" />
<p>{formatMonthString(data?.updatedAt)}</p>
</div>
<div className="flex flex-row items-center">
<ClockIcon size={16} className="lg:hidden" />
<ClockIcon size={24} className="hidden lg:block" />
<p>{`${new Date(data?.updatedAt)
.getHours()
.toString()
.padStart(2, "0")}:${new Date(data?.updatedAt)
.getMinutes()
.toString()
.padStart(2, "0")}`}</p>
</div>
<p className="flex items-center gap-1">
<EyeIconMdi size={16} className="lg:hidden" />
<EyeIconMdi size={16} className="hidden lg:block" />
{data?.viewCount === null ? 0 : data?.viewCount}
</p>
</div>
<div className="flex justify-center my-2 lg:my-5">
<img
alt="NextUI hero Image" alt="NextUI hero Image"
src="/detail.png" src="/detail.png"
className="object-cover w-[80%]"
/> />
</div> </div>
<div> <div
<div className="md:flex px-1 md:px-6 text-xs lg:text-medium gap-3"> dangerouslySetInnerHTML={formatTextToHtmlTag(data?.htmlDescription)}
<p> className="text-sm lg:text-xl lg:leading-8"
Oleh <b className="capitalize">{data?.createdByName}</b> />
</p>
<p className="hidden md:block">|</p> <div className="grid grid-cols-2 md:grid-cols-4 gap-5 my-8">
<p>Diupdate pada {convertDateFormat(data?.createdAt)} WIB</p> <Button
<p className="hidden md:block">|</p> variant="solid"
<p className="flex items-center gap-1"> radius="none"
<EyeIconMdi /> onPress={() => handleShare("facebook")}
{data?.viewCount === null ? 0 : data?.viewCount} className="w-[80%] bg-[#3b5998] text-white px-4 py-2 flex flex-row"
</p> >
<div className="flex gap-2 md:hidden"> <div className="w-1/4 ">
<div> <SquareFacebookIcon />
<Image height={185} width={185} src="/fb.png" alt="medsos" />
</div>
<div>
<Image height={185} width={185} src="/twitter.png" alt="medsos" />
</div>
<div>
<Image
height={185}
width={185}
src="/linkedin.png"
alt="medsos"
/>
</div>
<div>
<Image height={185} width={185} src="/wa.png" alt="medsos" />
</div>
</div> </div>
</div> <div className="w-3/4 text-xl ">Facebook</div>
<div className="px-1 md:px-5 text-sm md:text-medium space-y-3 py-2"> </Button>
<p className="font-bold text-lg">{data?.title}</p> <Button
<div variant="solid"
dangerouslySetInnerHTML={formatTextToHtmlTag(data?.htmlDescription)} radius="none"
/> onPress={() => handleShare("x")}
</div> className="w-[80%] bg-black text-white px-4 py-2 flex flex-row"
<div className="hidden sm:grid grid-cols-5 px-1 md:px-3 pt-10"> >
<div> <div className="w-1/4 ">
<Image height={185} width={185} src="/fb.png" alt="medsos" /> <SquareXIcon />
</div> </div>
<div> <div className="w-3/4 text-xl ">X</div>
<Image height={185} width={185} src="/twitter.png" alt="medsos" /> </Button>
<Button
variant="solid"
radius="none"
onPress={() => handleShare("linkedin")}
className="w-[80%] bg-[#0E76A8] text-white px-4 py-2 flex flex-row"
>
<div className="w-1/4 ">
<SquareLinkedInIcon />
</div> </div>
<div> <div className="w-3/4 text-xl ">LinkedIn</div>
<Image height={185} width={185} src="/linkedin.png" alt="medsos" /> </Button>
<Button
variant="solid"
radius="none"
onPress={() => handleShare("whatsapp")}
className="w-[80%] bg-[#25D366] text-white px-4 py-2 flex flex-row"
>
<div className="w-1/4 ">
<SquareWhatsappIcon />
</div> </div>
<div> <div className="w-3/4 text-xl ">Whatsapp</div>
<Image height={185} width={185} src="/wa.png" alt="medsos" /> </Button>
</div>
</div>
</div> </div>
{/* <div className="flex justify-between text-black">
<Link href={`#`} className="flex flex-row itesm-center gap-3 w-fit">
<ChevronLeftIcon /> Sebelumnya
</Link>
<Link href={`#`} className="flex flex-row itesm-center gap-3 w-fit">
<ChevronRightIcon /> Selanjutnya
</Link>
<Link href={`#`}></Link>
</div> */}
</div> </div>
); );
} }

137
components/page/related-news.tsx
View File

@ -1,78 +1,83 @@
"use client"; "use client";
import { Card, CardBody, CardFooter, Image } from "@nextui-org/react"; import { Card, CardBody, CardFooter, Image } from "@nextui-org/react";
import React from "react"; import React, { useEffect, useState } from "react";
import { UnderLine } from "../icons"; import { EyeIcon, UnderLine } from "../icons";
import { getListArticle } from "@/service/article";
import { Autoplay, Pagination, Navigation } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/effect-fade";
import "swiper/css/navigation";
import Link from "next/link";
import { convertDateFormat, textEllipsis } from "@/utils/global";
export default function RelatedNews() { export default function RelatedNews() {
const list = [ const [article, setArticle] = useState<any>([]);
{
title: useEffect(() => {
"Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...", async function getArticle() {
img: "/relatedNews.png", const req = { page: 1, search: "", limit: "10" };
desc: "$5.50",
}, const response = await getListArticle(req);
{ setArticle(response?.data?.data);
title: }
"Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...", getArticle();
img: "/headernews.png", }, []);
price: "$3.00",
},
{
title:
"Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
img: "/relatedNews.png",
desc: "$5.50",
},
{
title:
"Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
img: "/relatedNews.png",
desc: "$5.50",
},
{
title:
"Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
img: "/headernews.png",
price: "$3.00",
},
];
return ( return (
<div className="text-black flex flex-col items-center my-10"> <div className="flex flex-col items-center">
<div className="text-2xl font-bold flex flex-col items-center"> <div className="text-2xl font-bold flex flex-col items-center mb-3">
<div>Kategori Satker</div> <div>Berita Terkait</div>
<div> <div>
<UnderLine /> <UnderLine />
</div> </div>
</div> </div>
<div className="w-full bg-white rounded-lg"> <div className="w-[90vw] lg:w-full bg-[#f0f0f0]">
<div className="gap-4 grid grid-cols-1 sm:grid-cols-5 w-full bg-white rounded-lg"> <div>
{list.map((item, index) => ( <Swiper
<Card centeredSlides={false}
className="bg-white text-black" spaceBetween={10}
shadow="sm" autoplay={{
key={index} delay: 5000,
isPressable disableOnInteraction: false,
onPress={() => console.log("item pressed")} }}
> navigation={true}
<CardBody className="overflow-visible p-2"> modules={[Autoplay, Navigation]}
<Image className="mySwiper"
// shadow="sm" slidesPerView={1}
radius="lg" breakpoints={{
width="100%" // When the window width is less than 640px
alt={item.title} 720: {
className="w-full object-cover h-[260px]" slidesPerView: 4, // Set slidesPerView to 1 on mobile
src={item.img} },
/> }}
<p className="text-xs pt-2 pl-1">24/01/2024 14:08 WIB</p> >
</CardBody> {article?.map((newsItem: any) => (
<CardFooter className="text-small text-left p-1 flex flex-col items-start"> <SwiperSlide key={newsItem.id}>
<b>{item.title}</b> <Card isFooterBlurred radius="lg" className="border-none">
<p className="text-xs py-2 text-blue-700"> <img
Lihat Selengkapnya alt="headernews"
</p> src="/headernews.png"
</CardFooter> className="h-[25vh] object-cover rounded-none"
</Card> />
))} <CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute bottom-1 shadow-small z-10">
<div className="text-black dark:text-white lg:text-white">
<Link
href={`/news/detail/${newsItem.id}-${newsItem.slug}`}
>
<p className="text-left font-semibold text-sm">
{textEllipsis(newsItem.title, 40)}
</p>
</Link>
<p className="py-[2px] text-left text-sm">
{convertDateFormat(newsItem.createdAt)} WIB
</p>
</div>
</CardFooter>
</Card>
</SwiperSlide>
))}
</Swiper>
</div> </div>
</div> </div>
</div> </div>

167
components/page/sidebar-detail.tsx
View File

@ -1,45 +1,130 @@
import React from 'react' "use client";
import { UnderLine } from '../icons' import React, { useEffect, useState } from "react";
import { UnderLine } from "../icons";
import { Autoplay, Pagination, Navigation, Mousewheel } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/effect-fade";
import "swiper/css/pagination";
import Link from "next/link";
import { getListArticle } from "@/service/article";
import { Card, CardFooter } from "@nextui-org/react";
import { convertDateFormat, textEllipsis } from "@/utils/global";
export default function SidebarDetail() { export default function SidebarDetail() {
return ( const [article, setArticle] = useState<any>([]);
<div className='mt-2 space-y-5'>
<div className='font-semibold flex flex-col items-center space-y-5'> useEffect(() => {
<div className='flex flex-col items-center'> async function getArticle() {
<div>Humas <b>MABES POLRI</b></div> const req = { page: 1, search: "", limit: "10" };
<div><UnderLine /></div>
</div> const response = await getListArticle(req);
<div className='bg-[#F2F2F2] p-3 flex flex-col items-center w-auto lg:w-[310px]'> setArticle(response?.data?.data);
<img src="/detailmabes.png" alt="detail" className=' h-[110px]' /> }
<p className='text-sm'>Depan Jamaah Habib Syech, Kaops NCS Polri Serukan Jaga Pemilu 2024 Aman dan Damai</p> getArticle();
</div> }, []);
<div className='bg-[#F2F2F2] p-3 flex flex-col items-center w-auto lg:w-[310px]'> return (
<img src="/detailmabes.png" alt="detail" className=' h-[110px]' /> <div className="mt-2 space-y-5">
<p className='text-sm'>Depan Jamaah Habib Syech, Kaops NCS Polri Serukan Jaga Pemilu 2024 Aman dan Damai</p> <div className="font-semibold flex flex-col items-center space-y-5">
</div> <div className="flex flex-col items-center">
<div className='bg-[#F2F2F2] p-3 flex flex-col items-center w-auto lg:w-[310px]'> <div>
<img src="/detailmabes.png" alt="detail" className=' h-[110px]' /> Humas <b>MABES POLRI</b>
<p className='text-sm'>Depan Jamaah Habib Syech, Kaops NCS Polri Serukan Jaga Pemilu 2024 Aman dan Damai</p> </div>
</div> <div>
</div> <UnderLine />
<div className='font-semibold flex flex-col items-center space-y-5'> </div>
<div className='flex flex-col items-center'>
<div>Humas <b>POLDA</b></div>
<div><UnderLine /></div>
</div>
<div className='bg-[#F2F2F2] p-3 flex flex-col items-center w-auto lg:w-[310px]'>
<img src="/detailmabes.png" alt="detail" className=' h-[110px]' />
<p className='text-sm'>Depan Jamaah Habib Syech, Kaops NCS Polri Serukan Jaga Pemilu 2024 Aman dan Damai</p>
</div>
<div className='bg-[#F2F2F2] p-3 flex flex-col items-center w-auto lg:w-[310px]'>
<img src="/detailmabes.png" alt="detail" className=' h-[110px]' />
<p className='text-sm'>Depan Jamaah Habib Syech, Kaops NCS Polri Serukan Jaga Pemilu 2024 Aman dan Damai</p>
</div>
<div className='bg-[#F2F2F2] p-3 flex flex-col items-center w-auto lg:w-[310px]'>
<img src="/detailmabes.png" alt="detail" className=' h-[110px]' />
<p className='text-sm'>Depan Jamaah Habib Syech, Kaops NCS Polri Serukan Jaga Pemilu 2024 Aman dan Damai</p>
</div>
</div>
</div> </div>
) <div className="w-full lg:w-[300px] h-[400px] lg:p-4">
<Swiper
direction={"vertical"}
centeredSlides={false}
spaceBetween={10}
mousewheel={true}
autoplay={{
delay: 5000,
disableOnInteraction: false,
}}
pagination={{
clickable: true,
}}
modules={[Autoplay, Pagination, Mousewheel]}
className="mySwiper"
slidesPerView={2}
>
{article?.map((newsItem: any) => (
<SwiperSlide key={newsItem.id}>
<div className="h-[230px] lg:h-[180px] flex flex-col gap-2 bg-gray-50 dark:bg-stone-900 p-5">
<img
alt="headernews"
src="/headernews.png"
className="object-cover !h-[70%]"
/>
<div className="text-black dark:text-white flex flex-col">
<Link href={`/news/detail/${newsItem.id}-${newsItem.slug}`}>
<p className="text-left font-semibold text-xs">
{textEllipsis(newsItem.title, 40)}
</p>
</Link>
<p className="py-[2px] text-left text-xs">
{convertDateFormat(newsItem.createdAt)} WIB
</p>
</div>
</div>
</SwiperSlide>
))}
</Swiper>
</div>
</div>
<div className="font-semibold flex flex-col items-center space-y-5">
<div className="flex flex-col items-center">
<div>
Humas <b>POLDA</b>
</div>
<div>
<UnderLine />
</div>
</div>
<div className="w-full lg:w-[300px] h-[500px] lg:h-[400px] lg:p-4">
<Swiper
direction={"vertical"}
centeredSlides={false}
spaceBetween={10}
mousewheel={true}
autoplay={{
delay: 5000,
disableOnInteraction: false,
}}
pagination={{
clickable: true,
}}
modules={[Autoplay, Pagination, Mousewheel]}
className="mySwiper"
slidesPerView={2}
>
{article?.map((newsItem: any) => (
<SwiperSlide key={newsItem.id}>
<div className="h-[230px] lg:h-[180px] flex flex-col gap-2 bg-gray-50 dark:bg-stone-900 p-5">
<img
alt="headernews"
src="/headernews.png"
className="object-cover !h-[70%]"
/>
<div className="text-black dark:text-white flex flex-col">
<Link href={`/news/detail/${newsItem.id}-${newsItem.slug}`}>
<p className="text-left font-semibold text-xs">
{textEllipsis(newsItem.title, 40)}
</p>
</Link>
<p className="py-[2px] text-left text-xs">
{convertDateFormat(newsItem.createdAt)} WIB
</p>
</div>
</div>
</SwiperSlide>
))}
</Swiper>
</div>
</div>
</div>
);
} }

2
components/ui/social-media/gpr-kominfo.tsx
View File

@ -16,7 +16,7 @@ const GPRKominfo = () => {
return ( return (
<> <>
<div id="gpr-kominfo-widget-header" className=""></div> <div id="gpr-kominfo-widget-header"></div>
<div id="gpr-kominfo-widget-body"></div> <div id="gpr-kominfo-widget-body"></div>
<div id="gpr-kominfo-widget-footer"></div> <div id="gpr-kominfo-widget-footer"></div>
</> </>

4
service/article.ts
View File

@ -14,7 +14,9 @@ export async function getListArticle(props: PaginationRequest) {
"content-type": "application/json", "content-type": "application/json",
}; };
return await httpGet( return await httpGet(
`/articles?limit=${limit}&page=${page}&title=${search}&startDate=${startDate}&endDate=${endDate}`, `/articles?limit=${limit}&page=${page}&title=${search}&startDate=${
startDate || ""
}&endDate=${endDate || ""}`,
headers headers
); );
} }

46
utils/global.tsx
View File

@ -92,3 +92,49 @@ export function textEllipsis(
} }
return str; return str;
} }
export function htmlToString(str: string) {
if (str == undefined || str == null) {
return "";
}
return (
str
.replaceAll(/<style[^>]*>.*<\/style>/gm, "")
// Remove script tags and content
.replaceAll(/<script[^>]*>.*<\/script>/gm, "")
// Replace &nbsp,&ndash
.replaceAll("&nbsp;", "")
.replaceAll("&ndash;", "-")
// Replace quotation mark
.replaceAll("&ldquo;", '"')
.replaceAll("&rdquo;", '"')
// Remove all opening, closing and orphan HTML tags
.replaceAll(/<[^>]+>/gm, "")
// Remove leading spaces and repeated CR/LF
.replaceAll(/([\n\r]+ +)+/gm, "")
);
}
export function formatMonthString(dateString: string) {
const months = [
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember",
];
const date = new Date(dateString); // Konversi string ke objek Date
const day = date.getDate(); // Ambil tanggal
const month = months[date.getMonth()]; // Ambil nama bulan
const year = date.getFullYear(); // Ambil tahun
return `${day} ${month} ${year}`;
}