blob: 29e397ca70e1447172d82368f7f20dd76f46bd23 (
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 sm:space-x-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
isActive
? "bg-blue-100 text-blue-700"
: "text-gray-600 hover:text-gray-900 hover:bg-gray-100"
}`}
>
<FontAwesomeIcon icon={icon} />
<span className="hidden sm:inline">{label}</span>
</Link>
);
}
|
