152 lines
3.8 KiB
TypeScript
152 lines
3.8 KiB
TypeScript
import { Eye, Heart, MessageCircle } from "lucide-react";
|
|
import Image from "next/image";
|
|
|
|
interface VideoItem {
|
|
id: number;
|
|
title: string;
|
|
thumbnail: string;
|
|
duration: string;
|
|
publishedAt: string;
|
|
views: string;
|
|
likes: string;
|
|
comments: string;
|
|
}
|
|
|
|
const sampleVideos: VideoItem[] = [
|
|
{
|
|
id: 1,
|
|
title: "Cuplikan Kegiatan Presiden di IKN",
|
|
thumbnail: "/yt/thumb1.jpg",
|
|
duration: "12:30",
|
|
publishedAt: "2 jam yang lalu",
|
|
views: "12K",
|
|
likes: "230",
|
|
comments: "45",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Pembangunan MRT Fase Berikutnya Resmi Dimulai",
|
|
thumbnail: "/yt/thumb2.jpg",
|
|
duration: "08:12",
|
|
publishedAt: "5 jam yang lalu",
|
|
views: "9.4K",
|
|
likes: "180",
|
|
comments: "30",
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Wilayah Indonesia Siap Hadapi Cuaca Ekstrem",
|
|
thumbnail: "/yt/thumb3.jpg",
|
|
duration: "05:50",
|
|
publishedAt: "1 hari lalu",
|
|
views: "21K",
|
|
likes: "540",
|
|
comments: "121",
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Peningkatan Ekonomi Regional Terus Dijaga",
|
|
thumbnail: "/yt/thumb4.jpg",
|
|
duration: "10:44",
|
|
publishedAt: "2 hari lalu",
|
|
views: "18K",
|
|
likes: "420",
|
|
comments: "88",
|
|
},
|
|
{
|
|
id: 5,
|
|
title: "Laporan Khusus Perkembangan Industri Kreatif",
|
|
thumbnail: "/yt/thumb5.jpg",
|
|
duration: "14:02",
|
|
publishedAt: "3 hari lalu",
|
|
views: "30K",
|
|
likes: "830",
|
|
comments: "200",
|
|
},
|
|
{
|
|
id: 6,
|
|
title: "Paparan Menteri Perhubungan Soal Transportasi",
|
|
thumbnail: "/yt/thumb6.jpg",
|
|
duration: "07:21",
|
|
publishedAt: "4 hari lalu",
|
|
views: "9K",
|
|
likes: "114",
|
|
comments: "26",
|
|
},
|
|
];
|
|
|
|
export default function YouTubeSection() {
|
|
return (
|
|
<section className="max-w-7xl mx-auto px-4 py-8">
|
|
{/* Header Channel */}
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<Image
|
|
src="/yt-logo.png"
|
|
alt="Logo Channel"
|
|
width={70}
|
|
height={70}
|
|
className="rounded-full"
|
|
/>
|
|
<div>
|
|
<h2 className="text-xl font-semibold">YouTube • Channel Resmi</h2>
|
|
<p className="text-sm text-gray-600">
|
|
Lebih dari 3.5 juta pengikut • 12k video
|
|
</p>
|
|
</div>
|
|
|
|
<a
|
|
href="#"
|
|
className="ml-auto bg-red-600 text-white px-4 py-2 rounded-lg font-semibold"
|
|
>
|
|
Subscribe
|
|
</a>
|
|
</div>
|
|
|
|
{/* Grid Video */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{sampleVideos.map((v) => (
|
|
<div key={v.id} className="cursor-pointer">
|
|
<div className="relative w-full h-44">
|
|
<Image
|
|
src={v.thumbnail}
|
|
alt={v.title}
|
|
fill
|
|
className="rounded-lg object-cover"
|
|
/>
|
|
|
|
<span className="absolute bottom-1 right-1 bg-black/80 text-white text-xs px-2 py-1 rounded">
|
|
{v.duration}
|
|
</span>
|
|
</div>
|
|
|
|
<h3 className="font-semibold mt-2 leading-tight line-clamp-2">
|
|
{v.title}
|
|
</h3>
|
|
|
|
<p className="text-sm text-gray-600">{v.publishedAt}</p>
|
|
|
|
<div className="flex items-center gap-4 text-sm text-gray-700 mt-1">
|
|
<span className="flex items-center gap-1">
|
|
<Eye size={16} /> {v.views}
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<Heart size={16} /> {v.likes}
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<MessageCircle size={16} /> {v.comments}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Pagination */}
|
|
<div className="flex justify-center mt-8">
|
|
<button className="px-5 py-2 rounded-lg border hover:bg-gray-100">
|
|
Lihat Selanjutnya →
|
|
</button>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|