web-humas-fe/components/Landing Page/MediaSocial.tsx

import Link from 'next/link';
import Facebookwidget from '../SocialMedia/Facebook';
import InstagramWidget from '../SocialMedia/Instagram';
import TwitterWidget from '../SocialMedia/Twitter';
import { ChevronRightIcon, FbIcon, IgIcon, TtIcon, TwitterIcon, YtIcon } from '../icons';

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>
                <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'>
                        <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 >
    )
}