web-humas-fe/components/landing/MediaSocial.tsx

import Link from "next/link";
import {
  ChevronRightIcon,
  FbIcon,
  IgIcon,
  TtIcon,
  TwitterIcon,
  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";

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",
    },
  ];

  return (
    <div className="space-y-5 md:space-y-7">
      <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  items-center">
            <TwitterIcon color="#1DA1F2" />
            <p className="pl-2 text-xl">Twitter</p>
          </div>
          <div className="text-xs text-[#DD8306] flex items-center">
            Lihat Semua <ChevronRightIcon />
          </div>
        </div>
        <div>
          <TwitterWidget />
        </div>
      </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 className="text-xs text-[#DD8306]">
            <Link
              href="https://www.instagram.com/divisihumaspolri/"
              className="flex items-center"
            >
              Lihat Semua <ChevronRightIcon />
            </Link>{" "}
          </div>
        </div>
        <div className="">
          <InstagramWidget />
        </div>
      </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 className="text-xs text-[#DD8306] flex items-center">
            Lihat Semua <ChevronRightIcon />
          </div>
        </div>
        <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 className="text-xs text-[#DD8306] flex items-center">
            Lihat Semua <ChevronRightIcon />
          </div>
        </div>
        <div className="md:flex flex-wrap gap-4 justify-center">
          {dummyData.map((data: any) => (
            <div
              key={data.id}
              className="bg-white text-black h-[400px] w-auto md:w-[315px] border-2 rounded-md px-5 py-3"
            >
              <div className="h-[20%] flex items-center text-xs justify-between">
                <div className="flex gap-2">
                  <div className="h-[50px]">
                    <img src={data.logo} alt="logo" className="h-[50px]" />
                  </div>
                  <div className="flex flex-col gap-1 justify-center">
                    <p className="flex gap-1">
                      {data.division} <img src={data.type} alt="" />
                    </p>
                  </div>
                </div>
                <div className="">
                  <div className="flex gap-1 text-blue-500">
                    <img src="/temp/share.svg" alt="" />
                    Share
                  </div>
                </div>
              </div>
              <div className="h-[35%] text-xs">
                {data.description}
                <a className="text-blue-500">
                  <br />
                  Lihat Selengkapnya
                </a>
              </div>
              <div className="h-[45%]">
                <div className="flex justify-center">
                  <img src={data.imageUrl} alt="header" className="h-[165px]" />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div>
        <div 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 className="text-xs text-[#DD8306]">
            <Link
              href="https://www.youtube.com/channel/UCPiCGqy-07vQJUySV5Gs-kA"
              className="flex items-center"
              target="_blank"
            >
              Lihat Semua <ChevronRightIcon />
            </Link>
          </div>
        </div>
        <div className=" rounded-md ">
          <YoutubeWidget />
        </div>
      </div>
    </div>
  );
}