https://oblivium.ai/assets/NeuralTopbarDemo-D_6r3Hu7.js

1import{r as l,j as e}from"./react-core-ChOkSZtC.js";import{E as o,V as x,W as m,X as h}from"./index-DAA0xJYb.js";import{al as p,C as j,K as u,M as g,a0 as b,a as N,$ as v}from"./icons-Cw50rWdu.js";import{A as f,m as n}from"./motion-BRRT1bIY.js";import"./ebook-DBUSHjGZ.js";import"./3d-BWJNjDCo.js";import"./editor-DGqSYpA_.js";import"./ui-radix-DVw0n4yQ.js";import"./utils-CHpr1k55.js";import"./react-router-Bre-rjIW.js";import"./supabase-CDVUVRZl.js";function O(){const[s,i]=l.useState(!1),[a,d]=l.useState(1200);return e.jsxs("div",{className:"min-h-screen bg-[#0A0A0A] p-8",children:[e.jsxs("div",{className:"mb-8 p-6 rounded-2xl bg-white/5 border border-white/10",children:[e.jsx("h1",{className:"text-3xl font-bold text-white mb-4",children:"Linear-Inspired Topbar - Fixed Version"}),e.jsxs("div",{className:"flex items-center gap-4 mb-4",children:[e.jsx("label",{className:"text-white/70",children:"Container Width:"}),e.jsx("input",{type:"range",min:"400",max:"1600",value:a,onChange:c=>d(Number(c.target.value)),className:"flex-1"}),e.jsxs("span",{className:"text-white font-mono",children:[a,"px"]})]}),e.jsx("p",{className:"text-white/60 text-sm",children:"✅ Solid background • Proper spacing • 64px height • Horizontal credit meter"})]}),e.jsx("div",{className:"neural-topbar-container mx-auto transition-all duration-300",style:{width:`${a}px`},children:e.jsxs("div",{className:"topbar-neural",children:[e.jsxs("div",{className:"island island-primary",children:[e.jsx("button",{className:"sidebar-toggle",children:e.jsx(p,{size:20})}),e.jsx("div",{className:"logo-container",children:e.jsx("img",{src:o,alt:"Oblivium",className:"logo-image"})}),e.jsxs(x,{open:s,onOpenChange:i,children:[e.jsx(m,{asChild:!0,children:e.jsxs("button",{className:"meter-trigger",children:[e.jsx(j,{size:16}),e.jsx("span",{className:"meter-value",children:"12,500"}),e.jsx("span",{className:"meter-label",children:"credits"})]})}),e.jsx(f,{children:s&&e.jsx(h,{side:"bottom",align:"start",className:"meter-popover",asChild:!0,children:e.jsx(n.div,{initial:{opacity:0,y:-20,scale:.95},animate:{opacity:1,y:0,scale:1},exit:{opacity:0,y:-20,scale:.95},transition:{type:"spring",stiffness:400,damping:30},children:e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"text-white/70 text-sm",children:"Available Credits"}),e.jsx("span",{className:"text-2xl font-bold text-white",children:"12,500"})]}),e.jsx("div",{className:"h-2 bg-white/10 rounded-full overflow-hidden",children:e.jsx(n.div,{className:"h-full bg-gradient-to-r from-blue-500 to-purple-500",initial:{width:0},animate:{width:"65%"},transition:{duration:1,ease:"easeOut"}})}),e.jsxs("div",{className:"grid grid-cols-2 gap-2 pt-2",children:[e.jsxs("div",{className:"p-2 rounded-lg bg-white/5",children:[e.jsx("div",{className:"text-xs text-white/50",children:"Used"}),e.jsx("div",{className:"text-lg font-semibold text-white",children:"6,500"})]}),e.jsxs("div",{className:"p-2 rounded-lg bg-white/5",children:[e.jsx("div",{className:"text-xs text-white/50",children:"Total"}),e.jsx("div",{className:"text-lg font-semibold text-white",children:"19,000"})]})]})]})})})})]})]}),e.jsxs("div",{className:"island island-actions",children:[e.jsx(t,{icon:u,badge:3}),e.jsx(t,{icon:g,badge:1}),e.jsx(t,{icon:b}),e.jsx(t,{icon:N})]}),e.jsxs("div",{className:"island island-profile",children:[e.jsx("div",{className:"badge-container",children:e.jsx("span",{className:"profile-badge",title:"Elite Member",children:"👑"})}),e.jsx("div",{className:"user-avatar",children:e.jsx("span",{className:"text-xl",children:"🚀"})}),e.jsx("span",{className:"user-name",children:"Neural User"}),e.jsx("button",{className:"logout-btn",children:e.jsx(v,{size:20})})]})]})}),e.jsxs("div",{className:"mt-12 grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto",children:[e.jsx(r,{title:"64px Height",description:"Balanced vertical space, Linear standard",icon:"📏"}),e.jsx(r,{title:"Solid Background",description:"Pure black for maximum focus",icon:"⬛"}

1),e.jsx(r,{title:"24px Spacing",description:"Generous padding, 16px gaps",icon:"📐"})]})]})}function t({icon:s,badge:i}){return e.jsxs("button",{className:"action-button",children:[e.jsx(s,{size:20}),i&&e.jsx("span",{className:"action-badge",children:i})]})}function r({title:s,description:i,icon:a}){return e.jsxs("div",{className:"p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-white/20 transition-colors",children:[e.jsx("div",{className:"text-4xl mb-3",children:a}),e.jsx("h3",{className:"text-lg font-semibold text-white mb-2",children:s}),e.jsx("p",{className:"text-white/60 text-sm",children:i})]})}export{O as default};