277 lines
14 KiB
TypeScript
277 lines
14 KiB
TypeScript
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>
|
|
)
|
|
}
|