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";

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",
    },
    // {
    //     id: 4,
    //     logo: "/logohumas.png",
    //     division: "Divisi Humas Polri",
    //     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: 4,
    //     logo: "/logohumas.png",
    //     division: "Divisi Humas Polri",
    //     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",
    // },
  ];

  // useEffect(() => {
  //     function updateLimitedData() {
  //         if (window.matchMedia("(max-width: 767px)").matches) {
  //             setLimitedData(dummyData.slice(0, 1));
  //         } else if (window.matchMedia("(min-width: 768px) and (max-width: 1023px)").matches) {
  //             setLimitedData(dummyData.slice(0, 2));
  //         } else {
  //             setLimitedData(dummyData.slice(0, 3));
  //         }
  //     }

  //     updateLimitedData();
  //     window.addEventListener('resize', updateLimitedData);
  //     return () => {
  //         window.removeEventListener('resize', updateLimitedData);
  //     };
  // }, [dummyData]);

  return (
    <div className="space-y-5 md:space-y-7">
      <p className="text-2xl font- underline  underline-offset-8 decoration-red-700">
        MediaSocial
      </p>
      <div>
        <div className="flex items-center justify-between pb-3">
          <div className="font-semibold flex items-center">
            <TwitterIcon color="#1DA1F2" />
            <p className="pl-2">Twitter</p>
          </div>
          <div className="text-xs text-[#DD8306] flex items-center">
            Lihat Semua <ChevronRightIcon />
          </div>
        </div>
        <div>
          <TwitterWidget />
        </div>
        {/* {dummyData.map((data: any) => (
                        <div
                            key={data.id}
                            className='bg-white text-black h-[2] 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'2
                                    <div className='h-[50px]'>
                                        <img src={data.logo} alt="logo" className='h-[50px]' />
                                    </div>
                                    <div className='flex flex-col gap-1'>
                                        <p className='flex gap-1'>{data.division} <img src={data.type} alt="" /></p>
                                        <p className='text-blue-500'>{data.username}</p>
                                    </div>
                                </div>
                                <div className='space-y-1 flex flex-col items-end'>
                                    <div><img src={data.followIcon} alt="" /></div>
                                    <p className='text-blue-500 font-bold'>Follow</p>
                                </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 className="flex items-center justify-between pb-3">
          <div className="font-semibold flex items-center">
            <IgIcon height={50} color="#1DA1F2" />
            <p className="pl-2">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 />
          {/* {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'>
                                        <p className='flex gap-1'>{data.division} <img src={data.type} alt="" /></p>
                                        <p className='text-blue-500'>{data.username}</p>
                                    </div>
                                </div>
                                <div className='flex flex-col items-end'>
                                    <div><img src='/temp/iconIG.svg' alt="" /></div>
                                    <p className='text-blue-500 font-bold'><u>Lihat Profile</u></p>
                                </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">
            <FbIcon color="#1DA1F2" />
            Facebook
          </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="font-semibold flex items-center">
            <TtIcon color="#1DA1F2" />
            Tiktok
          </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" />
            Youtube
          </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="">
          <div className=" rounded-md ">
            <FacebookWidget />
          </div>
          {/* {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='space-y-1 flex flex-col items-end'>
                                    <div><DotsIcon /></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>
  );
}