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

import { Card, CardBody } from '@nextui-org/react'
import React from 'react'
import { ChevronRightIcon, DotsIcon, FbIcon, IconX, IgIcon, TtIcon, TwitterIcon, YtIcon } from '../icons'

export default function MediaSocial() {

    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",
        },
    ];

    const limitedData = dummyData.slice(0, 3);

    return (
        <div className='m-auto md:m-10 space-y-5 md:space-y-10'>
            <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 className='md:flex flex-wrap gap-4 justify-center'>
                    {limitedData.map((data) => (
                        <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='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>
                <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] flex items-center'>Lihat Semua <ChevronRightIcon /></div>
                </div>
                <div className='md:flex flex-wrap gap-4 justify-center'>
                    {limitedData.map((data) => (
                        <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'>
                    {limitedData.map((data) => (
                        <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'>
                    {limitedData.map((data) => (
                        <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] flex items-center'>Lihat Semua <ChevronRightIcon /></div>
                </div>
                <div className='md:flex flex-wrap gap-4 justify-center'>
                    {limitedData.map((data) => (
                        <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>
                                        {/* <p className='text-blue-500'>{data.username}</p> */}
                                    </div>
                                </div>
                                <div className='space-y-1 flex flex-col items-end'>
                                    <div><DotsIcon /></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>
    )
}