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

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

This commit is contained in:
hanif salafi 2025-03-26 08:34:49 +07:00
parent cfb19994df 3849803dfa
commit 03beb6ec6c
9 changed files with 291 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx
View File

@ -114,10 +114,10 @@ const HeroKaltara = () => {
return (
<>
<Reveal>
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20 w-full py-4 mt-36">
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20 w-full py-4 mt-0 lg:mt-2">
{isBannerLoading ? (
<div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
<Skeleton className="h-[310px] lg:h-[420px] rounded-xl" />
<Skeleton className="h-[310px] lg:h-[420px] rounded-xl" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
@ -125,7 +125,7 @@ const HeroKaltara = () => {
</div>
) : (
<div className="w-full lg:h-full">
{content?.map((row: any, index: number) => (
{content?.slice(0, 1)?.map((row: any, index: number) => (
<div className="flex flex-col gap-[10px]" key={index}>
<Link href={prefixPath + `/video/detail/${row.slug}`}>
<Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[200px] lg:h-[500px] rounded-sm object-cover" />

2
app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/latest-news.tsx
View File

@ -136,7 +136,7 @@ const LatestNews = (props: { type: string }) => {
<Reveal>
<div className="my-10 px-4 lg:px-20 gap-3">
<div className="bg-[#c03724] rounded-md p-3 w-fit">
<p className="text-white font-semibold">Berita {props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new") : "Serupa"}</p>
<p className="text-white font-sans font-semibold">Berita {props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new") : "Serupa"}</p>
</div>
</div>
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20">

64
app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx
View File

@ -51,44 +51,46 @@ const NavbarKaltara = () => {
const [menuOpen, setMenuOpen] = useState(false);
return (
<div className="bg-[#c03724] w-full py-3 px-4 lg:px-20 items-center fixed top-0 z-50">
<div className="bg-[#c03724] w-full py-3 px-4 lg:px-20 items-center sticky top-0 z-50">
<div className="flex flex-row justify-between items-center">
<Link href="/tbnews/polda-kaltara">
<Image width={2560} height={1440} src="/assets/img/logo-new-tbnews.png" alt="image" className="h-28 w-72" />
</Link>
<div className="flex flex-row">
<div className="text-white font-semibold hidden lg:flex flex-row gap-14 items-center">
{category?.map((data: any) => (
<Link key={data?.id} href={categoryLinks[data?.name] || "#"}>
{data?.name}
</Link>
))}
</div>
<Link href="/auth">
<Button className="hidden lg:flex justify-center items-center bg-white rounded-full gap-3 ml-7 p-2 w-fit h-fit">
<Icon icon="material-symbols:lock" className="text-[#c03724]" />
<p className="text-[#c03724]">Login</p>
</Button>
<div className="flex flex-row justify-between items-center">
<Link href="/tbnews/polda-kaltara">
<Image width={2560} height={1440} src="/assets/img/logo-new-tbnews.png" alt="image" className="h-28 w-72" />
</Link>
<div className="flex flex-row">
<div className="text-white font-semibold hidden lg:flex flex-row gap-14 items-center">
{category?.map((data: any) => (
<Link key={data?.id} href={categoryLinks[data?.name] || "#"}>
{data?.name}
</Link>
))}
</div>
<Link href="/auth">
<Button className="hidden lg:flex justify-center items-center bg-white rounded-full gap-3 ml-7 p-2 w-fit h-fit">
<Icon icon="material-symbols:lock" className="text-[#c03724]" />
<p className="text-[#c03724]">Login</p>
</Button>
</Link>
</div>
</div>
</div>
{/* Mobile Menu Toggle */}
<button className="text-black dark:text-white right-0 size-20 h-10 w-10 lg:hidden" onClick={() => setMenuOpen(!menuOpen)}>
{menuOpen ? (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor" d="m13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42Z" />
</svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor" d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m1 5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2z" />
</svg>
)}
</button>
{/* Mobile Menu Toggle */}
<button className="text-black dark:text-white right-0 size-20 h-10 w-10 lg:hidden" onClick={() => setMenuOpen(!menuOpen)}>
{menuOpen ? (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor" d="m13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42Z" />
</svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor" d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m1 5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2z" />
</svg>
)}
</button>
</div>
{/* Mobile Menu */}
{menuOpen && (
<div className="lg:hidden absolute bg-[#c03724] dark:bg-slate-600 px-4 py-3 space-y-3 z-50 left-[142px] top-[142px] items-center w-[300px]">
<div className="lg:hidden absolute bg-[#c03724] dark:bg-slate-600 px-4 py-3 space-y-3 z-50 left-[1oopx] top-[142px] items-center w-[300px]">
<div className="text-white font-semibold gap-5 items-center grid grid-cols-2">
{category?.map((data: any) => (
<Link key={data?.id} href={categoryLinks[data?.name] || "#"}>

55
app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/pps-section.tsx Normal file
View File

@ -0,0 +1,55 @@
"use client";
import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import Image from "next/image";
const PpsSection = () => {
const image = [
{
id: 1,
src: "/assets/PPS.png",
},
{
id: 2,
src: "/assets/contoh6.png",
},
{
id: 3,
src: "/assets/contoh7.png",
},
];
return (
<div className="px-8 lg:px-20 py-4 lg:py-10">
<div>
<Carousel className="w-full mx-auto">
<CarouselContent>
{image?.map((news: any, index) => (
<CarouselItem key={news?.id} className="grid grid-cols-1">
<Card key={index} className="w-full overflow-hidden shadow-lg h-full">
<Image src={news.src} alt="pps" width={400} height={250} className="w-full h-full object-cover rounded-md" />
<CardContent className="p-4">
{/* <div className="flex items-center gap-2 text-white text-xs font-bold">
<span className={`${news.bgColor} px-2 py-1 rounded text-[12px] font-helvetica`}>{news.tag}</span>
<span className="text-[#A6711F] text-[12px] font-helvetica">{news.category}</span>
</div>
<p className="text-gray-400 text-[12px] font-helvetica mt-1">{news.date}</p>
<h3 className="text-[16px] font-helvetica font-bold mt-2">{news.title}</h3>
<p className="text-[14px] font-helvetica text-gray-500 mt-2">{news.description}</p> */}
</CardContent>
</Card>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious className="hover:bg-black" />
<CarouselNext className="hover:bg-black -mr-6" />
</Carousel>
</div>
</div>
);
};
export default PpsSection;

393
app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx
View File

@ -1,12 +1,66 @@
"use client";
import React, { useState } from "react";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import Image from "next/image";
import { Icon } from "@/components/ui/icon";
import { Link } from "@/i18n/routing";
import { Reveal } from "@/components/landing-page/Reveal";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import { formatDateToIndonesian } from "@/utils/globals";
const SocialMedia = () => {
const [selectedTab, setSelectedTab] = useState("x");
const twitter = [
{
id: 1,
logo: "/assets/img/logo-humas.jpg",
title: "Humas_PoldaKaltara",
tag: "@HumasKaltara",
desc: " Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et dolor ut ullam tempora deserunt dolore consequatur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati sint et sunt quis, eius fuga aliquid",
image: "/assets/img/gbr-contoh.png",
},
{
id: 2,
logo: "/assets/img/logo-humas.jpg",
title: "Humas_PoldaKaltara",
tag: "@HumasKaltara",
desc: " Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et dolor ut ullam tempora deserunt dolore consequatur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati sint et sunt quis, eius fuga aliquid",
image: "/assets/img/gbr-contoh.png",
},
{
id: 3,
logo: "/assets/img/logo-humas.jpg",
title: "Humas_PoldaKaltara",
tag: "@HumasKaltara",
desc: " Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et dolor ut ullam tempora deserunt dolore consequatur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati sint et sunt quis, eius fuga aliquid",
image: "/assets/img/gbr-contoh.png",
},
{
id: 4,
logo: "/assets/img/logo-humas.jpg",
title: "Humas_PoldaKaltara",
tag: "@HumasKaltara",
desc: " Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et dolor ut ullam tempora deserunt dolore consequatur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati sint et sunt quis, eius fuga aliquid",
image: "/assets/img/gbr-contoh.png",
},
];
const shimmer = (w: number, h: number) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="g">
<stop stop-color="#bcbcbd" offset="20%" />
<stop stop-color="#f9fafb" offset="50%" />
<stop stop-color="#bcbcbd" offset="70%" />
</linearGradient>
</defs>
<rect width="${w}" height="${h}" fill="#bcbcbd" />
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
<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));
return (
<>
@ -56,7 +110,7 @@ const SocialMedia = () => {
<div className="flex flex-col lg:flex-row">
{selectedTab == "x" ? (
<div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
<div className="border border-slate-300 rounded-lg mt-4 w-[350px] h-[500px]">
{/* <div className="border border-slate-300 rounded-lg mt-4 w-[350px] h-[500px]">
<div className="mt-2 flex flex-row gap-2 mx-1">
<div className="h-full">
{" "}
@ -84,8 +138,45 @@ const SocialMedia = () => {
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-full w-full mt-3 rounded-md" />{" "}
</div>
</div>
</div>
<div className="border border-slate-300 rounded-lg mt-4 w-[350px] h-[500px]">
</div> */}
<Carousel className="w-full mx-auto">
<CarouselContent className="gap-[20px] w-full">
{twitter?.map((image: any) => (
<CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/4 border border-slate-300 rounded-lg mt-4">
<div className="mt-2 flex flex-row gap-2 mx-1">
<div className="h-full">
{" "}
<Image alt="" src={image?.logo} width={1920} height={1080} className="h-12 w-12" />
</div>
<div className="flex flex-col">
<div className="flex flex-row gap-2">
<p className="font-bold">{image?.title}</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path
fill="#53b0ff"
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
/>
</svg>
</div>
<p className="text-slate-500 text-sm">{image?.tag}</p>
</div>
</div>
<div className="flex flex-col w-full px-3">
<div className="my-3">
<p className="text-sm text-justify">{image?.desc} </p>
<Image alt="" src={image?.image} width={1920} height={1080} className="h-full w-full mt-3 rounded-md" />{" "}
</div>
</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious className="hover:bg-black" />
<CarouselNext className="hover:bg-black -mr-6" />
</Carousel>
</div>
) : selectedTab == "instagram" ? (
<div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
<div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
<div className="mt-2 flex flex-row gap-2 mx-1">
<div className="h-full">
{" "}
@ -93,220 +184,130 @@ const SocialMedia = () => {
</div>
<div className="flex flex-col">
<div className="flex flex-row gap-2">
<p className="font-bold">Humas_PoldaKaltara</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path
fill="#53b0ff"
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
/>
</svg>
</div>
<p className="text-slate-500 text-sm">@HumasKaltara</p>
</div>
</div>
<div className="flex flex-col w-full px-3">
<div className="my-3">
<p className="text-sm text-justify">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et
dolor ut ullam tempora deserunt dolore consequatur! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima repellat corrupti ipsa cumque obcaecati sed ipsum libero
</p>
<Image alt="" src="/assets/tbnews/medsos1.png" width={1920} height={1080} className="h-full w-full mt-3 rounded-md" />{" "}
<p className="font-bold">TBNews Mabes Polri</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path
fill="#53b0ff"
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
/>
</svg>
</div>
<p className="text-slate-500 text-sm">@TBNewsMabes</p>
</div>
</div>
<div className="border border-slate-300 rounded-lg mt-4 w-[350px] h-[500px]">
<div className="mt-2 flex flex-row gap-2 mx-1">
<div className="h-full">
{" "}
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
</div>
<div className="flex flex-col">
<div className="flex flex-row gap-2">
<p className="font-bold">Humas_PoldaKaltara</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path
fill="#53b0ff"
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
/>
</svg>
</div>
<p className="text-slate-500 text-sm">@HumasKaltara</p>
</div>
</div>
<div className="flex flex-col w-full px-3">
<div className="my-3">
<p className="text-sm text-justify">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et
dolor ut ullam tempora deserunt dolore consequatur! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem, eveniet sint modi, cupiditate pariatur quod voluptas minus
</p>
<Image alt="" src="/assets/tbnews/medsos3.png" width={1920} height={1080} className="h-full w-full mt-3 rounded-md" />{" "}
</div>
</div>
</div>
<div className="border border-slate-300 rounded-lg mt-4 w-[350px] h-[500px]">
<div className="mt-2 flex flex-row gap-2 mx-1">
<div className="h-full">
{" "}
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
</div>
<div className="flex flex-col">
<div className="flex flex-row gap-2">
<p className="font-bold">Humas_PoldaKaltara</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path
fill="#53b0ff"
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
/>
</svg>
</div>
<p className="text-slate-500 text-sm">@HumasKaltara</p>
</div>
</div>
<div className="flex flex-col w-full px-3">
<div className="my-3">
<p className="text-sm text-justify">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et
dolor ut ullam tempora deserunt dolore consequatur! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore quibusdam doloribus magni nisi
</p>
<Image alt="" src="/assets/tbnews/medsos2.png" width={1920} height={1080} className="h-full w-full mt-3 rounded-md" />{" "}
</div>
<div className="flex flex-col w-full px-3">
<div className="my-3">
<p className="text-sm text-justify">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et
dolor ut ullam tempora deserunt dolore consequatur!
</p>
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
</div>
</div>
</div>
) : selectedTab == "instagram" ? (
<div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
<div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
<div className="mt-2 flex flex-row gap-2 mx-1">
<div className="h-full">
{" "}
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
</div>
<div className="flex flex-col">
<div className="flex flex-row gap-2">
<p className="font-bold">TBNews Mabes Polri</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path
fill="#53b0ff"
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
/>
</svg>
</div>
<p className="text-slate-500 text-sm">@TBNewsMabes</p>
</div>
</div>
) : selectedTab == "facebook" ? (
<div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
<div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
<div className="mt-2 flex flex-row gap-2 mx-1">
<div className="h-full">
{" "}
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
</div>
<div className="flex flex-col w-full px-3">
<div className="my-3">
<p className="text-sm text-justify">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et
dolor ut ullam tempora deserunt dolore consequatur!
</p>
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
<div className="flex flex-col">
<div className="flex flex-row gap-2">
<p className="font-bold">TBNews Mabes Polri</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path
fill="#53b0ff"
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
/>
</svg>
</div>
<p className="text-slate-500 text-sm">@TBNewsMabes</p>
</div>
</div>
<div className="flex flex-col w-full px-3">
<div className="my-3">
<p className="text-sm text-justify">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et
dolor ut ullam tempora deserunt dolore consequatur!
</p>
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
</div>
</div>
</div>
) : selectedTab == "facebook" ? (
<div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
<div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
<div className="mt-2 flex flex-row gap-2 mx-1">
<div className="h-full">
{" "}
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
</div>
<div className="flex flex-col">
<div className="flex flex-row gap-2">
<p className="font-bold">TBNews Mabes Polri</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path
fill="#53b0ff"
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
/>
</svg>
</div>
<p className="text-slate-500 text-sm">@TBNewsMabes</p>
</div>
</div>
) : selectedTab == "tiktok" ? (
<div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
<div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
<div className="mt-2 flex flex-row gap-2 mx-1">
<div className="h-full">
{" "}
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
</div>
<div className="flex flex-col w-full px-3">
<div className="my-3">
<p className="text-sm text-justify">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et
dolor ut ullam tempora deserunt dolore consequatur!
</p>
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
<div className="flex flex-col">
<div className="flex flex-row gap-2">
<p className="font-bold">TBNews Mabes Polri</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path
fill="#53b0ff"
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
/>
</svg>
</div>
<p className="text-slate-500 text-sm">@TBNewsMabes</p>
</div>
</div>
<div className="flex flex-col w-full px-3">
<div className="my-3">
<p className="text-sm text-justify">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et
dolor ut ullam tempora deserunt dolore consequatur!
</p>
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
</div>
</div>
</div>
) : selectedTab == "tiktok" ? (
<div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
<div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
<div className="mt-2 flex flex-row gap-2 mx-1">
<div className="h-full">
{" "}
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
</div>
<div className="flex flex-col">
<div className="flex flex-row gap-2">
<p className="font-bold">TBNews Mabes Polri</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path
fill="#53b0ff"
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
/>
</svg>
</div>
<p className="text-slate-500 text-sm">@TBNewsMabes</p>
</div>
</div>
) : selectedTab == "youtube" ? (
<div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
<div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
<div className="mt-2 flex flex-row gap-2 mx-1">
<div className="h-full">
{" "}
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
</div>
<div className="flex flex-col w-full px-3">
<div className="my-3">
<p className="text-sm text-justify">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et
dolor ut ullam tempora deserunt dolore consequatur!
</p>
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
<div className="flex flex-col">
<div className="flex flex-row gap-2">
<p className="font-bold">TBNews Mabes Polri</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path
fill="#53b0ff"
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
/>
</svg>
</div>
<p className="text-slate-500 text-sm">@TBNewsMabes</p>
</div>
</div>
<div className="flex flex-col w-full px-3">
<div className="my-3">
<p className="text-sm text-justify">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et
dolor ut ullam tempora deserunt dolore consequatur!
</p>
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
</div>
</div>
</div>
) : selectedTab == "youtube" ? (
<div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
<div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
<div className="mt-2 flex flex-row gap-2 mx-1">
<div className="h-full">
{" "}
<Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
</div>
<div className="flex flex-col">
<div className="flex flex-row gap-2">
<p className="font-bold">TBNews Mabes Polri</p>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
<path
fill="#53b0ff"
d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
/>
</svg>
</div>
<p className="text-slate-500 text-sm">@TBNewsMabes</p>
</div>
</div>
<div className="flex flex-col w-full px-3">
<div className="my-3">
<p className="text-sm text-justify">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et
dolor ut ullam tempora deserunt dolore consequatur!
</p>
<Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
</div>
</div>
</div>
</div>
) : (
<p className="flex items-center justify-center">
<Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
</p>
)}
</div>
</div>
) : (
<p className="flex items-center justify-center">
<Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
</p>
)}
</div>
<div className="flex items-center flex-row justify-center mt-4">
<Link href="#" className="border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523]">
Lihat Semua

2
app/[locale]/(public)/(polda)/tbnews/[polda_name]/page.tsx
View File

@ -10,12 +10,14 @@ import RegionalNews from "./components/regional-news";
import ContactUs from "./components/contact-us";
import SocialMedia from "./components/social-media";
import NewsTickerKaltara from "./components/news-tickers-kaltara";
import PpsSection from "./components/pps-section";
const PoldaKaltara = () => {
return (
<div>
<NavbarKaltara />
<HeroKaltara />
<PpsSection />
<LatestNews type="latest" />
<LatestNews type="popular" />
{/* <PopularNews /> */}

BIN
public/assets/PPS.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/assets/contoh6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 494 KiB

BIN
public/assets/contoh7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 344 KiB