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

import Link from "next/link";
import {
  ChevronRightIcon,
  FacebookLandingIcon,
  FbIcon,
  IgIcon,
  InstagramLandingIcon,
  TiktokLandingIcon,
  TtIcon,
  TwitterIcon,
  XLandingIcon,
  YoutubeLandingIcon,
  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";
import { useState } from "react";
import { Button } from "@heroui/button";

export default function MediaSocial() {
  // const [limitedData, setLimitedData] = useState<any>([]);
  const [selectedPlatform, setSelectedPlatform] = useState("x");

  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 className="flex flex-row gap-3">
        <Button
          className="min-w-[60px]"
          variant={selectedPlatform === "x" ? "solid" : "flat"}
          onClick={() => setSelectedPlatform("x")}
        >
          <div className="flex  items-center">
            <XLandingIcon size={16} />
            <p
              className={`pl-2 text-sm ${
                selectedPlatform === "x"
                  ? "font-semibold"
                  : "text-slate-600 dark:text-slate-50"
              }`}
            >
              X
            </p>
          </div>
        </Button>
        <Button
          className="min-w-[60px]"
          variant={selectedPlatform === "instagram" ? "solid" : "flat"}
          onClick={() => setSelectedPlatform("instagram")}
        >
          <div className="flex  items-center">
            <InstagramLandingIcon />
            <p
              className={`pl-2 text-sm ${
                selectedPlatform === "instagram"
                  ? "font-semibold"
                  : "text-slate-600 dark:text-slate-50"
              }`}
            >
              Instagram
            </p>
          </div>
        </Button>
        {/* <Button
          className="min-w-[60px]"
          variant={selectedPlatform === "facebook" ? "solid" : "flat"}
          onClick={() => setSelectedPlatform("facebook")}
        >
          <div className="flex  items-center">
            <FacebookLandingIcon />
            <p
              className={`pl-2 text-sm ${
                selectedPlatform === "facebook"
                  ? "font-semibold"
                  : "text-slate-600 dark:text-slate-50"
              }`}
            >
              Facebook
            </p>
          </div>
        </Button> */}
        {/* <Button
          className="min-w-[60px]"
          variant={selectedPlatform === "tiktok" ? "solid" : "flat"}
          onClick={() => setSelectedPlatform("tiktok")}
        >
          <div className="flex  items-center">
            <TiktokLandingIcon />
            <p
              className={`pl-2 text-sm ${
                selectedPlatform === "tiktok"
                  ? "font-semibold"
                  : "text-slate-600 dark:text-slate-50"
              }`}
            >
              Tiktok
            </p>
          </div>
        </Button> */}
        <Button
          className="min-w-[60px]"
          variant={selectedPlatform === "youtube" ? "solid" : "flat"}
          onClick={() => setSelectedPlatform("youtube")}
        >
          <div className="flex  items-center">
            <YoutubeLandingIcon />
            <p
              className={`pl-2 text-sm ${
                selectedPlatform === "youtube"
                  ? "font-semibold"
                  : "text-slate-600 dark:text-slate-50"
              }`}
            >
              Youtube
            </p>
          </div>
        </Button>
      </div>
      <div className={selectedPlatform === "x" ? "" : "hidden"}>
        <TwitterWidget />
      </div>
      <div className={selectedPlatform === "instagram" ? "" : "hidden"}>
        <InstagramWidget />
      </div>
      {/* <div className={selectedPlatform === "facebook" ? "" : "hidden"}>
        <FacebookWidget />
      </div> */}
      {/* <div className={selectedPlatform === "tiktok" ? "" : "hidden"}>
        <FacebookWidget />
      </div> */}
      <div className={selectedPlatform === "youtube" ? "" : "hidden"}>
        <YoutubeWidget />
      </div>
    </div>
  );
}