318 lines
26 KiB
TypeScript
318 lines
26 KiB
TypeScript
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";
|
|
|
|
const SocialMedia = () => {
|
|
const [selectedTab, setSelectedTab] = useState("x");
|
|
|
|
return (
|
|
<>
|
|
<Reveal>
|
|
<div className="px-4 lg:px-20 my-10">
|
|
<div className="bg-[#c03724] rounded-md p-3 w-fit text-white">Media Sosial</div>
|
|
<div className="mx-auto w-full max-w-7xl justify-center flex px-5 flex-col lg:flex-row gap-5 mb-4">
|
|
<Tabs value={selectedTab} onValueChange={setSelectedTab}>
|
|
<TabsList className="grid grid-cols-2 lg:flex lg:flex-row ">
|
|
<TabsTrigger
|
|
value="x"
|
|
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
|
|
>
|
|
X{" "}
|
|
</TabsTrigger>
|
|
<div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
|
|
<TabsTrigger
|
|
value="instagram"
|
|
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
|
|
>
|
|
Instagram
|
|
</TabsTrigger>
|
|
<div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
|
|
<TabsTrigger
|
|
value="facebook"
|
|
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
|
|
>
|
|
Facebook
|
|
</TabsTrigger>
|
|
<div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
|
|
<TabsTrigger
|
|
value="tiktok"
|
|
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
|
|
>
|
|
Tiktok
|
|
</TabsTrigger>
|
|
<div className="text-[#bb3523] text-lg hidden md:inline-block">|</div>
|
|
<TabsTrigger
|
|
value="youtube"
|
|
className="relative text-xs md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
|
|
>
|
|
Youtube
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
</div>
|
|
<div className="flex flex-col lg:flex-row ">
|
|
{selectedTab == "x" ? (
|
|
<div className="flex flex-row justify-between gap-20">
|
|
<div className="border border-slate-300 rounded-lg mt-4 w-[350px] h-[450px]">
|
|
<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. Obcaecati sint et sunt quis, eius fuga aliquid, officia possimus quidem adipisci repudiandae voluptate
|
|
deserunt dolores dolor minima, earum similique eligendi quaerat.
|
|
</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 className="border border-slate-300 rounded-lg mt-4 w-[350px]">
|
|
<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. Minima repellat corrupti ipsa cumque obcaecati sed ipsum libero, excepturi officia amet, sequi ullam
|
|
dolores accusantium vero suscipit aut vel temporibus fugit.
|
|
</p>
|
|
<Image alt="" src="/assets/tbnews/medsos1.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="border border-slate-300 rounded-lg mt-4 w-[350px]">
|
|
<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 commodi molestiae, natus dolores
|
|
asperiores debitis provident error odio eaque id? Iste, enim?
|
|
</p>
|
|
<Image alt="" src="/assets/tbnews/medsos3.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="border border-slate-300 rounded-lg mt-4 w-[350px]">
|
|
<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 consectetur reiciendis cumque eius exercitationem. Adipisci ipsam
|
|
dolor accusamus quibusdam.
|
|
</p>
|
|
<Image alt="" src="/assets/tbnews/medsos2.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : selectedTab == "instagram" ? (
|
|
<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>
|
|
) : selectedTab == "facebook" ? (
|
|
<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>
|
|
) : selectedTab == "tiktok" ? (
|
|
<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>
|
|
) : selectedTab == "youtube" ? (
|
|
<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>
|
|
) : (
|
|
<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
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</Reveal>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SocialMedia;
|