mvp

src/components/header.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { Button } from '@/components/ui/button'
+import { Plus, FileText, Settings } from 'lucide-react'
+
+export function Header() {
+  const pathname = usePathname()
+
+  return (
+    <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container mx-auto px-4 flex h-14 items-center justify-between">
+        <div className="flex items-center gap-4">
+          <Link href="/" className="flex items-center gap-2">
+            <span className="text-xl font-bold">Recall</span>
+          </Link>
+          <nav className="flex items-center gap-1">
+            <Link href="/notes">
+              <Button
+                variant={pathname === '/notes' ? 'secondary' : 'ghost'}
+                size="sm"
+                className="gap-1.5"
+              >
+                <FileText className="h-4 w-4" />
+                Notas
+              </Button>
+            </Link>
+            <Link href="/settings">
+              <Button
+                variant={pathname === '/settings' ? 'secondary' : 'ghost'}
+                size="sm"
+                className="gap-1.5"
+              >
+                <Settings className="h-4 w-4" />
+                Configuración
+              </Button>
+            </Link>
+          </nav>
+        </div>
+        <Link href="/new">
+          <Button size="sm" className="gap-1.5">
+            <Plus className="h-4 w-4" />
+            Nueva nota
+          </Button>
+        </Link>
+      </div>
+    </header>
+  )
+}