mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev-sabda-v2' of https://gitlab.com/hanifsalafi/mediahub_redesign

This commit is contained in:
hanif salafi 2025-06-08 16:55:07 +07:00
parent 2d57cd606a d653ac9eee
commit c3dd46c0d6
12 changed files with 219 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
components/landing-page/coverage.tsx
View File

@ -54,22 +54,22 @@ const regions = [
{
name: "Polda Kalimantan Barat",
slug: "kalimantan-barat",
logo: "/logo/polda/polda-kalbar.png",
logo: "/logo/polda/polda-kalimantan-barat.png",
},
{
name: "Polda Kalimantan Selatan",
slug: "kalimantan-selatan",
logo: "/logo/polda/polda-kalsel.png",
logo: "/logo/polda/polda-kalimantan-selatan.png",
},
{
name: "Polda Kalimantan Tengah",
slug: "kalimantan-tengah",
logo: "/logo/polda/polda-kalteng.png",
logo: "/logo/polda/polda-kalimantan-tengah.png",
},
{
name: "Polda Kalimantan Timur",
slug: "kalimantan-timur",
logo: "/logo/polda/polda-kaltim.png",
logo: "/logo/polda/polda-kalimantan-timur.png",
},
{
name: "Polda Kalimantan Utara",
@ -117,6 +117,16 @@ const regions = [
slug: "papua-barat",
logo: "/logo/polda/polda-papua-barat.png",
},
{
name: "Polda Papua Barat Daya",
slug: "papua-barat-daya",
logo: "/logo/polda/polda-papua-barat-daya.png",
},
{
name: "Polda Papua Tengah",
slug: "papua-tengah",
logo: "/logo/polda/polda-papua-tengah.png",
},
{ name: "Polda Riau", slug: "riau", logo: "/logo/polda/polda-riau.png" },
{
name: "Polda Sulawesi Barat",
@ -173,14 +183,18 @@ const regions = [
const Coverage: React.FC = () => {
const [seeAllValue, setSeeAllValue] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const [filteredList, setFilteredList] = useState<typeof regions | undefined>(regions);
const [filteredList, setFilteredList] = useState<typeof regions | undefined>(
regions
);
const pathname = usePathname();
const t = useTranslations("LandingPage");
const handleSearch = () => {
const value = searchTerm.toLowerCase();
const filtered = regions.filter((polda) => polda.name.toLowerCase().includes(value));
const filtered = regions.filter((polda) =>
polda.name.toLowerCase().includes(value)
);
setFilteredList(filtered);
};
@ -198,16 +212,32 @@ const Coverage: React.FC = () => {
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
</svg>`;
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
const toBase64 = (str: string) =>
typeof window === "undefined"
? Buffer.from(str).toString("base64")
: window.btoa(str);
return (
<div className="w-full">
<div className="max-h-[60vh] overflow-y-auto px-4">
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6 px-4 max-h-[60vh]">
{filteredList?.map((region: any) => (
<Link key={region.slug} href={`/polda/${region.slug}`} className="flex flex-col items-center text-center p-3 border rounded-lg shadow-md hover:shadow-lg transition-all">
<Link
key={region.slug}
href={`/polda/${region.slug}`}
className="flex flex-col items-center text-center p-3 border rounded-lg shadow-md hover:shadow-lg transition-all"
>
<div className="mb-1 flex items-center justify-center">
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1920} height={1080} src={region.logo} alt={region.name} className="w-14 h-14 object-contain" />
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={1920}
height={1080}
src={region.logo}
alt={region.name}
className="w-14 h-14 object-contain"
/>
</div>
<p className="text-xs font-semibold">{region.name}</p>
</Link>

217
components/landing-page/division.tsx
View File

@ -9,48 +9,172 @@ import Image from "next/image";
const regions = [
{ name: "ITWASUM POLRI", slug: "itwasum", logo: "/logo/satker/ITWASUM.png" },
{ name: "BAINTELKAM POLRI", slug: "baintelkam", logo: "/logo/satker/BAINTELKAM.png" },
{ name: "BAHARKAM POLRI", slug: "baharkam", logo: "/logo/satker/BAHARKAM.png" },
{ name: "BARESKRIM POLRI", slug: "bareskrim", logo: "/logo/satker/BARESKRIM.png" },
{ name: "LEMDIKLAT POLRI", slug: "lemdiklat", logo: "/logo/satker/LEMDIKLAT.png" },
{
name: "BAINTELKAM POLRI",
slug: "baintelkam",
logo: "/logo/satker/BAINTELKAM.png",
},
{
name: "BAHARKAM POLRI",
slug: "baharkam",
logo: "/logo/satker/BAHARKAM.png",
},
{
name: "BARESKRIM POLRI",
slug: "bareskrim",
logo: "/logo/satker/BARESKRIM.png",
},
{
name: "LEMDIKLAT POLRI",
slug: "lemdiklat",
logo: "/logo/satker/LEMDIKLAT.png",
},
{ name: "KORBRIMOB POLRI", slug: "brimob", logo: "/logo/satker/BRIMOB.png" },
{ name: "STAMAOPS POLRI", slug: "sops", logo: "/logo/satker/SOPS.png" },
{ name: "STAMARENA POLRI", slug: "srena", logo: "/logo/satker/SRENA.png" },
{ name: "SSDM POLRI", slug: "ssdm", logo: "/logo/satker/SSDM.png" },
{ name: "SLOG POLRI", slug: "slog", logo: "/logo/satker/SLOG.png" },
{ name: "SAHLI KAPOLRI", slug: "stafahli", logo: "/logo/satker/STAFAHLI.png" },
{ name: "DIVPROPRAM POLRI", slug: "divpropram", logo: "/logo/satker/DIVPROPAM.png" },
{ name: "DIVKUM", slug: "divkum", logo: "/assets/satker/divkum.png" },
{ name: "DIVHUBINTER POLRI", slug: "divhubinter", logo: "/logo/satker/DIVHUBINTER.png" },
{
name: "SAHLI KAPOLRI",
slug: "stafahli",
logo: "/logo/satker/STAFAHLI.png",
},
{
name: "DIVPROPRAM POLRI",
slug: "divpropram",
logo: "/logo/satker/DIVPROPAM.png",
},
{ name: "DIVKUM", slug: "divkum", logo: "/logo/satker/DIVKUM.png" },
{
name: "DIVHUBINTER POLRI",
slug: "divhubinter",
logo: "/logo/satker/DIVHUBINTER.png",
},
{ name: "DIVTIK POLRI", slug: "div-tik", logo: "/logo/satker/DIV-TIK.png" },
{ name: "KORLANTAS POLRI", slug: "korlantas", logo: "/logo/satker/KORLANTAS.png" },
{ name: "DENSUS 88 POLRI", slug: "densus-88", logo: "/logo/satker/DENSUS-88.png" },
{ name: "PUSDOKKES POLRI", slug: "pusdokkes", logo: "/logo/satker/PUSDOKKES.png" },
{ name: "PUSLITBANG POLRI", slug: "puslitbang", logo: "/logo/satker/PUSLITBANG.png" },
{
name: "KORLANTAS POLRI",
slug: "korlantas",
logo: "/logo/satker/KORLANTAS.png",
},
{
name: "DENSUS 88 POLRI",
slug: "densus-88",
logo: "/logo/satker/DENSUS-88.png",
},
{
name: "PUSDOKKES POLRI",
slug: "pusdokkes",
logo: "/logo/satker/PUSDOKKES.png",
},
{
name: "PUSLITBANG POLRI",
slug: "puslitbang",
logo: "/logo/satker/PUSLITBANG.png",
},
{ name: "PUSKEU POLRI", slug: "puskeu", logo: "/logo/satker/PUSKEU.png" },
{ name: "PUSJARAH POLRI", slug: "pusjarah", logo: "/logo/satker/PUSJARAH.png" },
{
name: "PUSJARAH POLRI",
slug: "pusjarah",
logo: "/logo/satker/PUSJARAH.png",
},
{ name: "SETUM POLRI", slug: "setum", logo: "/logo/satker/SETUM.png" },
{ name: "YANMA POLRI", slug: "yanma", logo: "/logo/satker/YANMA.png" },
{ name: "SPRIPIM POLRI", slug: "spripim", logo: "/logo/satker/SPRIPIM.png" },
{ name: "KORPOLAIRUD BAHARKAM POLRI", slug: "polairud", logo: "/logo/satker/POLAIRUD.png" },
{ name: "KORSABHARA BAHARKAM POLRI", slug: "korps-sabhara-baharkam", logo: "/logo/satker/KORPS-SABHARA-BAHARKAM.png" },
{ name: "KORBINMAS BAHARKAM POLRI", slug: "binmas", logo: "/logo/satker/BINMAS.png" },
{ name: "DITTIPIDUM BARESKRIM POLRI", slug: "dittipidum", logo: "/logo/satker/DITTIPIDUM.png" },
{ name: "DITTIPIDEKSUS BARESKRIM POLRI", slug: "dittipideksus", logo: "/logo/satker/DITTIPIDEKSUS.png" },
{ name: "DITTIPIDKOR BARESKRIM POLRI", slug: "dittipidkor", logo: "/logo/satker/DITTIPIDKOR.png" },
{ name: "DITTIPIDNARKOBA BARESKRIM POLRI", slug: "dittipidnarkoba", logo: "/logo/satker/DITTIPIDNARKOBA.png" },
{ name: "DITTIPIDTER BARESKRIM POLRI", slug: "dittipidter", logo: "/logo/satker/DITTIPIDTER.png" },
{ name: "DITTIPIDSIBER BARESKRIM POLRI", slug: "dittipidsiber", logo: "/logo/satker/DITTIPIDSIBER.png" },
{ name: "DIT PPA-PPO BARESKRIM POLRI", slug: "dit-ppa-ppo", logo: "/logo/satker/DITPPAPPO.png" },
{ name: "PUSLABFOR BARESKRIM POLRI", slug: "puslabfor", logo: "/assets/satker/puslabfor.png" },
{ name: "PUSIKNAS BARESKRIM POLRI", slug: "pusiknas", logo: "/logo/satker/PUSKINAS.png" },
{ name: "STIK LEMDIKLAT POLRI", slug: "stik-ptik", logo: "/logo/satker/STIK-PTIK.png" },
{ name: "AKPOL LEMDIKLAT POLRI", slug: "akpol", logo: "/logo/satker/AKPOL.png" },
{ name: "SESPIM LEMDIKLAT POLRI", slug: "sespim-polri", logo: "/logo/satker/SESPIM-POLRI.png" },
{ name: "SETUKPA LEMDIKLAT POLRI", slug: "setupa-polri", logo: "/logo/satker/SETUPA-POLRI.png" },
{ name: "SEPOLWAN LEMDIKLAT POLRI", slug: "sepolwan-polri", logo: "/logo/satker/SEPOLWAN-POLRI.png" },
{ name: "SEBASA LEMDIKLAT POLRI", slug: "sebasa-polri", logo: "/logo/satker/SEBASA-POLRI.png" },
{ name: "RUMKIT BHAYANGKARA TK I", slug: "rumkit-bhayangkara", logo: "/logo/satker/RUMKIT-BHAYANGKARA.png" },
{
name: "KORPOLAIRUD BAHARKAM POLRI",
slug: "polairud",
logo: "/logo/satker/POLAIRUD.png",
},
{
name: "KORSABHARA BAHARKAM POLRI",
slug: "korps-sabhara-baharkam",
logo: "/logo/satker/KORPS-SABHARA-BAHARKAM.png",
},
{
name: "KORBINMAS BAHARKAM POLRI",
slug: "binmas",
logo: "/logo/satker/BINMAS.png",
},
{
name: "DITTIPIDUM BARESKRIM POLRI",
slug: "dittipidum",
logo: "/logo/satker/DITTIPIDUM.png",
},
{
name: "DITTIPIDEKSUS BARESKRIM POLRI",
slug: "dittipideksus",
logo: "/logo/satker/DITTIPIDEKSUS.png",
},
{
name: "DITTIPIDKOR BARESKRIM POLRI",
slug: "dittipidkor",
logo: "/logo/satker/DITTIPIDKOR.png",
},
{
name: "DITTIPIDNARKOBA BARESKRIM POLRI",
slug: "dittipidnarkoba",
logo: "/logo/satker/DITTIPIDNARKOBA.png",
},
{
name: "DITTIPIDTER BARESKRIM POLRI",
slug: "dittipidter",
logo: "/logo/satker/DITTIPIDTER.png",
},
{
name: "DITTIPIDSIBER BARESKRIM POLRI",
slug: "dittipidsiber",
logo: "/logo/satker/DITTIPIDSIBER.png",
},
{
name: "DIT PPA-PPO BARESKRIM POLRI",
slug: "dit-ppa-ppo",
logo: "/logo/satker/DITPPAPPO.png",
},
{
name: "PUSLABFOR BARESKRIM POLRI",
slug: "puslabfor",
logo: "/assets/satker/puslabfor.png",
},
{
name: "PUSIKNAS BARESKRIM POLRI",
slug: "pusiknas",
logo: "/logo/satker/PUSKINAS.png",
},
{
name: "STIK LEMDIKLAT POLRI",
slug: "stik-ptik",
logo: "/logo/satker/STIK-PTIK.png",
},
{
name: "AKPOL LEMDIKLAT POLRI",
slug: "akpol",
logo: "/logo/satker/AKPOL.png",
},
{
name: "SESPIM LEMDIKLAT POLRI",
slug: "sespim-polri",
logo: "/logo/satker/SESPIM-POLRI.png",
},
{
name: "SETUKPA LEMDIKLAT POLRI",
slug: "setupa-polri",
logo: "/logo/satker/SETUPA-POLRI.png",
},
{
name: "SEPOLWAN LEMDIKLAT POLRI",
slug: "sepolwan-polri",
logo: "/logo/satker/SEPOLWAN-POLRI.png",
},
{
name: "SEBASA LEMDIKLAT POLRI",
slug: "sebasa-polri",
logo: "/logo/satker/SEBASA-POLRI.png",
},
{
name: "RUMKIT BHAYANGKARA TK I",
slug: "rumkit-bhayangkara",
logo: "/logo/satker/RUMKIT-BHAYANGKARA.png",
},
{ name: "POLAIR", slug: "polair", logo: "/logo/satker/POLAIR.png" },
{ name: "POLUDARA", slug: "poludara", logo: "/logo/satker/POLUDARA.png" },
{ name: "PUSINAFIS", slug: "pusinafis", logo: "/logo/satker/PUSINAFIS.png" },
@ -62,14 +186,18 @@ const regions = [
const Division = () => {
const [searchTerm, setSearchTerm] = useState("");
const [seeAllValue, setSeeAllValue] = useState(false);
const [filteredList, setFilteredList] = useState<typeof regions | undefined>(regions);
const [filteredList, setFilteredList] = useState<typeof regions | undefined>(
regions
);
const pathname = usePathname();
const t = useTranslations("LandingPage");
const handleSearch = () => {
const value = searchTerm.toLowerCase();
const filtered = regions.filter((satker) => satker.name.toLowerCase().includes(value));
const filtered = regions.filter((satker) =>
satker.name.toLowerCase().includes(value)
);
setFilteredList(filtered);
};
@ -87,7 +215,10 @@ const Division = () => {
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
</svg>`;
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
const toBase64 = (str: string) =>
typeof window === "undefined"
? Buffer.from(str).toString("base64")
: window.btoa(str);
return (
<div className="mx-auto px-4 w-full">
@ -118,9 +249,21 @@ const Division = () => {
{/* Grid Wilayah */}
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6 px-4 overflow-y-auto max-h-[60vh]">
{filteredList?.map((region: any) => (
<Link href={`/satker/${region.slug}`} className="flex flex-col items-center text-center p-3 border rounded-lg shadow-md hover:shadow-lg transition-all">
<Link
href={`/satker/${region.slug}`}
className="flex flex-col items-center text-center p-3 border rounded-lg shadow-md hover:shadow-lg transition-all"
>
<div className="mb-1 flex items-center justify-center">
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1920} height={1080} src={region.logo} alt={region.name} className="w-14 h-14 object-contain" />
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={1920}
height={1080}
src={region.logo}
alt={region.name}
className="w-14 h-14 object-contain"
/>
</div>
<p className="text-xs font-semibold">{region.name}</p>
</Link>

BIN
public/logo/polda/polda-papua-barat-daya.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

BIN
public/logo/polda/polda-papua-tengah.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
public/logo/satker/DITPPAPPO.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
public/logo/satker/DITTIPIDEKSUS.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
public/logo/satker/DITTIPIDKOR.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
public/logo/satker/DITTIPIDNARKOBA.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
public/logo/satker/DITTIPIDSIBER.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
public/logo/satker/DITTIPIDTER.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
public/logo/satker/DITTIPIDUM.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
public/logo/satker/DIVKUM.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB