59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
|
|
type Props = {
|
|
section: string;
|
|
setSection: (s: string) => void;
|
|
};
|
|
|
|
const items = ["profile", "projects"];
|
|
|
|
export default function Nav({ section, setSection }: Props) {
|
|
return (
|
|
<nav
|
|
style={{
|
|
display: "flex",
|
|
gap: 0,
|
|
borderBottom: "1px solid var(--border)",
|
|
fontFamily: "var(--mono)",
|
|
fontSize: 13,
|
|
userSelect: "none",
|
|
}}>
|
|
|
|
{items.map((item) => (
|
|
|
|
<button
|
|
key={item}
|
|
onClick={() => setSection(item)}
|
|
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>
|
|
))}
|
|
|
|
</nav>
|
|
);
|
|
}
|