blob: 42202c9c2b8422d979680f4fb33dc182617bb9ba (
plain)
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
|
import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Link, useLocation } from "wouter";
interface Props {
path: string;
label: string;
icon: IconDefinition;
}
export function MenuItem({ path, label, icon }: Props) {
const [location] = useLocation();
const isActive = location === path;
return (
<Link
href={path}
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-all duration-200 ${
isActive
? "bg-sky-50 text-sky-700"
: "text-stone-500 hover:text-stone-900 hover:bg-stone-100"
}`}
>
<FontAwesomeIcon icon={icon} />
<span className="hidden sm:inline">{label}</span>
</Link>
);
}
|
