233 lines
7.5 KiB
TypeScript
233 lines
7.5 KiB
TypeScript
|
"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-red-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-red-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 rounded-md">
|
|||
|
|
<Image
|
|||
|
|
src="/image-kolom.png"
|
|||
|
|
alt="Kolom PPS Bottom Banner"
|
|||
|
|
fill
|
|||
|
|
className="object-contain"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
);
|
|||
|
|
}
|