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

fix:landing

This commit is contained in:
Rama Priyanto 2025-02-03 19:55:03 +07:00
parent c37ab71a23
commit 459ba05261
10 changed files with 272 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
components/icons.tsx
View File

@ -2374,3 +2374,109 @@ export const BurgerButtonIcon = ({
/>
</svg>
);
export const XLandingIcon = ({
size,
height = 24,
width = 24,
fill = "currentColor",
...props
}: IconSvgProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size || width}
height={size || height}
{...props}
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
d="m3 21l7.548-7.548M21 3l-7.548 7.548m0 0L8 3H3l7.548 10.452m2.904-2.904L21 21h-5l-5.452-7.548"
color="currentColor"
/>
</svg>
);
export const InstagramLandingIcon = ({
size,
height = 24,
width = 24,
fill = "currentColor",
...props
}: IconSvgProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size || width}
height={size || height}
{...props}
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M12.001 9a3 3 0 1 0 0 6a3 3 0 0 0 0-6m0-2a5 5 0 1 1 0 10a5 5 0 0 1 0-10m6.5-.25a1.25 1.25 0 0 1-2.5 0a1.25 1.25 0 0 1 2.5 0M12.001 4c-2.474 0-2.878.007-4.029.058c-.784.037-1.31.142-1.798.332a2.9 2.9 0 0 0-1.08.703a2.9 2.9 0 0 0-.704 1.08c-.19.49-.295 1.015-.331 1.798C4.007 9.075 4 9.461 4 12c0 2.475.007 2.878.058 4.029c.037.783.142 1.31.331 1.797c.17.435.37.748.702 1.08c.337.336.65.537 1.08.703c.494.191 1.02.297 1.8.333C9.075 19.994 9.461 20 12 20c2.475 0 2.878-.007 4.029-.058c.782-.037 1.308-.142 1.797-.331a2.9 2.9 0 0 0 1.08-.703c.337-.336.538-.649.704-1.08c.19-.492.296-1.018.332-1.8c.052-1.103.058-1.49.058-4.028c0-2.474-.007-2.878-.058-4.029c-.037-.782-.143-1.31-.332-1.798a2.9 2.9 0 0 0-.703-1.08a2.9 2.9 0 0 0-1.08-.704c-.49-.19-1.016-.295-1.798-.331C14.926 4.006 14.54 4 12 4m0-2c2.717 0 3.056.01 4.123.06c1.064.05 1.79.217 2.427.465c.66.254 1.216.598 1.772 1.153a4.9 4.9 0 0 1 1.153 1.772c.247.637.415 1.363.465 2.428c.047 1.066.06 1.405.06 4.122s-.01 3.056-.06 4.122s-.218 1.79-.465 2.428a4.9 4.9 0 0 1-1.153 1.772a4.9 4.9 0 0 1-1.772 1.153c-.637.247-1.363.415-2.427.465c-1.067.047-1.406.06-4.123.06s-3.056-.01-4.123-.06c-1.064-.05-1.789-.218-2.427-.465a4.9 4.9 0 0 1-1.772-1.153a4.9 4.9 0 0 1-1.153-1.772c-.248-.637-.415-1.363-.465-2.428C2.012 15.056 2 14.717 2 12s.01-3.056.06-4.122s.217-1.79.465-2.428a4.9 4.9 0 0 1 1.153-1.772A4.9 4.9 0 0 1 5.45 2.525c.637-.248 1.362-.415 2.427-.465C8.945 2.013 9.284 2 12.001 2"
/>
</svg>
);
export const FacebookLandingIcon = ({
size,
height = 24,
width = 24,
fill = "currentColor",
...props
}: IconSvgProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size || width}
height={size || height}
{...props}
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M20.9 2H3.1A1.1 1.1 0 0 0 2 3.1v17.8A1.1 1.1 0 0 0 3.1 22h9.58v-7.75h-2.6v-3h2.6V9a3.64 3.64 0 0 1 3.88-4a20 20 0 0 1 2.33.12v2.7H17.3c-1.26 0-1.5.6-1.5 1.47v1.93h3l-.39 3H15.8V22h5.1a1.1 1.1 0 0 0 1.1-1.1V3.1A1.1 1.1 0 0 0 20.9 2"
/>
</svg>
);
export const TiktokLandingIcon = ({
size,
height = 24,
width = 24,
fill = "currentColor",
...props
}: IconSvgProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size || width}
height={size || height}
{...props}
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M16.6 5.82s.51.5 0 0A4.28 4.28 0 0 1 15.54 3h-3.09v12.4a2.59 2.59 0 0 1-2.59 2.5c-1.42 0-2.6-1.16-2.6-2.6c0-1.72 1.66-3.01 3.37-2.48V9.66c-3.45-.46-6.47 2.22-6.47 5.64c0 3.33 2.76 5.7 5.69 5.7c3.14 0 5.69-2.55 5.69-5.7V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3s-1.88.09-3.24-1.48"
/>
</svg>
);
export const YoutubeLandingIcon = ({
size,
height = 24,
width = 24,
fill = "currentColor",
...props
}: IconSvgProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size || width}
height={size || height}
{...props}
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M12.244 4c.534.003 1.87.016 3.29.073l.504.022c1.429.067 2.857.183 3.566.38c.945.266 1.687 1.04 1.938 2.022c.4 1.56.45 4.602.456 5.339l.001.152v.174c-.007.737-.057 3.78-.457 5.339c-.254.985-.997 1.76-1.938 2.022c-.709.197-2.137.313-3.566.38l-.504.023c-1.42.056-2.756.07-3.29.072l-.235.001h-.255c-1.13-.007-5.856-.058-7.36-.476c-.944-.266-1.687-1.04-1.938-2.022c-.4-1.56-.45-4.602-.456-5.339v-.326c.006-.737.056-3.78.456-5.339c.254-.985.997-1.76 1.939-2.021c1.503-.419 6.23-.47 7.36-.476zM9.999 8.5v7l6-3.5z"
/>
</svg>
);

