web-humas-fe/components/landing/MediaSocial.tsx

158 lines
5.0 KiB
TypeScript

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";
import YoutubeWidget from "../ui/social-media/youtube";
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",
},
];
return (
<div className="space-y-5 md:space-y-7">
<p className="text-xl border-b-3 border-red-500 py-2 w-fit font-semibold">
MediaSocial
</p>
<div>
<div className="flex items-center justify-between pb-3">
<div className="flex items-center">
<TwitterIcon color="#1DA1F2" />
<p className="pl-2 text-xl">Twitter</p>
</div>
<div className="text-xs text-[#DD8306]">
<Link
href="https://x.com/DivHumas_Polri"
target="_blank"
className="flex items-center"
>
Lihat Semua <ChevronRightIcon />
</Link>{" "}
</div>
</div>
<div>
<TwitterWidget />
</div>
</div>
<div>
<div className="flex items-center justify-between pb-3">
<div className="flex items-center">
<IgIcon size={40} color="#1DA1F2" />
<p className="pl-2 text-xl">Instagram</p>
</div>
<div className="text-xs text-[#DD8306]">
<Link
href="https://www.instagram.com/divisihumaspolri/"
target="_blank"
className="flex items-center"
>
Lihat Semua <ChevronRightIcon />
</Link>{" "}
</div>
</div>
<div className="">
<InstagramWidget />
</div>
</div>
<div>
<div className="flex items-center justify-between pb-3">
<div className="flex items-center">
<FbIcon color="#1DA1F2" />
<p className="pl-2 text-xl">Facebook</p>
</div>
<div className="text-xs text-[#DD8306] flex items-center">
<Link
href="https://www.facebook.com/DivHumasPolri"
target="_blank"
className="flex items-center"
>
Lihat Semua <ChevronRightIcon />
</Link>
</div>
</div>
<FacebookWidget />
</div>
<div>
<div className="flex items-center justify-between pb-3">
<div className="flex items-center">
<TtIcon color="#1DA1F2" size={40} />
<p className="pl-2 text-xl">Tiktok</p>
</div>
<div className="text-xs text-[#DD8306] flex items-center">
<Link
href="https://www.tiktok.com/@divhumaspolriofficial"
target="_blank"
className="flex items-center"
>
Lihat Semua <ChevronRightIcon />
</Link>{" "}
</div>
</div>
<FacebookWidget />
</div>
<div>
<div className="flex items-center justify-between pb-3">
<div className="font-semibold flex items-center">
<YtIcon color="#1DA1F2" size={40} />
<p className="text-xl pl-2">Youtube</p>
</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=" rounded-md ">
<YoutubeWidget />
</div>
</div>
</div>
);
}