50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T3fb4,"use client"; import { useState, type ReactNode } from "react"; import { AnimatePresence, motion } from "motion/react"; import { ArrowRight, ChevronDown, Menu, X } from "lucide-react"; type NavItem = { label: string; href?: string; panelId?: "product" | "solution" | "pricing"; }; type ProductCard = { title: string; description?: string; mediaType?: "component" | "image"; imageSrc?: string; component?: ReactNode; }; type MenuPanel = { id: NonNullable; items: ProductCard[]; }; const navItems: NavItem[] = [ { label: "Product", panelId: "product" }, { label: "Solution", panelId: "solution" }, { label: "Developers", href: "#" }, { label: "Company", href: "#" }, { label: "Pricing", panelId: "pricing" }, { label: "News", href: "#" }, ]; const menuPanels: MenuPanel[] = [ { id: "product", items: [ { title: "Chat", mediaType: "component", component: }, { title: "Build", mediaType: "component", component: }, { title: "Imagine", description: "Generate and edit images and videos from text" }, { title: "Voice", description: "Build voice agents with sub-second latency" }, ], }, { id: "solution", items: [ { title: "Research", description: "Explore, compare, and synthesize complex work with long-context reasoning." }, { title: "Engineering", description: "Move from issue to tested patch with agents that understand your codebase." }, { title: "Operations", description: "Turn messy requests, documents, and workflows into structured execution." }, ], }, { id: "pricing", items: [ { title: "Free", description: "Start experimenting with core models, chat, and lightweight automation." }, { title: "Pro", description: "Higher limits, faster responses, and advanced tools for serious builders." }, { title: "Enterprise", description: "Security, admin controls, dedicated support, and custom deployment paths." }, ], }, ]; function getPanel(panelId: string | null) { return menuPanels.find((panel) => panel.id === panelId); } function XaiLogo({ className = "" }: { className?: string }) { return ( ); } function ChatPreview() { return (

I am building a block library featuring xai, what kind of ui blocks should i design

Design cosmic themes, Grok chat blocks, AI response cards, and sharp truth-seeking components.

); } function BuildPreview() { return (

Find session referencesexplore

Thought for 4.1s

Edit src/middleware/auth.ts

42 export async function handler(req) {

43 - const token = extract(req);

44 + const token = extractRequest(req);

45 if (!token) return unauthorized();

); } function PanelCard({ item, compact = false }: { item: ProductCard; compact?: boolean }) { if (item.component || item.imageSrc) { return (

{item.mediaType === "image" && item.imageSrc ? (

) : item.component} {item.title}

); } return (

{item.title}

{item.description}

{!compact && Explore } ); } function DropdownPanel({ panel }: { panel: MenuPanel }) { if (panel.id === "product") { const [chat, build, imagine, voice] = panel.items; return (

); } return

{panel.items.map((item) => )}

; } export default function NavbarTwo() { const [activeMenu, setActiveMenu] = useState(null); const [mobileOpen, setMobileOpen] = useState(false); const [mobileActiveMenu, setMobileActiveMenu] = useState(null); const activePanel = getPanel(activeMenu); const toggleMenu = (menuName: string) => setActiveMenu(activeMenu === menuName ? null : menuName); return (

{activePanel && ( )}

Try it now

{mobileOpen && (

{navItems.map((item) => { const panel = item.panelId ? getPanel(item.panelId) : null; const isOpen = mobileActiveMenu === item.panelId; if (!item.panelId) { return {item.label}; } return (

{isOpen && panel && (

{panel.items.map((panelItem) => ( {panelItem.title} {panelItem.description && {panelItem.description}} ))}

)}

); })}

)}

HiringApply for Design Engineers

Frontier AI models for
everything you build

Autonomous agents that debug, refactor, and ship features while you focus on architecture and strategy

Get API Access View Documentation

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@solaceui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/blocks/navbar-section/two/index.tsx","content":"$52","type":"registry:component","target":"components/navbar-section-2.tsx"}],"className":"h-[70svh] min-h-80"}]]}]

{item.title}

Frontier AI models for everything you build

Frontier AI models for
everything you build