Initial commit

frontend/src/components/Navbar.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Film, Heart, Users } from 'lucide-react';
+import { useAppContext } from '../store/AppContext';
+
+export const Navbar: React.FC = () => {
+  const location = useLocation();
+  const { matches } = useAppContext();
+
+  const navItems = [
+    { path: '/', icon: Users, label: 'Partner' },
+    { path: '/swipe', icon: Film, label: 'Discover' },
+    { path: '/matches', icon: Heart, label: 'Matches', badge: matches.length },
+  ];
+
+  return (
+    <nav className="fixed bottom-0 w-full bg-surface border-t border-slate-700 pb-safe">
+      <div className="flex justify-around items-center h-16 max-w-md mx-auto">
+        {navItems.map(({ path, icon: Icon, label, badge }) => {
+          const isActive = location.pathname === path;
+          return (
+            <Link
+              key={path}
+              to={path}
+              className={`flex flex-col items-center justify-center w-full h-full space-y-1 ${
+                isActive ? 'text-primary' : 'text-slate-400 hover:text-slate-200'
+              }`}
+            >
+              <div className="relative">
+                <Icon size={24} />
+                {badge !== undefined && badge > 0 && (
+                  <span className="absolute -top-2 -right-2 bg-primary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
+                    {badge}
+                  </span>
+                )}
+              </div>
+              <span className="text-xs font-medium">{label}</span>
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+};