354 lines
14 KiB
TypeScript
354 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ChevronLeft, ChevronRight, Clock, MessageCircle } from "lucide-react";
|
|
import { Card } from "../ui/card";
|
|
import Image from "next/image";
|
|
import { getListArticle } from "@/service/article";
|
|
import { useState, useEffect } from "react";
|
|
import latestNews from "./latest-news";
|
|
|
|
type Article = {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
categoryName: string;
|
|
createdAt: string;
|
|
createdByName: string;
|
|
customCreatorName: string;
|
|
thumbnailUrl: string;
|
|
categories: { title: string }[];
|
|
files: { fileUrl: string; file_alt: string }[];
|
|
image: string;
|
|
author: string;
|
|
category: string;
|
|
date: string;
|
|
expert: string;
|
|
};
|
|
|
|
export default function Beranda() {
|
|
const [articles, setArticles] = useState<Article[]>([]);
|
|
const [mainNews, setMainNews] = useState<Article | null>(null);
|
|
const [latestNewsMid, setLatestNewsMid] = useState<Article[]>([]);
|
|
const [recentNews, setRecentNews] = useState<Article[]>([]);
|
|
const [latestNews, setLatestNews] = useState<Article[]>([]);
|
|
|
|
useEffect(() => {
|
|
const fetchArticles = async () => {
|
|
try {
|
|
const req = {
|
|
limit: "6", // ambil 6 berita, 1 untuk main + 5 untuk lainnya
|
|
page: 1,
|
|
search: "",
|
|
categorySlug: "",
|
|
sort: "desc",
|
|
isPublish: true,
|
|
sortBy: "created_at",
|
|
};
|
|
|
|
const res = await getListArticle(req);
|
|
const data = res?.data?.data || [];
|
|
|
|
setArticles(data);
|
|
setMainNews(data[0] || null);
|
|
setLatestNewsMid(data.slice(1, 5));
|
|
setRecentNews(res?.data?.data || []);
|
|
setLatestNews(res?.data?.data || []);
|
|
} catch (err) {
|
|
console.error("Error fetching articles:", err);
|
|
}
|
|
};
|
|
|
|
fetchArticles();
|
|
}, []);
|
|
|
|
const formatDate = (dateString?: string) => {
|
|
if (!dateString) return "";
|
|
return new Date(dateString).toLocaleDateString("id-ID", {
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
});
|
|
};
|
|
return (
|
|
<section className="max-w-[1600px] px-4 lg:mx-auto py-8 flex flex-col md:flex-wrap lg:flex-row justify-between gap-6 ">
|
|
{/* Berita Terpopuler */}
|
|
<aside className="w-full md:w-full lg:w-full xl:w-[312px] space-y-4 shrink-0">
|
|
<Card className="rounded-none px-4 py-4">
|
|
<h2 className="text-lg font-semibold border-b pb-2">
|
|
Berita Terpopuler
|
|
</h2>
|
|
<ul className="space-y-4">
|
|
{articles.map((news) => {
|
|
const imageUrl =
|
|
news.thumbnailUrl ||
|
|
news.files?.[0]?.fileUrl ||
|
|
"/placeholder.jpg";
|
|
|
|
return (
|
|
<li key={news.id} className="flex gap-3 items-start">
|
|
<Image
|
|
src={imageUrl}
|
|
width={100}
|
|
height={71}
|
|
alt={news.title}
|
|
className="w-[100px] h-[71px] object-cover"
|
|
/>
|
|
|
|
<p className="text-sm leading-snug font-semibold px-2">
|
|
{news.title}
|
|
</p>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
|
|
<div className="flex gap-2 pt-4">
|
|
<button className="text-xs border px-2 py-1 flex items-center gap-1">
|
|
<ChevronLeft size={14} /> Prev
|
|
</button>
|
|
<button className="text-xs border px-2 py-1 flex items-center gap-1">
|
|
Next <ChevronRight size={14} />
|
|
</button>
|
|
</div>
|
|
</Card>
|
|
<div className="relative w-auto max-w-full h-[300px] overflow-hidden flex items-center mx-auto border my-6 rounded">
|
|
<Image
|
|
src="/kolom.png"
|
|
alt="Berita Utama"
|
|
fill
|
|
className="object-contain rounded"
|
|
/>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Berita Utama */}
|
|
<main className="w-full md:w-full lg:w-full xl:w-[655px] space-y-6 shrink-0">
|
|
{mainNews && (
|
|
<Card className="border p-8 shadow-sm bg-white rounded-none gap-1">
|
|
<p className="text-xs text-gray-500 uppercase mb-1">Beranda</p>
|
|
<h1 className="text-xl font-bold mt-1">{mainNews.title}</h1>
|
|
<p className="text-[10px] md:text-sm text-gray-500 mt-1 flex items-center gap-3">
|
|
BY{" "}
|
|
<span className="text-black font-semibold text-[10px] md:text-sm">
|
|
{mainNews.customCreatorName ||
|
|
mainNews.createdByName ||
|
|
"Redaksi"}
|
|
</span>{" "}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<g fill="none">
|
|
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
|
|
<path
|
|
fill="currentColor"
|
|
d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16m0 2a1 1 0 0 1 .993.883L13 7v4.586l2.707 2.707a1 1 0 0 1-1.32 1.497l-.094-.083l-3-3a1 1 0 0 1-.284-.576L11 12V7a1 1 0 0 1 1-1"
|
|
/>
|
|
</g>
|
|
</svg>{" "}
|
|
{formatDate(mainNews.createdAt)}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-4 w-4"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeWidth={2}
|
|
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
|
|
/>
|
|
</svg>
|
|
0
|
|
</p>
|
|
<p className="text-sm text-[#666666] mt-2">
|
|
{mainNews.description}
|
|
</p>
|
|
<button className="mt-4 text-xs w-3/12 border px-3 hover:bg-gray-100 transition py-2">
|
|
READ MORE
|
|
</button>
|
|
</Card>
|
|
)}
|
|
|
|
<div className="flex gap-2">
|
|
<button className="text-xs border px-3 py-1 flex items-center gap-1">
|
|
<ChevronLeft size={14} /> Prev
|
|
</button>
|
|
<button className="text-xs border px-3 py-1 flex items-center gap-1">
|
|
Next <ChevronRight size={14} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Grid Berita Tambahan */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
{latestNewsMid.map((news) => {
|
|
const imageUrl =
|
|
news.thumbnailUrl ||
|
|
news.files?.[0]?.fileUrl ||
|
|
"/placeholder.jpg";
|
|
const category =
|
|
news.categoryName || news.categories?.[0]?.title || "Berita";
|
|
|
|
return (
|
|
<div
|
|
key={news.id}
|
|
className="bg-white shadow-md rounded-none overflow-hidden border"
|
|
>
|
|
<div className="relative">
|
|
<Image
|
|
src={imageUrl}
|
|
alt={news.title}
|
|
width={400}
|
|
height={223}
|
|
className="w-full h-[223px] object-cover"
|
|
/>
|
|
<span className="absolute bottom-0 left-1/2 -translate-x-1/2 bg-black text-white text-[10px] px-2 py-[2px] uppercase">
|
|
{category}
|
|
</span>
|
|
</div>
|
|
<div className="p-4 text-center">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-3 leading-snug px-9">
|
|
{news.title}
|
|
</h3>
|
|
<div className="flex flex-row items-center justify-center text-gray-500 gap-1">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<g fill="none">
|
|
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
|
|
<path
|
|
fill="currentColor"
|
|
d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16m0 2a1 1 0 0 1 .993.883L13 7v4.586l2.707 2.707a1 1 0 0 1-1.32 1.497l-.094-.083l-3-3a1 1 0 0 1-.284-.576L11 12V7a1 1 0 0 1 1-1"
|
|
/>
|
|
</g>
|
|
</svg>{" "}
|
|
<p className="text-xs text-gray-400">
|
|
{formatDate(news.createdAt)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Recent News */}
|
|
<div className="space-y-4">
|
|
<Card className="px-5 py-5 rounded-none">
|
|
<h2 className="text-sm font-semibold border-b pb-1 border-black inline-block">
|
|
Recent News
|
|
</h2>
|
|
|
|
{recentNews.map((item, i) => (
|
|
<div key={i} className="flex flex-col sm:flex-row gap-4 mt-4">
|
|
<Image
|
|
src={item.thumbnailUrl || "/placeholder.jpg"}
|
|
alt={item.title}
|
|
width={220}
|
|
height={157}
|
|
className="w-full sm:w-[220px] h-[157px] object-cover"
|
|
/>
|
|
<div className="flex-1">
|
|
<h3 className="text-base font-bold">{item.title}</h3>
|
|
<p className="text-xs text-gray-500 mt-1 flex flex-wrap items-center gap-2 mb-3">
|
|
BY{" "}
|
|
<span className="font-semibold text-black">
|
|
{item.customCreatorName ||
|
|
item.createdByName ||
|
|
"Redaksi"}
|
|
</span>
|
|
<Clock className="w-3 h-3" />
|
|
{new Date(item.createdAt).toLocaleDateString("id-ID", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
})}
|
|
<MessageCircle className="w-3 h-3" />0
|
|
</p>
|
|
<p className="text-sm text-gray-600 line-clamp-3">
|
|
{item.description || ""}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{/* Pagination */}
|
|
<div className="flex gap-2">
|
|
<button className="text-xs border px-3 py-1 flex items-center gap-1">
|
|
<ChevronLeft size={14} /> Prev
|
|
</button>
|
|
<button className="text-xs border px-3 py-1 flex items-center gap-1">
|
|
Next <ChevronRight size={14} />
|
|
</button>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Banner Iklan */}
|
|
<div className="relative my-5 h-[125px] overflow-hidden flex items-center mx-auto border">
|
|
<Image
|
|
src="/image-kolom.png"
|
|
alt="Berita Utama"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pagination */}
|
|
</main>
|
|
|
|
{/* Berita Terbaru */}
|
|
<aside className="w-full md:w-full lg:w-full xl:w-[312px] space-y-6 shrink-0">
|
|
{latestNews.map((news, i) => (
|
|
<Card
|
|
key={i}
|
|
className="rounded-none overflow-hidden bg-white shadow-sm p-0 gap-1"
|
|
>
|
|
<div className="relative">
|
|
{news.thumbnailUrl && (
|
|
<Image
|
|
src={news.thumbnailUrl}
|
|
alt={news.title}
|
|
width={600}
|
|
height={224}
|
|
className="w-full h-[224px] object-cover"
|
|
/>
|
|
)}
|
|
{news.categoryName && (
|
|
<span className="absolute top-2 left-2 bg-black text-white text-[10px] px-2 py-1 rounded-none uppercase tracking-wide">
|
|
{news.categoryName}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="p-4">
|
|
<h3 className="text-base font-bold leading-snug">{news.title}</h3>
|
|
|
|
<p className="text-xs text-gray-500 mt-2 font-medium mb-4">
|
|
BY{" "}
|
|
<span className="text-black">
|
|
{news.customCreatorName || news.createdByName || "Redaksi"}
|
|
</span>{" "}
|
|
·{" "}
|
|
{new Date(news.createdAt).toLocaleDateString("id-ID", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
})}
|
|
</p>
|
|
|
|
<p className="text-sm text-gray-600 mt-2 line-clamp-5">
|
|
{news.description || ""}
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</aside>
|
|
</section>
|
|
);
|
|
}
|