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

feat:aksebilitas menu, fix:landing banner

This commit is contained in:
Rama Priyanto 2024-11-06 15:44:56 +07:00
parent 949b0e1924
commit 1aa7652eb4
14 changed files with 741 additions and 661 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
app/layout.tsx
View File

@ -4,44 +4,55 @@ import "@/styles/globals.css";
import clsx from "clsx"; import clsx from "clsx";
import { Metadata } from "next"; import { Metadata } from "next";
import { Providers } from "./providers"; import { Providers } from "./providers";
import LoadScript from "@/utils/global";
export const metadata: Metadata = { export const metadata: Metadata = {
title: { title: {
default: siteConfig.name, default: siteConfig.name,
template: `%s - ${siteConfig.name}`, template: `%s - ${siteConfig.name}`,
}, },
description: siteConfig.description, description: siteConfig.description,
themeColor: [ themeColor: [
{ media: "(prefers-color-scheme: light)", color: "white" }, { media: "(prefers-color-scheme: light)", color: "white" },
{ media: "(prefers-color-scheme: dark)", color: "black" }, { media: "(prefers-color-scheme: dark)", color: "black" },
], ],
icons: { icons: {
icon: "/logohumas.ico", icon: "/logohumas.ico",
shortcut: "/favicon-16x16.png", shortcut: "/favicon-16x16.png",
apple: "/apple-touch-icon.png", apple: "/apple-touch-icon.png",
}, },
}; };
export default function RootLayout({ export default function RootLayout({
children, children,
}: { }: {
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return ( return (
<html lang="en" suppressHydrationWarning className="scroll-smooth"> <html lang="en" suppressHydrationWarning className="scroll-smooth">
<head /> <head>
<body <meta
className={clsx( name="theme-color"
"bg-background font-sans antialiased", content="white"
fontSans.variable media="(prefers-color-scheme: light)"
)} />
> <meta
<Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}> name="theme-color"
<main className=""> content="black"
{children} media="(prefers-color-scheme: dark)"
</main> />
</Providers> <LoadScript />
</body> </head>
</html> <body
); className={clsx(
"bg-background font-sans antialiased",
fontSans.variable
)}
>
<Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
<main className="">{children}</main>
</Providers>
</body>
</html>
);
} }

143
components/landing/ENewsPolri.tsx
View File

@ -1,62 +1,93 @@
'use client' "use client";
import { Card, CardFooter } from '@nextui-org/react'; import { Card, CardFooter } from "@nextui-org/react";
import Image from 'next/image'; import Image from "next/image";
import { useState } from 'react'; import { useEffect, useState } from "react";
import { ChevronLeftWhite, ChevronRightIcon } from '../icons'; import { ChevronLeftWhite, ChevronRightIcon, EyeIcon } from "../icons";
import Link from 'next/link'; import Link from "next/link";
import { getListArticle } from "@/service/article";
import { convertDateFormat } from "@/utils/global";
import { Autoplay, Pagination, Navigation } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
export default function ENewsPolri() { export default function ENewsPolri() {
const [limitedData, setLimitedData] = useState<any>([]); const [article, setArticle] = useState<any>([]);
const eNews = [ useEffect(() => {
{ async function getArticle() {
id: 1, const response = await getListArticle();
title: "Tribrata News Edisi 32 /IV-VI/ENews Polri/2024", console.log("res", response?.data?.data);
img: "/headernews.png", setArticle(response?.data?.data);
}, }
{ getArticle();
id: 2, }, []);
title: "Tribrata News Edisi 32 /IV-VI/ 2024",
img: "/headernews.png",
},
{
id: 3,
title: "Tribrata News Edisi 32 /IV-VI/ 2024",
img: "/headernews.png",
},
];
return ( return (
<div className='bg-[#1F1A17] text-center rounded-none md:rounded-lg h-auto lg:h-[338px] flex py-4 flex-col justify-between items-center'> <div className="bg-[#1F1A17] text-center rounded-none md:rounded-lg h-auto flex py-4 flex-col justify-between items-center">
<p className='text-white font-bold text-2xl underline underline-offset-4 decoration-red-600'>E-Majalah Polri</p> <p className="text-white font-bold text-2xl underline underline-offset-4 decoration-red-600">
<div className='flex flex-row w-full items-center justify-around'> E-Majalah Polri
<ChevronLeftWhite /> </p>
<div className='lg:flex space-y-2 lg:space-y-0 gap-1 md:gap-2 lg:gap-8'>
{eNews.map((data: any) => ( <div className="w-screen lg:w-[90%]">
<div key={data.id} className=' w-[274px]'> <div>
<Link href={`/e-majalah-polri/detail/${data.id}`}> <Swiper
<Card className='text-white' centeredSlides={false}
isFooterBlurred autoplay={{
> delay: 5000,
<Image disableOnInteraction: false,
alt="e-news" }}
className="object-cover h-full" pagination={{
height={100} clickable: true,
src={data.img} }}
width={100} navigation={true}
layout='responsive' modules={[Autoplay, Pagination, Navigation]}
/> className="mySwiper gap-3"
<CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10"> slidesPerView={1}
<p className='text-xs text-left'>{data.title}</p> breakpoints={{
</CardFooter> // When the window width is less than 640px
</Card> 720: {
</Link> slidesPerView: 3, // Set slidesPerView to 1 on mobile
</div> },
))} }}
</div> >
<ChevronRightIcon color='white' /> {article?.map((newsItem: any) => (
</div> <SwiperSlide key={newsItem.id}>
<Link className='flex items-center gap-2 text-[#DD8306]' href='/e-majalah-polri/daftar-majalah'>Lihat Semua <ChevronRightIcon color='[#DD8306]' /></Link> <Card isFooterBlurred radius="lg" className="border-none">
<Image
alt="headernews"
className="object-cover"
height={660}
src="/headernews.png"
width={460}
layout="responsive"
/>
<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 className="flex items-center gap-1 text-sm">
<EyeIcon />
{newsItem.viewCount === null ? 0 : newsItem.viewCount}
</p>
</div>
</CardFooter>
</Card>
</SwiperSlide>
))}
</Swiper>
</div> </div>
) </div>
<Link
className="flex items-center gap-2 text-[#DD8306]"
href="/e-majalah-polri/daftar-majalah"
>
Lihat Semua <ChevronRightIcon color="[#DD8306]" />
</Link>
</div>
);
} }

259
components/landing/HeaderNews.tsx
View File

@ -10,201 +10,105 @@ import Link from "next/link";
import GPRKominfo from "../ui/social-media/gpr-kominfo"; import GPRKominfo from "../ui/social-media/gpr-kominfo";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { getListArticle } from "@/service/article"; import { getListArticle } from "@/service/article";
import { convertDateFormat } from "@/utils/global";
export default function HeaderNews() { export default function HeaderNews() {
const [article, setArticle] = useState(); const [article, setArticle] = useState<any>([]);
useEffect(() => { useEffect(() => {
async function getArticle() { async function getArticle() {
const response = await getListArticle(); const response = await getListArticle();
console.log("res", response?.data?.data); console.log("res", response?.data?.data);
setArticle(response?.data?.data);
} }
getArticle(); getArticle();
}, []); }, []);
const newsData = [
{
id: 1,
title:
"Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari",
date: "21-07-2023 13:50",
views: 82,
imageUrl: "/headernews.png",
},
{
id: 2,
title:
"Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari",
date: "21-07-2023 13:50",
views: 82,
imageUrl: "/headernews.png",
},
{
id: 3,
title:
"Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari",
date: "21-07-2023 13:50",
views: 82,
imageUrl: "/headernews.png",
},
{
id: 4,
title:
"Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari",
date: "21-07-2023 13:50",
views: 82,
imageUrl: "/headernews.png",
},
{
id: 5,
title:
"Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari",
date: "21-07-2023 13:50",
views: 82,
imageUrl: "/headernews.png",
},
{
id: 6,
title:
"Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari",
date: "21-07-2023 13:50",
views: 82,
imageUrl: "/headernews.png",
},
];
return ( return (
<div className="lg:flex items-center bg-white gap-3 p-2"> <div className=" bg-[#1F1A17] gap-3 md:py-6 md:px-12 md:h-[700px]">
<div className="w-auto lg:w-[25%] p-2 bg-[#020101] text-white rounded-md"> <div className="lg:flex items-center justify-center bg-white p-1 md:p-4 rounded-lg gap-3 md:h-[654px] md:w-fit md:mx-auto">
<p className="text-lg font-bold h-10 text-center">Berita Terkini</p> <div className="w-auto lg:w-[25%] p-2 bg-[#020101] text-white rounded-md mb-2 md:mb-0 md:h-[636px]">
<ScrollShadow hideScrollBar className=" h-[443px]"> <p className="text-lg font-bold h-10 text-center">Berita Terkini</p>
<div className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md"> <ScrollShadow hideScrollBar className="md:h-[530px] gap-3">
<p> {article.map((data: any) => (
Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi <div
Warganya yang Masih Beraktifitas Pada Malam Hari className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md"
</p> key={data.id}
<p className="py-[2px]">21-07-2023 13:50</p> >
<p className="flex items-center gap-1"> <p>{data.title}</p>
<EyeIcon /> <p className="py-[2px]">
82 {" "}
</p> {convertDateFormat(data.createdAt)} WIB
</div> </p>
<div className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md"> <p className="flex items-center gap-1">
<p> <EyeIcon />
Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi {data.viewCount === null ? 0 : data.viewCount}
Warganya yang Masih Beraktifitas Pada Malam Hari </p>
</p> </div>
<p className="py-[2px]">21-07-2023 13:50</p>
<p className="flex items-center gap-1">
<EyeIcon />
82
</p>
</div>
<div className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md">
<p>
Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi
Warganya yang Masih Beraktifitas Pada Malam Hari
</p>
<p className="py-[2px]">21-07-2023 13:50</p>
<p className="flex items-center gap-1">
<EyeIcon />
82
</p>
</div>
<div className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md">
<p>
Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi
Warganya yang Masih Beraktifitas Pada Malam Hari
</p>
<p className="py-[2px]">21-07-2023 13:50</p>
<p className="flex items-center gap-1">
<EyeIcon />
82
</p>
</div>
</ScrollShadow>
<div className="m-2">
<Link href="/news/all">
<Button
className="w-full bg-[#DD8306] font-bold rounded-bl-md rounded-br-md focus:outline-none"
radius="none"
>
Lihat Semua
</Button>
</Link>
</div>
</div>
<div className="w-auto lg:w-[50%]">
<div>
<Swiper
centeredSlides={true}
autoplay={{
delay: 5000,
disableOnInteraction: false,
}}
pagination={{
clickable: true,
}}
navigation={true}
modules={[Autoplay, Pagination, Navigation]}
className="mySwiper"
>
{newsData.map((newsItem) => (
<SwiperSlide key={newsItem.id}>
<Card isFooterBlurred radius="lg" className="border-none">
<Image
alt="headernews"
className="object-cover"
height={660}
src={newsItem.imageUrl}
width={460}
layout="responsive"
/>
<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">
{newsItem.date}
</p>
<p className="flex items-center gap-1 text-sm">
<EyeIcon />
{newsItem.views}
</p>
</div>
</CardFooter>
</Card>
</SwiperSlide>
))} ))}
</Swiper> </ScrollShadow>
<div className="m-2">
<Link href="/news/all">
<Button
className="w-full bg-[#DD8306] font-bold rounded-bl-md rounded-br-md focus:outline-none"
radius="none"
>
Lihat Semua
</Button>
</Link>
</div>
</div> </div>
{/* <Card <div className="w-auto lg:w-[910px] md:h-[636px]">
isFooterBlurred <div className="md:h-[636px]">
radius="lg" <Swiper
className="border-none" centeredSlides={true}
> autoplay={{
delay: 5000,
disableOnInteraction: false,
}}
pagination={{
clickable: true,
}}
navigation={true}
modules={[Autoplay, Pagination, Navigation]}
className="mySwiper"
height={636}
>
{article?.map((newsItem: any) => (
<SwiperSlide key={newsItem.id}>
<Card isFooterBlurred radius="lg" className="border-none">
<Image <Image
alt="headernews" alt="headernews"
className="object-cover" height={400}
height={660} src="/headernews.png"
src="/headernews.png" width={460}
width={460} layout="responsive"
layout="responsive"
/> />
<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">
<p className='text-left font-semibold'>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p> <Link href={`news/detail/${newsItem.id}`}>
<p className='py-[2px] text-left text-sm'>21-07-2023 13:50</p> <p className="text-left font-semibold">
<p className='flex items-center gap-1 text-sm'><EyeIcon />82</p> {newsItem.title}
</div> </p>
</Link>
<p className="py-[2px] text-left text-sm">
{convertDateFormat(newsItem.createdAt)} WIB
</p>
<p className="flex items-center gap-1 text-sm">
<EyeIcon />
{newsItem.viewCount === null ? 0 : newsItem.viewCount}
</p>
</div>
</CardFooter> </CardFooter>
</Card> */} </Card>
</div> </SwiperSlide>
<div className="w-auto lg:w-[25%] p-2 rounded-md text-white dark:text-black "> ))}
<GPRKominfo /> </Swiper>
{/* <div className='text-lg font-bold border-5 border-blue-950 rounded-tr-lg rounded-tl-lg'> </div>
</div>
<div className="w-auto lg:w-[25%] p-2 rounded-md text-white dark:text-black ">
<GPRKominfo />
{/* <div className='text-lg font-bold border-5 border-blue-950 rounded-tr-lg rounded-tl-lg'>
<img src="/gprheader.png" alt="gpr" className='w-full' /> <img src="/gprheader.png" alt="gpr" className='w-full' />
</div> </div>
<div className='overflow-y-scroll h-[343px] border-5 border-blue-950 text-black'> <div className='overflow-y-scroll h-[343px] border-5 border-blue-950 text-black'>
@ -232,6 +136,7 @@ export default function HeaderNews() {
<div className=' border-5 border-blue-950 rounded-bl-lg rounded-br-lg'> <div className=' border-5 border-blue-950 rounded-bl-lg rounded-br-lg'>
<img src="/gprfooter.png" alt="gpr" className='w-full' /> <img src="/gprfooter.png" alt="gpr" className='w-full' />
</div> */} </div> */}
</div>
</div> </div>
</div> </div>
); );

