update landing
This commit is contained in:
parent
8db50bdc90
commit
d1d7d33c41
|
|
@ -81,7 +81,7 @@ export default function DetailContent() {
|
|||
const [diseId, setDiseId] = useState(0);
|
||||
const [thumbnailImg, setThumbnailImg] = useState<File[]>([]);
|
||||
const [selectedMainImage, setSelectedMainImage] = useState<number | null>(
|
||||
null
|
||||
null,
|
||||
);
|
||||
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
|
|
@ -324,7 +324,7 @@ export default function DetailContent() {
|
|||
|
||||
// 3️⃣ FILTER sesuai articleId
|
||||
const filteredFiles = allFiles.filter(
|
||||
(file: any) => file.articleId === data.id
|
||||
(file: any) => file.articleId === data.id,
|
||||
);
|
||||
|
||||
setDetailFiles(filteredFiles);
|
||||
|
|
@ -396,12 +396,19 @@ export default function DetailContent() {
|
|||
<span>
|
||||
<span>
|
||||
{new Date(
|
||||
articleDetail?.publishedAt ?? articleDetail?.createdAt
|
||||
).toLocaleDateString("id-ID", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
articleDetail?.publishedAt || articleDetail?.createdAt,
|
||||
)
|
||||
.toLocaleString("id-ID", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
hour12: false,
|
||||
timeZone: "Asia/Jakarta",
|
||||
})
|
||||
.replace("pukul ", "")}{" "}
|
||||
WIB
|
||||
</span>
|
||||
</span>
|
||||
<span>•</span>
|
||||
|
|
@ -524,7 +531,7 @@ export default function DetailContent() {
|
|||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: decodeHtmlString(
|
||||
articleDetail?.htmlDescription || ""
|
||||
articleDetail?.htmlDescription || "",
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
|
@ -636,11 +643,11 @@ export default function DetailContent() {
|
|||
htmlFor="komentar"
|
||||
className="block text-sm font-medium mb-1"
|
||||
>
|
||||
Komentar <span className="text-green-600">*</span>
|
||||
Komentar <span className="text-blue-600">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="komentar"
|
||||
className="w-full border border-gray-300 rounded-md p-3 h-40 focus:outline-none focus:ring-2 focus:ring-green-600"
|
||||
className="w-full border border-gray-300 rounded-md p-3 h-40 focus:outline-none focus:ring-2 focus:ring-blue-600"
|
||||
{...register("comment", { required: true })}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -651,7 +658,7 @@ export default function DetailContent() {
|
|||
htmlFor="nama"
|
||||
className="block text-sm font-medium mb-1"
|
||||
>
|
||||
Nama <span className="text-green-600">*</span>
|
||||
Nama <span className="text-blue-600">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -667,7 +674,7 @@ export default function DetailContent() {
|
|||
htmlFor="email"
|
||||
className="block text-sm font-medium mb-1"
|
||||
>
|
||||
Email <span className="text-green-600">*</span>
|
||||
Email <span className="text-blue-600">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
|
|
@ -679,7 +686,7 @@ export default function DetailContent() {
|
|||
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-2 rounded-md transition mt-2 w-full"
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2 rounded-md transition mt-2 w-full"
|
||||
>
|
||||
KIRIM KOMENTAR
|
||||
</button>
|
||||
|
|
@ -712,7 +719,7 @@ export default function DetailContent() {
|
|||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-2 rounded-md transition mt-4 w-full"
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2 rounded-md transition mt-4 w-full"
|
||||
>
|
||||
Kirim
|
||||
</button>
|
||||
|
|
@ -781,7 +788,7 @@ export default function DetailContent() {
|
|||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`pb-2 text-sm font-medium ${
|
||||
activeTab === tab.id
|
||||
? "border-b-2 border-green-600 text-green-600"
|
||||
? "border-b-2 border-blue-600 text-blue-600"
|
||||
: "text-gray-600"
|
||||
}`}
|
||||
>
|
||||
|
|
@ -847,7 +854,7 @@ export default function DetailContent() {
|
|||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h3 className="text-base font-semibold mb-2 text-gray-800 border-b pb-1 border-green-600 inline-block">
|
||||
<h3 className="text-base font-semibold mb-2 text-gray-800 border-b pb-1 border-blue-600 inline-block">
|
||||
Recommended
|
||||
</h3>
|
||||
|
||||
|
|
@ -874,7 +881,7 @@ export default function DetailContent() {
|
|||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}
|
||||
},
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -904,7 +911,7 @@ export default function DetailContent() {
|
|||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}
|
||||
},
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ export default function Development() {
|
|||
<div className="mb-4">
|
||||
<h2 className="text-xl font-black text-[#000]">JAGA NEGERI</h2>
|
||||
|
||||
<div className="w-10 h-1 bg-green-600 mt-1 rounded"></div>
|
||||
<div className="w-10 h-1 bg-blue-600 mt-1 rounded"></div>
|
||||
</div>
|
||||
|
||||
<div className="border-b border-gray-300 mb-5"></div>
|
||||
|
|
@ -95,7 +95,7 @@ export default function Development() {
|
|||
|
||||
<div className="flex flex-col">
|
||||
<p className="text-[11px] font-bold text-black">
|
||||
<span className="border-b-2 border-green-600 pb-[1px]">
|
||||
<span className="border-b-2 border-blue-600 pb-[1px]">
|
||||
{item.categories?.[0]?.title || "Kategori"}
|
||||
</span>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export default function Footer() {
|
|||
<div className="flex items-center justify-end">
|
||||
<div className="flex justify-center md:justify-end">
|
||||
<Image
|
||||
src="/bumn.png"
|
||||
src="/berita-bumn-logo.png"
|
||||
alt="Logo"
|
||||
width={230}
|
||||
height={230}
|
||||
|
|
@ -38,7 +38,7 @@ export default function Footer() {
|
|||
className="w-full border border-gray-300 rounded-md px-4 py-3 outline-none"
|
||||
/>
|
||||
|
||||
<button className="mt-4 bg-green-600 hover:bg-green-500 text-black px-6 py-3 rounded-md font-medium">
|
||||
<button className="mt-4 bg-blue-600 hover:bg-blue-500 text-white px-6 py-3 rounded-md font-medium">
|
||||
SIGN UP
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -62,7 +62,7 @@ export default function Footer() {
|
|||
</div>
|
||||
|
||||
<p className="text-start text-gray-500 text-sm mt-8 pl-5">
|
||||
© 2025 Milenial Bersuara - All Rights Reserved.
|
||||
© 2025 Berita Bumn - All Rights Reserved.
|
||||
</p>
|
||||
</footer>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ export default function Header() {
|
|||
{/* FLASH STRIP */}
|
||||
<div className="flex items-center justify-between mt-6 mb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<h4 className="text-green-600 font-semibold">Flash</h4>
|
||||
<h4 className="text-blue-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>
|
||||
|
|
@ -125,7 +125,7 @@ export default function Header() {
|
|||
|
||||
{/* 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-green-700 text-white px-2 py-1 rounded-sm">
|
||||
<span className="text-[11px] bg-blue-700 text-white px-2 py-1 rounded-sm">
|
||||
{mainArticle.categoryName ||
|
||||
mainArticle.categories?.[0]?.title ||
|
||||
"Berita"}
|
||||
|
|
@ -144,14 +144,13 @@ export default function Header() {
|
|||
</span>
|
||||
<span>•</span>
|
||||
<span>
|
||||
{new Date(mainArticle.publishedAt).toLocaleDateString(
|
||||
"id-ID",
|
||||
{
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}
|
||||
)}
|
||||
{new Date(
|
||||
mainArticle.publishedAt || mainArticle.createdAt,
|
||||
).toLocaleDateString("id-ID", {
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -190,7 +189,9 @@ export default function Header() {
|
|||
{item.title}
|
||||
</p>
|
||||
<span className="text-xs text-gray-500 mt-1">
|
||||
{new Date(item.publishedAt).toLocaleDateString("id-ID", {
|
||||
{new Date(
|
||||
item.publishedAt || item.createdAt,
|
||||
).toLocaleDateString("id-ID", {
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ export default function NewsTerkini() {
|
|||
<section className="max-w-7xl mx-auto px-4 grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-6">
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-gray-900">BERITA TERKINI</h2>
|
||||
<div className="w-14 h-1 bg-green-600 mt-1 mb-4"></div>
|
||||
<div className="w-14 h-1 bg-blue-600 mt-1 mb-4"></div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{articles.map((item) => (
|
||||
|
|
@ -81,7 +81,7 @@ export default function NewsTerkini() {
|
|||
<div className="flex gap-4">
|
||||
<div className="flex-1">
|
||||
{/* CATEGORY */}
|
||||
<p className="text-[11px] text-green-700 font-semibold mb-1">
|
||||
<p className="text-[11px] text-blue-700 font-semibold mb-1">
|
||||
{item.categories?.[0]?.title || "Kategori"}
|
||||
</p>
|
||||
|
||||
|
|
@ -98,7 +98,15 @@ export default function NewsTerkini() {
|
|||
{/* AUTHOR + DATE */}
|
||||
<p className="text-xs text-gray-400 mt-2">
|
||||
By {item.customCreatorName || item.createdByName} —{" "}
|
||||
{formatDate(item.publishedAt)}
|
||||
<span>
|
||||
{new Date(
|
||||
item.publishedAt || item.createdAt,
|
||||
).toLocaleDateString("id-ID", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative w-40 h-28 rounded overflow-hidden flex-shrink-0">
|
||||
|
|
@ -115,14 +123,14 @@ export default function NewsTerkini() {
|
|||
</div>
|
||||
|
||||
{/* LOAD MORE */}
|
||||
<div className="text-center mt-4 text-green-600 text-sm cursor-pointer">
|
||||
<div className="text-center mt-4 text-blue-600 text-sm cursor-pointer">
|
||||
LOAD MORE ↓
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-1">
|
||||
<h2 className="text-lg font-bold text-gray-900">TERBANYAK DIBAGIKAN</h2>
|
||||
<div className="w-14 h-1 bg-green-600 mt-1 mb-4"></div>
|
||||
<div className="w-14 h-1 bg-blue-600 mt-1 mb-4"></div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{popular.map((item, index) => (
|
||||
|
|
@ -132,7 +140,7 @@ export default function NewsTerkini() {
|
|||
className="flex gap-3 border-b pb-4"
|
||||
>
|
||||
{/* NOMOR */}
|
||||
<div className="text-green-600 font-extrabold text-3xl leading-none">
|
||||
<div className="text-blue-600 font-extrabold text-3xl leading-none">
|
||||
{(index + 1).toString().padStart(2, "0")}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ export default function LatestNews() {
|
|||
{/* TITLE */}
|
||||
<div className="mb-4">
|
||||
<h2 className="text-xl font-black text-[#000]">BERITA POPULER</h2>
|
||||
<div className="w-10 h-1 bg-green-600 mt-1 rounded"></div>
|
||||
<div className="w-10 h-1 bg-blue-600 mt-1 rounded"></div>
|
||||
</div>
|
||||
|
||||
{/* GRID 4 KOLOM */}
|
||||
|
|
@ -82,7 +82,7 @@ export default function LatestNews() {
|
|||
|
||||
{/* BADGE CATEGORY DI DALAM GAMBAR */}
|
||||
<div className="absolute bottom-2 left-2">
|
||||
<span className="px-3 py-1 text-[10px] font-semibold bg-green-600 text-white rounded">
|
||||
<span className="px-3 py-1 text-[10px] font-semibold bg-blue-600 text-white rounded">
|
||||
{item.categories?.[0]?.title || "Kategori"}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -100,7 +100,9 @@ export default function LatestNews() {
|
|||
</span>
|
||||
<span className="text-yellow-500">-</span>
|
||||
<span>
|
||||
{new Date(item.publishedAt).toLocaleDateString("id-ID", {
|
||||
{new Date(
|
||||
item.publishedAt || item.createdAt,
|
||||
).toLocaleDateString("id-ID", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
|
|
|
|||
|
|
@ -1,129 +1,36 @@
|
|||
// components/landing-page/navbar.tsx
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Search } from "lucide-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();
|
||||
const isActive = (href: any) => {
|
||||
return pathname === href || pathname.startsWith(href + "/");
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="w-full bg-[#022b5f] text-white">
|
||||
<div className="max-w-7xl mx-auto px-2 py-2">
|
||||
<div className="flex items-center justify-between px-6 py-2 border-b border-[#053d84]">
|
||||
{/* Logo + Search */}
|
||||
<div className="flex items-center gap-4">
|
||||
<Image src="/bumn.png" alt="Logo" width={40} height={40} />
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
className="px-3 py-2 rounded-md w-[280px] text-black focus:outline-none bg-white"
|
||||
/>
|
||||
<Search
|
||||
className="absolute right-2 top-2.5 text-white"
|
||||
size={18}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full bg-white py-4 border-b">
|
||||
<div className="max-w-screen-xl mx-auto flex flex-col justify-between px-4">
|
||||
{/* Left: Logo */}
|
||||
<div className="flex flex-row justify-between mb-3">
|
||||
<div className="flex items-center">
|
||||
<Image
|
||||
src="/berita-bumn-logo.png"
|
||||
alt="Kritik Tajam Logo"
|
||||
width={140}
|
||||
height={100}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Date + Login */}
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<span>Jumat, April 18, 2025</span>
|
||||
<Link
|
||||
href="/auth"
|
||||
className="flex items-center gap-1 font-semibold"
|
||||
>
|
||||
Login
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* NAVBAR */}
|
||||
<div className="flex items-center justify-between px-6 py-3">
|
||||
{/* Left: Menu Items */}
|
||||
<div className="flex items-center gap-6">
|
||||
<button onClick={() => setOpen(!open)}>
|
||||
<Menu className="text-white" />
|
||||
</button>
|
||||
<nav className="hidden md:flex gap-6 text-sm font-semibold">
|
||||
<Link
|
||||
href="/"
|
||||
className={pathname === "/" ? "text-yellow-400" : ""}
|
||||
>
|
||||
HOME
|
||||
</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>
|
||||
|
||||
{/* Right: Socials + Subscribe */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex gap-3 text-white text-lg">
|
||||
<Link href="#" aria-label="Facebook">
|
||||
{/* Social Icons */}
|
||||
<div className="hidden md:flex items-center gap-5 text-black text-xl">
|
||||
<Link href="#">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15"
|
||||
height="15"
|
||||
width="18"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
|
|
@ -132,11 +39,11 @@ export default function Navbar() {
|
|||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
<Link href="#" aria-label="Twitter">
|
||||
|
||||
<Link href="#">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15"
|
||||
height="15"
|
||||
width="18"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
|
|
@ -145,95 +52,157 @@ export default function Navbar() {
|
|||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
<Link href="#" aria-label="Google" className="text-[#F5F5F5]">
|
||||
|
||||
<Link href="#">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15"
|
||||
height="15"
|
||||
width="18"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
// fill-rule="evenodd"
|
||||
d="M7.796 14.333v-2.618h7.211c.066.382.12.763.12 1.265c0 4.364-2.923 7.462-7.33 7.462A7.63 7.63 0 0 1 .16 12.806a7.63 7.63 0 0 1 7.636-7.637c2.062 0 3.786.753 5.117 1.997L10.84 9.162c-.567-.546-1.56-1.178-3.044-1.178c-2.607 0-4.734 2.16-4.734 4.822s2.127 4.821 4.734 4.821c3.022 0 4.157-2.17 4.331-3.294zm13.27-2.6H23.2v2.134h-2.133V16h-2.134v-2.133H16.8v-2.134h2.133V9.6h2.134z"
|
||||
// clip-rule="evenodd"
|
||||
d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
<Link href="#" aria-label="Pinterest">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15"
|
||||
height="15"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<defs>
|
||||
<path
|
||||
id="akarIconsPinterestFill0"
|
||||
fill="#fff"
|
||||
d="M0 0h24v24H0z"
|
||||
/>
|
||||
</defs>
|
||||
<g fill="none">
|
||||
<g
|
||||
// clip-path="url(#akarIconsPinterestFill1)"
|
||||
>
|
||||
<g
|
||||
// clip-path="url(#akarIconsPinterestFill2)"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M0 12c0 5.123 3.211 9.497 7.73 11.218c-.11-.937-.227-2.482.025-3.566c.217-.932 1.401-5.938 1.401-5.938s-.357-.715-.357-1.774c0-1.66.962-2.9 2.161-2.9c1.02 0 1.512.765 1.512 1.682c0 1.025-.653 2.557-.99 3.978c-.281 1.189.597 2.159 1.769 2.159c2.123 0 3.756-2.239 3.756-5.471c0-2.861-2.056-4.86-4.991-4.86c-3.398 0-5.393 2.549-5.393 5.184c0 1.027.395 2.127.889 2.726a.36.36 0 0 1 .083.343c-.091.378-.293 1.189-.332 1.355c-.053.218-.173.265-.4.159c-1.492-.694-2.424-2.875-2.424-4.627c0-3.769 2.737-7.229 7.892-7.229c4.144 0 7.365 2.953 7.365 6.899c0 4.117-2.595 7.431-6.199 7.431c-1.211 0-2.348-.63-2.738-1.373c0 0-.599 2.282-.744 2.84c-.282 1.084-1.064 2.456-1.549 3.235C9.584 23.815 10.77 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0S0 5.373 0 12"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="akarIconsPinterestFill1">
|
||||
<use href="#akarIconsPinterestFill0" />
|
||||
</clipPath>
|
||||
<clipPath id="akarIconsPinterestFill2">
|
||||
<use href="#akarIconsPinterestFill0" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</g>
|
||||
</svg>
|
||||
</Link>
|
||||
|
||||
<Link href="#" aria-label="Vk">
|
||||
<Link href="#">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15"
|
||||
height="15"
|
||||
width="18"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
// fill-rule="evenodd"
|
||||
d="M23.45 5.948c.166-.546 0-.948-.795-.948H20.03c-.668 0-.976.347-1.143.73c0 0-1.335 3.196-3.226 5.272c-.612.602-.89.793-1.224.793c-.167 0-.418-.191-.418-.738V5.948c0-.656-.184-.948-.74-.948H9.151c-.417 0-.668.304-.668.593c0 .621.946.765 1.043 2.513v3.798c0 .833-.153.984-.487.984c-.89 0-3.055-3.211-4.34-6.885C4.45 5.288 4.198 5 3.527 5H.9c-.75 0-.9.347-.9.73c0 .682.89 4.07 4.145 8.551C6.315 17.341 9.37 19 12.153 19c1.669 0 1.875-.368 1.875-1.003v-2.313c0-.737.158-.884.687-.884c.39 0 1.057.192 2.615 1.667C19.11 18.216 19.403 19 20.405 19h2.625c.75 0 1.126-.368.91-1.096c-.238-.724-1.088-1.775-2.215-3.022c-.612-.71-1.53-1.475-1.809-1.858c-.389-.491-.278-.71 0-1.147c0 0 3.2-4.426 3.533-5.929"
|
||||
// clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
<Link href="#" aria-label="Wifi">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15"
|
||||
height="15"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 21q-1.05 0-1.775-.725T9.5 18.5t.725-1.775T12 16t1.775.725t.725 1.775t-.725 1.775T12 21m-5.65-5.65l-2.1-2.15q1.475-1.475 3.463-2.337T12 10t4.288.875t3.462 2.375l-2.1 2.1q-1.1-1.1-2.55-1.725T12 13t-3.1.625t-2.55 1.725M2.1 11.1L0 9q2.3-2.35 5.375-3.675T12 4t6.625 1.325T24 9l-2.1 2.1q-1.925-1.925-4.462-3.012T12 7T6.563 8.088T2.1 11.1"
|
||||
d="M12.244 4c.534.003 1.87.016 3.29.073l.504.022c1.429.067 2.857.183 3.566.38c.945.266 1.687 1.04 1.938 2.022c.4 1.56.45 4.602.456 5.339l.001.152v.174c-.007.737-.057 3.78-.457 5.339c-.254.985-.997 1.76-1.938 2.022c-.709.197-2.137.313-3.566.38l-.504.023c-1.42.056-2.756.07-3.29.072l-.235.001h-.255c-1.13-.007-5.856-.058-7.36-.476c-.944-.266-1.687-1.04-1.938-2.022c-.4-1.56-.45-4.602-.456-5.339v-.326c.006-.737.056-3.78.456-5.339c.254-.985.997-1.76 1.939-2.021c1.503-.419 6.23-.47 7.36-.476zM9.999 8.5v7l6-3.5z"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
<button className="bg-yellow-400 text-black px-4 py-2 rounded-sm font-semibold">
|
||||
SUBSCRIBE
|
||||
</div>
|
||||
</div>
|
||||
{/* Middle Menu */}
|
||||
<div className="flex flex-row justify-between">
|
||||
<nav className="hidden md:flex items-center gap-10 text-sm font-semibold">
|
||||
<Link
|
||||
href="/"
|
||||
className={
|
||||
isActive("/")
|
||||
? "text-blue-400 underline"
|
||||
: "text-black hover:text-blue-500"
|
||||
}
|
||||
>
|
||||
HOME
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/category/bumn"
|
||||
className={
|
||||
isActive("/category/bumn")
|
||||
? "text-blue-400 underline"
|
||||
: "text-black hover:text-blue-500"
|
||||
}
|
||||
>
|
||||
SEPUTAR BUMN
|
||||
</Link>
|
||||
<Link
|
||||
href="/category/economy"
|
||||
className={
|
||||
isActive("/category/economy")
|
||||
? "text-blue-400 underline"
|
||||
: "text-black hover:text-blue-500"
|
||||
}
|
||||
>
|
||||
ECONOMY
|
||||
</Link>
|
||||
<Link
|
||||
href="/category/business"
|
||||
className={
|
||||
isActive("/category/business")
|
||||
? "text-blue-400 underline"
|
||||
: "text-black hover:text-blue-500"
|
||||
}
|
||||
>
|
||||
BUSINESS
|
||||
</Link>
|
||||
<Link
|
||||
href="/category/opinion"
|
||||
className={
|
||||
isActive("/category/opinion")
|
||||
? "text-blue-400 underline"
|
||||
: "text-black hover:text-blue-500"
|
||||
}
|
||||
>
|
||||
OPINION
|
||||
</Link>
|
||||
<Link
|
||||
href="/category/markets"
|
||||
className={
|
||||
isActive("/category/markets")
|
||||
? "text-blue-400 underline"
|
||||
: "text-black hover:text-blue-500"
|
||||
}
|
||||
>
|
||||
MARKETS
|
||||
</Link>
|
||||
<Link
|
||||
href="/category/tech"
|
||||
className={
|
||||
isActive("/category/tech")
|
||||
? "text-blue-400 underline"
|
||||
: "text-black hover:text-blue-500"
|
||||
}
|
||||
>
|
||||
TECH
|
||||
</Link>
|
||||
<Link
|
||||
href="/category/real-estate"
|
||||
className={
|
||||
isActive("/category/real-estate")
|
||||
? "text-blue-400 underline"
|
||||
: "text-black hover:text-blue-500"
|
||||
}
|
||||
>
|
||||
REAL ESTATE
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
// onClick={() => document.documentElement.classList.toggle("dark")}
|
||||
className="w-10 h-5 rounded-full bg-gray-300 dark:bg-gray-700 relative transition-all"
|
||||
>
|
||||
<div className="w-5 h-5 bg-white dark:bg-black rounded-full shadow absolute top-0 left-0 dark:left-5 transition-all"></div>
|
||||
</button>
|
||||
|
||||
{/* BURGER BUTTON (mobile menu) */}
|
||||
<button className="md:hidden p-2 rounded-lg border">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={2}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button className="p-2 border rounded-full">
|
||||
<Search size={15} />
|
||||
</button>
|
||||
<Link href={"/auth"}>
|
||||
<button className="bg-blue-600 text-white px-5 py-2 rounded-full text-sm font-semibold">
|
||||
LOGIN
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ export default function OpinionNews() {
|
|||
{/* TITLE */}
|
||||
<div className="mb-4">
|
||||
<h2 className="text-xl font-black text-[#000]">BERITA OPINI</h2>
|
||||
<div className="w-10 h-1 bg-green-600 mt-1 rounded"></div>
|
||||
<div className="w-10 h-1 bg-blue-600 mt-1 rounded"></div>
|
||||
</div>
|
||||
|
||||
{/* GRID 4 KOLOM */}
|
||||
|
|
@ -82,7 +82,7 @@ export default function OpinionNews() {
|
|||
|
||||
{/* BADGE CATEGORY DI DALAM GAMBAR */}
|
||||
<div className="absolute bottom-2 left-2">
|
||||
<span className="px-3 py-1 text-[10px] font-semibold bg-green-600 text-white rounded">
|
||||
<span className="px-3 py-1 text-[10px] font-semibold bg-blue-600 text-white rounded">
|
||||
{item.categories?.[0]?.title || "Kategori"}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -100,7 +100,9 @@ export default function OpinionNews() {
|
|||
</span>
|
||||
<span className="text-yellow-500">-</span>
|
||||
<span>
|
||||
{new Date(item.publishedAt).toLocaleDateString("id-ID", {
|
||||
{new Date(
|
||||
item.publishedAt || item.createdAt,
|
||||
).toLocaleDateString("id-ID", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 383 KiB |
Loading…
Reference in New Issue