Liquid Glass Navbar

1"use client";
2 
3import React, { useState } from "react";
4import {
5  LiquidNavbar,
6  NimbusIcons,
7  type LiquidNavItem,
8} from "@/components/ui/liquid-glass-navbar";
9 
10const ITEMS: LiquidNavItem[] = [
11  { label: "Home", icon: NimbusIcons.home, fx: "glow" },
12  { label: "Explore", icon: NimbusIcons.globe, fx: "spin" },
13  { label: "Flights", icon: NimbusIcons.plane, fx: "plane" },
14  { label: "Weather", icon: NimbusIcons.drop, fx: "drop" },
15  { label: "Profile", icon: NimbusIcons.user, fx: "wave" },
16];
17 
18export function LiquidGlassNavbarDemo() {
19  const [active, setActive] = useState(0);
20  const [sound, setSound] = useState(false);
21 
22  return (
23    <div className="relative w-full min-h-[260px] flex flex-col items-center justify-center p-6 rounded-3xl overflow-hidden bg-slate-50 dark:bg-[#060B11]">
24      {/* Colorful backdrop shapes to reveal live SVG glass refraction */}
25      <div className="pointer-events-none absolute -top-10 left-1/4 w-48 h-48 rounded-full bg-teal-400/35 blur-2xl" />
26      <div className="pointer-events-none absolute -bottom-10 right-1/4 w-56 h-56 rounded-full bg-indigo-500/30 blur-2xl" />
27 
28      <LiquidNavbar
29        items={ITEMS}
30        active={active}
31        onChange={(index) => setActive(index)}
32        tone="light"
33        sound={sound}
34        leftSlot={
35          <span className="font-extrabold text-sm tracking-tight text-slate-900 px-2">
36            battana
37          </span>
38        }
39        rightSlot={
40          <button
41            type="button"
42            onClick={() => setSound((s) => !s)}
43            className="h-8 px-3 rounded-full bg-teal-700 text-white text-xs font-semibold cursor-pointer"
44          >
45            {sound ? "Sound On" : "Sound Off"}
46          </button>
47        }
48      />
49    </div>
50  );
51}
52