update
This commit is contained in:
parent
850e381f49
commit
6b4d0be0a4
|
|
@ -1,106 +1,205 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
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: { file_url: string; file_alt: string }[];
|
||||
};
|
||||
|
||||
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 (
|
||||
<footer className="bg-[#1a1a1a] text-gray-300 py-12">
|
||||
<div className="max-w-5xl mx-auto text-center px-4">
|
||||
<div className="relative inline-block mb-6">
|
||||
<footer className="bg-[#002b5c] text-white py-12">
|
||||
<div className="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-10">
|
||||
{/* Recent News */}
|
||||
<div>
|
||||
<h3 className="font-bold text-lg mb-4 text-yellow-400">
|
||||
Recent News
|
||||
</h3>
|
||||
{loading && <p className="text-sm">Memuat...</p>}
|
||||
{!loading &&
|
||||
articles.map((article) => (
|
||||
<div key={article.id} className="flex mb-4">
|
||||
<div className="w-20 h-16 relative flex-shrink-0">
|
||||
<Image
|
||||
src="/harapan.png"
|
||||
alt="Kabar Harapan"
|
||||
width={977}
|
||||
height={353}
|
||||
className="mx-auto"
|
||||
src={
|
||||
article.thumbnailUrl ||
|
||||
article.files?.[0]?.file_url ||
|
||||
"/placeholder.jpg"
|
||||
}
|
||||
alt={article.files?.[0]?.file_alt || article.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="max-w-2xl mx-auto text-sm mb-4">
|
||||
KabarHarapan.com adalah media online yang berkomitmen untuk
|
||||
menyebarkan berita yang menginspirasi dan mendorong perubahan positif
|
||||
di masyarakat. Kami percaya bahwa di balik setiap cerita, ada potensi
|
||||
untuk memberikan harapan dan memberdayakan individu untuk menciptakan
|
||||
perbedaan dalam dunia ini.
|
||||
<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>
|
||||
|
||||
<p className="text-sm mb-6">
|
||||
Contact us:{" "}
|
||||
<a
|
||||
href="mailto:contact@kabarharapan.com"
|
||||
className="text-blue-400 hover:underline"
|
||||
>
|
||||
contact@kabarharapan.com
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<div className="flex justify-center space-x-6">
|
||||
<a
|
||||
href="#"
|
||||
className="bg-blue-600 p-3 rounded hover:opacity-80 transition"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M9.602 21.026v-7.274H6.818a.545.545 0 0 1-.545-.545V10.33a.545.545 0 0 1 .545-.545h2.773V7a4.547 4.547 0 0 1 4.86-4.989h2.32a.556.556 0 0 1 .557.546v2.436a.557.557 0 0 1-.557.545h-1.45c-1.566 0-1.867.742-1.867 1.833v2.413h3.723a.533.533 0 0 1 .546.603l-.337 2.888a.545.545 0 0 1-.545.476h-3.364v7.274a.96.96 0 0 1-.975.974h-1.937a.96.96 0 0 1-.963-.974"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="bg-sky-400 p-3 rounded hover:opacity-80 transition"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M22.213 5.656a8.4 8.4 0 0 1-2.402.658A4.2 4.2 0 0 0 21.649 4c-.82.488-1.719.83-2.655 1.015a4.182 4.182 0 0 0-7.126 3.814a11.87 11.87 0 0 1-8.621-4.37a4.17 4.17 0 0 0-.566 2.103c0 1.45.739 2.731 1.86 3.481a4.2 4.2 0 0 1-1.894-.523v.051a4.185 4.185 0 0 0 3.355 4.102a4.2 4.2 0 0 1-1.89.072A4.185 4.185 0 0 0 8.02 16.65a8.4 8.4 0 0 1-6.192 1.732a11.83 11.83 0 0 0 6.41 1.88c7.694 0 11.9-6.373 11.9-11.9q0-.271-.012-.541a8.5 8.5 0 0 0 2.086-2.164"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="bg-gradient-to-tr from-purple-500 via-pink-500 to-yellow-500 p-3 rounded hover:opacity-80 transition"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12.001 9a3 3 0 1 0 0 6a3 3 0 0 0 0-6m0-2a5 5 0 1 1 0 10a5 5 0 0 1 0-10m6.5-.25a1.25 1.25 0 0 1-2.5 0a1.25 1.25 0 0 1 2.5 0M12.001 4c-2.474 0-2.878.007-4.029.058c-.784.037-1.31.142-1.798.332a2.9 2.9 0 0 0-1.08.703a2.9 2.9 0 0 0-.704 1.08c-.19.49-.295 1.015-.331 1.798C4.007 9.075 4 9.461 4 12c0 2.475.007 2.878.058 4.029c.037.783.142 1.31.331 1.797c.17.435.37.748.702 1.08c.337.336.65.537 1.08.703c.494.191 1.02.297 1.8.333C9.075 19.994 9.461 20 12 20c2.475 0 2.878-.007 4.029-.058c.782-.037 1.308-.142 1.797-.331a2.9 2.9 0 0 0 1.08-.703c.337-.336.538-.649.704-1.08c.19-.492.296-1.018.332-1.8c.052-1.103.058-1.49.058-4.028c0-2.474-.007-2.878-.058-4.029c-.037-.782-.143-1.31-.332-1.798a2.9 2.9 0 0 0-.703-1.08a2.9 2.9 0 0 0-1.08-.704c-.49-.19-1.016-.295-1.798-.331C14.926 4.006 14.54 4 12 4m0-2c2.717 0 3.056.01 4.123.06c1.064.05 1.79.217 2.427.465c.66.254 1.216.598 1.772 1.153a4.9 4.9 0 0 1 1.153 1.772c.247.637.415 1.363.465 2.428c.047 1.066.06 1.405.06 4.122s-.01 3.056-.06 4.122s-.218 1.79-.465 2.428a4.9 4.9 0 0 1-1.153 1.772a4.9 4.9 0 0 1-1.772 1.153c-.637.247-1.363.415-2.427.465c-1.067.047-1.406.06-4.123.06s-3.056-.01-4.123-.06c-1.064-.05-1.789-.218-2.427-.465a4.9 4.9 0 0 1-1.772-1.153a4.9 4.9 0 0 1-1.153-1.772c-.248-.637-.415-1.363-.465-2.428C2.012 15.056 2 14.717 2 12s.01-3.056.06-4.122s.217-1.79.465-2.428a4.9 4.9 0 0 1 1.153-1.772A4.9 4.9 0 0 1 5.45 2.525c.637-.248 1.362-.415 2.427-.465C8.945 2.013 9.284 2 12.001 2"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="bg-red-600 p-3 rounded hover:opacity-80 transition"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="m10 15l5.19-3L10 9zm11.56-7.83c.13.47.22 1.1.28 1.9c.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83c-.25.9-.83 1.48-1.73 1.73c-.47.13-1.33.22-2.65.28c-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44c-.9-.25-1.48-.83-1.73-1.73c-.13-.47-.22-1.1-.28-1.9c-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83c.25-.9.83-1.48 1.73-1.73c.47-.13 1.33-.22 2.65-.28c1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44c.9.25 1.48.83 1.73 1.73"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Kategori */}
|
||||
<div>
|
||||
<h3 className="font-bold text-lg mb-4 text-yellow-400">Kategori</h3>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>
|
||||
<Link href="#" className="hover:underline">
|
||||
Business
|
||||
</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 */}
|
||||
<div>
|
||||
<h3 className="font-bold text-lg mb-4 text-yellow-400">
|
||||
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 */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">
|
||||
business<span className="text-yellow-400">today</span>
|
||||
</h2>
|
||||
<p className="text-sm mt-3 text-gray-300">
|
||||
We bring you the best Premium WordPress Themes that perfect for
|
||||
news, magazine, personal blog, etc. Check our landing page for
|
||||
details.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="border-t border-gray-600 mt-10 pt-6 text-center text-sm text-gray-400">
|
||||
© 2025 JNews - Premium WordPress news & magazine theme by Jegtheme.
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,11 @@ import { useState } from "react";
|
|||
import Image from "next/image";
|
||||
import { Search, Menu } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
export default function Navbar() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<header className="w-full bg-[#022b5f] text-white">
|
||||
|
|
@ -49,16 +51,68 @@ export default function Navbar() {
|
|||
<Menu className="text-white" />
|
||||
</button>
|
||||
<nav className="hidden md:flex gap-6 text-sm font-semibold">
|
||||
<Link href="#" className="text-yellow-400">
|
||||
<Link
|
||||
href="/"
|
||||
className={pathname === "/" ? "text-yellow-400" : ""}
|
||||
>
|
||||
HOME
|
||||
</Link>
|
||||
<Link href="/category/bumn">SEPUTAR BUMN</Link>
|
||||
<Link href="#">ECONOMY</Link>
|
||||
<Link href="#">BUSINESS</Link>
|
||||
<Link href="#">OPINION</Link>
|
||||
<Link href="#">MARKETS</Link>
|
||||
<Link href="#">TECH</Link>
|
||||
<Link href="#">REAL ESTATE</Link>
|
||||
<Link
|
||||
href="/category/bumn"
|
||||
className={
|
||||
pathname === "/category/bumn" ? "text-yellow-400" : ""
|
||||
}
|
||||
>
|
||||
SEPUTAR BUMN
|
||||
</Link>
|
||||
<Link
|
||||
href="/category/economy"
|
||||
className={
|
||||
pathname === "/category/economy" ? "text-yellow-400" : ""
|
||||
}
|
||||
>
|
||||
ECONOMY
|
||||
</Link>
|
||||
<Link
|
||||
href="/category/business"
|
||||
className={
|
||||
pathname === "/category/business" ? "text-yellow-400" : ""
|
||||
}
|
||||
>
|
||||
BUSINESS
|
||||
</Link>
|
||||
<Link
|
||||
href="/category/opinion"
|
||||
className={
|
||||
pathname === "/category/opinion" ? "text-yellow-400" : ""
|
||||
}
|
||||
>
|
||||
OPINION
|
||||
</Link>
|
||||
<Link
|
||||
href="/category/markets"
|
||||
className={
|
||||
pathname === "/category/markets" ? "text-yellow-400" : ""
|
||||
}
|
||||
>
|
||||
MARKETS
|
||||
</Link>
|
||||
<Link
|
||||
href="/category/tech"
|
||||
className={
|
||||
pathname === "/category/tech" ? "text-yellow-400" : ""
|
||||
}
|
||||
>
|
||||
TECH
|
||||
</Link>
|
||||
<Link
|
||||
href="/category/real-estate"
|
||||
className={
|
||||
pathname === "/category/real-estate" ? "text-yellow-400" : ""
|
||||
}
|
||||
>
|
||||
REAL ESTATE
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ type Article = {
|
|||
title: string;
|
||||
}[];
|
||||
files: {
|
||||
file_url: string;
|
||||
fileUrl: string;
|
||||
file_alt: string;
|
||||
}[];
|
||||
};
|
||||
|
|
@ -148,7 +148,7 @@ export default function BumnNews() {
|
|||
{/* Item pertama tampil besar */}
|
||||
<div className="relative">
|
||||
<Image
|
||||
src={popular[0]?.files?.[0]?.file_url || "/dummy.jpg"}
|
||||
src={popular[0]?.files?.[0]?.fileUrl || "/dummy.jpg"}
|
||||
alt={
|
||||
popular[0]?.files?.[0]?.file_alt ||
|
||||
popular[0]?.title ||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
Loading…
Reference in New Issue