File size: 1,471 Bytes
ab1b00d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | import React from "react";
import { Link, NavLink } from "react-router-dom";
import { ShoppingBag, Search } from "lucide-react";
const navLink = ({ isActive }) =>
"text-sm transition " + (isActive ? "text-neutral-900" : "text-neutral-600 hover:text-neutral-900");
export default function SiteHeader() {
return (
<header className="sticky top-0 z-40 border-b border-neutral-200/70 bg-white/80 backdrop-blur">
<div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
<Link to="/" className="text-base font-semibold tracking-tight">
iStore
</Link>
<nav className="hidden items-center gap-6 md:flex">
<NavLink to="/store" className={navLink}>
Store
</NavLink>
<a
className="text-sm text-neutral-600 hover:text-neutral-900"
href="https://www.apple.com/"
target="_blank"
rel="noreferrer"
title="Official Apple site"
>
Official site
</a>
</nav>
<div className="flex items-center gap-3 text-neutral-700">
<button className="rounded-full p-2 hover:bg-neutral-100" aria-label="Search (demo)">
<Search size={18} />
</button>
<button className="rounded-full p-2 hover:bg-neutral-100" aria-label="Bag (demo)">
<ShoppingBag size={18} />
</button>
</div>
</div>
</header>
);
}
|