4
components/landing/BodyLayout.tsx
View File

@ -11,9 +11,9 @@ export default function BodyLayout() {
<>
<div className="lg:flex bg-white text-black p-2 lg:p-8 gap-9">
<div className="lg:w-[75%] space-y-7">
{/* <MedolUpdate /> */}
{/* <CategorySatker /> */}
<CategorySatker />
<RegionalNews />
{/* <MedolUpdate /> */}
<MediaSocial />
<ENewsPolri />
</div>

27
components/landing/CategorySatker.tsx
View File

@ -298,6 +298,11 @@ export default function CategorySatker() {
// };
// }, [list]);
const changeNameToSlug = (name: string) => {
const cleaned = name.trim().toLowerCase();
return cleaned.replace(/\s+/g, "-");
};
return (
<div className="text-center bg-[#DD8306] rounded-none md:rounded-lg h-auto lg:h-[338px] space-y-0 py-4 md:space-y-7 flex flex-col justify-center">
<div className="text-white font-bold text-2xl underline underline-offset-4 decoration-red-600">
@ -309,7 +314,10 @@ export default function CategorySatker() {
</div>
<div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
{list.map((item: any, index: any) => (
<Link href={item.path} key={item.path}>
<Link
href={`/news/all?satker=${changeNameToSlug(item.title)}`}
key={item.path}
>
<div
key={index}
className="w-[157px] h-[140px] flex flex-col items-center justify-evenly "
@ -327,8 +335,9 @@ export default function CategorySatker() {
<div>
<Button
onPress={onOpen}
className="bg-white text-[#DD8306] font-bold"
className="border-red-700 text-white w-fit"
size="sm"
variant="bordered"
>
{t("lebihBanyak")}
</Button>
@ -355,7 +364,12 @@ export default function CategorySatker() {
key={index.id}
className="w-[140px] h-[115px] flex flex-col items-center justify-center rounded-lg shadow-sm"
>
<Link href={item.path}>
<Link
href={`/news/all?satker=${changeNameToSlug(
item.title
)}`}
>
{" "}
<Image
radius="lg"
className="h-[59px] "
@ -369,7 +383,12 @@ export default function CategorySatker() {
))}
</ModalBody>
<ModalFooter>
<Button color="danger" variant="light" onPress={onClose}>
<Button
variant="light"
onPress={onClose}
className="text-danger"
>
{" "}
{t("tutup")}
</Button>
</ModalFooter>

185
components/landing/MediaSocial.tsx
View File

@ -1,111 +1,140 @@
import Link from "next/link";
import {
ChevronRightIcon,
FacebookLandingIcon,
FbIcon,
IgIcon,
InstagramLandingIcon,
TiktokLandingIcon,
TtIcon,
TwitterIcon,
XLandingIcon,
YoutubeLandingIcon,
YtIcon,
} from "../icons";
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";
import { useState } from "react";
import { Button } from "@nextui-org/button";
export default function MediaSocial() {
// const [limitedData, setLimitedData] = useState<any>([]);
const dummyData = [
{
id: 1,
logo: "/logohumas.png",
division: "Divisi Humas Polri",
type: "/temp/offical.svg",
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: 2,
logo: "/logohumas.png",
division: "Divisi Humas Polri",
username: "@DivHumas_Polri",
type: "/temp/offical.svg",
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: 3,
logo: "/logohumas.png",
division: "Divisi Humas Polri",
type: "/temp/offical.svg",
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",
},
];
const [selectedPlatform, setSelectedPlatform] = useState("x");
return (
<div className="space-y-5 md:space-y-7 bg-white text-black rounded-lg ">
<p className="text-xl border-b-3 border-red-500 py-2 w-fit font-semibold">
MediaSocial
</p>
<div>
<div className="flex items-center justify-between pb-3">
<div className="flex flex-row gap-3">
<Button
className="min-w-[60px]"
variant={selectedPlatform === "x" ? "solid" : "flat"}
onClick={() => setSelectedPlatform("x")}
>
<div className="flex items-center">
<TwitterIcon color="#1DA1F2" />
<p className="pl-2 text-xl">Twitter</p>
<XLandingIcon size={16} />
<p
className={`pl-2 text-sm ${
selectedPlatform === "x"
? "font-semibold"
: "text-slate-600 dark:text-slate-50"
}`}
>
X
</p>
</div>
</div>
<div>
<TwitterWidget />
</div>
</Button>
<Button
className="min-w-[60px]"
variant={selectedPlatform === "instagram" ? "solid" : "flat"}
onClick={() => setSelectedPlatform("instagram")}
>
<div className="flex items-center">
<InstagramLandingIcon />
<p
className={`pl-2 text-sm ${
selectedPlatform === "instagram"
? "font-semibold"
: "text-slate-600 dark:text-slate-50"
}`}
>
Instagram
</p>
</div>
</Button>
<Button
className="min-w-[60px]"
variant={selectedPlatform === "facebook" ? "solid" : "flat"}
onClick={() => setSelectedPlatform("facebook")}
>
<div className="flex items-center">
<FacebookLandingIcon />
<p
className={`pl-2 text-sm ${
selectedPlatform === "facebook"
? "font-semibold"
: "text-slate-600 dark:text-slate-50"
}`}
>
Facebook
</p>
</div>
</Button>
<Button
className="min-w-[60px]"
variant={selectedPlatform === "tiktok" ? "solid" : "flat"}
onClick={() => setSelectedPlatform("tiktok")}
>
<div className="flex items-center">
<TiktokLandingIcon />
<p
className={`pl-2 text-sm ${
selectedPlatform === "tiktok"
? "font-semibold"
: "text-slate-600 dark:text-slate-50"
}`}
>
Tiktok
</p>
</div>
</Button>
<Button
className="min-w-[60px]"
variant={selectedPlatform === "youtube" ? "solid" : "flat"}
onClick={() => setSelectedPlatform("youtube")}
>
<div className="flex items-center">
<YoutubeLandingIcon />
<p
className={`pl-2 text-sm ${
selectedPlatform === "youtube"
? "font-semibold"
: "text-slate-600 dark:text-slate-50"
}`}
>
Youtube
</p>
</div>
</Button>
</div>
<div>
<div className="flex items-center justify-between pb-3">
<div className="flex items-center">
<IgIcon size={40} color="#1DA1F2" />
<p className="pl-2 text-xl">Instagram</p>
</div>
</div>
<div className="">
<InstagramWidget />
</div>
<div className={selectedPlatform === "x" ? "" : "hidden"}>
<TwitterWidget />
</div>
<div>
<div className="flex items-center justify-between pb-3">
<div className="flex items-center">
<FbIcon color="#1DA1F2" />
<p className="pl-2 text-xl">Facebook</p>
</div>
</div>
<div className={selectedPlatform === "instagram" ? "" : "hidden"}>
<InstagramWidget />
</div>
<div className={selectedPlatform === "facebook" ? "" : "hidden"}>
<FacebookWidget />
</div>
<div>
<div className="flex items-center justify-between pb-3">
<div className="flex items-center">
<TtIcon color="#1DA1F2" size={40} />
<p className="pl-2 text-xl">Tiktok</p>
</div>
</div>
<div className={selectedPlatform === "tiktok" ? "" : "hidden"}>
<FacebookWidget />
</div>
<div>
<div className="flex items-center justify-between pb-3">
<div className="font-semibold flex items-center">
<YtIcon color="#1DA1F2" size={40} />
<p className="text-xl pl-2">Youtube</p>
</div>
</div>
<div className=" rounded-md ">
<YoutubeWidget />
</div>
<div className={selectedPlatform === "youtube" ? "" : "hidden"}>
<YoutubeWidget />
</div>
</div>
);

28
components/landing/RegionalNews.tsx
View File

@ -299,10 +299,8 @@ export default function RegionalNews() {
// }, [list]);
const changeNameToSlug = (name: string) => {
const cleaned = name.replace("Polda ", "").trim();
const slug = cleaned.includes(" ")
? cleaned.toLowerCase().replace(/\s+/g, "-")
: cleaned;
const cleaned = name.replace("Polda ", "").trim().toLowerCase();
const slug = cleaned.replace(/\s+/g, "-");
return slug;
};
@ -321,7 +319,7 @@ export default function RegionalNews() {
<div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
{listPolda.map((item: any, index: any) => (
<Link
href={`/news/all?polda-name=${changeNameToSlug(item.title)}`}
href={`/news/all?polda=${changeNameToSlug(item.title)}`}
key={item.path}
>
<div
@ -355,8 +353,8 @@ export default function RegionalNews() {
scrollBehavior={scrollBehavior}
placement={modalPlacement}
classNames={{
wrapper: "bg-[#DD8306]",
base: "bg-[#DD8306] min-h-full",
wrapper: "bg-white",
base: "bg-white min-h-full",
// body: "w-full bg-white",
// footer: "bg-white"
}}
@ -364,8 +362,8 @@ export default function RegionalNews() {
<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">
<ModalHeader className="flex flex-col text-black items-center min-h mb- text-3xl font-semibold">
<div className="text-xl text-black w-full justify-center flex">
<p className="border-b-3 border-[#C3170F] py-2 w-fit">
{" "}
{t("beritaWilayah")}
@ -379,9 +377,7 @@ export default function RegionalNews() {
className="w-[140px] h-[115px] flex flex-col items-center justify-center rounded-lg shadow-sm"
>
<Link
href={`/news/all?polda-name=${changeNameToSlug(
item.title
)}`}
href={`/news/all?polda=${changeNameToSlug(item.title)}`}
>
<div className="flex flex-col items-center ">
<Image
@ -389,7 +385,7 @@ export default function RegionalNews() {
className="h-[59px]"
src={item.img}
/>
<p className="text-xs font-bold text-white">
<p className="text-xs font-bold text-black">
{item.title}
</p>
</div>
@ -398,7 +394,11 @@ export default function RegionalNews() {
))}
</ModalBody>
<ModalFooter>
<Button variant="light" onPress={onClose}>
<Button
variant="light"
onPress={onClose}
className="text-danger"
>
{t("tutup")}
</Button>
</ModalFooter>

12
components/landing/SidebarNav.tsx
View File

@ -91,10 +91,10 @@ export default function SidebarNav() {
></iframe>
</div>
)}
<p className="text-[15px] border-b-3 border-red-500 w-fit py-2">
{/* <p className="text-[15px] border-b-3 border-red-500 w-fit py-2">
Pelayanan Informasi Publik
</p>
<img src="pelayanan-informasi-publik.png" className="w-full" />
<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>
@ -163,7 +163,7 @@ export default function SidebarNav() {
</Link>
</div>
</div> */}
{/* <div className="text-xl font-semibold underline underline-offset-4 decoration-red-600">
<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
@ -226,9 +226,9 @@ export default function SidebarNav() {
/>
</Link>
</div>
</div> */}
</div>
</div>
<p className="text-[15px] border-b-3 border-red-500 py-2 w-fit mx-1 lg:mx-5">
{/* <p className="text-[15px] border-b-3 border-red-500 py-2 w-fit mx-1 lg:mx-5">
{" "}
Info Eksternal
</p>
@ -321,7 +321,7 @@ export default function SidebarNav() {
Info dan Berita terbaru dari Komnas Perempuan Indonesia
</p>
</div>
</div>
</div> */}
</>
);
}

10
components/layout/navbar/NavbarHumas.tsx
View File

@ -154,7 +154,6 @@ export default function NavbarHumas(props: { size: string }) {
<Link href={"/"}>
<img src="/logohumas.png" alt="logo" className="w-[95px]" />
</Link>
<Dropdown
className="bg-white dark:bg-[#1F1A17] "
radius="none"
@ -394,7 +393,14 @@ export default function NavbarHumas(props: { size: string }) {
</div>
</DropdownItem>
</DropdownMenu>
</Dropdown>
</Dropdown>{" "}
<Link
href="https://eppid.polri.go.id/"
target="_blank"
className="font-semibold"
>
E-PPID
</Link>
<Dropdown
className=" dark:bg-[#1F1A17]"
onOpenChange={(state) => setIsOpen(state)}

3
components/main/detail/comment.tsx
View File

@ -60,6 +60,7 @@ export default function Comment(props: { id: string | null }) {
handleSubmit,
formState: { errors },
setValue,
reset,
} = useForm<UserSettingSchema>(formOptions);
useEffect(() => {
@ -97,7 +98,9 @@ export default function Comment(props: { id: string | null }) {
error(res?.message);
return false;
}
reset();
fetchData();
setNeedOtp(false);
}
};

3
components/table/article-table.tsx
View File

@ -71,7 +71,7 @@ export default function ArticleTable() {
useEffect(() => {
initState();
}, [page, showData, startDateValue]);
}, [page, showData, startDateValue, selectedCategories]);
useEffect(() => {
getCategories();
@ -80,7 +80,6 @@ export default function ArticleTable() {
async function getCategories() {
const res = await getArticleByCategory();
const data = res?.data?.data;
console.log("datass", res?.data?.data);
setCategoies(data);
}

3
config/site.ts
View File

@ -105,6 +105,8 @@ export const siteConfig = {
},
],
},
{ key: "e-ppid", label: "E-PPID", href: "https://eppid.polri.go.id/" },
{
key: "public-information",
label: "informasi_publik",
@ -195,7 +197,6 @@ export const siteConfig = {
},
],
},
{
key: "related-app",
label: "aplikasi_terkait",