NavBar

"use client";

// Generated by scripts/build-21st.mjs from src/21st/demos/navbar.tsx. Edit the source, not this file.

import { useState } from "react";
import { NavBar } from "@/components/ui/navbar";

const locales = [{ code: "en" }, { code: "fr" }, { code: "de" }, { code: "ja" }, { code: "ar" }];

const copy: Record<string, { links: string[]; cta: string }> = {
  en: { links: ["Product", "Docs", "Pricing"], cta: "Get started" },
  fr: { links: ["Produit", "Docs", "Tarifs"], cta: "Commencer" },
  de: { links: ["Produkt", "Docs", "Preise"], cta: "Loslegen" },
  ja: { links: ["製品", "ドキュメント", "料金"], cta: "はじめる" },
  ar: { links: ["المنتج", "التوثيق", "الأسعار"], cta: "ابدأ الآن" },
};

const hrefs = ["#product", "/docs", "#pricing"];

const settings = {
  variant: "floating",
  showFlags: true,
  showGitHub: true,
  githubUrl: "babelize/babelize-elements",
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  const [locale, setLocale] = useState("en");
  const t = copy[locale];

  return (
    <div className="min-h-[420px] w-full">
      <NavBar
        logo={<span className="font-semibold tracking-tight">Acme</span>}
        links={t.links.map((label, i) => ({ label, href: hrefs[i] }))}
        activeHref="/docs"
        locales={locales}
        value={locale}
        onValueChange={setLocale}
        cta={{ label: t.cta, href: "#get-started" }}
        variant={s.variant as "default" | "floating"}
        showFlags={s.showFlags}
        showGitHub={s.showGitHub}
        githubUrl={s.githubUrl}
        sticky={false}
      />
    </div>
  );
}