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 />

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

@ -1,24 +1,29 @@
"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";
import Link from "next/link"; 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"
</Button> color="primary"
</Link> className="bg-[#F07C00] text-white"
</Card> >
<Card className="rounded-md my-5"> <AddIcon />
<MasterRoleTable /> New Role
</Card> </Button>
</div> </Link>
</div> </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=""> <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>

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 { 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,114 +101,190 @@ 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 // isRequired
type="text" // type="text"
label="Username" // label="Username"
placeholder="Masukkan username anda!" // placeholder="Masukkan username anda!"
variant="underlined" // variant="underlined"
onChange={(e: any) => { // onChange={(e: any) => {
setValUsername(e.target.value.trim()); // setValUsername(e.target.value.trim());
}} // }}
onPaste={(e: any) => { // onPaste={(e: any) => {
setValUsername(e.target.value.trim()); // setValUsername(e.target.value.trim());
}} // }}
onCopy={(e: any) => { // onCopy={(e: any) => {
setValUsername(e.target.value.trim()); // setValUsername(e.target.value.trim());
}} // }}
/> // />
</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 // isRequired
endContent={ // endContent={
<button // <button
className="focus:outline-none" // className="focus:outline-none"
type="button" // type="button"
onClick={toggleVisibility} // onClick={toggleVisibility}
> // >
{isVisible ? ( // {isVisible ? (
<EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" /> // <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
) : ( // ) : (
<EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" /> // <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
)} // )}
</button> // </button>
} // }
type={isVisible ? "text" : "password"} // type={isVisible ? "text" : "password"}
label="Password" // label="Password"
placeholder="Masukkan password anda" // placeholder="Masukkan password anda"
variant="underlined" // variant="underlined"
onChange={(event) => setPassword(event.target.value)} // onChange={(event) => setPassword(event.target.value)}
/> // />
</div> // </div>
<div> // <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"
onPress={onSubmit} // 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 {isVisible ? (
</Button> <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
</div> ) : (
<div className="flex justify-center text-xs font-medium py-3"> <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
Don&apos;t have account? Register Now )}
</div> </button>
}
type={isVisible ? "text" : "password"}
label=""
placeholder=""
onChange={(event) => setPassword(event.target.value)}
/>
<div className="flex justify-between my-8 text-white">
<div> <div>
<Link href={`/form-permohonan-informasi`}> <Checkbox color="warning"></Checkbox> Remember me
<Button
size="lg"
variant="bordered"
className="w-full text-[#DD8306] borde-2 border-[#DD8306] rounded-md font-semibold"
>
Register
</Button>
</Link>
</div> </div>
<Link href="#" className="text-[#DD8306]">
Reset Password
</Link>
</div> </div>
<div className="hidden sm:flex w-1/2 items-center justify-center p-10"> <Button
<img src="/login.png" alt="logo" /> 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>
</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) => { 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>

164
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 "> <YoutubeWidget />
<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> </div>
</div> </div>
</div> </div>

129
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">
{t("beritaWilayah")} <p className="border-b-3 border-[#C3170F] py-2 w-fit">
{" "}
{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,73 +313,79 @@ 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> <div className="flex justify-center w-full items-center">
<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>
<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> </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> </div>
); );
} }

475
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() {
return ( const [article, setArticle] = useState<any>([]);
<> const [selectedTab, setSelectedTab] = useState("media");
<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>
</div> return (
</div> <>
<div className='text-xl font-semibold underline underline-offset-4 decoration-red-600'>Channel Humas Polri <div className="space-y-4 px-5">
<div className='flex flex-col gap-3 m-10'> <div className="text-[20px] flex flex-row gap-10">
<Link href='https://portal.humas.polri.go.id/library' target='_blank'> <a
<Image height={100} width={300} src="/portal-humas1.png" alt="humas-polri" /> onClick={() => setSelectedTab("media")}
</Link> className={
<Link href='https://mediahub.polri.go.id/' target='_blank'> selectedTab === "media"
<Image height={100} width={300} src="/humas1.png" alt="humas-polri" /> ? "text-black border-b-3 border-red-400 cursor-pointer py-2"
</Link> : "text-slate-300 cursor-pointer py-2"
<Link href='https://spit.humas.polri.go.id/' target='_blank'> }
<Image height={100} width={300} src="/humas2.png" alt="humas-polri" /> >
</Link> Media Update
<Link href='https://tvradio.polri.go.id/' target='_blank'> </a>
<Image height={100} width={300} src="/humas3.png" alt="humas-polri" /> <a
</Link> onClick={() => setSelectedTab("video")}
<Link href='https://tribratanews.polri.go.id/' target='_blank' className='border-2 rounded-md shadow-sm'> className={
<Image height={100} width={300} src="/humas4.png" alt="humas-polri" /> selectedTab === "video"
</Link> ? "text-black border-b-3 border-red-400 cursor-pointer py-2"
<Link href='https://inp.polri.go.id/' target='_blank' className='border-2 rounded-md shadow-sm px-2'> : "text-slate-300 cursor-pointer py-2"
<Image height={100} width={300} src="/humas5.png" alt="humas-polri" /> }
</Link> >
</div> Video Virtual
</div> </a>
</div> </div>
<div className='text-xl font-semibold underline underline-offset-4 decoration-red-600 pb-5'>Info Eksternal</div> {selectedTab === "media" ? (
<div className='flex flex-col items-center space-y-7'> <div className="h-[410px] p-2 bg-[#020101] text-white rounded-md border-2 border-white">
<div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'> <ScrollShadow hideScrollBar className=" h-[345px]">
<img src="/eksternal1.png" alt="" className='w-full' /> <div className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md">
<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>
<p className='text-xs text-gray-500 pt-1'>Berita terbaru dari Badan Pusat Statistika Indonesia</p> Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan
<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> Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari
<p className='text-xs text-gray-500 pt-1s'>Pengumuman terbaru dari Badan Pusat Statistika Indonesia</p> </p>
</div> <p className="py-[2px]">21-07-2023 13:50</p>
<div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'> <p className="flex items-center gap-1">
<img src="/eksternal2.png" alt="" className='w-full' /> <EyeIcon />
<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> 82
<p className='text-xs text-gray-500 pt-1'>Berita terbaru dari Komisi Pemilihan Umum Indonesia</p> </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> </div>
<p className='text-xs text-gray-500 pt-1s'>Pengumuman terbaru dari Komisi Pemilihan Umum Indonesia</p> <div className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md">
</div> <p>
<div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'> Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan
<img src="/eksternal3.png" alt="" className='w-full' /> Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari
<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>
<p className='text-xs text-gray-500 pt-1'>Berita terbaru dari Badan Pengawas Pemilihan Umum Republik Indonesia</p> <p className="py-[2px]">21-07-2023 13:50</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="flex items-center gap-1">
<p className='text-xs text-gray-500 pt-1s'>Pengumuman terbaru dari Badan Pusat Statistika Indonesia</p> <EyeIcon />
</div> 82
<div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'> </p>
<img src="/eksternal4.png" alt="" className='w-full' /> </div>
<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> <div className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md">
<p className='text-xs text-gray-500 pt-1'>Informasi dan Berita terbaru dari Komisi Perlindungan Anak Indonesia</p> <p>
</div> Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan
<div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'> Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari
<img src="/eksternal5.png" alt="" className='w-full' /> </p>
<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="py-[2px]">21-07-2023 13:50</p>
<p className='text-xs text-gray-500 pt-1'>Info dan Berita terbaru dari Komnas Perempuan Indonesia</p> <p className="flex items-center gap-1">
</div> <EyeIcon />
</div> 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 ? ( {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>

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

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