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]">
            <Link
              href="https://x.com/DivHumas_Polri"
              target="_blank"
              className="flex items-center"
            >
              Lihat Semua <ChevronRightIcon />
            </Link>{" "}
          </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/"
              target="_blank"
              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">
            <Link
              href="https://www.facebook.com/DivHumasPolri"
              target="_blank"
              className="flex items-center"
            >
              Lihat Semua <ChevronRightIcon />
            </Link>
          </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">
            <Link
              href="https://www.tiktok.com/@divhumaspolriofficial"
              target="_blank"
              className="flex items-center"
            >
              Lihat Semua <ChevronRightIcon />
            </Link>{" "}
          </div>
        </div>
        <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 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>
  );
}