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 bg-white text-black rounded-lg ">
      <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>
        <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>
        <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>
        <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>
        <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>
        <div className=" rounded-md ">
          <YoutubeWidget />
        </div>
      </div>
    </div>
  );
}