2024-02-19 08:39:35 +00:00
import Link from 'next/link' ;
2024-02-20 08:42:07 +00:00
import Facebookwidget from '../SocialMedia/Facebook' ;
2024-04-03 06:55:58 +00:00
import InstagramWidget from '../SocialMedia/Instagram' ;
2024-02-23 12:34:32 +00:00
import TwitterWidget from '../SocialMedia/Twitter' ;
2024-04-03 06:55:58 +00:00
import { ChevronRightIcon , FbIcon , IgIcon , TtIcon , TwitterIcon , YtIcon } from '../icons' ;
2024-01-29 06:38:26 +00:00
export default function MediaSocial() {
2024-02-19 08:39:35 +00:00
// const [limitedData, setLimitedData] = useState<any>([]);
2024-01-29 06:38:26 +00:00
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" ,
} ,
2024-02-19 08:39:35 +00:00
// {
// 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",
// },
2024-01-29 06:38:26 +00:00
] ;
2024-02-19 08:39:35 +00:00
// 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]);
2024-01-29 06:38:26 +00:00
return (
2024-02-19 08:39:35 +00:00
< div className = 'space-y-5 md:space-y-7' >
2024-01-29 06:38:26 +00:00
< 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 >
2024-02-23 12:34:32 +00:00
< div >
< TwitterWidget / >
< / div >
{ / * { d u m m y D a t a . m a p ( ( d a t a : a n y ) = > (
2024-01-29 06:38:26 +00:00
< div
key = { data . id }
2024-02-19 08:39:35 +00:00
className = 'bg-white text-black h-[2] w-auto md:w-[315px] border-2 rounded-md px-5 py-3'
2024-01-29 06:38:26 +00:00
>
< div className = 'h-[20%] flex items-center text-xs justify-between' >
2024-02-19 08:39:35 +00:00
< div className = 'flex gap-2' 2
2024-01-29 06:38:26 +00:00
< 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 >
2024-02-19 08:39:35 +00:00
) ) } * / }
2024-01-29 06:38:26 +00:00
< / 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 >
2024-02-19 08:39:35 +00:00
< div className = 'text-xs text-[#DD8306]' > < Link href = 'https://www.instagram.com/divisihumaspolri/' className = 'flex items-center' > Lihat Semua < ChevronRightIcon / > < / Link > < / div >
2024-01-29 06:38:26 +00:00
< / div >
2024-02-19 08:39:35 +00:00
< div className = '' >
< InstagramWidget / >
{ / * { d u m m y D a t a . m a p ( ( d a t a : a n y ) = > (
2024-01-29 06:38:26 +00:00
< 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 >
2024-02-19 08:39:35 +00:00
) ) } * / }
2024-01-29 06:38:26 +00:00
< / 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 >
2024-01-31 10:09:59 +00:00
< div className = 'md:flex flex-wrap gap-4 justify-center' >
2024-02-19 08:39:35 +00:00
{ dummyData . map ( ( data : any ) = > (
2024-01-29 06:38:26 +00:00
< 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 >
2024-01-31 10:09:59 +00:00
< div className = 'md:flex flex-wrap gap-4 justify-center' >
2024-03-07 07:14:42 +00:00
{ 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 >
) ) }
2024-01-29 06:38:26 +00:00
< / div >
< / div >
< div >
< div className = 'flex items-center justify-between pb-3' >
< div className = 'font-semibold flex items-center' >
< YtIcon color = '#1DA1F2' / >
Youtube
< / div >
2024-02-19 08:39:35 +00:00
< 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 >
2024-01-29 06:38:26 +00:00
< / div >
2024-02-19 08:39:35 +00:00
< div className = '' >
< div className = ' rounded-md ' >
2024-02-20 08:42:07 +00:00
< Facebookwidget / >
2024-02-19 08:39:35 +00:00
< / div >
{ / * { d u m m y D a t a . m a p ( ( d a t a : a n y ) = > (
2024-01-29 06:38:26 +00:00
< 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 >
2024-02-19 08:39:35 +00:00
2024-01-29 06:38:26 +00:00
< / div >
< / div >
< div className = 'space-y-1 flex flex-col items-end' >
< div > < DotsIcon / > < / div >
2024-02-19 08:39:35 +00:00
2024-01-29 06:38:26 +00:00
< / 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 >
2024-02-19 08:39:35 +00:00
) ) } * / }
2024-01-29 06:38:26 +00:00
< / div >
< / div >
2024-02-19 08:39:35 +00:00
< / d i v >
2024-01-29 06:38:26 +00:00
)
}
