134 lines
4.2 KiB
TypeScript
134 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import Image from "next/image";
|
|
import { getListArticle } from "@/service/article";
|
|
|
|
type Article = {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
categoryName: string;
|
|
createdAt: string;
|
|
createdByName: string;
|
|
thumbnailUrl: string;
|
|
categories: {
|
|
title: string;
|
|
}[];
|
|
files: {
|
|
file_url: string;
|
|
file_alt: string;
|
|
}[];
|
|
};
|
|
|
|
export default function Header() {
|
|
const [article, setArticle] = useState<Article | null>(null);
|
|
const [showData, setShowData] = useState("5");
|
|
|
|
useEffect(() => {
|
|
initState();
|
|
}, []);
|
|
|
|
async function initState() {
|
|
const req = {
|
|
limit: showData,
|
|
page: 1,
|
|
search: "",
|
|
categorySlug: "",
|
|
sort: "desc",
|
|
isPublish: true,
|
|
sortBy: "created_at",
|
|
};
|
|
|
|
try {
|
|
const res = await getListArticle(req);
|
|
setArticle(res?.data?.data?.[0] || null);
|
|
} catch (error) {
|
|
console.error("Gagal memuat artikel:", error);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<header className="bg-white w-full pt-3 flex justify-center">
|
|
<div className="relative max-w-screen-xl h-auto md:h-[483px] flex flex-col md:flex-row overflow-hidden shadow-md mx-3 md:mx-3 lg:mx-5">
|
|
<div className="w-full md:w-1/2 h-[250px] md:h-full">
|
|
<Image
|
|
src={article?.thumbnailUrl || "/dummy.jpg"}
|
|
alt={article?.title || "No Title"}
|
|
width={730}
|
|
height={483}
|
|
className="object-cover w-full h-full"
|
|
/>
|
|
</div>
|
|
|
|
<div className="w-full md:w-1/2 bg-[#714C3D] text-white p-6 md:p-10 flex flex-col justify-center">
|
|
<span className="bg-black text-white text-xs px-2 py-1 mb-4 inline-block w-fit">
|
|
{article?.categoryName || "Berita Terkini"}
|
|
</span>
|
|
<h1 className="text-xl md:text-3xl font-semibold leading-snug md:leading-tight mb-4 md:mb-6">
|
|
{article?.title || "Memuat..."}
|
|
</h1>
|
|
<div className="flex flex-wrap gap-4 text-sm opacity-90">
|
|
<div className="flex items-center gap-1">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<g fill="none">
|
|
<path d="M0 0h24v24H0z" />
|
|
<path
|
|
fill="currentColor"
|
|
d="M12 8v4l3 3l1-1l-2.5-2.5V8zM12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2m0 18a8 8 0 1 1 8-8a8.009 8.009 0 0 1-8 8"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
<span>
|
|
{article
|
|
? new Date(article.createdAt).toLocaleDateString("id-ID", {
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
})
|
|
: ""}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 32 32"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M28 4h-2V2h-2v2H8V2H6v2H4a2.006 2.006 0 0 0-2 2v22a2.006 2.006 0 0 0 2 2h24a2.006 2.006 0 0 0 2-2V6a2.006 2.006 0 0 0-2-2m0 24H4V10h24Z"
|
|
/>
|
|
</svg>
|
|
<span>{article?.createdByName || ""}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-4 w-4"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
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>
|
|
<span>0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|