40
components/landing/MediaSocial.tsx
View File

@ -198,45 +198,7 @@ export default function MediaSocial() {
Lihat Semua <ChevronRightIcon /> Lihat Semua <ChevronRightIcon />
</div> </div>
</div> </div>
<div className="md:flex flex-wrap gap-4 justify-center"> <FacebookWidget />
{dummyData.map((data: any) => (
<div
key={data.id}
className="bg-white text-black h-[400px] w-auto md:w-[315px] border-2 rounded-md px-5 py-3"
>
<div className="h-[20%] flex items-center text-xs justify-between">
<div className="flex gap-2">
<div className="h-[50px]">
<img src={data.logo} alt="logo" className="h-[50px]" />
</div>
<div className="flex flex-col gap-1 justify-center">
<p className="flex gap-1">
{data.division} <img src={data.type} alt="" />
</p>
</div>
</div>
<div className="">
<div className="flex gap-1 text-blue-500">
<img src="/temp/share.svg" alt="" />
Share
</div>
</div>
</div>
<div className="h-[35%] text-xs">
{data.description}
<a className="text-blue-500">
<br />
Lihat Selengkapnya
</a>
</div>
<div className="h-[45%]">
<div className="flex justify-center">
<img src={data.imageUrl} alt="header" className="h-[165px]" />
</div>
</div>
</div>
))}
</div>
</div> </div>
<div> <div>
<div className="flex items-center justify-between pb-3"> <div className="flex items-center justify-between pb-3">

396
components/landing/MedolUpdate.tsx
View File

@ -13,64 +13,58 @@ import "swiper/css";
import "swiper/css/navigation"; import "swiper/css/navigation";
import "swiper/css/pagination"; import "swiper/css/pagination";
import { Navigation, Pagination } from "swiper/modules"; import { Navigation, Pagination } from "swiper/modules";
import { top5NewsMediahub } from "@/service/medol-news-update"; import { topNewsMediahub } from "@/service/medol-news-update";
import Link from "next/link"; import Link from "next/link";
import {
getImageInp,
topNewsInp,
topNewsTbn,
} from "@/service/third-party-service";
import { convertDateFormatNoTime } from "@/utils/global";
import PolriTvWidget from "../ui/social-media/polri-tv";
export default function MedolUpdate() { export default function MedolUpdate() {
const [mediahubUpdate, setMediahubUpdate] = useState<any>(); const [selectedTab, setSelectedTab] = useState<any>("mediahub");
const [mediahubUpdate, setMediahubUpdate] = useState<any>([]);
const [tbnUpdate, setTbnUpdate] = useState([]);
const [inpUpdate, setInpUpdate] = useState([]);
useEffect(() => { useEffect(() => {
async function getMedihubUpdate() { if (selectedTab === "mediahub" && mediahubUpdate.length < 1) {
const res = await top5NewsMediahub(); getMedihubUpdate();
setMediahubUpdate(res.data?.data?.content);
// console.log("List Top5News", res.data.data?.content);
} }
if (selectedTab === "tbnews" && tbnUpdate.length < 1) {
getTbnUpdate();
}
if (selectedTab === "inp" && inpUpdate.length < 1) {
getInpUpdate();
}
}, [selectedTab]);
getMedihubUpdate(); async function getMedihubUpdate() {
}, []); const res = await topNewsMediahub();
setMediahubUpdate(res?.data?.data?.content);
}
const mediaHubUpdate = [ async function getTbnUpdate() {
{ const res = await topNewsTbn();
id: 1, setTbnUpdate(res?.data?.data);
image: "/temp/mediahub1.png", }
title: async function getInpUpdate() {
"Peringatan Nuzulul Quran, Kapolda Sulbar Harap Kegiatan Ini Tambah Wawasan dan", const res = await topNewsInp();
createdDate: "12 Januari 2024", // setInpUpdate(res?.data);
time: "13:00 WITA", getDataImage(res?.data);
}, }
{
id: 2, async function getDataImage(data: any) {
image: "/temp/mediahub2.png", let temp = data;
title: for (let i = 0; i < data.length; i++) {
"Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga 1 Pelabuhan Merak", const res = await getImageInp(temp[i].id);
createdDate: "14 Januari 2024", const data = res?.data[0]?.guid?.rendered;
time: "13:00 WIB", temp[i].image = data;
}, }
{ setInpUpdate(temp);
id: 3, }
image: "/temp/mediahub2.png",
title:
"Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga 1 Pelabuhan Merak",
createdDate: "14 Januari 2024",
time: "13:00 WIB",
},
{
id: 4,
image: "/temp/mediahub2.png",
title:
"Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga 1 Pelabuhan Merak",
createdDate: "14 Januari 2024",
time: "13:00 WIB",
},
{
id: 5,
image: "/temp/mediahub2.png",
title:
"Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga 1 Pelabuhan Merak",
createdDate: "14 Januari 2024",
time: "13:00 WIB",
},
];
return ( return (
<div className="border-2 rounded-lg py-2"> <div className="border-2 rounded-lg py-2">
@ -86,6 +80,8 @@ export default function MedolUpdate() {
aria-label="Options" aria-label="Options"
color="warning" color="warning"
className="flex justify-center" className="flex justify-center"
selectedKey={selectedTab}
onSelectionChange={setSelectedTab}
> >
<Tab key="mediahub" title="MediaHUB Update"> <Tab key="mediahub" title="MediaHUB Update">
<Swiper <Swiper
@ -102,7 +98,7 @@ export default function MedolUpdate() {
<Card <Card
isPressable isPressable
shadow="sm" shadow="sm"
className=" bg-white text-black border-2" className=" bg-white text-black border-2 w-full"
> >
<CardBody className="overflow-visible p-0"> <CardBody className="overflow-visible p-0">
<Image <Image
@ -114,7 +110,9 @@ export default function MedolUpdate() {
/> />
</CardBody> </CardBody>
<CardFooter className="flex flex-col items-start text-left"> <CardFooter className="flex flex-col items-start text-left">
<p className="text-xs">02-04-2024 09:31 WITA</p> <p className="text-xs">
{convertDateFormatNoTime(newsItem?.createdAt)}
</p>
<b className="">{newsItem?.title}</b> <b className="">{newsItem?.title}</b>
</CardFooter> </CardFooter>
</Card> </Card>
@ -123,200 +121,134 @@ export default function MedolUpdate() {
))} ))}
</Swiper> </Swiper>
<div className="text-center pt-6"> <div className="text-center pt-6">
<Button <Link href="https://mediahub.polri.go.id" target="_blank">
className="bg-white text-[#DD8306] font-bold w-56" <Button
size="sm" className="bg-white text-[#DD8306] font-bold w-56"
color="warning" size="sm"
variant="bordered" color="warning"
> variant="bordered"
Lihat Lebih Banyak >
</Button> Lihat Lebih Banyak
</Button>
</Link>
</div> </div>
</Tab> </Tab>
<Tab key="tbnews" title="Tribrata News Update"> <Tab key="tbnews" title="Tribrata News Update">
<div className="flex gap-5 justify-center pt-3"> <Swiper
<Card navigation={true}
shadow="sm" modules={[Navigation, Pagination]}
isPressable spaceBetween={40}
onPress={() => console.log("item pressed")} slidesPerView={2}
className="w-[45%] bg-white text-black" pagination={true}
> className="mySwiper"
<CardBody className="overflow-visible p-0"> >
<Image {tbnUpdate?.map((newsItem: any) => (
shadow="sm" <SwiperSlide key={newsItem.title}>
radius="lg" <Link href={newsItem?.source_url} target="_blank">
width="300%" <Card
alt="tes" isPressable
className="object-cover h-[270px]" shadow="sm"
src="/temp/mediahub1.png" className=" bg-white text-black border-2 w-full"
/> >
</CardBody> <CardBody className="overflow-visible p-0">
<CardFooter className="flex flex-col items-start text-left"> <Image
<p className="text-xs">02-04-2024 09:31 WITA</p> radius="lg"
<b className=""> width="300%"
Peringatan Nuzulul Quran, Kapolda Sulbar Harap Kegiatan Ini alt="tes"
Tambah Wawasan dan className="object-cover h-[270px]"
</b> src={newsItem?.image}
</CardFooter> />
</Card> </CardBody>
<Card <CardFooter className="flex flex-col items-start text-left">
shadow="sm" {convertDateFormatNoTime(newsItem?.date)}
isPressable <b className="">{newsItem?.title}</b>
onPress={() => console.log("item pressed")} </CardFooter>
className="w-[45%] bg-white text-black" </Card>
> </Link>
<CardBody className="overflow-visible p-0"> </SwiperSlide>
<Image ))}
shadow="sm" </Swiper>
radius="lg"
width="100%"
alt="tes"
className="w-full object-cover h-[270px]"
src="/temp/mediahub2.png"
/>
</CardBody>
<CardFooter className="flex flex-col items-start text-left">
<p className="text-xs">02-04-2024 09:16 WIB</p>
<b>
Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga
1 Pelabuhan Merak
</b>
</CardFooter>
</Card>
</div>
<div className="text-center pt-6"> <div className="text-center pt-6">
<Button <Link href="https://tribratanews.polri.go.id" target="_blank">
className="bg-white text-[#DD8306] font-bold w-56" <Button
size="sm" className="bg-white text-[#DD8306] font-bold w-56"
color="warning" size="sm"
variant="bordered" color="warning"
> variant="bordered"
Lihat Lebih Banyak >
</Button> Lihat Lebih Banyak
</Button>
</Link>
</div> </div>
</Tab> </Tab>
<Tab key="inp" title="Indonesia Nasional Police Update"> <Tab key="inp" title="Indonesia Nasional Police Update">
<div className="flex gap-5 justify-center pt-3"> <Swiper
<Card navigation={true}
shadow="sm" modules={[Navigation, Pagination]}
isPressable spaceBetween={40}
onPress={() => console.log("item pressed")} slidesPerView={2}
className="w-[45%] bg-white text-black" pagination={true}
> className="mySwiper"
<CardBody className="overflow-visible p-0"> >
<Image {inpUpdate?.map((newsItem: any) => (
shadow="sm" <SwiperSlide key={newsItem?.id}>
radius="lg" <Link href={newsItem?.link} target="_blank">
width="300%" <Card
alt="tes" isPressable
className="object-cover h-[270px]" shadow="sm"
src="/temp/mediahub1.png" className=" bg-white text-black border-2 w-full"
/> >
</CardBody> <CardBody className="overflow-visible p-0">
<CardFooter className="flex flex-col items-start text-left"> <Image
<p className="text-xs">02-04-2024 09:31 WITA</p> radius="lg"
<b className=""> width="300%"
Peringatan Nuzulul Quran, Kapolda Sulbar Harap Kegiatan Ini alt="tes"
Tambah Wawasan dan className="object-cover h-[270px]"
</b> src={newsItem.image}
</CardFooter> />
</Card> </CardBody>
<Card <CardFooter className="flex flex-col items-start text-left">
shadow="sm" {convertDateFormatNoTime(newsItem?.date)}
isPressable <b className="">{newsItem?.title?.rendered}</b>
onPress={() => console.log("item pressed")} </CardFooter>
className="w-[45%] bg-white text-black" </Card>
> </Link>
<CardBody className="overflow-visible p-0"> </SwiperSlide>
<Image ))}
shadow="sm" </Swiper>
radius="lg"
width="100%"
alt="tes"
className="w-full object-cover h-[270px]"
src="/temp/mediahub2.png"
/>
</CardBody>
<CardFooter className="flex flex-col items-start text-left">
<p className="text-xs">02-04-2024 09:16 WIB</p>
<b>
Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga
1 Pelabuhan Merak
</b>
</CardFooter>
</Card>
</div>
<div className="text-center pt-6"> <div className="text-center pt-6">
<Button <a href="https://inp.polri.go.id/" target="_blank">
className="bg-white text-[#DD8306] font-bold w-56" <Button
size="sm" className="bg-white text-[#DD8306] font-bold w-56"
color="warning" size="sm"
variant="bordered" color="warning"
> variant="bordered"
Lihat Lebih Banyak >
</Button> Lihat Lebih Banyak
</Button>
</a>
</div> </div>
</Tab> </Tab>
<Tab key="polritv" title="Polri TV Update"> <Tab key="polritv" title="Polri TV Update">
<div className="flex gap-5 justify-center pt-3"> <div className="w-full">
<Card <div className="w-[40%] mx-auto">
shadow="sm" <PolriTvWidget />
isPressable </div>
onPress={() => console.log("item pressed")}
className="w-[45%] bg-white text-black"
>
<CardBody className="overflow-visible p-0">
<Image
shadow="sm"
radius="lg"
width="300%"
alt="tes"
className="object-cover h-[270px]"
src="/temp/mediahub1.png"
/>
</CardBody>
<CardFooter className="flex flex-col items-start text-left">
<p className="text-xs">02-04-2024 09:31 WITA</p>
<b className="">
Peringatan Nuzulul Quran, Kapolda Sulbar Harap Kegiatan Ini
Tambah Wawasan dan
</b>
</CardFooter>
</Card>
<Card
shadow="sm"
isPressable
onPress={() => console.log("item pressed")}
className="w-[45%] bg-white text-black"
>
<CardBody className="overflow-visible p-0">
<Image
shadow="sm"
radius="lg"
width="100%"
alt="tes"
className="w-full object-cover h-[270px]"
src="/temp/mediahub2.png"
/>
</CardBody>
<CardFooter className="flex flex-col items-start text-left">
<p className="text-xs">02-04-2024 09:16 WIB</p>
<b>
Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga
1 Pelabuhan Merak
</b>
</CardFooter>
</Card>
</div> </div>
<div className="text-center pt-6"> <div className="text-center pt-6">
<Button <Link
className="bg-white text-[#DD8306] font-bold w-56" href="https://www.youtube.com/@TvRadioPolri"
size="sm" target="_blank"
color="warning"
variant="bordered"
> >
Lihat Lebih Banyak <Button
</Button> className="bg-white text-[#DD8306] font-bold w-56"
size="sm"
color="warning"
variant="bordered"
>
Lihat Lebih Banyak
</Button>
</Link>
</div> </div>
</Tab> </Tab>
</Tabs> </Tabs>

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

@ -1,24 +1,40 @@
import React from "react"; "use client";
import React, { useEffect, useState } from "react";
import DetailNews from "../../page/detail-news"; import DetailNews from "../../page/detail-news";
import SidebarDetail from "../../page/sidebar-detail"; import SidebarDetail from "../../page/sidebar-detail";
import RelatedNews from "../../page/related-news"; import RelatedNews from "../../page/related-news";
import Comment from "./comment"; import Comment from "./comment";
import { getArticleById } from "@/service/article";
import { useParams } from "next/navigation";
export default function NewsDetailPage() { export default function NewsDetailPage() {
const params = useParams();
const id = params.id;
const [detailArticle, setDetailArticle] = useState();
useEffect(() => {
initFetch();
}, []);
const initFetch = async () => {
const res = await getArticleById(id);
const data = res?.data?.data;
setDetailArticle(data);
};
return ( return (
<> <>
<div className="text-black md:flex bg-white"> <div className="text-black md:flex bg-white p-10">
<div className="w-auto md:w-[75%]"> <div className="w-auto md:w-[75%]">
<DetailNews /> <DetailNews data={detailArticle} />
</div> </div>
<div className="w-auto md:w-[25%] hidden md:block"> <div className="w-auto md:w-[25%] hidden md:block">
<SidebarDetail /> <SidebarDetail />
</div> </div>
</div> </div>
<div className="bg-[#eeeeee] text-black h-auto my-2 md:my-5 lg:my-10"> <div className="bg-[#eeeeee] text-black h-auto my-2 md:my-5 lg:my-10 px-3 md:px-36">
<Comment /> <Comment />
</div> </div>
<div> <div className="px-36">
<RelatedNews /> <RelatedNews />
</div> </div>
<div className="md:hidden text-black"> <div className="md:hidden text-black">

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

@ -1,53 +1,73 @@
'use client' "use client";
import Image from 'next/image' import { convertDateFormat, formatTextToHtmlTag } from "@/utils/global";
import Image from "next/image";
import { EyeIcon, EyeIconMdi } from "../icons";
export default function DetailNews() { export default function DetailNews(props: { data: any }) {
return ( const { data } = props;
<div className=''> return (
<div className='justify-center px-1 md:px-3'> <div className="px-3 md:px-36">
<Image <div className=" px-1 md:px-3">
width={1100} <Image
height={500} width={1100}
alt="NextUI hero Image" height={500}
src="/detail.png" alt="NextUI hero Image"
/> src="/detail.png"
/>
</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">
<EyeIconMdi />
{data?.viewCount === null ? 0 : data?.viewCount}
</p>
<div className="flex gap-2 md:hidden">
<div>
<Image height={185} width={185} src="/fb.png" alt="medsos" />
</div> </div>
<div> <div>
<div className='md:flex px-1 md:px-6 text-xs lg:text-medium gap-3'> <Image height={185} width={185} src="/twitter.png" alt="medsos" />
<p>Oleh <b>Humas Polri</b></p>
<p className='hidden md:block'>|</p>
<p>Diupdate pada 24-01-2024 13:01:18 WIB</p>
<p className='hidden md:block'>|</p>
<p>1000</p>
<div className="flex gap-2 md:hidden">
<div><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 className='px-1 md:px-5 text-sm md:text-medium space-y-3 py-2'>
<p className='font-bold text-lg'>Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke Kejagung</p>
<p>Jakarta, – Direktorat Tindak Pidana Korupsi (Dittipidkor) Bareskrim Polri melakukan pengiriman berkas perkara (tahap I), terkait dugaan korupsi pengadaan alat kesehatan Cath Lab dan belanja alat kedokteran CT Scan di RSUD dr Mohammad Soewandhie Surabaya, yang diduga dilakukan oleh tersangka drg RP.
Kepala Biro Penerangan Masyarakat Divisi Humas Polri Brigjen Pol Trunoyudo Wisnu Andiko mengatakan, perkara dugaan korupsi ini terjadi pada tahun 2012 dimana RSUD dr Mohammad Soewandhie Surabaya telah melakukan pengadaan alat kesehatan Cath Lab dan belanja alat kedokteran CT Scan, dengan menggunakan DPA SKPD tahun anggaran 2012, yakni rinciannya alat kesehatan Cath Lab Rp 17.050.000.000 dan CT Scan Rp 14.500.000.000.
Trunoyudo menuturkan, pengadaan alat kesehatan Cath Lab dan CT Scan itu sendiri diawali sejak tahun 2011 dimana mulai dari tahap perencanaan anggaran, perencanaan lelang, proses lelang, pelaksanaan pekerjaan dan pembayaran terdapat perbuatan melawan hukum yang terjadi dalam proses pengadaan barang dan jasa, diantaranya dengan menunjuk salah satu produk tertentu.
“Pada tanggal 10 November 2022 telah dilakukan pengiriman berkas perkara tahap I atas nama tersangka RP ke Kejaksaan Agung RI,” katanya.
Pada tanggal 25 November 2022, penyidik menerima pengembalian berkas dengan disertai beberapa kekurangan baik petunjuk formil maupun materil yang harus dipenuhi penyidik.
Setelah penyidik melengkapi petunjuk formil maupun materil, kemudian pada 16 Januari 2024 telah melakukan pengiriman kembali berkas perkara atas nama tersangka RP ke Kejaksaan Agung.
Tersangka RP dijerat Pasal 2 ayat (1) dan atau Pasal 3 UU Nomor 31 tahun 1999 tentang Pemberantasan Tindak Pidana Korupsi sebagaimana telah diubah dengan UU nomor 20 tahun 2001 tentang perubahaan atas UU nomor 31 tahun 1999 tentang Pemberantasan Tindak Pidana Korupsi Jo Pasal 55 ayat (1) ke-1 KUHP.
Berdasarkan hasil perhitungan kerugian keuangan negara yang dilakukan BPK RI adalah sebesar Rp 13.213.174.883.</p>
</div>
<div className="hidden sm:grid grid-cols-5 px-1 md:px-3 pt-10">
<div><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 className='h-auto lg:h-[350px]'>
</div> */}
</div> </div>
</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 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
dangerouslySetInnerHTML={formatTextToHtmlTag(data?.htmlDescription)}
/>
</div>
<div className="hidden sm:grid grid-cols-5 px-1 md:px-3 pt-10">
<div>
<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>
);
} }

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

@ -1,64 +1,80 @@
'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 from "react";
import { UnderLine } from '../icons'; import { UnderLine } from "../icons";
export default function RelatedNews() { export default function RelatedNews() {
const list = [ const list = [
{ {
title: "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...", title:
img: "/relatedNews.png", "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
desc: "$5.50", 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", title:
price: "$3.00", "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
}, 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...",
title: "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...", img: "/relatedNews.png",
img: "/relatedNews.png", desc: "$5.50",
desc: "$5.50", },
}, {
{ title:
title: "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...", "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
img: "/headernews.png", img: "/relatedNews.png",
price: "$3.00", desc: "$5.50",
}, },
]; {
return ( title:
<div className='text-black flex flex-col items-center space-y-10 my-10'> "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
<div className='text-2xl font-bold flex flex-col items-center'> img: "/headernews.png",
<div>Kategori Satker</div> price: "$3.00",
<div><UnderLine /></div> },
</div> ];
<div className='w-[90%] bg-white'> return (
<div className="gap-4 grid grid-cols-1 sm:grid-cols-5 w-full bg-white"> <div className="text-black flex flex-col items-center my-10">
{list.map((item, index) => ( <div className="text-2xl font-bold flex flex-col items-center">
<Card className='bg-white text-black' shadow="sm" key={index} isPressable onPress={() => console.log("item pressed")}> <div>Kategori Satker</div>
<CardBody className="overflow-visible p-2"> <div>
<Image <UnderLine />
// shadow="sm"
radius="lg"
width="100%"
alt={item.title}
className="w-full object-cover h-[260px]"
src={item.img}
/>
<p className='text-xs pt-2 pl-1'>24/01/2024 14:08 WIB</p>
</CardBody>
<CardFooter className="text-small text-left p-1 flex flex-col items-start">
<b>{item.title}</b>
<p className='text-xs py-2 text-blue-700'>Lihat Selengkapnya</p>
</CardFooter>
</Card>
))}
</div>
</div>
</div> </div>
) </div>
<div className="w-full bg-white rounded-lg">
<div className="gap-4 grid grid-cols-1 sm:grid-cols-5 w-full bg-white rounded-lg">
{list.map((item, index) => (
<Card
className="bg-white text-black"
shadow="sm"
key={index}
isPressable
onPress={() => console.log("item pressed")}
>
<CardBody className="overflow-visible p-2">
<Image
// shadow="sm"
radius="lg"
width="100%"
alt={item.title}
className="w-full object-cover h-[260px]"
src={item.img}
/>
<p className="text-xs pt-2 pl-1">24/01/2024 14:08 WIB</p>
</CardBody>
<CardFooter className="text-small text-left p-1 flex flex-col items-start">
<b>{item.title}</b>
<p className="text-xs py-2 text-blue-700">
Lihat Selengkapnya
</p>
</CardFooter>
</Card>
))}
</div>
</div>
</div>
);
} }

30
components/ui/social-media/polri-tv.tsx Normal file
View File

@ -0,0 +1,30 @@
import { useEffect } from "react";
const PolriTvWidget = () => {
useEffect(() => {
if (typeof window !== "undefined") {
const script = document.createElement("script");
script.src = "https://embedsocial.com/cdn/ht.js";
script.id = "EmbedSocialHashtagScript";
script.async = true;
document.head.appendChild(script);
return () => {
document.head.removeChild(script);
};
}
}, []);
return (
<div className="h-[310px]">
<iframe
style={{ width: "100%", height: "100%" }}
className="rounded-lg"
scrolling="no"
src="https://embedsocial.com/api/pro_hashtag/e025d6147bb208952ae5db84f99e54f2388cea0d"
></iframe>
</div>
);
};
export default PolriTvWidget;

BIN
public/image404.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

10
service/http-config/http-base-service.ts
View File

@ -1,12 +1,12 @@
import axios from "axios"; import axios from "axios";
const baseURL = "http://103.82.242.92:8888"; const baseURL = "http://103.82.242.92:8802";
const axiosBaseInstance = axios.create({ const axiosBaseInstance = axios.create({
baseURL, baseURL,
headers: { headers: {
"content-type": "application/json", "content-type": "application/json",
}, },
}); });
export default axiosBaseInstance; export default axiosBaseInstance;

13
service/medol-news-update.ts
View File

@ -1,8 +1,11 @@
import { mediahubGet } from "./http-config/axios-base-service"; import { mediahubGet } from "./http-config/axios-base-service";
export async function top5NewsMediahub() { export async function topNewsMediahub() {
const headers = { const headers = {
"content-type": "application/json", "content-type": "application/json",
}; };
return await mediahubGet(`/media/public/list?enablePage=1&sort=desc&sortBy=createdAt&size=5&page=0&typeId=1&title=&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=`, headers); return await mediahubGet(
`/media/public/list?enablePage=1&sort=desc&sortBy=createdAt&size=10&page=0&typeId=1&title=&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=`,
headers
);
} }

82
service/third-party-service.ts Normal file
View File

@ -0,0 +1,82 @@
import axios from "axios";
const tbnInstance = axios.create({
baseURL: "https://portal.humas.polri.go.id/v1/api",
headers: {
"content-type": "application/json",
},
});
const inpInstance = axios.create({
baseURL: "https://inp.indoplusmedia.id/wp-json/wp/v2",
headers: {
"content-type": "application/json",
},
});
async function tbnGetNews(pathUrl: any, headers: any) {
const response = await tbnInstance
.get(pathUrl, { headers })
.catch(function (error: any) {
console.log(error);
return error.response;
});
console.log("Response base svc : ", response);
if (response?.status == 200 || response?.status == 201) {
return {
error: false,
message: "success",
data: response?.data,
};
} else {
return {
error: true,
message: response?.data?.message || response?.data || null,
data: null,
};
}
}
async function inpGetNews(pathUrl: any, headers: any) {
const response = await inpInstance
.get(pathUrl, { headers })
.catch(function (error: any) {
console.log(error);
return error.response;
});
console.log("Response base svc : ", response);
if (response?.status == 200 || response?.status == 201) {
return {
error: false,
message: "success",
data: response?.data,
};
} else {
return {
error: true,
message: response?.data?.message || response?.data || null,
data: null,
};
}
}
export async function topNewsTbn() {
const headers = {
"content-type": "application/json",
};
return await tbnGetNews(
`/public/articles?page=1&limit=10&order_by=terkini&source=tbnews`,
headers
);
}
export async function topNewsInp() {
const headers = {
"content-type": "application/json",
};
return await inpGetNews(`/posts`, headers);
}
export async function getImageInp(id: string) {
const headers = {
"content-type": "application/json",
};
return await inpGetNews(`/media?parent=${id}`, headers);
}

72
utils/global.tsx Normal file
View File

@ -0,0 +1,72 @@
"use client";
import { useEffect } from "react";
export function convertDateFormat(dateString: string) {
var date = new Date(dateString);
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
var hours = date.getHours();
var minutes = date.getMinutes();
var formattedTime =
(hours < 10 ? "0" : "") + hours + ":" + (minutes < 10 ? "0" : "") + minutes;
var formattedDate =
(day < 10 ? "0" : "") +
day +
"-" +
(month < 10 ? "0" : "") +
month +
"-" +
year +
", " +
formattedTime;
return formattedDate;
}
export function convertDateFormatNoTime(dateString: string) {
var date = new Date(dateString);
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
var formattedDate =
(day < 10 ? "0" : "") +
day +
"-" +
(month < 10 ? "0" : "") +
month +
"-" +
year;
return formattedDate;
}
export function formatTextToHtmlTag(text: string) {
if (text) {
const htmlText = text.replaceAll("\\n", "<br>").replaceAll(/"/g, "");
return { __html: htmlText };
}
}
const LoadScript = () => {
useEffect(() => {
const script = document.createElement("script");
script.src = "https://cdn.userway.org/widget.js";
script.setAttribute("data-account", "X36s1DpjqB");
script.async = true;
document.head.appendChild(script);
return () => {
// Cleanup if needed
document.head.removeChild(script);
};
}, []);
return null; // Tidak perlu merender apa-apa
};
export default LoadScript;