update
This commit is contained in:
parent
3a12106b6e
commit
07f340419a
|
|
@ -1,8 +1,9 @@
|
||||||
import Development from "@/components/landing-page/development";
|
import Development from "@/components/landing-page/development";
|
||||||
import Footer from "@/components/landing-page/footer";
|
import Footer from "@/components/landing-page/footer";
|
||||||
import Header from "@/components/landing-page/header";
|
import Header from "@/components/landing-page/header";
|
||||||
import Health from "@/components/landing-page/health";
|
import NewsTerkini from "@/components/landing-page/health";
|
||||||
import LatestNews from "@/components/landing-page/latest-news";
|
import LatestNews from "@/components/landing-page/latest-news";
|
||||||
|
|
||||||
import Navbar from "@/components/landing-page/navbar";
|
import Navbar from "@/components/landing-page/navbar";
|
||||||
import OpinionNews from "@/components/landing-page/opinion-news";
|
import OpinionNews from "@/components/landing-page/opinion-news";
|
||||||
import YouTubeSection from "@/components/landing-page/youtube-selection";
|
import YouTubeSection from "@/components/landing-page/youtube-selection";
|
||||||
|
|
@ -17,7 +18,7 @@ export default function Home() {
|
||||||
<LatestNews />
|
<LatestNews />
|
||||||
<Development />
|
<Development />
|
||||||
<OpinionNews />
|
<OpinionNews />
|
||||||
<Health />
|
<NewsTerkini />
|
||||||
<YouTubeSection />
|
<YouTubeSection />
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,136 @@
|
||||||
|
"use client";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { getListArticle } from "@/service/article";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
type Article = {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
categoryName: string;
|
||||||
|
slug: string;
|
||||||
|
createdAt: string;
|
||||||
|
publishedAt: string;
|
||||||
|
createdByName: string;
|
||||||
|
customCreatorName: string;
|
||||||
|
thumbnailUrl: string;
|
||||||
|
categories: { title: string }[];
|
||||||
|
files: { fileUrl: string; file_alt: string }[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Development() {
|
||||||
|
const [articles, setArticles] = useState<Article[]>([]);
|
||||||
|
const [page, setPage] = useState(1);
|
||||||
|
const [totalPage, setTotalPage] = useState(1);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
initState();
|
||||||
|
}, [page]);
|
||||||
|
|
||||||
|
async function initState() {
|
||||||
|
const req = {
|
||||||
|
limit: "10",
|
||||||
|
page,
|
||||||
|
search: "",
|
||||||
|
categorySlug: "",
|
||||||
|
sort: "desc",
|
||||||
|
isPublish: true,
|
||||||
|
sortBy: "created_at",
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await getListArticle(req);
|
||||||
|
setArticles(res?.data?.data || []);
|
||||||
|
setTotalPage(res?.data?.meta?.totalPage || 1);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Error fetching articles:", err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format tanggal ke gaya lokal
|
||||||
|
const formatDate = (dateString: string) => {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
return date.toLocaleDateString("id-ID", {
|
||||||
|
day: "2-digit",
|
||||||
|
month: "long",
|
||||||
|
year: "numeric",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Mapping struktur seperti dummy sebelumnya
|
||||||
|
const leftMain = articles[0];
|
||||||
|
const leftList = articles.slice(1, 4);
|
||||||
|
const centerMain = articles[4];
|
||||||
|
const centerList = articles.slice(5, 8);
|
||||||
|
const rightMain = articles[8];
|
||||||
|
const rightList = articles.slice(9, 12);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="max-w-7xl mx-auto px-4">
|
||||||
|
<div className="bg-white ">
|
||||||
|
<div className="mb-4">
|
||||||
|
<h2 className="text-xl font-black text-[#000]">JAGA NEGERI</h2>
|
||||||
|
|
||||||
|
<div className="w-10 h-1 bg-green-600 mt-1 rounded"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border-b border-gray-300 mb-5"></div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
{articles.slice(0, 6).map((item) => (
|
||||||
|
<Link
|
||||||
|
href={`/details/${item.slug}`}
|
||||||
|
key={item.id}
|
||||||
|
className="flex gap-4 pb-4 border-b border-gray-200"
|
||||||
|
>
|
||||||
|
<div className="relative w-28 h-28 rounded-md overflow-hidden flex-shrink-0">
|
||||||
|
<Image
|
||||||
|
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||||||
|
alt={item.title}
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<p className="text-[11px] font-bold text-black">
|
||||||
|
<span className="border-b-2 border-green-600 pb-[1px]">
|
||||||
|
{item.categories?.[0]?.title || "Kategori"}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3 className="font-semibold text-[15px] leading-tight mt-1 line-clamp-2">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p className="text-[11px] text-gray-600 mt-2">
|
||||||
|
By{" "}
|
||||||
|
<span className="font-semibold">
|
||||||
|
{item.customCreatorName}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p className="text-[11px] text-gray-600">
|
||||||
|
{new Date(item.publishedAt).toLocaleDateString("id-ID", {
|
||||||
|
day: "numeric",
|
||||||
|
month: "long",
|
||||||
|
year: "numeric",
|
||||||
|
})}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="relative h-[140px] w-full overflow-hidden rounded-none my-5">
|
||||||
|
<Image
|
||||||
|
src="/image-kolom.png"
|
||||||
|
alt="Berita Utama"
|
||||||
|
fill
|
||||||
|
className="object-fill"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,205 +1,69 @@
|
||||||
"use client";
|
// components/Footer.tsx
|
||||||
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
import { Facebook, Twitter, Instagram, Youtube } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { Calendar } from "lucide-react";
|
|
||||||
import { getListArticle } from "@/service/article";
|
|
||||||
|
|
||||||
// Definisi type
|
|
||||||
type Article = {
|
|
||||||
id: number;
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
categoryName: string;
|
|
||||||
createdAt: string;
|
|
||||||
createdByName: string;
|
|
||||||
thumbnailUrl: string;
|
|
||||||
categories: { title: string }[];
|
|
||||||
files: { fileUrl: string; file_alt: string }[];
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function Footer() {
|
export default function Footer() {
|
||||||
const [articles, setArticles] = useState<Article[]>([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchArticles();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
async function fetchArticles() {
|
|
||||||
try {
|
|
||||||
const req = {
|
|
||||||
limit: "2", // ambil 2 berita untuk recent news
|
|
||||||
page: 1,
|
|
||||||
search: "",
|
|
||||||
categorySlug: "",
|
|
||||||
sort: "desc",
|
|
||||||
isPublish: true,
|
|
||||||
sortBy: "created_at",
|
|
||||||
};
|
|
||||||
|
|
||||||
const res = await getListArticle(req);
|
|
||||||
setArticles(res?.data?.data || []);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Gagal memuat artikel:", error);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<footer className="bg-[#002b5c] text-white py-12">
|
<footer className="bg-[#ECEFF5] pt-20 pb-10 w-full">
|
||||||
<div className="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-10">
|
<div className="max-w-screen-xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 ">
|
||||||
{/* Recent News */}
|
{/* Logo */}
|
||||||
<div>
|
<div className="flex items-center justify-end">
|
||||||
<h3 className="font-bold text-lg mb-4 text-yellow-400">
|
<div className="flex justify-center md:justify-end">
|
||||||
Recent News
|
<Image
|
||||||
</h3>
|
src="/bumn.png"
|
||||||
{loading && <p className="text-sm">Memuat...</p>}
|
alt="Logo"
|
||||||
{!loading &&
|
width={230}
|
||||||
articles.map((article) => (
|
height={230}
|
||||||
<div key={article.id} className="flex mb-4">
|
className="object-contain"
|
||||||
<div className="w-20 h-16 relative flex-shrink-0">
|
/>
|
||||||
<Image
|
</div>
|
||||||
src={
|
|
||||||
article.thumbnailUrl ||
|
|
||||||
article.files?.[0]?.fileUrl ||
|
|
||||||
"/placeholder.jpg"
|
|
||||||
}
|
|
||||||
alt={article.files?.[0]?.file_alt || article.title}
|
|
||||||
fill
|
|
||||||
className="object-cover"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="ml-3">
|
|
||||||
<Link
|
|
||||||
href={`/article/${article.id}`}
|
|
||||||
className="text-sm font-medium hover:underline"
|
|
||||||
>
|
|
||||||
{article.title}
|
|
||||||
</Link>
|
|
||||||
<p className="text-xs text-gray-300 mt-1 flex items-center gap-1">
|
|
||||||
<Calendar className="w-3 h-3" />
|
|
||||||
{new Date(article.createdAt).toLocaleDateString("id-ID", {
|
|
||||||
day: "numeric",
|
|
||||||
month: "long",
|
|
||||||
year: "numeric",
|
|
||||||
})}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Kategori */}
|
{/* Subscribe Box */}
|
||||||
<div>
|
<div className="flex justify-end md:justify-end pl-5">
|
||||||
<h3 className="font-bold text-lg mb-4 text-yellow-400">Kategori</h3>
|
<div className=" w-full ml-5">
|
||||||
<ul className="space-y-2 text-sm">
|
<h2 className="text-2xl font-semibold text-gray-800 leading-snug">
|
||||||
<li>
|
Subscribe us to get <br />
|
||||||
<Link href="#" className="hover:underline">
|
the latest news!
|
||||||
Business
|
</h2>
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link href="#" className="hover:underline">
|
|
||||||
Cryptocurrency
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link href="#" className="hover:underline">
|
|
||||||
Economy
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link href="#" className="hover:underline">
|
|
||||||
Gadget
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link href="#" className="hover:underline">
|
|
||||||
Markets
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link href="#" className="hover:underline">
|
|
||||||
Opinion
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link href="#" className="hover:underline">
|
|
||||||
Politics
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link href="#" className="hover:underline">
|
|
||||||
Real Estate
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link href="#" className="hover:underline">
|
|
||||||
Startup
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link href="#" className="hover:underline">
|
|
||||||
World
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Site Navigation */}
|
<label className="block mt-6 mb-1 text-sm text-gray-600">
|
||||||
<div>
|
Email address:
|
||||||
<h3 className="font-bold text-lg mb-4 text-yellow-400">
|
</label>
|
||||||
Site Navigation
|
|
||||||
</h3>
|
|
||||||
<ul className="space-y-2 text-sm">
|
|
||||||
<li>
|
|
||||||
<Link href="/" className="hover:underline">
|
|
||||||
Home
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link href="/ads" className="hover:underline">
|
|
||||||
Advertisement
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link href="/contact" className="hover:underline">
|
|
||||||
Contact Us
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link href="/privacy" className="hover:underline">
|
|
||||||
Privacy & Policy
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link href="/links" className="hover:underline">
|
|
||||||
Other Links
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Brand Info */}
|
<input
|
||||||
<div>
|
type="email"
|
||||||
<h2 className="text-2xl font-bold">
|
placeholder="Your email address"
|
||||||
business<span className="text-yellow-400">today</span>
|
className="w-full border border-gray-300 rounded-md px-4 py-3 outline-none"
|
||||||
</h2>
|
/>
|
||||||
<p className="text-sm mt-3 text-gray-300">
|
|
||||||
We bring you the best Premium WordPress Themes that perfect for
|
<button className="mt-4 bg-green-600 hover:bg-green-500 text-black px-6 py-3 rounded-md font-medium">
|
||||||
news, magazine, personal blog, etc. Check our landing page for
|
SIGN UP
|
||||||
details.
|
</button>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Bottom Bar */}
|
<div className="flex flex-wrap justify-center gap-8 mt-16 text-gray-600 text-sm">
|
||||||
<div className="border-t border-gray-600 mt-10 pt-6 text-center text-sm text-gray-400">
|
<a href="#">About Us</a>
|
||||||
© 2025 JNew.
|
<a href="#">Contact</a>
|
||||||
|
<a href="#">Kode Etik Jurnalistik</a>
|
||||||
|
<a href="#">Kebijakan Privasi</a>
|
||||||
|
<a href="#">Disclaimer</a>
|
||||||
|
<a href="#">Pedoman Media Siber</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-center gap-8 mt-8 text-gray-700">
|
||||||
|
<Facebook className="w-5 h-5 cursor-pointer" />
|
||||||
|
<Twitter className="w-5 h-5 cursor-pointer" />
|
||||||
|
<Instagram className="w-5 h-5 cursor-pointer" />
|
||||||
|
<Youtube className="w-5 h-5 cursor-pointer" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-start text-gray-500 text-sm mt-8 pl-5">
|
||||||
|
© 2025 Milenial Bersuara - All Rights Reserved.
|
||||||
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,232 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { getListArticle } from "@/service/article";
|
||||||
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
type Article = {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
categoryName: string;
|
||||||
|
createdAt: string;
|
||||||
|
slug: string;
|
||||||
|
createdByName: string;
|
||||||
|
publishedAt: string;
|
||||||
|
customCreatorName: string;
|
||||||
|
thumbnailUrl: string;
|
||||||
|
categories: { title: string }[];
|
||||||
|
files: { fileUrl: string; file_alt: string }[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Header() {
|
||||||
|
const [articles, setArticles] = useState<Article[]>([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchArticles = async () => {
|
||||||
|
const req = {
|
||||||
|
limit: "10",
|
||||||
|
page: 1,
|
||||||
|
search: "",
|
||||||
|
categorySlug: "",
|
||||||
|
sort: "desc",
|
||||||
|
isPublish: true,
|
||||||
|
sortBy: "created_at",
|
||||||
|
};
|
||||||
|
|
||||||
|
const res = await getListArticle(req);
|
||||||
|
setArticles(res?.data?.data || []);
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchArticles();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const flashArticles = articles.slice(0, 8);
|
||||||
|
const mainArticle = articles[8] || articles[0];
|
||||||
|
const recentPosts = articles.slice(1, 5);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="max-w-7xl mx-auto bg-white px-4">
|
||||||
|
{/* FLASH STRIP */}
|
||||||
|
<div className="flex items-center justify-between mt-6 mb-3">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<h4 className="text-green-600 font-semibold">Flash</h4>
|
||||||
|
<span className="text-red-500">⚡</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-500 hidden md:block">LOAD MORE ➜</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="overflow-x-auto no-scrollbar py-2">
|
||||||
|
<div className="flex gap-4">
|
||||||
|
{flashArticles.map((item) => (
|
||||||
|
<Link
|
||||||
|
href={`/details/${item.slug}`}
|
||||||
|
key={`flash-${item.id}`}
|
||||||
|
className="min-w-[200px] md:min-w-[220px] bg-gray-800 rounded-lg overflow-hidden relative shadow"
|
||||||
|
>
|
||||||
|
<div className="relative w-[200px] md:w-[220px] h-[140px]">
|
||||||
|
<Image
|
||||||
|
src={
|
||||||
|
item.thumbnailUrl ||
|
||||||
|
item.files?.[0]?.fileUrl ||
|
||||||
|
"/placeholder.jpg"
|
||||||
|
}
|
||||||
|
alt={item.title}
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* dark overlay with text */}
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 to-transparent text-white">
|
||||||
|
<p className="text-xs line-clamp-2">{item.title}</p>
|
||||||
|
<div className="flex items-center justify-between mt-2 text-[11px] text-gray-300">
|
||||||
|
<span className="text-yellow-300 bg-black/30 px-1 rounded-sm">
|
||||||
|
{item.categoryName ||
|
||||||
|
item.categories?.[0]?.title ||
|
||||||
|
"Berita"}
|
||||||
|
</span>
|
||||||
|
<span>●</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* play icon */}
|
||||||
|
<div className="absolute top-3 right-3 w-8 h-8 bg-white/80 rounded-full flex items-center justify-center">
|
||||||
|
<svg
|
||||||
|
className="w-4 h-4 text-black"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="currentColor"
|
||||||
|
>
|
||||||
|
<path d="M8 5v14l11-7z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Layout */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-[2.2fr_1fr] gap-6">
|
||||||
|
{/* LEFT SIDE – MAIN ARTICLE */}
|
||||||
|
{mainArticle ? (
|
||||||
|
<div className="relative h-[500px] w-full rounded-xl overflow-hidden shadow-md">
|
||||||
|
<Link href={`/details/${mainArticle.slug}`}>
|
||||||
|
<Image
|
||||||
|
src={
|
||||||
|
mainArticle.thumbnailUrl ||
|
||||||
|
mainArticle.files?.[0]?.fileUrl ||
|
||||||
|
"/placeholder.jpg"
|
||||||
|
}
|
||||||
|
alt={mainArticle.files?.[0]?.file_alt || mainArticle.title}
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* White Card Overlay */}
|
||||||
|
<div className="absolute bottom-6 left-6 bg-white bg-opacity-95 backdrop-blur-sm p-6 shadow-lg max-w-lg">
|
||||||
|
<span className="text-[11px] bg-green-700 text-white px-2 py-1 rounded-sm">
|
||||||
|
{mainArticle.categoryName ||
|
||||||
|
mainArticle.categories?.[0]?.title ||
|
||||||
|
"Berita"}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<h2 className="text-xl md:text-2xl font-bold text-gray-900 mt-2 leading-snug">
|
||||||
|
{mainArticle.title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 text-gray-600 text-xs mt-3">
|
||||||
|
<span>
|
||||||
|
By{" "}
|
||||||
|
{mainArticle.customCreatorName ||
|
||||||
|
mainArticle.createdByName ||
|
||||||
|
"Admin"}
|
||||||
|
</span>
|
||||||
|
<span>•</span>
|
||||||
|
<span>
|
||||||
|
{new Date(mainArticle.publishedAt).toLocaleDateString(
|
||||||
|
"id-ID",
|
||||||
|
{
|
||||||
|
day: "2-digit",
|
||||||
|
month: "long",
|
||||||
|
year: "numeric",
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-gray-500">Loading...</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* RIGHT SIDE – RECENT POSTS */}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold mb-3">Recent Posts</h3>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{recentPosts.map((item) => (
|
||||||
|
<Link
|
||||||
|
key={item.id}
|
||||||
|
href={`/details/${item.slug}`}
|
||||||
|
className="flex gap-3"
|
||||||
|
>
|
||||||
|
<div className="relative w-35 h-25 rounded-md overflow-hidden">
|
||||||
|
<Image
|
||||||
|
src={
|
||||||
|
item.thumbnailUrl ||
|
||||||
|
item.files?.[0]?.fileUrl ||
|
||||||
|
"/placeholder.jpg"
|
||||||
|
}
|
||||||
|
alt={item.title}
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<p className="text-sm font-semibold line-clamp-2">
|
||||||
|
{item.title}
|
||||||
|
</p>
|
||||||
|
<span className="text-xs text-gray-500 mt-1">
|
||||||
|
{new Date(item.publishedAt).toLocaleDateString("id-ID", {
|
||||||
|
day: "2-digit",
|
||||||
|
month: "long",
|
||||||
|
year: "numeric",
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* LOAD MORE */}
|
||||||
|
<div className="flex justify-center my-6">
|
||||||
|
<button className="text-gray-600 text-sm flex items-center gap-2 border-b pb-1">
|
||||||
|
<span>LOAD MORE</span>
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none">
|
||||||
|
<path
|
||||||
|
d="M12 5v14M5 12h14"
|
||||||
|
stroke="#9CA3AF"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
strokeLinecap="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* KOLOM PPS BOTTOM BANNER */}
|
||||||
|
<div className="relative h-[140px] w-full overflow-hidden rounded-none my-5 border ">
|
||||||
|
<Image
|
||||||
|
src="/image-kolom.png"
|
||||||
|
alt="Kolom PPS Bottom Banner"
|
||||||
|
fill
|
||||||
|
className="object-contain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,186 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { getListArticle } from "@/service/article";
|
||||||
|
|
||||||
|
type Article = {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
categoryName: string;
|
||||||
|
createdAt: string;
|
||||||
|
publishedAt: string;
|
||||||
|
slug: string;
|
||||||
|
createdByName: string;
|
||||||
|
customCreatorName?: string;
|
||||||
|
thumbnailUrl?: string;
|
||||||
|
categories?: { title: string }[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function NewsTerkini() {
|
||||||
|
const [articles, setArticles] = useState<Article[]>([]);
|
||||||
|
const [popular, setPopular] = useState<Article[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
async function loadData() {
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await getListArticle({
|
||||||
|
limit: "20",
|
||||||
|
page: 1,
|
||||||
|
search: "",
|
||||||
|
isPublish: true,
|
||||||
|
sort: "desc",
|
||||||
|
sortBy: "created_at",
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = res?.data?.data || [];
|
||||||
|
setArticles(data.slice(0, 5));
|
||||||
|
setPopular(data.slice(0, 5));
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatDate = (d: string) =>
|
||||||
|
new Date(d).toLocaleDateString("id-ID", {
|
||||||
|
day: "numeric",
|
||||||
|
month: "long",
|
||||||
|
year: "numeric",
|
||||||
|
});
|
||||||
|
|
||||||
|
if (loading)
|
||||||
|
return (
|
||||||
|
<p className="text-center py-10 text-gray-500">
|
||||||
|
Memuat berita terbaru...
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="max-w-7xl mx-auto px-4 grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-6">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-lg font-bold text-gray-900">BERITA TERKINI</h2>
|
||||||
|
<div className="w-14 h-1 bg-green-600 mt-1 mb-4"></div>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
{articles.map((item) => (
|
||||||
|
<Link
|
||||||
|
key={item.id}
|
||||||
|
href={`/details/${item.slug}`}
|
||||||
|
className="block border-b pb-6"
|
||||||
|
>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex-1">
|
||||||
|
{/* CATEGORY */}
|
||||||
|
<p className="text-[11px] text-green-700 font-semibold mb-1">
|
||||||
|
{item.categories?.[0]?.title || "Kategori"}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* JUDUL */}
|
||||||
|
<h3 className="font-bold text-base leading-snug line-clamp-2">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{/* DESKRIPSI */}
|
||||||
|
<p className="text-sm text-gray-600 line-clamp-2 mt-1">
|
||||||
|
{item.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* AUTHOR + DATE */}
|
||||||
|
<p className="text-xs text-gray-400 mt-2">
|
||||||
|
By {item.customCreatorName || item.createdByName} —{" "}
|
||||||
|
{formatDate(item.publishedAt)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="relative w-40 h-28 rounded overflow-hidden flex-shrink-0">
|
||||||
|
<Image
|
||||||
|
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||||||
|
alt={item.title}
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* LOAD MORE */}
|
||||||
|
<div className="text-center mt-4 text-green-600 text-sm cursor-pointer">
|
||||||
|
LOAD MORE ↓
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="lg:col-span-1">
|
||||||
|
<h2 className="text-lg font-bold text-gray-900">TERBANYAK DIBAGIKAN</h2>
|
||||||
|
<div className="w-14 h-1 bg-green-600 mt-1 mb-4"></div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{popular.map((item, index) => (
|
||||||
|
<Link
|
||||||
|
key={item.id}
|
||||||
|
href={`/details/${item.slug}`}
|
||||||
|
className="flex gap-3 border-b pb-4"
|
||||||
|
>
|
||||||
|
{/* NOMOR */}
|
||||||
|
<div className="text-green-600 font-extrabold text-3xl leading-none">
|
||||||
|
{(index + 1).toString().padStart(2, "0")}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="text-[10px] text-gray-500">
|
||||||
|
{item.categories?.[0]?.title || "Kategori"}
|
||||||
|
</p>
|
||||||
|
<h4 className="font-semibold text-sm leading-snug line-clamp-2">
|
||||||
|
{item.title}
|
||||||
|
</h4>
|
||||||
|
<p className="text-[10px] text-gray-400 mt-1">
|
||||||
|
{formatDate(item.createdAt)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* THUMBNAIL KECIL */}
|
||||||
|
<div className="relative w-16 h-14 rounded overflow-hidden">
|
||||||
|
<Image
|
||||||
|
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||||||
|
alt={item.title}
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6">
|
||||||
|
<div className="relative h-[180px] border rounded-lg overflow-hidden mb-6">
|
||||||
|
<Image
|
||||||
|
src="/image-kolom.png"
|
||||||
|
alt="Kolom PPS"
|
||||||
|
fill
|
||||||
|
className="object-contain bg-white"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative h-[180px] border rounded-lg overflow-hidden">
|
||||||
|
<Image
|
||||||
|
src="/image-kolom.png"
|
||||||
|
alt="Kolom PPS"
|
||||||
|
fill
|
||||||
|
className="object-contain bg-white"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { getListArticle } from "@/service/article";
|
||||||
|
import { ChevronDown } from "lucide-react";
|
||||||
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
type Article = {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
categoryName: string;
|
||||||
|
slug: string;
|
||||||
|
createdAt: string;
|
||||||
|
publishedAt: string;
|
||||||
|
createdByName: string;
|
||||||
|
customCreatorName: string;
|
||||||
|
thumbnailUrl: string;
|
||||||
|
categories: { title: string }[];
|
||||||
|
files: { fileUrl: string; file_alt: string }[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function LatestNews() {
|
||||||
|
const [page, setPage] = useState(1);
|
||||||
|
const [totalPage, setTotalPage] = useState(1);
|
||||||
|
const [articles, setArticles] = useState<Article[]>([]);
|
||||||
|
const [showData, setShowData] = useState("6");
|
||||||
|
const [search] = useState("");
|
||||||
|
const [selectedCategories] = useState<any>("");
|
||||||
|
const [startDateValue] = useState({
|
||||||
|
startDate: null,
|
||||||
|
endDate: null,
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
initState();
|
||||||
|
}, [page, showData, startDateValue, selectedCategories]);
|
||||||
|
|
||||||
|
async function initState() {
|
||||||
|
const req = {
|
||||||
|
limit: showData,
|
||||||
|
page,
|
||||||
|
search,
|
||||||
|
categorySlug: Array.from(selectedCategories).join(","),
|
||||||
|
sort: "desc",
|
||||||
|
isPublish: true,
|
||||||
|
sortBy: "created_at",
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await getListArticle(req);
|
||||||
|
setArticles(res?.data?.data || []);
|
||||||
|
setTotalPage(res?.data?.meta?.totalPage || 1);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Error fetching articles:", err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="max-w-screen-xl mx-auto px-4 py-10">
|
||||||
|
<div className="">
|
||||||
|
{/* TITLE */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<h2 className="text-xl font-black text-[#000]">BERITA POPULER</h2>
|
||||||
|
<div className="w-10 h-1 bg-green-600 mt-1 rounded"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* GRID 4 KOLOM */}
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
|
||||||
|
{articles.slice(0, 4).map((item) => (
|
||||||
|
<Link href={`/details/${item.slug}`} key={item.id}>
|
||||||
|
<div>
|
||||||
|
{/* GAMBAR */}
|
||||||
|
<div className="relative w-full h-56 rounded-lg overflow-hidden">
|
||||||
|
<Image
|
||||||
|
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||||||
|
alt={item.title}
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* BADGE CATEGORY DI DALAM GAMBAR */}
|
||||||
|
<div className="absolute bottom-2 left-2">
|
||||||
|
<span className="px-3 py-1 text-[10px] font-semibold bg-green-600 text-white rounded">
|
||||||
|
{item.categories?.[0]?.title || "Kategori"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* JUDUL */}
|
||||||
|
<h3 className="mt-2 text-base font-bold leading-snug line-clamp-2">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{/* AUTHOR + DATE */}
|
||||||
|
<div className="text-[11px] mt-2 flex items-center gap-1 text-gray-700">
|
||||||
|
<span className="font-semibold">
|
||||||
|
By {item.customCreatorName || item.createdByName || "Admin"}
|
||||||
|
</span>
|
||||||
|
<span className="text-yellow-500">-</span>
|
||||||
|
<span>
|
||||||
|
{new Date(item.publishedAt).toLocaleDateString("id-ID", {
|
||||||
|
day: "numeric",
|
||||||
|
month: "long",
|
||||||
|
year: "numeric",
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative h-[160px] w-full overflow-hidden rounded-xl mt-6">
|
||||||
|
<Image
|
||||||
|
src="/image-kolom.png"
|
||||||
|
alt="Kolom PPS"
|
||||||
|
fill
|
||||||
|
className="object-contain bg-white"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { getListArticle } from "@/service/article";
|
||||||
|
import { ChevronDown } from "lucide-react";
|
||||||
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
type Article = {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
categoryName: string;
|
||||||
|
slug: string;
|
||||||
|
createdAt: string;
|
||||||
|
publishedAt: string;
|
||||||
|
createdByName: string;
|
||||||
|
customCreatorName: string;
|
||||||
|
thumbnailUrl: string;
|
||||||
|
categories: { title: string }[];
|
||||||
|
files: { fileUrl: string; file_alt: string }[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function OpinionNews() {
|
||||||
|
const [page, setPage] = useState(1);
|
||||||
|
const [totalPage, setTotalPage] = useState(1);
|
||||||
|
const [articles, setArticles] = useState<Article[]>([]);
|
||||||
|
const [showData, setShowData] = useState("6");
|
||||||
|
const [search] = useState("");
|
||||||
|
const [selectedCategories] = useState<any>("");
|
||||||
|
const [startDateValue] = useState({
|
||||||
|
startDate: null,
|
||||||
|
endDate: null,
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
initState();
|
||||||
|
}, [page, showData, startDateValue, selectedCategories]);
|
||||||
|
|
||||||
|
async function initState() {
|
||||||
|
const req = {
|
||||||
|
limit: showData,
|
||||||
|
page,
|
||||||
|
search,
|
||||||
|
categorySlug: Array.from(selectedCategories).join(","),
|
||||||
|
sort: "desc",
|
||||||
|
isPublish: true,
|
||||||
|
sortBy: "created_at",
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await getListArticle(req);
|
||||||
|
setArticles(res?.data?.data || []);
|
||||||
|
setTotalPage(res?.data?.meta?.totalPage || 1);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Error fetching articles:", err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="max-w-screen-xl mx-auto px-4 py-10">
|
||||||
|
<div className="">
|
||||||
|
{/* TITLE */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<h2 className="text-xl font-black text-[#000]">BERITA OPINI</h2>
|
||||||
|
<div className="w-10 h-1 bg-green-600 mt-1 rounded"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* GRID 4 KOLOM */}
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
|
||||||
|
{articles.slice(0, 4).map((item) => (
|
||||||
|
<Link href={`/details/${item.slug}`} key={item.id}>
|
||||||
|
<div>
|
||||||
|
{/* GAMBAR */}
|
||||||
|
<div className="relative w-full h-56 rounded-lg overflow-hidden">
|
||||||
|
<Image
|
||||||
|
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||||||
|
alt={item.title}
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* BADGE CATEGORY DI DALAM GAMBAR */}
|
||||||
|
<div className="absolute bottom-2 left-2">
|
||||||
|
<span className="px-3 py-1 text-[10px] font-semibold bg-green-600 text-white rounded">
|
||||||
|
{item.categories?.[0]?.title || "Kategori"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* JUDUL */}
|
||||||
|
<h3 className="mt-2 text-base font-bold leading-snug line-clamp-2">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{/* AUTHOR + DATE */}
|
||||||
|
<div className="text-[11px] mt-2 flex items-center gap-1 text-gray-700">
|
||||||
|
<span className="font-semibold">
|
||||||
|
By {item.customCreatorName || item.createdByName || "Admin"}
|
||||||
|
</span>
|
||||||
|
<span className="text-yellow-500">-</span>
|
||||||
|
<span>
|
||||||
|
{new Date(item.publishedAt).toLocaleDateString("id-ID", {
|
||||||
|
day: "numeric",
|
||||||
|
month: "long",
|
||||||
|
year: "numeric",
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative h-[160px] w-full overflow-hidden rounded-xl mt-6">
|
||||||
|
<Image
|
||||||
|
src="/image-kolom.png"
|
||||||
|
alt="Kolom PPS"
|
||||||
|
fill
|
||||||
|
className="object-contain bg-white"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,151 @@
|
||||||
|
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/channel-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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue