fixing home, all content, detail content
This commit is contained in:
Rama Priyanto
parent
6b93b8b79f
commit
2a9b676c5d
|
|
@ -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}</>;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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}</>;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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]" />
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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,15 +30,14 @@ 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"
|
||||||
|
|
@ -52,7 +52,7 @@ export default function HeaderNews() {
|
||||||
/>
|
/>
|
||||||
<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}`}>
|
<Link href={`news/detail/${newsItem.id}-${newsItem?.slug}`}>
|
||||||
<p className="text-left font-semibold">
|
<p className="text-left font-semibold">
|
||||||
{textEllipsis(newsItem.title, 40)}
|
{textEllipsis(newsItem.title, 40)}
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -71,12 +71,14 @@ export default function HeaderNews() {
|
||||||
))}
|
))}
|
||||||
</Swiper>
|
</Swiper>
|
||||||
</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 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">{t("berita")}</p>
|
<p className="text-lg font-bold h-10 text-center dark:text-white text-black">
|
||||||
<ScrollShadow hideScrollBar className="h-[34vh] lg:h-[53vh] gap-3">
|
{t("berita")}
|
||||||
|
</p>
|
||||||
|
<ScrollShadow hideScrollBar className="h-[34vh] lg:h-[53vh] ">
|
||||||
{article?.map((data: any) => (
|
{article?.map((data: any) => (
|
||||||
<div
|
<div
|
||||||
className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md flex flex-row gap-2"
|
className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md flex flex-row gap-2"
|
||||||
key={data.id}
|
key={data.id}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
|
|
@ -85,8 +87,21 @@ export default function HeaderNews() {
|
||||||
className="object-cover w-[18%]"
|
className="object-cover w-[18%]"
|
||||||
/>
|
/>
|
||||||
<div>
|
<div>
|
||||||
<p className="lg:hidden">{textEllipsis(data.title, 40)}</p>
|
<Link
|
||||||
<p className="hidden lg:block">{data.title}</p>
|
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]">
|
<p className="py-[2px]">
|
||||||
{convertDateFormat(data.createdAt)} WIB
|
{convertDateFormat(data.createdAt)} WIB
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -110,9 +125,8 @@ export default function HeaderNews() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="hidden lg:block w-full lg:w-[50%] h-full">
|
<div className="hidden lg:block w-full lg:w-[50%] h-[67vh]">
|
||||||
<Swiper
|
<Swiper
|
||||||
centeredSlides={true}
|
|
||||||
autoplay={{
|
autoplay={{
|
||||||
delay: 5000,
|
delay: 5000,
|
||||||
disableOnInteraction: false,
|
disableOnInteraction: false,
|
||||||
|
|
@ -122,16 +136,20 @@ export default function HeaderNews() {
|
||||||
className="mySwiper"
|
className="mySwiper"
|
||||||
>
|
>
|
||||||
{article?.map((newsItem: any) => (
|
{article?.map((newsItem: any) => (
|
||||||
<SwiperSlide key={newsItem.id}>
|
<SwiperSlide key={newsItem.id} className="h-[67vh]">
|
||||||
<Card isFooterBlurred radius="lg" className="border-none">
|
<Card
|
||||||
|
isFooterBlurred
|
||||||
|
radius="lg"
|
||||||
|
className="border-none h-[67vh]"
|
||||||
|
>
|
||||||
<img
|
<img
|
||||||
alt="headernews"
|
alt="headernews"
|
||||||
src="/headernews.png"
|
src="/headernews.png"
|
||||||
className="h-[67vh] object-cover"
|
className="w-full 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">
|
<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">
|
<div className="text-white">
|
||||||
<Link href={`news/detail/${newsItem.id}`}>
|
<Link href={`news/detail/${newsItem.id}-${newsItem?.slug}`}>
|
||||||
<p className="text-left font-semibold">
|
<p className="text-left font-semibold">
|
||||||
{newsItem.title}
|
{newsItem.title}
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -154,6 +172,5 @@ export default function HeaderNews() {
|
||||||
<GPRKominfo />
|
<GPRKominfo />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 />
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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 />
|
||||||
|
|
|
||||||
|
|
@ -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> (0 Komentar)</div>
|
<div>
|
||||||
|
<b>Berikan Komentar</b>
|
||||||
|
</div>
|
||||||
<Textarea
|
<Textarea
|
||||||
variant='bordered'
|
variant="bordered"
|
||||||
placeholder="Masukkan Komentar Anda di sini.."
|
placeholder="Masukkan Komentar Anda di sini.."
|
||||||
className=""
|
className="text-black"
|
||||||
|
classNames={{
|
||||||
|
input: ["w-full", "bg-transparent", "!text-black"],
|
||||||
|
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]'>
|
<Button className="bg-[#DD8306] text-white" radius="none">
|
||||||
Kirim
|
Kirim
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>([]);
|
||||||
|
const [search, setSearch] = useState("");
|
||||||
|
const [page, setPage] = useState(1);
|
||||||
|
const [totalPage, setTotalPage] = useState(1);
|
||||||
|
const topRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getArticle();
|
||||||
|
}, [page]);
|
||||||
|
|
||||||
|
async function getArticle() {
|
||||||
|
// loading();
|
||||||
|
topRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||||
|
|
||||||
|
const req = { page: page, search: search, limit: "9" };
|
||||||
|
const response = await getListArticle(req);
|
||||||
|
setArticle(response?.data?.data);
|
||||||
|
setTotalPage(response?.data?.meta?.totalPage);
|
||||||
|
// close();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-white" ref={topRef}>
|
||||||
|
<div className="text-black py-5 px-3 lg:w-[75vw] mx-auto bg-white">
|
||||||
|
<div className="flex flex-row gap-4">
|
||||||
|
<Link href="/" className="text-black font-semibold">
|
||||||
|
Beranda
|
||||||
|
</Link>
|
||||||
|
<ChevronRightIcon />
|
||||||
|
<p className="text-black">Berita</p>
|
||||||
|
</div>
|
||||||
|
<div className="py-5 lg:py-10 lg:px-24 ">
|
||||||
<Input
|
<Input
|
||||||
aria-label="Search"
|
aria-label="Search"
|
||||||
className="w-full"
|
className="w-full"
|
||||||
classNames={{
|
classNames={{
|
||||||
inputWrapper: "bg-white hover:!bg-gray-100",
|
inputWrapper: "bg-white hover:!bg-gray-100 border-1",
|
||||||
input: "text-sm",
|
input: "text-sm !text-black",
|
||||||
}}
|
}}
|
||||||
labelPlacement="outside"
|
labelPlacement="outside"
|
||||||
placeholder="Search..."
|
placeholder="Search..."
|
||||||
startContent={
|
value={search}
|
||||||
<SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
|
onValueChange={setSearch}
|
||||||
}
|
|
||||||
endContent={
|
endContent={
|
||||||
<Button size="sm" className="bg-[#DD8306] font-semibold">
|
<Button
|
||||||
Cari
|
onPress={getArticle}
|
||||||
|
size="sm"
|
||||||
|
className="bg-red-500 font-semibold"
|
||||||
|
>
|
||||||
|
<SearchIcon className="text-white" />
|
||||||
</Button>
|
</Button>
|
||||||
}
|
}
|
||||||
type="search"
|
type="search"
|
||||||
/>
|
/>
|
||||||
);
|
|
||||||
|
|
||||||
const listNews = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
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: 2,
|
|
||||||
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: 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 (
|
|
||||||
<div className="self-center mx-auto text-black py-5">
|
|
||||||
<Breadcrumbs color="primary">
|
|
||||||
<BreadcrumbItem href="/">Beranda</BreadcrumbItem>
|
|
||||||
<BreadcrumbItem>Berita</BreadcrumbItem>
|
|
||||||
</Breadcrumbs>
|
|
||||||
<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>
|
||||||
<div className="px-3 py-3">
|
<section
|
||||||
<div className="font-medium text-sm leading-5 ">
|
id="content"
|
||||||
{news.title}
|
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>
|
||||||
<div className="flex pb-1">
|
<div className="p-2 lg:p-5 bg-[#f0f0f0] h-[220px]">
|
||||||
<div className="text-xs">{news.date}</div>
|
<div className="font-semibold text-lg">{news?.title}</div>
|
||||||
{/* <div>jam</div>
|
<div className="flex flex-row items-center py-1 text-xs gap-2">
|
||||||
<div>creator</div> */}
|
<div className="flex flex-row items-center gap-1">
|
||||||
|
<CalendarIcon size={18} />
|
||||||
|
<p>{formatMonthString(news?.updatedAt)}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-clip">
|
<div className="flex flex-row items-center">
|
||||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis
|
<ClockIcon size={18} />
|
||||||
est quas soluta deserunt ullam. Sapiente facilis modi vitae.
|
<p>{`${new Date(news?.updatedAt)
|
||||||
Aspernatur excepturi quo amet omnis laudantium inventore
|
.getHours()
|
||||||
praesentium illum hic reiciendis error.
|
.toString()
|
||||||
|
.padStart(2, "0")}:${new Date(news?.updatedAt)
|
||||||
|
.getMinutes()
|
||||||
|
.toString()
|
||||||
|
.padStart(2, "0")}`}</p>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
|
</section>
|
||||||
|
<div className="flex justify-center mt-5">
|
||||||
|
<Pagination page={page} total={totalPage} onChange={setPage} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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 />
|
<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 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 />
|
<Comment />
|
||||||
</div>
|
</div>
|
||||||
<div className="px-36">
|
|
||||||
|
<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 />
|
<RelatedNews />
|
||||||
</div>
|
</div>
|
||||||
<div className="md:hidden text-black">
|
<div className="md:hidden text-black">
|
||||||
<SidebarDetail />
|
<SidebarDetail />
|
||||||
</div>
|
</div>
|
||||||
</>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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" />
|
||||||
alt="NextUI hero Image"
|
<UserIcon size={22} className="hidden lg:block" />
|
||||||
src="/detail.png"
|
<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>
|
</div>
|
||||||
<div>
|
|
||||||
<div className="md:flex px-1 md:px-6 text-xs lg:text-medium gap-3">
|
|
||||||
<p>
|
|
||||||
Oleh <b className="capitalize">{data?.createdByName}</b>
|
|
||||||
</p>
|
|
||||||
<p className="hidden md:block">|</p>
|
|
||||||
<p>Diupdate pada {convertDateFormat(data?.createdAt)} WIB</p>
|
|
||||||
<p className="hidden md:block">|</p>
|
|
||||||
<p className="flex items-center gap-1">
|
<p className="flex items-center gap-1">
|
||||||
<EyeIconMdi />
|
<EyeIconMdi size={16} className="lg:hidden" />
|
||||||
|
<EyeIconMdi size={16} className="hidden lg:block" />
|
||||||
{data?.viewCount === null ? 0 : data?.viewCount}
|
{data?.viewCount === null ? 0 : data?.viewCount}
|
||||||
</p>
|
</p>
|
||||||
<div className="flex gap-2 md:hidden">
|
|
||||||
<div>
|
|
||||||
<Image height={185} width={185} src="/fb.png" alt="medsos" />
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className="flex justify-center my-2 lg:my-5">
|
||||||
<Image height={185} width={185} src="/twitter.png" alt="medsos" />
|
<img
|
||||||
</div>
|
alt="NextUI hero Image"
|
||||||
<div>
|
src="/detail.png"
|
||||||
<Image
|
className="object-cover w-[80%]"
|
||||||
height={185}
|
|
||||||
width={185}
|
|
||||||
src="/linkedin.png"
|
|
||||||
alt="medsos"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<Image height={185} width={185} src="/wa.png" alt="medsos" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="px-1 md:px-5 text-sm md:text-medium space-y-3 py-2">
|
|
||||||
<p className="font-bold text-lg">{data?.title}</p>
|
|
||||||
<div
|
<div
|
||||||
dangerouslySetInnerHTML={formatTextToHtmlTag(data?.htmlDescription)}
|
dangerouslySetInnerHTML={formatTextToHtmlTag(data?.htmlDescription)}
|
||||||
|
className="text-sm lg:text-xl lg:leading-8"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-5 my-8">
|
||||||
|
<Button
|
||||||
|
variant="solid"
|
||||||
|
radius="none"
|
||||||
|
onPress={() => handleShare("facebook")}
|
||||||
|
className="w-[80%] bg-[#3b5998] text-white px-4 py-2 flex flex-row"
|
||||||
|
>
|
||||||
|
<div className="w-1/4 ">
|
||||||
|
<SquareFacebookIcon />
|
||||||
</div>
|
</div>
|
||||||
<div className="hidden sm:grid grid-cols-5 px-1 md:px-3 pt-10">
|
<div className="w-3/4 text-xl ">Facebook</div>
|
||||||
<div>
|
</Button>
|
||||||
<Image height={185} width={185} src="/fb.png" alt="medsos" />
|
<Button
|
||||||
|
variant="solid"
|
||||||
|
radius="none"
|
||||||
|
onPress={() => handleShare("x")}
|
||||||
|
className="w-[80%] bg-black text-white px-4 py-2 flex flex-row"
|
||||||
|
>
|
||||||
|
<div className="w-1/4 ">
|
||||||
|
<SquareXIcon />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className="w-3/4 text-xl ">X</div>
|
||||||
<Image height={185} width={185} src="/twitter.png" alt="medsos" />
|
</Button>
|
||||||
</div>
|
<Button
|
||||||
<div>
|
variant="solid"
|
||||||
<Image height={185} width={185} src="/linkedin.png" alt="medsos" />
|
radius="none"
|
||||||
</div>
|
onPress={() => handleShare("linkedin")}
|
||||||
<div>
|
className="w-[80%] bg-[#0E76A8] text-white px-4 py-2 flex flex-row"
|
||||||
<Image height={185} width={185} src="/wa.png" alt="medsos" />
|
>
|
||||||
|
<div className="w-1/4 ">
|
||||||
|
<SquareLinkedInIcon />
|
||||||
</div>
|
</div>
|
||||||
|
<div className="w-3/4 text-xl ">LinkedIn</div>
|
||||||
|
</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 className="w-3/4 text-xl ">Whatsapp</div>
|
||||||
|
</Button>
|
||||||
</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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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}
|
||||||
|
modules={[Autoplay, Navigation]}
|
||||||
|
className="mySwiper"
|
||||||
|
slidesPerView={1}
|
||||||
|
breakpoints={{
|
||||||
|
// When the window width is less than 640px
|
||||||
|
720: {
|
||||||
|
slidesPerView: 4, // Set slidesPerView to 1 on mobile
|
||||||
|
},
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<CardBody className="overflow-visible p-2">
|
{article?.map((newsItem: any) => (
|
||||||
<Image
|
<SwiperSlide key={newsItem.id}>
|
||||||
// shadow="sm"
|
<Card isFooterBlurred radius="lg" className="border-none">
|
||||||
radius="lg"
|
<img
|
||||||
width="100%"
|
alt="headernews"
|
||||||
alt={item.title}
|
src="/headernews.png"
|
||||||
className="w-full object-cover h-[260px]"
|
className="h-[25vh] object-cover rounded-none"
|
||||||
src={item.img}
|
|
||||||
/>
|
/>
|
||||||
<p className="text-xs pt-2 pl-1">24/01/2024 14:08 WIB</p>
|
<CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute bottom-1 shadow-small z-10">
|
||||||
</CardBody>
|
<div className="text-black dark:text-white lg:text-white">
|
||||||
<CardFooter className="text-small text-left p-1 flex flex-col items-start">
|
<Link
|
||||||
<b>{item.title}</b>
|
href={`/news/detail/${newsItem.id}-${newsItem.slug}`}
|
||||||
<p className="text-xs py-2 text-blue-700">
|
>
|
||||||
Lihat Selengkapnya
|
<p className="text-left font-semibold text-sm">
|
||||||
|
{textEllipsis(newsItem.title, 40)}
|
||||||
</p>
|
</p>
|
||||||
|
</Link>
|
||||||
|
<p className="py-[2px] text-left text-sm">
|
||||||
|
{convertDateFormat(newsItem.createdAt)} WIB
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</CardFooter>
|
</CardFooter>
|
||||||
</Card>
|
</Card>
|
||||||
|
</SwiperSlide>
|
||||||
))}
|
))}
|
||||||
|
</Swiper>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -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() {
|
||||||
|
const [article, setArticle] = useState<any>([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function getArticle() {
|
||||||
|
const req = { page: 1, search: "", limit: "10" };
|
||||||
|
|
||||||
|
const response = await getListArticle(req);
|
||||||
|
setArticle(response?.data?.data);
|
||||||
|
}
|
||||||
|
getArticle();
|
||||||
|
}, []);
|
||||||
return (
|
return (
|
||||||
<div className='mt-2 space-y-5'>
|
<div className="mt-2 space-y-5">
|
||||||
<div className='font-semibold flex flex-col items-center space-y-5'>
|
<div className="font-semibold flex flex-col items-center space-y-5">
|
||||||
<div className='flex flex-col items-center'>
|
<div className="flex flex-col items-center">
|
||||||
<div>Humas <b>MABES POLRI</b></div>
|
<div>
|
||||||
<div><UnderLine /></div>
|
Humas <b>MABES POLRI</b>
|
||||||
</div>
|
</div>
|
||||||
<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]' />
|
<UnderLine />
|
||||||
<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='font-semibold flex flex-col items-center space-y-5'>
|
<div className="w-full lg:w-[300px] h-[400px] lg:p-4">
|
||||||
<div className='flex flex-col items-center'>
|
<Swiper
|
||||||
<div>Humas <b>POLDA</b></div>
|
direction={"vertical"}
|
||||||
<div><UnderLine /></div>
|
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>
|
||||||
<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 className='bg-[#F2F2F2] p-3 flex flex-col items-center w-auto lg:w-[310px]'>
|
</SwiperSlide>
|
||||||
<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>
|
</Swiper>
|
||||||
</div>
|
</div>
|
||||||
<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]' />
|
<div className="font-semibold flex flex-col items-center space-y-5">
|
||||||
<p className='text-sm'>Depan Jamaah Habib Syech, Kaops NCS Polri Serukan Jaga Pemilu 2024 Aman dan Damai</p>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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  ,&ndash
|
||||||
|
.replaceAll(" ", "")
|
||||||
|
.replaceAll("–", "-")
|
||||||
|
// Replace quotation mark
|
||||||
|
.replaceAll("“", '"')
|
||||||
|
.replaceAll("”", '"')
|
||||||
|
// 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}`;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue