update
This commit is contained in:
parent
850e381f49
commit
6b4d0be0a4
|
|
@ -1,105 +1,204 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
import Image from "next/image";
|
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() {
|
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-[#1a1a1a] text-gray-300 py-12">
|
<footer className="bg-[#002b5c] text-white py-12">
|
||||||
<div className="max-w-5xl mx-auto text-center px-4">
|
<div className="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-10">
|
||||||
<div className="relative inline-block mb-6">
|
{/* Recent News */}
|
||||||
<Image
|
<div>
|
||||||
src="/harapan.png"
|
<h3 className="font-bold text-lg mb-4 text-yellow-400">
|
||||||
alt="Kabar Harapan"
|
Recent News
|
||||||
width={977}
|
</h3>
|
||||||
height={353}
|
{loading && <p className="text-sm">Memuat...</p>}
|
||||||
className="mx-auto"
|
{!loading &&
|
||||||
/>
|
articles.map((article) => (
|
||||||
|
<div key={article.id} className="flex mb-4">
|
||||||
|
<div className="w-20 h-16 relative flex-shrink-0">
|
||||||
|
<Image
|
||||||
|
src={
|
||||||
|
article.thumbnailUrl ||
|
||||||
|
article.files?.[0]?.file_url ||
|
||||||
|
"/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>
|
||||||
|
|
||||||
<p className="max-w-2xl mx-auto text-sm mb-4">
|
{/* Kategori */}
|
||||||
KabarHarapan.com adalah media online yang berkomitmen untuk
|
<div>
|
||||||
menyebarkan berita yang menginspirasi dan mendorong perubahan positif
|
<h3 className="font-bold text-lg mb-4 text-yellow-400">Kategori</h3>
|
||||||
di masyarakat. Kami percaya bahwa di balik setiap cerita, ada potensi
|
<ul className="space-y-2 text-sm">
|
||||||
untuk memberikan harapan dan memberdayakan individu untuk menciptakan
|
<li>
|
||||||
perbedaan dalam dunia ini.
|
<Link href="#" className="hover:underline">
|
||||||
</p>
|
Business
|
||||||
|
</Link>
|
||||||
<p className="text-sm mb-6">
|
</li>
|
||||||
Contact us:{" "}
|
<li>
|
||||||
<a
|
<Link href="#" className="hover:underline">
|
||||||
href="mailto:contact@kabarharapan.com"
|
Cryptocurrency
|
||||||
className="text-blue-400 hover:underline"
|
</Link>
|
||||||
>
|
</li>
|
||||||
contact@kabarharapan.com
|
<li>
|
||||||
</a>
|
<Link href="#" className="hover:underline">
|
||||||
</p>
|
Economy
|
||||||
|
</Link>
|
||||||
<div className="flex justify-center space-x-6">
|
</li>
|
||||||
<a
|
<li>
|
||||||
href="#"
|
<Link href="#" className="hover:underline">
|
||||||
className="bg-blue-600 p-3 rounded hover:opacity-80 transition"
|
Gadget
|
||||||
>
|
</Link>
|
||||||
<svg
|
</li>
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<li>
|
||||||
width="24"
|
<Link href="#" className="hover:underline">
|
||||||
height="24"
|
Markets
|
||||||
viewBox="0 0 24 24"
|
</Link>
|
||||||
>
|
</li>
|
||||||
<path
|
<li>
|
||||||
fill="currentColor"
|
<Link href="#" className="hover:underline">
|
||||||
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"
|
Opinion
|
||||||
/>
|
</Link>
|
||||||
</svg>
|
</li>
|
||||||
</a>
|
<li>
|
||||||
<a
|
<Link href="#" className="hover:underline">
|
||||||
href="#"
|
Politics
|
||||||
className="bg-sky-400 p-3 rounded hover:opacity-80 transition"
|
</Link>
|
||||||
>
|
</li>
|
||||||
<svg
|
<li>
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<Link href="#" className="hover:underline">
|
||||||
width="24"
|
Real Estate
|
||||||
height="24"
|
</Link>
|
||||||
viewBox="0 0 24 24"
|
</li>
|
||||||
>
|
<li>
|
||||||
<path
|
<Link href="#" className="hover:underline">
|
||||||
fill="currentColor"
|
Startup
|
||||||
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"
|
</Link>
|
||||||
/>
|
</li>
|
||||||
</svg>
|
<li>
|
||||||
</a>
|
<Link href="#" className="hover:underline">
|
||||||
<a
|
World
|
||||||
href="#"
|
</Link>
|
||||||
className="bg-gradient-to-tr from-purple-500 via-pink-500 to-yellow-500 p-3 rounded hover:opacity-80 transition"
|
</li>
|
||||||
>
|
</ul>
|
||||||
<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>
|
||||||
|
|
||||||
|
{/* 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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -5,9 +5,11 @@ import { useState } from "react";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import { Search, Menu } from "lucide-react";
|
import { Search, Menu } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import { usePathname } from "next/navigation";
|
||||||
|
|
||||||
export default function Navbar() {
|
export default function Navbar() {
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
|
const pathname = usePathname();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className="w-full bg-[#022b5f] text-white">
|
<header className="w-full bg-[#022b5f] text-white">
|
||||||
|
|
@ -49,16 +51,68 @@ export default function Navbar() {
|
||||||
<Menu className="text-white" />
|
<Menu className="text-white" />
|
||||||
</button>
|
</button>
|
||||||
<nav className="hidden md:flex gap-6 text-sm font-semibold">
|
<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
|
HOME
|
||||||
</Link>
|
</Link>
|
||||||
<Link href="/category/bumn">SEPUTAR BUMN</Link>
|
<Link
|
||||||
<Link href="#">ECONOMY</Link>
|
href="/category/bumn"
|
||||||
<Link href="#">BUSINESS</Link>
|
className={
|
||||||
<Link href="#">OPINION</Link>
|
pathname === "/category/bumn" ? "text-yellow-400" : ""
|
||||||
<Link href="#">MARKETS</Link>
|
}
|
||||||
<Link href="#">TECH</Link>
|
>
|
||||||
<Link href="#">REAL ESTATE</Link>
|
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>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ type Article = {
|
||||||
title: string;
|
title: string;
|
||||||
}[];
|
}[];
|
||||||
files: {
|
files: {
|
||||||
file_url: string;
|
fileUrl: string;
|
||||||
file_alt: string;
|
file_alt: string;
|
||||||
}[];
|
}[];
|
||||||
};
|
};
|
||||||
|
|
@ -148,7 +148,7 @@ export default function BumnNews() {
|
||||||
{/* Item pertama tampil besar */}
|
{/* Item pertama tampil besar */}
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Image
|
<Image
|
||||||
src={popular[0]?.files?.[0]?.file_url || "/dummy.jpg"}
|
src={popular[0]?.files?.[0]?.fileUrl || "/dummy.jpg"}
|
||||||
alt={
|
alt={
|
||||||
popular[0]?.files?.[0]?.file_alt ||
|
popular[0]?.files?.[0]?.file_alt ||
|
||||||
popular[0]?.title ||
|
popular[0]?.title ||
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
Loading…
Reference in New Issue