Initial commit: Pulse web app

src/components/Navigation.jsx

@@ -0,0 +1,38 @@
+import { NavLink } from 'react-router-dom'
+import { Home, ListChecks, CheckSquare, BarChart3 } from 'lucide-react'
+import clsx from 'clsx'
+
+export default function Navigation() {
+  const navItems = [
+    { to: '/', icon: Home, label: 'Сегодня' },
+    { to: '/habits', icon: ListChecks, label: 'Привычки' },
+    { to: '/tasks', icon: CheckSquare, label: 'Задачи' },
+    { to: '/stats', icon: BarChart3, label: 'Статистика' },
+  ]
+
+  return (
+    <nav className="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-xl border-t border-gray-100 z-50">
+      <div className="max-w-lg mx-auto px-4">
+        <div className="flex items-center justify-around py-2">
+          {navItems.map(({ to, icon: Icon, label }) => (
+            <NavLink
+              key={to}
+              to={to}
+              className={({ isActive }) =>
+                clsx(
+                  'flex flex-col items-center gap-1 px-3 py-2 rounded-xl transition-all',
+                  isActive
+                    ? 'text-primary-600 bg-primary-50'
+                    : 'text-gray-400 hover:text-gray-600'
+                )
+              }
+            >
+              <Icon size={22} />
+              <span className="text-xs font-medium">{label}</span>
+            </NavLink>
+          ))}
+        </div>
+      </div>
+    </nav>
+  )
+}