Spatial Dynamic Island Navbar

1'use client';
2
3import React, { useState } from 'react';
4import { Menu, X, User, Sparkles, Command } from 'lucide-react';
5
6export default function SpatialIslandNavbar() {
7  const [open, setOpen] = useState(false);
8  const [activeTab, setActiveTab] = useState('Home');
9
10  const tabs = ['Home', 'Spatial', 'Showcase', 'Lab'];
11
12  return (
13    <nav className="w-full max-w-2xl mx-auto rounded-full border border-slate-700/60 bg-slate-950/90 backdrop-blur-2xl p-1.5 shadow-[0_15px_35px_rgba(0,0,0,0.6)] select-none">
14      <div className="flex items-center justify-between px-2">
15        <div className="flex items-center gap-2">
16          <div className="h-7 w-7 rounded-full bg-gradient-to-tr from-cyan-400 to-blue-600 flex items-center justify-center text-white text-xs font-bold shadow-md shadow-cyan-500/30">
17            <Sparkles className="h-3.5 w-3.5" />
18          </div>
19        </div>
20
21        <div className="hidden sm:flex items-center gap-1 rounded-full bg-slate-900/90 border border-slate-800 p-1">
22          {tabs.map((tab) => {
23            const isAct = activeTab === tab;
24            return (
25              <button
26                key={tab}
27                onClick={() => setActiveTab(tab)}
28                className={`rounded-full px-3.5 py-1 text-xs font-semibold transition-all cursor-pointer ${
29                  isAct
30                    ? 'bg-blue-600 text-white shadow-md shadow-blue-600/40'
31                    : 'text-slate-400 hover:text-white'
32                }`}
33              >
34                {tab}
35              </button>
36            );
37          })}
38        </div>
39
40        <div className="flex items-center gap-1.5">
41          <div className="hidden sm:flex items-center gap-1 rounded-full bg-slate-900 border border-slate-800 px-2.5 py-1 text-[10px] text-slate-400">
42            <Command className="h-3 w-3" />
43            <span>K</span>
44          </div>
45          <button className="h-7 w-7 rounded-full bg-gradient-to-tr from-slate-800 to-slate-700 border border-slate-600 flex items-center justify-center text-slate-200 hover:text-white transition cursor-pointer">
46            <User className="h-3.5 w-3.5" />
47          </button>
48          <button onClick={() => setOpen(!open)} className="sm:hidden p-1 text-slate-300">
49            {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
50          </button>
51        </div>
52      </div>
53
54      {open && (
55        <div className="sm:hidden mt-2 pt-2 border-t border-slate-800 flex flex-col gap-1 px-2 pb-1">
56          {tabs.map((tab) => (
57            <button
58              key={tab}
59              onClick={() => {
60                setActiveTab(tab);
61                setOpen(false);
62              }}
63              className="py-1.5 text-xs font-medium text-slate-300 text-left px-2 rounded-lg hover:bg-slate-900"
64            >
65              {tab}
66            </button>
67          ))}
68        </div>
69      )}
70    </nav>
71  );
72}