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="rounded-md my-5 px-5 py-2 bg-white dark:bg-[#18181b] flex flex-row gap-3">
<Link href="/admin/article/create">
<Button size="md" color="primary" className="w-min">
<AddIcon />
<Button size="md" className="bg-[#F07C00] text-white">
New Article
<AddIcon />
</Button>
</Link>
<Button
size="md"
color="primary"
className="w-min"
className="bg-[#F07C00] text-white"
onPress={goGenerate}
>
<AddIcon />

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

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

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

@ -10,7 +10,11 @@ export default function MasterUserPage() {
<div className="">
<Card className="rounded-md my-5 pl-5 py-2">
<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 />
New User
</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="rounded-md mt-4 px-5 py-2 bg-white dark:bg-[#18181b] flex flex-row gap-3">
<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 />
Create Page
</Button>

281
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 { useRouter } from "next/navigation";
import { HumasLayout } from "../layout/humas-layout";
import { Checkbox } from "@nextui-org/react";
export default function Login() {
const router = useRouter();
@ -100,114 +101,190 @@ export default function Login() {
};
return (
<HumasLayout>
<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="text-xl font-bold">
Selamat Datang di Portal Resmi Humas Polri
</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
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>
// <HumasLayout>
// <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="text-xl font-bold">
// Selamat Datang di Portal Resmi Humas Polri
// </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
// 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}
// <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
type="text"
label=""
placeholder=""
className="my-2"
onChange={(e: any) => {
setValUsername(e.target.value.trim());
}}
onPaste={(e: any) => {
setValUsername(e.target.value.trim());
}}
onCopy={(e: any) => {
setValUsername(e.target.value.trim());
}}
/>
<p className="text-white my-2">Password</p>
<Input
isRequired
className="my-2"
endContent={
<button
className="focus:outline-none"
type="button"
onClick={toggleVisibility}
>
Login
</Button>
</div>
<div className="flex justify-center text-xs font-medium py-3">
Don&apos;t have account? Register Now
</div>
{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=""
placeholder=""
onChange={(event) => setPassword(event.target.value)}
/>
<div className="flex justify-between my-8 text-white">
<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>
<Checkbox color="warning"></Checkbox> Remember me
</div>
<Link href="#" className="text-[#DD8306]">
Reset Password
</Link>
</div>
<div className="hidden sm:flex w-1/2 items-center justify-center p-10">
<img src="/login.png" alt="logo" />
<Button
size="lg"
className="w-full bg-[#DD8306] rounded-md font-semibold my-3 text-white"
onPress={onSubmit}
>
Login
</Button>
<div className="text-center text-sm">
Don&apos;t have accout yet?{" "}
<Link href="#" className="text-[#DD8306]">
New Account
</Link>
</div>
</div>
</HumasLayout>
</div>
);
}

25
components/icons.tsx
View File

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

26
components/landing/BodyLayout.tsx
View File

@ -1,27 +1,27 @@
'use client'
import CategorySatker from './CategorySatker'
import ENewsPolri from './ENewsPolri'
import MediaSocial from './MediaSocial'
import MedolUpdate from './MedolUpdate'
import RegionalNews from './RegionalNews'
import SidebarNav from './SidebarNav'
"use client";
import CategorySatker from "./CategorySatker";
import ENewsPolri from "./ENewsPolri";
import MediaSocial from "./MediaSocial";
import MedolUpdate from "./MedolUpdate";
import RegionalNews from "./RegionalNews";
import SidebarNav from "./SidebarNav";
export default function BodyLayout() {
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='w-auto md:w-[65%] lg:w-[75%] space-y-7'>
<MedolUpdate />
<CategorySatker />
<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 px-4">
{/* <MedolUpdate /> */}
{/* <CategorySatker /> */}
<RegionalNews />
<MediaSocial />
<ENewsPolri />
</div>
<div className='w-auto md:w-[35%] lg:w-[25%]'>
<div className="w-auto md:w-[35%] lg:w-[25%]">
<SidebarNav />
</div>
</div>
</>
)
);
}
// h-[3700px]

2
components/landing/ENewsPolri.tsx
View File

@ -25,7 +25,7 @@ export default function ENewsPolri() {
return (
<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
</p>

30
components/landing/HeaderNews.tsx
View File

@ -52,7 +52,7 @@ export default function HeaderNews() {
<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"
className="w-full bg-[#DD8306] text-white font-bold rounded-bl-md rounded-br-md focus:outline-none"
radius="none"
>
{t("semua")}
@ -110,34 +110,6 @@ export default function HeaderNews() {
</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' />
</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>

164
components/landing/MediaSocial.tsx
View File

@ -10,6 +10,7 @@ import {
import TwitterWidget from "../ui/social-media/twitter";
import InstagramWidget from "../ui/social-media/instagram";
import FacebookWidget from "../ui/social-media/facebook";
import YoutubeWidget from "../ui/social-media/youtube";
export default function MediaSocial() {
// 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.",
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 (
<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
</p>
<div>
<div className="flex items-center justify-between pb-3">
<div className="font-semibold flex items-center">
<div className="flex items-center">
<TwitterIcon color="#1DA1F2" />
<p className="pl-2">Twitter</p>
<p className="pl-2 text-xl">Twitter</p>
</div>
<div className="text-xs text-[#DD8306] flex items-center">
Lihat Semua <ChevronRightIcon />
@ -106,43 +69,12 @@ export default function MediaSocial() {
<div>
<TwitterWidget />
</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 className="flex items-center justify-between pb-3">
<div className="font-semibold flex items-center">
<IgIcon height={50} color="#1DA1F2" />
<p className="pl-2">Instagram</p>
<div className="flex items-center">
<IgIcon size={40} color="#1DA1F2" />
<p className="pl-2 text-xl">Instagram</p>
</div>
<div className="text-xs text-[#DD8306]">
<Link
@ -155,44 +87,13 @@ export default function MediaSocial() {
</div>
<div className="">
<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 className="flex items-center justify-between pb-3">
<div className="font-semibold flex items-center">
<div className="flex items-center">
<FbIcon color="#1DA1F2" />
Facebook
<p className="pl-2 text-xl">Facebook</p>
</div>
<div className="text-xs text-[#DD8306] flex items-center">
Lihat Semua <ChevronRightIcon />
@ -202,9 +103,9 @@ export default function MediaSocial() {
</div>
<div>
<div className="flex items-center justify-between pb-3">
<div className="font-semibold flex items-center">
<TtIcon color="#1DA1F2" />
Tiktok
<div className="flex items-center">
<TtIcon color="#1DA1F2" size={40} />
<p className="pl-2 text-xl">Tiktok</p>
</div>
<div className="text-xs text-[#DD8306] flex items-center">
Lihat Semua <ChevronRightIcon />
@ -253,8 +154,8 @@ export default function MediaSocial() {
<div>
<div className="flex items-center justify-between pb-3">
<div className="font-semibold flex items-center">
<YtIcon color="#1DA1F2" />
Youtube
<YtIcon color="#1DA1F2" size={40} />
<p className="text-xl pl-2">Youtube</p>
</div>
<div className="text-xs text-[#DD8306]">
<Link
@ -266,41 +167,8 @@ export default function MediaSocial() {
</Link>
</div>
</div>
<div className="">
<div className=" rounded-md ">
<FacebookWidget />
</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 className=" rounded-md ">
<YoutubeWidget />
</div>
</div>
</div>

129
components/landing/RegionalNews.tsx
View File

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

475
components/landing/SidebarNav.tsx
View File

@ -1,133 +1,350 @@
import { Button, LinkIcon, ScrollShadow } from '@nextui-org/react'
import React from 'react'
import { EyeIcon } from '../icons'
import Image from 'next/image'
import Link from 'next/link'
"use client";
import { Button, LinkIcon, ScrollShadow } from "@nextui-org/react";
import React, { useState } from "react";
import { EyeIcon } from "../icons";
import Image from "next/image";
import Link from "next/link";
export default function SidebarNav() {
return (
<>
<div className='space-y-4'>
<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 className='text-xl font-semibold underline underline-offset-4 decoration-red-600 '>
Media Update
</div>
<div className='h-[410px] p-2 bg-[#020101] text-white rounded-md border-2 border-white'>
<ScrollShadow hideScrollBar className=" h-[345px]">
<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>
<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>
<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>
<Button
className='w-full bg-[#DD8306] font-bold rounded-bl-md rounded-br-md focus:outline-none'
radius='none'
>
Lihat Semua
</Button>
</div>
<div className='text-xl font-semibold underline underline-offset-4 decoration-red-600'>
Publikasi
<div className='flex flex-col gap-3 pt-3'>
<Image height={200} 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 href='https://lpse.polri.go.id/eproc4' target='_blank'>
<Image height={200} width={400} src="/publikasi4.png" alt="publikasi" />
</Link>
<Image height={200} width={400} src="/publikasi5.png" alt="publikasi" />
<Image height={200} width={400} src="/publikasi6.png" alt="publikasi" />
<Link href='https://tribratanews.polri.go.id/' target='_blank'>
<Image height={200} width={400} src="/publikasi7.png" alt="publikasi" />
</Link>
const [article, setArticle] = useState<any>([]);
const [selectedTab, setSelectedTab] = useState("media");
</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 className='text-xl font-semibold underline underline-offset-4 decoration-red-600 pb-5'>Info Eksternal</div>
<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'>
<img src="/eksternal1.png" alt="" className='w-full' />
<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 className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'>
<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='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 className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'>
<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='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 className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'>
<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='text-xs text-gray-500 pt-1'>Informasi dan Berita terbaru dari Komisi Perlindungan Anak Indonesia</p>
</div>
<div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'>
<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='text-xs text-gray-500 pt-1'>Info dan Berita terbaru dari Komnas Perempuan Indonesia</p>
</div>
</div>
</>
)
return (
<>
<div className="space-y-4 px-5">
<div className="text-[20px] flex flex-row gap-10">
<a
onClick={() => setSelectedTab("media")}
className={
selectedTab === "media"
? "text-black border-b-3 border-red-400 cursor-pointer py-2"
: "text-slate-300 cursor-pointer py-2"
}
>
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>
{selectedTab === "media" ? (
<div className="h-[410px] p-2 bg-[#020101] text-white rounded-md border-2 border-white">
<ScrollShadow hideScrollBar className=" h-[345px]">
<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>
<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>
<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>
<Button
className="w-full bg-[#DD8306] text-white font-bold rounded-bl-md rounded-br-md focus:outline-none"
radius="none"
>
Lihat Semua
</Button>
</div>
) : (
<div className="w-full">
<iframe
width="100%"
height="410"
src="https://www.youtube.com/embed/7oRcWfl9lxE?si=G_CZfXak_AiHjGzG"
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerPolicy="strict-origin-when-cross-origin"
allowFullScreen
></iframe>
</div>
)}
<p className="text-xl border-b-3 border-red-500 w-fit py-2">
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 className="text-xl font-semibold underline underline-offset-4 decoration-red-600">
Publikasi
<div className="flex flex-col gap-3 pt-3">
<Image
height={200}
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 href="https://lpse.polri.go.id/eproc4" target="_blank">
<Image
height={200}
width={400}
src="/publikasi4.png"
alt="publikasi"
/>
</Link>
<Image
height={200}
width={400}
src="/publikasi5.png"
alt="publikasi"
/>
<Image
height={200}
width={400}
src="/publikasi6.png"
alt="publikasi"
/>
<Link href="https://tribratanews.polri.go.id/" target="_blank">
<Image
height={200}
width={400}
src="/publikasi7.png"
alt="publikasi"
/>
</Link>
</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>
<p className="text-xl border-b-3 border-red-500 py-2 w-fit mx-5">
{" "}
Info Eksternal
</p>
<div className="flex flex-col mt-3 w-full px-5 gap-3">
<div className="bg-white text-black text-sm border-2 rounded-md p-4 shadow-md">
<img src="/eksternal1.png" alt="" className="w-full" />
<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 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" />
<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="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 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" />
<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="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 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" />
<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="text-xs text-gray-500 pt-1">
Informasi dan Berita terbaru dari Komisi Perlindungan Anak Indonesia
</p>
</div>
<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" />
<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="text-xs text-gray-500 pt-1">
Info dan Berita terbaru dari Komnas Perempuan Indonesia
</p>
</div>
</div>
</>
);
}

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

@ -294,12 +294,19 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
<>
{isOpen ? (
<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 ${
pathname.includes(list.modulePathUrl)
? "bg-zinc-600 dark:bg-zinc-300 text-zinc-300 dark:text-zinc-500 font-bold"
: "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}
</div>

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

@ -1,29 +1,25 @@
import { useEffect } from 'react';
import { useEffect } from "react";
const YoutubeWidget = () => {
useEffect(() => {
if (typeof window !== "undefined") {
const script = document.createElement("script");
script.src = "https://embedsocial.com/cdn/ht.js";
script.async = true;
document.head.appendChild(script);
useEffect(() => {
return () => {
document.head.removeChild(script);
};
}
}, []);
if (typeof window !== 'undefined') {
const script = document.createElement('script');
script.src = "https://embedsocial.com/cdn/ht.js";
script.async = true;
document.head.appendChild(script);
return () => {
document.head.removeChild(script);
};
}
}, []);
return (
<div className="embedsocial-hashtag rounded-md" data-ref="7ad1e18598045d000abbf6de3479b1bbd5502583"></div>
);
return (
<div
className="embedsocial-hashtag rounded-md"
data-ref="7ad1e18598045d000abbf6de3479b1bbd5502583"
></div>
);
};
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