62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
|
|
|
|
type Props = {
|
|
section: string;
|
|
subtitle?: string;
|
|
};
|
|
|
|
const items = ["profile", "project"];
|
|
|
|
export default function Nav({ section, subtitle }: Props) {
|
|
return (
|
|
<nav
|
|
style={{
|
|
display: "flex",
|
|
gap: 0,
|
|
borderBottom: "1px solid var(--border)",
|
|
fontFamily: "var(--mono)",
|
|
fontSize: 13,
|
|
userSelect: "none",
|
|
}}>
|
|
|
|
{items.map((item) => (
|
|
<Link key={item} href={"/" + item}>
|
|
<button
|
|
|
|
style={{
|
|
background: section === item ? "var(--surface)" : "transparent",
|
|
color: section === item ? "var(--accent)" : "var(--muted)",
|
|
border: "none",
|
|
borderBottom: section === item ? "2px solid var(--accent)" : "2px solid transparent",
|
|
padding: "12px 24px",
|
|
cursor: "pointer",
|
|
fontFamily: "inherit",
|
|
fontSize: "inherit",
|
|
fontWeight: 500,
|
|
letterSpacing: "0.03em",
|
|
textTransform: "lowercase",
|
|
transition: "all 0.2s",
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
if (section !== item)
|
|
(e.target as HTMLElement).style.color = "var(--fg)";
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
if (section !== item)
|
|
(e.target as HTMLElement).style.color = "var(--muted)";
|
|
}}>
|
|
|
|
<span style={{ opacity: 0.4, marginRight: 6 }}></span>
|
|
{item}
|
|
</button></Link>
|
|
))}
|
|
|
|
<p>{subtitle}</p>
|
|
|
|
</nav>
|
|
);
|
|
}
|