"use client";

import { useState } from "react";

const NAV = [
  { label: "Home", icon: "⌂", href: "#home" },
  { label: "Explore", icon: "⌕", href: "#explore" },
  { label: "Messages", icon: "✉", href: "#messages", badge: 3 },
  { label: "Activity", icon: "♡", href: "#activity" },
];

export function SocialAppNavbar() {
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState("Home");

  return (
    <div className="bg-white text-zinc-900 antialiased font-sans">
      <header className="sticky top-0 z-40 border-b border-zinc-100 bg-white/85 backdrop-blur">
        <div className="mx-auto flex h-14 max-w-6xl items-center gap-4 px-4">
          <a href="#" className="flex items-center gap-2" aria-label="Loop home">
            <span
              aria-hidden
              className="grid h-8 w-8 place-items-center rounded-full text-white font-bold"
              style={{
                background:
                  "conic-gradient(from 0deg, #ff7e5f, #feb47b, #ff7e5f)",
              }}
            >
              ◯
            </span>
            <span className="text-[16px] font-bold tracking-tight">loop</span>
          </a>

          <label className="hidden md:flex flex-1 max-w-sm items-center gap-2 rounded-full bg-zinc-100 px-4 py-1.5">
            <span aria-hidden>⌕</span>
            <input
              type="search"
              placeholder="Search people, posts, tags…"
              className="w-full bg-transparent text-[13.5px] outline-none placeholder:text-zinc-500"
            />
          </label>

          <nav
            aria-label="Primary"
            className="hidden md:flex items-center gap-1 mx-auto"
          >
            {NAV.map((item) => (
              <a
                key={item.label}
                href={item.href}
                onClick={(e) => {
                  e.preventDefault();
                  setActive(item.label);
                }}
                aria-current={active === item.label ? "page" : undefined}
                className={`relative grid h-10 w-12 place-items-center rounded-full ${
                  active === item.label
                    ? "text-rose-600 bg-rose-50"
                    : "text-zinc-600 hover:bg-zinc-100"
                }`}
                aria-label={item.label}
              >
                <span aria-hidden className="text-[18px]">{item.icon}</span>
                {item.badge && (
                  <span className="absolute right-1 top-1 grid h-4 min-w-4 place-items-center rounded-full bg-rose-600 px-1 text-[10px] font-bold text-white">
                    {item.badge}
                  </span>
                )}
              </a>
            ))}
          </nav>

          <div className="ml-auto flex items-center gap-2">
            <button
              type="button"
              className="hidden sm:inline-flex items-center gap-1.5 rounded-full bg-zinc-900 px-3.5 py-1.5 text-[13px] font-medium text-white hover:bg-zinc-800"
            >
              <span aria-hidden>＋</span> Post
            </button>
            <button
              type="button"
              aria-label="Profile"
              className="h-9 w-9 rounded-full bg-gradient-to-br from-purple-400 to-pink-500 ring-2 ring-white"
            />
            <button
              type="button"
              onClick={() => setOpen((v) => !v)}
              aria-expanded={open}
              aria-controls="loop-mobile"
              className="md:hidden grid h-9 w-9 place-items-center rounded-full hover:bg-zinc-100"
              aria-label="Menu"
            >
              <span aria-hidden>{open ? "✕" : "☰"}</span>
            </button>
          </div>
        </div>

        {open && (
          <nav
            id="loop-mobile"
            className="md:hidden border-t border-zinc-100 px-4 py-3 grid gap-1"
          >
            <label className="flex items-center gap-2 rounded-full bg-zinc-100 px-3 py-2 mb-2">
              <span aria-hidden>⌕</span>
              <input type="search" placeholder="Search…" className="w-full bg-transparent text-[13.5px] outline-none" />
            </label>
            {NAV.map((item) => (
              <a
                key={item.label}
                href={item.href}
                onClick={(e) => {
                  e.preventDefault();
                  setActive(item.label);
                  setOpen(false);
                }}
                className={`flex items-center justify-between rounded-lg px-3 py-2 text-[14px] ${
                  active === item.label ? "bg-rose-50 text-rose-600" : ""
                }`}
              >
                <span className="flex items-center gap-3">
                  <span aria-hidden className="text-[16px]">{item.icon}</span>
                  {item.label}
                </span>
                {item.badge && (
                  <span className="grid h-4 min-w-4 place-items-center rounded-full bg-rose-600 px-1 text-[10px] font-bold text-white">
                    {item.badge}
                  </span>
                )}
              </a>
            ))}
          </nav>
        )}
      </header>

      <div data-nav-context className="mx-auto max-w-6xl px-4 py-6">
        <p className="text-[12px] text-zinc-500">For you · Following</p>
        <h1 className="mt-2 text-[20px] font-bold tracking-tight">Today's loops</h1>
      </div>
    </div>
  );
}
Social App Navbar

Today's loops
