1 files changed, 28 insertions, 0 deletions
diff --git a/frontend/src/components/MenuItem.tsx b/frontend/src/components/MenuItem.tsx
new file mode 100644
index 0000000..45358c8
--- /dev/null
+++ b/frontend/src/components/MenuItem.tsx
@@ -0,0 +1,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 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>{label}</span>
+		</Link>
+	);
+}