72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import { Search, ShoppingCart, Lock } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
export default function Navbar() {
|
|
const [date] = useState(() => {
|
|
const now = new Date();
|
|
return new Intl.DateTimeFormat("id-ID", {
|
|
weekday: "long",
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
}).format(now);
|
|
});
|
|
|
|
return (
|
|
<header className="w-full border-b border-gray-200">
|
|
{/* Topbar */}
|
|
<div className="flex justify-between items-center bg-teal-400 text-white text-sm px-6 py-2">
|
|
<span>{date}</span>
|
|
<div className="flex space-x-4 items-center">
|
|
<Link href="/shop">Shop</Link>
|
|
<Link href="/account">My Account</Link>
|
|
<Link href="/contact">Contact Us</Link>
|
|
<Link href="/auth" className="flex items-center gap-1">
|
|
<Lock size={14} /> Login
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Navbar */}
|
|
<div className="flex items-center justify-between px-6 py-4 bg-white">
|
|
{/* Logo */}
|
|
<Link href="/" className="text-2xl font-bold">
|
|
<span className="text-gray-900">travel</span>
|
|
<span className="text-teal-400">news</span>
|
|
</Link>
|
|
|
|
{/* Menu */}
|
|
<nav className="hidden md:flex space-x-6 font-semibold text-sm">
|
|
<Link href="/" className="hover:text-teal-400">
|
|
HOME
|
|
</Link>
|
|
<Link href="/category/travel-news" className="hover:text-teal-400">
|
|
TRAVEL NEWS
|
|
</Link>
|
|
<Link href="/category/health" className="hover:text-teal-400">
|
|
DESTINATION
|
|
</Link>
|
|
<Link href="/category/development" className="hover:text-teal-400">
|
|
TRAVEL IDEAS
|
|
</Link>
|
|
{/* <Link href="/category/popular" className="hover:text-teal-400">
|
|
FOOD & DRINK
|
|
</Link> */}
|
|
</nav>
|
|
|
|
{/* Icons */}
|
|
<div className="flex items-center space-x-4">
|
|
<button aria-label="Search">
|
|
<Search size={20} className="text-gray-700" />
|
|
</button>
|
|
<button aria-label="Cart">
|
|
<ShoppingCart size={20} className="text-gray-700" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|