Initial food blog app

app/components/Nav.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { motion } from "framer-motion"
+
+const navItems = [
+  { href: "/", label: "Home", icon: "◈" },
+  { href: "/map", label: "Map", icon: "◉" },
+  { href: "/admin", label: "Add", icon: "+" },
+]
+
+export default function Nav() {
+  const pathname = usePathname()
+
+  return (
+    <>
+      {/* Desktop top nav */}
+      <nav className="hidden md:flex items-center justify-between px-8 py-5 border-b border-white/5 sticky top-0 z-50 bg-[#0d0d0d]/80 backdrop-blur-xl">
+        <Link href="/" className="text-2xl font-black tracking-tighter text-[#f5f5f5] hover:text-[#f59e0b] transition-colors">
+          food.
+        </Link>
+        <div className="flex items-center gap-8">
+          {navItems.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={`text-sm font-medium transition-colors hover:text-[#f59e0b] ${
+                pathname === item.href ? "text-[#f59e0b]" : "text-white/60"
+              }`}
+            >
+              {item.label}
+            </Link>
+          ))}
+        </div>
+      </nav>
+
+      {/* Mobile bottom nav */}
+      <nav className="md:hidden fixed bottom-0 left-0 right-0 z-50 border-t border-white/5 bg-[#0d0d0d]/90 backdrop-blur-xl">
+        <div className="flex items-center justify-around py-3">
+          {navItems.map((item) => {
+            const isActive = pathname === item.href
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className="flex flex-col items-center gap-1 px-6 py-1"
+              >
+                <motion.div
+                  whileTap={{ scale: 0.85 }}
+                  className={`text-xl transition-colors ${
+                    isActive ? "text-[#f59e0b]" : "text-white/40"
+                  }`}
+                >
+                  {item.icon}
+                </motion.div>
+                <span
+                  className={`text-[10px] font-medium tracking-wider uppercase transition-colors ${
+                    isActive ? "text-[#f59e0b]" : "text-white/30"
+                  }`}
+                >
+                  {item.label}
+                </span>
+              </Link>
+            )
+          })}
+        </div>
+      </nav>
+    </>
+  )
+}