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

fix:new figma

This commit is contained in:
Rama Priyanto 2024-12-23 00:45:31 +07:00
parent 63fe08f810
commit 4e7eb26fd8
15 changed files with 698 additions and 540 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/(admin)/admin/article/page.tsx
View File

@ -25,15 +25,15 @@ export default function BasicPage() {
<div className="px-2 md:px-4 w-full"> <div className="px-2 md:px-4 w-full">
<div className="rounded-md my-5 px-5 py-2 bg-white dark:bg-[#18181b] flex flex-row gap-3"> <div className="rounded-md my-5 px-5 py-2 bg-white dark:bg-[#18181b] flex flex-row gap-3">
<Link href="/admin/article/create"> <Link href="/admin/article/create">
<Button size="md" color="primary" className="w-min"> <Button size="md" className="bg-[#F07C00] text-white">
<AddIcon />
New Article New Article
<AddIcon />
</Button> </Button>
</Link> </Link>
<Button <Button
size="md" size="md"
color="primary" color="primary"
className="w-min" className="bg-[#F07C00] text-white"
onPress={goGenerate} onPress={goGenerate}
> >
<AddIcon /> <AddIcon />

13
app/(admin)/admin/master-role/page.tsx
View File

@ -1,4 +1,4 @@
"use client" "use client";
import { AddIcon } from "@/components/icons"; import { AddIcon } from "@/components/icons";
import MasterRoleTable from "@/components/table/master-role-table"; import MasterRoleTable from "@/components/table/master-role-table";
import { Button, Card } from "@nextui-org/react"; import { Button, Card } from "@nextui-org/react";
@ -6,12 +6,17 @@ import Link from "next/link";
export default function MasterRolePage() { export default function MasterRolePage() {
return ( return (
<div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-2 ml-4"> <div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-2">
<div className="px-4"> <div className="px-4">
<Card className="rounded-md my-5 pl-5 py-2"> <Card className="rounded-md my-5 pl-5 py-2">
<Link href="/admin/master-role/create"> <Link href="/admin/master-role/create">
<Button size="md" color="primary" className="w-min"> <Button
<AddIcon />New Role size="md"
color="primary"
className="bg-[#F07C00] text-white"
>
<AddIcon />
New Role
</Button> </Button>
</Link> </Link>
</Card> </Card>

6
app/(admin)/admin/master-user/page.tsx
View File

@ -10,7 +10,11 @@ export default function MasterUserPage() {
<div className=""> <div className="">
<Card className="rounded-md my-5 pl-5 py-2"> <Card className="rounded-md my-5 pl-5 py-2">
<Link href="/admin/master-user/create"> <Link href="/admin/master-user/create">
<Button size="md" color="primary" className="w-min"> <Button
size="md"
color="primary"
className="bg-[#F07C00] text-white"
>
<AddIcon /> <AddIcon />
New User New User
</Button> </Button>

6
app/(admin)/admin/static-page/page.tsx
View File

@ -10,7 +10,11 @@ export default function StaticPageGeneratorList() {
<div className="px-2 md:px-4 w-full"> <div className="px-2 md:px-4 w-full">
<div className="rounded-md mt-4 px-5 py-2 bg-white dark:bg-[#18181b] flex flex-row gap-3"> <div className="rounded-md mt-4 px-5 py-2 bg-white dark:bg-[#18181b] flex flex-row gap-3">
<Link href="/admin/static-page/create"> <Link href="/admin/static-page/create">
<Button size="md" color="primary" className="w-min"> <Button
size="md"
color="primary"
className="bg-[#F07C00] text-white"
>
<AddIcon /> <AddIcon />
Create Page Create Page
</Button> </Button>

211
components/form/login.tsx
View File

@ -9,6 +9,7 @@ import { close, error, loading } from "@/config/swal";
import { getProfile, postSignIn } from "@/service/master-user"; import { getProfile, postSignIn } from "@/service/master-user";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { HumasLayout } from "../layout/humas-layout"; import { HumasLayout } from "../layout/humas-layout";
import { Checkbox } from "@nextui-org/react";
export default function Login() { export default function Login() {
const router = useRouter(); const router = useRouter();
@ -100,35 +101,136 @@ export default function Login() {
}; };
return ( return (
<HumasLayout> // <HumasLayout>
<div className="bg-white text-black md:flex px-0 md:px-2 lg:px-5"> // <div className="bg-white text-black md:flex px-0 md:px-2 lg:px-5">
<div className="w-auto md:w-1/2 p-2 md:p-5 lg:p-10 space-y-5"> // <div className="w-auto md:w-1/2 p-2 md:p-5 lg:p-10 space-y-5">
<div className="text-xl font-bold"> // <div className="text-xl font-bold">
Selamat Datang di Portal Resmi Humas Polri // Selamat Datang di Portal Resmi Humas Polri
</div> // </div>
<div> // <div>
<Input // <Input
classNames={{ // classNames={{
input: ["w-full", "bg-transparent", "!text-black"], // input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"], // mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"], // innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"], // label: ["!text-black", "font-semibold"],
inputWrapper: [ // inputWrapper: [
"bg-transparent", // "bg-transparent",
"dark:bg-transparent", // "dark:bg-transparent",
"hover:bg-transparent", // "hover:bg-transparent",
"dark:hover:bg-transparent", // "dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent", // "group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent", // "dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent", // "group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent", // "focus-within:!bg-transparent",
], // ],
// }}
// isRequired
// type="text"
// label="Username"
// placeholder="Masukkan username anda!"
// variant="underlined"
// onChange={(e: any) => {
// setValUsername(e.target.value.trim());
// }}
// onPaste={(e: any) => {
// setValUsername(e.target.value.trim());
// }}
// onCopy={(e: any) => {
// setValUsername(e.target.value.trim());
// }}
// />
// </div>
// <div>
// <Input
// classNames={{
// input: ["w-full", "bg-transparent", "!text-black"],
// mainWrapper: ["w-full", "bg-transparent"],
// innerWrapper: ["bg-transparent"],
// label: ["!text-black", "font-semibold"],
// inputWrapper: [
// "bg-transparent",
// "dark:bg-transparent",
// "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",
// ],
// }}
// isRequired
// endContent={
// <button
// className="focus:outline-none"
// type="button"
// onClick={toggleVisibility}
// >
// {isVisible ? (
// <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
// ) : (
// <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
// )}
// </button>
// }
// type={isVisible ? "text" : "password"}
// label="Password"
// placeholder="Masukkan password anda"
// variant="underlined"
// onChange={(event) => setPassword(event.target.value)}
// />
// </div>
// <div>
// <Button
// size="lg"
// className="w-full bg-[#DD8306] rounded-md font-semibold"
// onPress={onSubmit}
// >
// Login
// </Button>
// </div>
// <div className="flex justify-center text-xs font-medium py-3">
// Don&apos;t have account? Register Now
// </div>
// <div>
// <Link href={`/form-permohonan-informasi`}>
// <Button
// size="lg"
// variant="bordered"
// className="w-full text-[#DD8306] borde-2 border-[#DD8306] rounded-md font-semibold"
// >
// Register
// </Button>
// </Link>
// </div>
// </div>
// <div className="hidden sm:flex w-1/2 items-center justify-center p-10">
// <img src="/login.png" alt="logo" />
// </div>
// </div>
// </HumasLayout>
<div className="flex flex-row">
<div
style={{
backgroundImage: "url(headerbanner1.png)",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "left center",
}} }}
className="h-screen hidden md:block md:w-3/5"
>
<img src="divhumas.png" className="w-[120px]" />
</div>
<div className="bg-[#1F1A17] w-2/5 md:px-24 md:py-36 flex flex-col">
<p className="text-[72px] text-[#DD8306] font-semibold mb-10">Login</p>
<p className="my-2 text-white">Username</p>
<Input
isRequired isRequired
type="text" type="text"
label="Username" label=""
placeholder="Masukkan username anda!" placeholder=""
variant="underlined" className="my-2"
onChange={(e: any) => { onChange={(e: any) => {
setValUsername(e.target.value.trim()); setValUsername(e.target.value.trim());
}} }}
@ -139,26 +241,10 @@ export default function Login() {
setValUsername(e.target.value.trim()); setValUsername(e.target.value.trim());
}} }}
/> />
</div> <p className="text-white my-2">Password</p>
<div>
<Input <Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"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",
],
}}
isRequired isRequired
className="my-2"
endContent={ endContent={
<button <button
className="focus:outline-none" className="focus:outline-none"
@ -173,41 +259,32 @@ export default function Login() {
</button> </button>
} }
type={isVisible ? "text" : "password"} type={isVisible ? "text" : "password"}
label="Password" label=""
placeholder="Masukkan password anda" placeholder=""
variant="underlined"
onChange={(event) => setPassword(event.target.value)} onChange={(event) => setPassword(event.target.value)}
/> />
</div> <div className="flex justify-between my-8 text-white">
<div> <div>
<Checkbox color="warning"></Checkbox> Remember me
</div>
<Link href="#" className="text-[#DD8306]">
Reset Password
</Link>
</div>
<Button <Button
size="lg" size="lg"
className="w-full bg-[#DD8306] rounded-md font-semibold" className="w-full bg-[#DD8306] rounded-md font-semibold my-3 text-white"
onPress={onSubmit} onPress={onSubmit}
> >
Login Login
</Button> </Button>
</div> <div className="text-center text-sm">
<div className="flex justify-center text-xs font-medium py-3"> Don&apos;t have accout yet?{" "}
Don&apos;t have account? Register Now <Link href="#" className="text-[#DD8306]">
</div> New Account
<div>
<Link href={`/form-permohonan-informasi`}>
<Button
size="lg"
variant="bordered"
className="w-full text-[#DD8306] borde-2 border-[#DD8306] rounded-md font-semibold"
>
Register
</Button>
</Link> </Link>
</div> </div>
</div> </div>
<div className="hidden sm:flex w-1/2 items-center justify-center p-10">
<img src="/login.png" alt="logo" />
</div> </div>
</div>
</HumasLayout>
); );
} }

25
components/icons.tsx
View File

@ -286,12 +286,10 @@ export const NextUILogo: React.FC<IconSvgProps> = (props) => {
}; };
export const FbIcon: React.FC<IconSvgProps> = (props) => { export const FbIcon: React.FC<IconSvgProps> = (props) => {
const { width, height = 40 } = props;
return ( return (
<svg <svg
width="30" width="59"
height="30" height="50"
viewBox="0 0 30 30" viewBox="0 0 30 30"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -421,16 +419,17 @@ export const ChevronRightWhite = ({
export const IgIcon = ({ export const IgIcon = ({
size, size,
height = 24, height = 24,
width = 14, width = 24,
fill = "currentColor", fill = "currentColor",
...props ...props
}: IconSvgProps) => ( }: IconSvgProps) => (
<svg <svg
width="30" width={size || width}
height="30" height={size || height}
viewBox="0 0 30 30" viewBox="0 0 30 30"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
{...props}
> >
<rect width="30" height="30" rx="8" fill="white" /> <rect width="30" height="30" rx="8" fill="white" />
<path <path
@ -443,13 +442,13 @@ export const IgIcon = ({
export const YtIcon = ({ export const YtIcon = ({
size, size,
height = 24, height = 24,
width = 14, width = 24,
fill = "currentColor", fill = "currentColor",
...props ...props
}: IconSvgProps) => ( }: IconSvgProps) => (
<svg <svg
width="30" width={size || width}
height="30" height={size || height}
viewBox="0 0 30 30" viewBox="0 0 30 30"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -602,13 +601,13 @@ export const TwIcon = ({
export const TtIcon = ({ export const TtIcon = ({
size, size,
height = 24, height = 24,
width = 14, width = 24,
fill = "currentColor", fill = "currentColor",
...props ...props
}: IconSvgProps) => ( }: IconSvgProps) => (
<svg <svg
width="30" width={size || width}
height="30" height={size || height}
viewBox="0 0 30 30" viewBox="0 0 30 30"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

26
components/landing/BodyLayout.tsx
View File

@ -1,27 +1,27 @@
'use client' "use client";
import CategorySatker from './CategorySatker' import CategorySatker from "./CategorySatker";
import ENewsPolri from './ENewsPolri' import ENewsPolri from "./ENewsPolri";
import MediaSocial from './MediaSocial' import MediaSocial from "./MediaSocial";
import MedolUpdate from './MedolUpdate' import MedolUpdate from "./MedolUpdate";
import RegionalNews from './RegionalNews' import RegionalNews from "./RegionalNews";
import SidebarNav from './SidebarNav' import SidebarNav from "./SidebarNav";
export default function BodyLayout() { export default function BodyLayout() {
return ( return (
<> <>
<div className='md:flex bg-white text-black pt-10 pb-8 px-2 md:px-4 lg:px-8 gap-9'> <div className="md:flex bg-white text-black pt-10 pb-8 px-2 md:px-4 lg:px-8 gap-9">
<div className='w-auto md:w-[65%] lg:w-[75%] space-y-7'> <div className="w-auto md:w-[65%] lg:w-[75%] space-y-7 px-4">
<MedolUpdate /> {/* <MedolUpdate /> */}
<CategorySatker /> {/* <CategorySatker /> */}
<RegionalNews /> <RegionalNews />
<MediaSocial /> <MediaSocial />
<ENewsPolri /> <ENewsPolri />
</div> </div>
<div className='w-auto md:w-[35%] lg:w-[25%]'> <div className="w-auto md:w-[35%] lg:w-[25%]">
<SidebarNav /> <SidebarNav />
</div> </div>
</div> </div>
</> </>
) );
} }
// h-[3700px] // h-[3700px]

2
components/landing/ENewsPolri.tsx
View File

@ -25,7 +25,7 @@ export default function ENewsPolri() {
return ( return (
<div className="bg-[#1F1A17] text-center rounded-none md:rounded-lg h-auto 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"> <p className="text-white border-b-3 border-red-500 py-2 mb-3 text-xl">
E-Majalah Polri E-Majalah Polri
</p> </p>

30
components/landing/HeaderNews.tsx
View File

@ -52,7 +52,7 @@ export default function HeaderNews() {
<div className="m-2"> <div className="m-2">
<Link href="/news/all"> <Link href="/news/all">
<Button <Button
className="w-full bg-[#DD8306] font-bold rounded-bl-md rounded-br-md focus:outline-none" className="w-full bg-[#DD8306] text-white font-bold rounded-bl-md rounded-br-md focus:outline-none"
radius="none" radius="none"
> >
{t("semua")} {t("semua")}
@ -110,34 +110,6 @@ export default function HeaderNews() {
</div> </div>
<div className="w-auto lg:w-[25%] p-2 rounded-md text-white dark:text-black "> <div className="w-auto lg:w-[25%] p-2 rounded-md text-white dark:text-black ">
<GPRKominfo /> <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' />
</div>
<div className='overflow-y-scroll h-[343px] border-5 border-blue-950 text-black'>
<div className='text-xs text-left m-2 p-2 bg-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
<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-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
<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-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
<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-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
<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>
<div className=' border-5 border-blue-950 rounded-bl-lg rounded-br-lg'>
<img src="/gprfooter.png" alt="gpr" className='w-full' />
</div> */}
</div> </div>
</div> </div>
</div> </div>

162
components/landing/MediaSocial.tsx
View File

@ -10,6 +10,7 @@ import {
import TwitterWidget from "../ui/social-media/twitter"; import TwitterWidget from "../ui/social-media/twitter";
import InstagramWidget from "../ui/social-media/instagram"; import InstagramWidget from "../ui/social-media/instagram";
import FacebookWidget from "../ui/social-media/facebook"; import FacebookWidget from "../ui/social-media/facebook";
import YoutubeWidget from "../ui/social-media/youtube";
export default function MediaSocial() { export default function MediaSocial() {
// const [limitedData, setLimitedData] = useState<any>([]); // const [limitedData, setLimitedData] = useState<any>([]);
@ -48,56 +49,18 @@ export default function MediaSocial() {
"Pada pembukaan KTT ke-43 ASEAN, Presiden RI, H. Joko Widodo menegaskan bahwa kesatuan ASEAN sampai saat ini masih terjaga dan terpelihara dengan baik.", "Pada pembukaan KTT ke-43 ASEAN, Presiden RI, H. Joko Widodo menegaskan bahwa kesatuan ASEAN sampai saat ini masih terjaga dan terpelihara dengan baik.",
imageUrl: "/headernews.png", imageUrl: "/headernews.png",
}, },
// {
// id: 4,
// logo: "/logohumas.png",
// division: "Divisi Humas Polri",
// username: "@DivHumas_Polri",
// followIcon: "/temp/iconX.svg",
// description:
// "Pada pembukaan KTT ke-43 ASEAN, Presiden RI, H. Joko Widodo menegaskan bahwa kesatuan ASEAN sampai saat ini masih terjaga dan terpelihara dengan baik.",
// imageUrl: "/headernews.png",
// },
// {
// id: 4,
// logo: "/logohumas.png",
// division: "Divisi Humas Polri",
// username: "@DivHumas_Polri",
// followIcon: "/temp/iconX.svg",
// description:
// "Pada pembukaan KTT ke-43 ASEAN, Presiden RI, H. Joko Widodo menegaskan bahwa kesatuan ASEAN sampai saat ini masih terjaga dan terpelihara dengan baik.",
// imageUrl: "/headernews.png",
// },
]; ];
// useEffect(() => {
// function updateLimitedData() {
// if (window.matchMedia("(max-width: 767px)").matches) {
// setLimitedData(dummyData.slice(0, 1));
// } else if (window.matchMedia("(min-width: 768px) and (max-width: 1023px)").matches) {
// setLimitedData(dummyData.slice(0, 2));
// } else {
// setLimitedData(dummyData.slice(0, 3));
// }
// }
// updateLimitedData();
// window.addEventListener('resize', updateLimitedData);
// return () => {
// window.removeEventListener('resize', updateLimitedData);
// };
// }, [dummyData]);
return ( return (
<div className="space-y-5 md:space-y-7"> <div className="space-y-5 md:space-y-7">
<p className="text-2xl font- underline underline-offset-8 decoration-red-700"> <p className="text-xl border-b-3 border-red-500 py-2 w-fit font-semibold">
MediaSocial MediaSocial
</p> </p>
<div> <div>
<div className="flex items-center justify-between pb-3"> <div className="flex items-center justify-between pb-3">
<div className="font-semibold flex items-center"> <div className="flex items-center">
<TwitterIcon color="#1DA1F2" /> <TwitterIcon color="#1DA1F2" />
<p className="pl-2">Twitter</p> <p className="pl-2 text-xl">Twitter</p>
</div> </div>
<div className="text-xs text-[#DD8306] flex items-center"> <div className="text-xs text-[#DD8306] flex items-center">
Lihat Semua <ChevronRightIcon /> Lihat Semua <ChevronRightIcon />
@ -106,43 +69,12 @@ export default function MediaSocial() {
<div> <div>
<TwitterWidget /> <TwitterWidget />
</div> </div>
{/* {dummyData.map((data: any) => (
<div
key={data.id}
className='bg-white text-black h-[2] 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'2
<div className='h-[50px]'>
<img src={data.logo} alt="logo" className='h-[50px]' />
</div>
<div className='flex flex-col gap-1'>
<p className='flex gap-1'>{data.division} <img src={data.type} alt="" /></p>
<p className='text-blue-500'>{data.username}</p>
</div>
</div>
<div className='space-y-1 flex flex-col items-end'>
<div><img src={data.followIcon} alt="" /></div>
<p className='text-blue-500 font-bold'>Follow</p>
</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 className="flex items-center justify-between pb-3"> <div className="flex items-center justify-between pb-3">
<div className="font-semibold flex items-center"> <div className="flex items-center">
<IgIcon height={50} color="#1DA1F2" /> <IgIcon size={40} color="#1DA1F2" />
<p className="pl-2">Instagram</p> <p className="pl-2 text-xl">Instagram</p>
</div> </div>
<div className="text-xs text-[#DD8306]"> <div className="text-xs text-[#DD8306]">
<Link <Link
@ -155,44 +87,13 @@ export default function MediaSocial() {
</div> </div>
<div className=""> <div className="">
<InstagramWidget /> <InstagramWidget />
{/* {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'>
<p className='flex gap-1'>{data.division} <img src={data.type} alt="" /></p>
<p className='text-blue-500'>{data.username}</p>
</div>
</div>
<div className='flex flex-col items-end'>
<div><img src='/temp/iconIG.svg' alt="" /></div>
<p className='text-blue-500 font-bold'><u>Lihat Profile</u></p>
</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>
<div className="flex items-center justify-between pb-3"> <div className="flex items-center justify-between pb-3">
<div className="font-semibold flex items-center"> <div className="flex items-center">
<FbIcon color="#1DA1F2" /> <FbIcon color="#1DA1F2" />
Facebook <p className="pl-2 text-xl">Facebook</p>
</div> </div>
<div className="text-xs text-[#DD8306] flex items-center"> <div className="text-xs text-[#DD8306] flex items-center">
Lihat Semua <ChevronRightIcon /> Lihat Semua <ChevronRightIcon />
@ -202,9 +103,9 @@ export default function MediaSocial() {
</div> </div>
<div> <div>
<div className="flex items-center justify-between pb-3"> <div className="flex items-center justify-between pb-3">
<div className="font-semibold flex items-center"> <div className="flex items-center">
<TtIcon color="#1DA1F2" /> <TtIcon color="#1DA1F2" size={40} />
Tiktok <p className="pl-2 text-xl">Tiktok</p>
</div> </div>
<div className="text-xs text-[#DD8306] flex items-center"> <div className="text-xs text-[#DD8306] flex items-center">
Lihat Semua <ChevronRightIcon /> Lihat Semua <ChevronRightIcon />
@ -253,8 +154,8 @@ export default function MediaSocial() {
<div> <div>
<div className="flex items-center justify-between pb-3"> <div className="flex items-center justify-between pb-3">
<div className="font-semibold flex items-center"> <div className="font-semibold flex items-center">
<YtIcon color="#1DA1F2" /> <YtIcon color="#1DA1F2" size={40} />
Youtube <p className="text-xl pl-2">Youtube</p>
</div> </div>
<div className="text-xs text-[#DD8306]"> <div className="text-xs text-[#DD8306]">
<Link <Link
@ -266,41 +167,8 @@ export default function MediaSocial() {
</Link> </Link>
</div> </div>
</div> </div>
<div className="">
<div className=" rounded-md "> <div className=" rounded-md ">
<FacebookWidget /> <YoutubeWidget />
</div>
{/* {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='space-y-1 flex flex-col items-end'>
<div><DotsIcon /></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>

43
components/landing/RegionalNews.tsx
View File

@ -294,14 +294,17 @@ export default function RegionalNews() {
// }, [list]); // }, [list]);
return ( return (
<div className="text-center border-3 border-[#DD8306] rounded-none md:rounded-lg h-auto lg:h-[338px] py-4 flex flex-col justify-around"> <div className="text-center rounded-none md:rounded-lg h-auto lg:h-[338px] flex flex-col p-6 bg-[#DD8306]">
<div className="font-bold text-2xl underline underline-offset-4 decoration-red-600 text-[#DD8306]"> <div className="text-xl text-white w-full justify-center flex">
<p className="border-b-3 border-[#C3170F] py-2 w-fit">
{" "}
{t("beritaWilayah")} {t("beritaWilayah")}
</p>
</div> </div>
<div className="flex items-center justify-around"> <div className="flex items-center justify-around py-10">
<div> {/* <div>
<ChevronLeftWhite color="orange" /> <ChevronLeftWhite color="orange" />
</div> </div> */}
<div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5"> <div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
{listPolda.map((item: any, index: any) => ( {listPolda.map((item: any, index: any) => (
<Link href={item.path} key={item.path}> <Link href={item.path} key={item.path}>
@ -310,23 +313,25 @@ export default function RegionalNews() {
className="w-[157px] h-[141px] flex flex-col items-center justify-evenly" className="w-[157px] h-[141px] flex flex-col items-center justify-evenly"
> >
<Image radius="lg" className="h-[59px]" src={item.img} /> <Image radius="lg" className="h-[59px]" src={item.img} />
<p className="text-xs font-bold text-[#DD8306]">{item.title}</p> <p className="text-xs font-bold text-white">{item.title}</p>
</div> </div>
</Link> </Link>
))} ))}
</div> </div>
<div> {/* <div>
<ChevronRightWhite color="orange" /> <ChevronRightWhite color="orange" />
</div> */}
</div> </div>
</div> <div className="flex justify-center w-full items-center">
<div>
<Button <Button
onPress={onOpen} onPress={onOpen}
className="bg-[#DD8306] text-white font-bold" className="border-red-700 text-white w-fit"
size="sm" size="sm"
variant="bordered"
> >
{t("lebihBanyak")} {t("lebihBanyak")}
</Button> </Button>
</div>
<Modal <Modal
isOpen={isOpen} isOpen={isOpen}
onOpenChange={onOpenChange} onOpenChange={onOpenChange}
@ -334,8 +339,8 @@ export default function RegionalNews() {
scrollBehavior={scrollBehavior} scrollBehavior={scrollBehavior}
placement={modalPlacement} placement={modalPlacement}
classNames={{ classNames={{
wrapper: "bg-white", wrapper: "bg-[#DD8306]",
base: "bg-white min-h-full", base: "bg-[#DD8306] min-h-full",
// body: "w-full bg-white", // body: "w-full bg-white",
// footer: "bg-white" // footer: "bg-white"
}} }}
@ -343,14 +348,19 @@ export default function RegionalNews() {
<ModalContent> <ModalContent>
{(onClose) => ( {(onClose) => (
<> <>
<ModalHeader className="flex flex-col text-[#DD8306] items-center min-h mb- text-3xl font-semibold"> <ModalHeader className="flex flex-col text-white items-center min-h mb- text-3xl font-semibold">
<div className="text-xl text-white w-full justify-center flex">
<p className="border-b-3 border-[#C3170F] py-2 w-fit">
{" "}
{t("beritaWilayah")} {t("beritaWilayah")}
</p>
</div>
</ModalHeader> </ModalHeader>
<ModalBody className="flex flex-row flex-wrap justify-center text-center"> <ModalBody className="flex flex-row flex-wrap justify-center text-center">
{listPoldaAll.map((item: any, index: any) => ( {listPoldaAll.map((item: any, index: any) => (
<div <div
key={index.id} key={index.id}
className="w-[140px] h-[115px] flex flex-col items-center justify-center border-2 rounded-lg shadow-sm" className="w-[140px] h-[115px] flex flex-col items-center justify-center rounded-lg shadow-sm"
> >
<Link href={item.path}> <Link href={item.path}>
<div className="flex flex-col items-center "> <div className="flex flex-col items-center ">
@ -359,7 +369,7 @@ export default function RegionalNews() {
className="h-[59px]" className="h-[59px]"
src={item.img} src={item.img}
/> />
<p className="text-xs font-bold text-[#DD8306]"> <p className="text-xs font-bold text-white">
{item.title} {item.title}
</p> </p>
</div> </div>
@ -368,7 +378,7 @@ export default function RegionalNews() {
))} ))}
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<Button color="danger" variant="light" onPress={onClose}> <Button variant="light" onPress={onClose}>
{t("tutup")} {t("tutup")}
</Button> </Button>
</ModalFooter> </ModalFooter>
@ -377,6 +387,5 @@ export default function RegionalNews() {
</ModalContent> </ModalContent>
</Modal> </Modal>
</div> </div>
</div>
); );
} }

417
components/landing/SidebarNav.tsx
View File

@ -1,133 +1,350 @@
import { Button, LinkIcon, ScrollShadow } from '@nextui-org/react' "use client";
import React from 'react' import { Button, LinkIcon, ScrollShadow } from "@nextui-org/react";
import { EyeIcon } from '../icons' import React, { useState } from "react";
import Image from 'next/image' import { EyeIcon } from "../icons";
import Link from 'next/link' import Image from "next/image";
import Link from "next/link";
export default function SidebarNav() { export default function SidebarNav() {
const [article, setArticle] = useState<any>([]);
const [selectedTab, setSelectedTab] = useState("media");
return ( return (
<> <>
<div className='space-y-4'> <div className="space-y-4 px-5">
<div className='text-xl font-semibold underline underline-offset-4 decoration-red-600 '> <div className="text-[20px] flex flex-row gap-10">
SERTIFIKAT ISO 9001:2015 <a
</div> onClick={() => setSelectedTab("media")}
<div className='h-[370px] text-white rounded-md'> className={
<Image height={200} width={380} src="/sertifikat.png" alt="publikasi" /> selectedTab === "media"
</div> ? "text-black border-b-3 border-red-400 cursor-pointer py-2"
<div className='text-xl font-semibold underline underline-offset-4 decoration-red-600 '> : "text-slate-300 cursor-pointer py-2"
}
>
Media Update Media Update
</a>
<a
onClick={() => setSelectedTab("video")}
className={
selectedTab === "video"
? "text-black border-b-3 border-red-400 cursor-pointer py-2"
: "text-slate-300 cursor-pointer py-2"
}
>
Video Virtual
</a>
</div> </div>
<div className='h-[410px] p-2 bg-[#020101] text-white rounded-md border-2 border-white'> {selectedTab === "media" ? (
<div className="h-[410px] p-2 bg-[#020101] text-white rounded-md border-2 border-white">
<ScrollShadow hideScrollBar className=" h-[345px]"> <ScrollShadow hideScrollBar className=" h-[345px]">
<div className='text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md'> <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>
<p className='py-[2px]'>21-07-2023 13:50</p> Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan
<p className='flex items-center gap-1'><EyeIcon />82</p> 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>
<div className='text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md'> <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>
<p className='py-[2px]'>21-07-2023 13:50</p> Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan
<p className='flex items-center gap-1'><EyeIcon />82</p> 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>
<div className='text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md'> <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>
<p className='py-[2px]'>21-07-2023 13:50</p> Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan
<p className='flex items-center gap-1'><EyeIcon />82</p> 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>
<div className='text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md'> <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>
<p className='py-[2px]'>21-07-2023 13:50</p> Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan
<p className='flex items-center gap-1'><EyeIcon />82</p> 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>
<div className='text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md'> <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>
<p className='py-[2px]'>21-07-2023 13:50</p> Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan
<p className='flex items-center gap-1'><EyeIcon />82</p> 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>
</ScrollShadow> </ScrollShadow>
<Button <Button
className='w-full bg-[#DD8306] font-bold rounded-bl-md rounded-br-md focus:outline-none' className="w-full bg-[#DD8306] text-white font-bold rounded-bl-md rounded-br-md focus:outline-none"
radius='none' radius="none"
> >
Lihat Semua Lihat Semua
</Button> </Button>
</div> </div>
<div className='text-xl font-semibold underline underline-offset-4 decoration-red-600'> ) : (
Publikasi <div className="w-full">
<div className='flex flex-col gap-3 pt-3'> <iframe
<Image height={200} width={400} src="/publikasi1.png" alt="publikasi" /> width="100%"
<Image height={200} width={400} src="/publikasi2.png" alt="publikasi" /> height="410"
<Link href='https://humas.polri.go.id/wp-content/uploads/2023/08/LAPORAN-HASIL-KEUANGAN-SEMESTER-I-DIVISI-HUMAS-POLRI-2.pdf' target='_blank'> src="https://www.youtube.com/embed/7oRcWfl9lxE?si=G_CZfXak_AiHjGzG"
<Image height={200} width={400} src="/publikasi3.png" alt="publikasi" /> title="YouTube video player"
</Link> frameBorder="0"
<Link href='https://lpse.polri.go.id/eproc4' target='_blank'> allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
<Image height={200} width={400} src="/publikasi4.png" alt="publikasi" /> referrerPolicy="strict-origin-when-cross-origin"
</Link> allowFullScreen
<Image height={200} width={400} src="/publikasi5.png" alt="publikasi" /> ></iframe>
<Image height={200} width={400} src="/publikasi6.png" alt="publikasi" /> </div>
<Link href='https://tribratanews.polri.go.id/' target='_blank'> )}
<Image height={200} width={400} src="/publikasi7.png" alt="publikasi" /> <p className="text-xl border-b-3 border-red-500 w-fit py-2">
</Link> Pelayanan Informasi Publik
</p>
<img src="pelayanan-informasi-publik.png" className="w-full" />
{/* <div className="text-xl font-semibold underline underline-offset-4 decoration-red-600 ">
SERTIFIKAT ISO 9001:2015
</div>
<div className="h-[370px] text-white rounded-md">
<Image
height={200}
width={380}
src="/sertifikat.png"
alt="publikasi"
/>
</div> */}
</div> {/* <div className="text-xl font-semibold underline underline-offset-4 decoration-red-600">
</div> Publikasi
<div className='text-xl font-semibold underline underline-offset-4 decoration-red-600'>Channel Humas Polri <div className="flex flex-col gap-3 pt-3">
<div className='flex flex-col gap-3 m-10'> <Image
<Link href='https://portal.humas.polri.go.id/library' target='_blank'> height={200}
<Image height={100} width={300} src="/portal-humas1.png" alt="humas-polri" /> width={400}
src="/publikasi1.png"
alt="publikasi"
/>
<Image
height={200}
width={400}
src="/publikasi2.png"
alt="publikasi"
/>
<Link
href="https://humas.polri.go.id/wp-content/uploads/2023/08/LAPORAN-HASIL-KEUANGAN-SEMESTER-I-DIVISI-HUMAS-POLRI-2.pdf"
target="_blank"
>
<Image
height={200}
width={400}
src="/publikasi3.png"
alt="publikasi"
/>
</Link> </Link>
<Link href='https://mediahub.polri.go.id/' target='_blank'> <Link href="https://lpse.polri.go.id/eproc4" target="_blank">
<Image height={100} width={300} src="/humas1.png" alt="humas-polri" /> <Image
height={200}
width={400}
src="/publikasi4.png"
alt="publikasi"
/>
</Link> </Link>
<Link href='https://spit.humas.polri.go.id/' target='_blank'> <Image
<Image height={100} width={300} src="/humas2.png" alt="humas-polri" /> height={200}
</Link> width={400}
<Link href='https://tvradio.polri.go.id/' target='_blank'> src="/publikasi5.png"
<Image height={100} width={300} src="/humas3.png" alt="humas-polri" /> alt="publikasi"
</Link> />
<Link href='https://tribratanews.polri.go.id/' target='_blank' className='border-2 rounded-md shadow-sm'> <Image
<Image height={100} width={300} src="/humas4.png" alt="humas-polri" /> height={200}
</Link> width={400}
<Link href='https://inp.polri.go.id/' target='_blank' className='border-2 rounded-md shadow-sm px-2'> src="/publikasi6.png"
<Image height={100} width={300} src="/humas5.png" alt="humas-polri" /> alt="publikasi"
/>
<Link href="https://tribratanews.polri.go.id/" target="_blank">
<Image
height={200}
width={400}
src="/publikasi7.png"
alt="publikasi"
/>
</Link> </Link>
</div> </div>
</div> */}
{/* <div className="text-xl font-semibold underline underline-offset-4 decoration-red-600">
Channel Humas Polri
<div className="flex flex-col gap-3 m-10">
<Link
href="https://portal.humas.polri.go.id/library"
target="_blank"
>
<Image
height={100}
width={300}
src="/portal-humas1.png"
alt="humas-polri"
/>
</Link>
<Link href="https://mediahub.polri.go.id/" target="_blank">
<Image
height={100}
width={300}
src="/humas1.png"
alt="humas-polri"
/>
</Link>
<Link href="https://spit.humas.polri.go.id/" target="_blank">
<Image
height={100}
width={300}
src="/humas2.png"
alt="humas-polri"
/>
</Link>
<Link href="https://tvradio.polri.go.id/" target="_blank">
<Image
height={100}
width={300}
src="/humas3.png"
alt="humas-polri"
/>
</Link>
<Link
href="https://tribratanews.polri.go.id/"
target="_blank"
className="border-2 rounded-md shadow-sm"
>
<Image
height={100}
width={300}
src="/humas4.png"
alt="humas-polri"
/>
</Link>
<Link
href="https://inp.polri.go.id/"
target="_blank"
className="border-2 rounded-md shadow-sm px-2"
>
<Image
height={100}
width={300}
src="/humas5.png"
alt="humas-polri"
/>
</Link>
</div> </div>
</div> */}
</div> </div>
<div className='text-xl font-semibold underline underline-offset-4 decoration-red-600 pb-5'>Info Eksternal</div> <p className="text-xl border-b-3 border-red-500 py-2 w-fit mx-5">
<div className='flex flex-col items-center space-y-7'> {" "}
<div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'> Info Eksternal
<img src="/eksternal1.png" alt="" className='w-full' /> </p>
<p className='leading-tight text-blue-500 hover:text-blue-700 pt-3'><Link href='https://www.bps.go.id/id/news' target='_blank'>Berita BPS</Link></p> <div className="flex flex-col mt-3 w-full px-5 gap-3">
<p className='text-xs text-gray-500 pt-1'>Berita terbaru dari Badan Pusat Statistika Indonesia</p> <div className="bg-white text-black text-sm border-2 rounded-md p-4 shadow-md">
<p className='leading-tight text-blue-500 hover:text-blue-700 pt-2'><Link href='https://www.bps.go.id/id/publication' target='_blank'>Pengumuman BPS</Link></p> <img src="/eksternal1.png" alt="" className="w-full" />
<p className='text-xs text-gray-500 pt-1s'>Pengumuman terbaru dari Badan Pusat Statistika Indonesia</p> <p className="leading-tight text-blue-500 hover:text-blue-700 pt-3">
<Link href="https://www.bps.go.id/id/news" target="_blank">
Berita BPS
</Link>
</p>
<p className="text-xs text-gray-500 pt-1">
Berita terbaru dari Badan Pusat Statistika Indonesia
</p>
<p className="leading-tight text-blue-500 hover:text-blue-700 pt-2">
<Link href="https://www.bps.go.id/id/publication" target="_blank">
Pengumuman BPS
</Link>
</p>
<p className="text-xs text-gray-500 pt-1s">
Pengumuman terbaru dari Badan Pusat Statistika Indonesia
</p>
</div> </div>
<div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'> <div className="bg-white text-black text-sm border-2 rounded-md w-auto p-4 shadow-md">
<img src="/eksternal2.png" alt="" className='w-full' /> <img src="/eksternal2.png" alt="" className="w-full" />
<p className='leading-tight text-blue-500 hover:text-blue-700 pt-5'><Link href='https://www.kpu.go.id/berita/104/berita-terkini' target='_blank'>Berita KPU</Link></p> <p className="leading-tight text-blue-500 hover:text-blue-700 pt-5">
<p className='text-xs text-gray-500 pt-1'>Berita terbaru dari Komisi Pemilihan Umum Indonesia</p> <Link
<p className='leading-tight text-blue-500 hover:text-blue-700 pt-2'><Link href='https://www.kpu.go.id/berita/11/pengumumanse' target='_blank'>Pengumuman KPU</Link></p> href="https://www.kpu.go.id/berita/104/berita-terkini"
<p className='text-xs text-gray-500 pt-1s'>Pengumuman terbaru dari Komisi Pemilihan Umum Indonesia</p> target="_blank"
>
Berita KPU
</Link>
</p>
<p className="text-xs text-gray-500 pt-1">
Berita terbaru dari Komisi Pemilihan Umum Indonesia
</p>
<p className="leading-tight text-blue-500 hover:text-blue-700 pt-2">
<Link
href="https://www.kpu.go.id/berita/11/pengumumanse"
target="_blank"
>
Pengumuman KPU
</Link>
</p>
<p className="text-xs text-gray-500 pt-1s">
Pengumuman terbaru dari Komisi Pemilihan Umum Indonesia
</p>
</div> </div>
<div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'> <div className="bg-white text-black text-sm border-2 rounded-md w-auto p-4 shadow-md">
<img src="/eksternal3.png" alt="" className='w-full' /> <img src="/eksternal3.png" alt="" className="w-full" />
<p className='leading-tight text-blue-500 hover:text-blue-700 pt-5'><Link href='https://www.bawaslu.go.id/' target='_blank'>Berita BAWASLU</Link></p> <p className="leading-tight text-blue-500 hover:text-blue-700 pt-5">
<p className='text-xs text-gray-500 pt-1'>Berita terbaru dari Badan Pengawas Pemilihan Umum Republik Indonesia</p> <Link href="https://www.bawaslu.go.id/" target="_blank">
<p className='leading-tight text-blue-500 hover:text-blue-700 pt-2'><Link href='https://www.bawaslu.go.id/id/pengumuman' target='_blank'>Pengumuman BAWASLU</Link></p> Berita BAWASLU
<p className='text-xs text-gray-500 pt-1s'>Pengumuman terbaru dari Badan Pusat Statistika Indonesia</p> </Link>
</p>
<p className="text-xs text-gray-500 pt-1">
Berita terbaru dari Badan Pengawas Pemilihan Umum Republik Indonesia
</p>
<p className="leading-tight text-blue-500 hover:text-blue-700 pt-2">
<Link
href="https://www.bawaslu.go.id/id/pengumuman"
target="_blank"
>
Pengumuman BAWASLU
</Link>
</p>
<p className="text-xs text-gray-500 pt-1s">
Pengumuman terbaru dari Badan Pusat Statistika Indonesia
</p>
</div> </div>
<div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'> <div className="bg-white text-black text-sm border-2 rounded-md w-auto p-4 shadow-md">
<img src="/eksternal4.png" alt="" className='w-full' /> <img src="/eksternal4.png" alt="" className="w-full" />
<p className='leading-tight text-blue-500 hover:text-blue-700 pt-5'><Link href='https://www.kpai.go.id/' target='_blank'>Info KPAI</Link></p> <p className="leading-tight text-blue-500 hover:text-blue-700 pt-5">
<p className='text-xs text-gray-500 pt-1'>Informasi dan Berita terbaru dari Komisi Perlindungan Anak Indonesia</p> <Link href="https://www.kpai.go.id/" target="_blank">
Info KPAI
</Link>
</p>
<p className="text-xs text-gray-500 pt-1">
Informasi dan Berita terbaru dari Komisi Perlindungan Anak Indonesia
</p>
</div> </div>
<div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'> <div className="bg-white text-black text-sm border-2 rounded-md w-auto p-4 shadow-md">
<img src="/eksternal5.png" alt="" className='w-full' /> <img src="/eksternal5.png" alt="" className="w-full" />
<p className='leading-tight text-blue-500 hover:text-blue-700 pt-5'><Link href='https://www.komnasperempuan.go.id/' target='_blank'>INFO KOMNAS PEREMPUAN</Link></p> <p className="leading-tight text-blue-500 hover:text-blue-700 pt-5">
<p className='text-xs text-gray-500 pt-1'>Info dan Berita terbaru dari Komnas Perempuan Indonesia</p> <Link href="https://www.komnasperempuan.go.id/" target="_blank">
INFO KOMNAS PEREMPUAN
</Link>
</p>
<p className="text-xs text-gray-500 pt-1">
Info dan Berita terbaru dari Komnas Perempuan Indonesia
</p>
</div> </div>
</div> </div>
</> </>
) );
} }

9
components/layout/sidebar/sidebar.tsx
View File

@ -294,12 +294,19 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
<> <>
{isOpen ? ( {isOpen ? (
<Link key={list.id} href={list.modulePathUrl}> <Link key={list.id} href={list.modulePathUrl}>
<div {/* <div
className={`px-3.5 py-2 mr-4 rounded-lg hover:bg-zinc-400 dark:hover:text-zinc-600 flex flex-row gap-2 ${ className={`px-3.5 py-2 mr-4 rounded-lg hover:bg-zinc-400 dark:hover:text-zinc-600 flex flex-row gap-2 ${
pathname.includes(list.modulePathUrl) pathname.includes(list.modulePathUrl)
? "bg-zinc-600 dark:bg-zinc-300 text-zinc-300 dark:text-zinc-500 font-bold" ? "bg-zinc-600 dark:bg-zinc-300 text-zinc-300 dark:text-zinc-500 font-bold"
: "text-zinc-600 dark:text-zinc-400" : "text-zinc-600 dark:text-zinc-400"
}`} }`}
> */}
<div
className={`px-3.5 py-2 mr-4 rounded-lg hover:bg-[#f07c00] hover:text-white dark:hover:text-white flex flex-row gap-2 ${
pathname.includes(list.modulePathUrl)
? "bg-[#f07c00] dark:bg-[#c46602] text-white font-bold"
: "text-zinc-600 dark:text-zinc-400"
}`}
> >
{list.icon} {isOpen && list.name} {list.icon} {isOpen && list.name}
</div> </div>

18
components/ui/social-media/youtube.tsx
View File

@ -1,12 +1,9 @@
import { useEffect } from 'react'; import { useEffect } from "react";
const YoutubeWidget = () => { const YoutubeWidget = () => {
useEffect(() => { useEffect(() => {
if (typeof window !== "undefined") {
if (typeof window !== 'undefined') { const script = document.createElement("script");
const script = document.createElement('script');
script.src = "https://embedsocial.com/cdn/ht.js"; script.src = "https://embedsocial.com/cdn/ht.js";
script.async = true; script.async = true;
document.head.appendChild(script); document.head.appendChild(script);
@ -17,13 +14,12 @@ const YoutubeWidget = () => {
} }
}, []); }, []);
return ( return (
<div className="embedsocial-hashtag rounded-md" data-ref="7ad1e18598045d000abbf6de3479b1bbd5502583"></div> <div
className="embedsocial-hashtag rounded-md"
data-ref="7ad1e18598045d000abbf6de3479b1bbd5502583"
></div>
); );
}; };
export default YoutubeWidget; export default YoutubeWidget;

BIN
public/pelayanan-informasi-publik.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB