4e: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"] 4f: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"] 50:T33a7,@@directive("'use client'") type team = { name: string, logo: module(Icons.Icon), plan: string, } type navSubItem = { title: string, url: string, } type navMainItem = { title: string, url: string, icon: React.element, isActive: bool, items: array, } type project = { name: string, url: string, icon: React.element, } type user = { name: string, email: string, avatar: string, } let userData: user = { name: "shadcn", email: "m@example.com", avatar: "/avatars/shadcn.jpg", } let teams: array = [ {name: "Acme Inc", logo: module(Icons.GalleryVerticalEnd), plan: "Enterprise"}, {name: "Acme Corp.", logo: module(Icons.AudioWaveform), plan: "Startup"}, {name: "Evil Corp.", logo: module(Icons.Command), plan: "Free"}, ] let navMain: array = [ { title: "Playground", url: "#", icon: , isActive: true, items: [ {title: "History", url: "#"}, {title: "Starred", url: "#"}, {title: "Settings", url: "#"}, ], }, { title: "Models", url: "#", icon: , isActive: false, items: [ {title: "Genesis", url: "#"}, {title: "Explorer", url: "#"}, {title: "Quantum", url: "#"}, ], }, { title: "Documentation", url: "#", icon: , isActive: false, items: [ {title: "Introduction", url: "#"}, {title: "Get Started", url: "#"}, {title: "Tutorials", url: "#"}, {title: "Changelog", url: "#"}, ], }, { title: "Settings", url: "#", icon: , isActive: false, items: [ {title: "General", url: "#"}, {title: "Team", url: "#"}, {title: "Billing", url: "#"}, {title: "Limits", url: "#"}, ], }, ] let projects: array = [ {name: "Design Engineering", url: "#", icon: }, {name: "Sales & Marketing", url: "#", icon: }, {name: "Travel", url: "#", icon: }, ] module TeamSwitcher = { @react.component let make = (~teams: array) => { let sidebar = Sidebar.use() let isMobile = sidebar.isMobile let (activeTeamIndex, setActiveTeamIndex) = React.useState(() => 0) switch teams->Array.get(activeTeamIndex) { | None => React.null | Some({logo: module(Logo), name, plan}) => } >

{name->React.string} {plan->React.string}

{"Teams"->React.string} {teams ->Array.mapWithIndex(({name, logo: module(Logo)}, index) => setActiveTeamIndex(_ => index)} className="gap-2 p-2" >

{name->React.string} {`⌘${Int.toString(index + 1)}`->React.string} ) ->React.array}

{}

{"Add team"->React.string}

} } } module NavMainSection = { @react.component let make = (~items: array) => {"Platform"->React.string} {items ->Array.map(item => } > {item.icon} {item.title->React.string} {item.items ->Array.map(subItem => }> {subItem.title->React.string} ) ->React.array} ) ->React.array} } module NavProjectsSection = { @react.component let make = (~projects: array) => { let sidebar = Sidebar.use() let isMobile = sidebar.isMobile {"Projects"->React.string} {projects ->Array.map(project => }> {project.icon} {project.name->React.string} }> {"More"->React.string} {} {"View Project"->React.string} {} {"Share Project"->React.string} {} {"Delete Project"->React.string} ) ->React.array} {} {"More"->React.string} } } module NavUserSection = { @react.component let make = (~user: user) => { let sidebar = Sidebar.use() let isMobile = sidebar.isMobile } > {"CN"->React.string}

{user.name->React.string} {user.email->React.string}

{"CN"->React.string}

{user.name->React.string} {user.email->React.string}

{} {"Upgrade to Pro"->React.string} {} {"Account"->React.string} {"Billing"->React.string} {} {"Notifications"->React.string} {"Log out"->React.string} } } @react.componentWithProps(Demo.Props.t) let make = ({}: Demo.Props.t) =>

4d:["$","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","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"}]]}]}],["$","li","rescript-base-ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/rescript-base-ui","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":"rescript-base-ui"}]]}]}]]}],["$","$L4e",null,{"namespace":"@rescript-shadcn","registryDependencies":["@rescript-shadcn/Avatar","@rescript-shadcn/Collapsible","@rescript-shadcn/Demo","@rescript-shadcn/DropdownMenu","@rescript-shadcn/Icons","@rescript-shadcn/Sidebar"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/base/examples/SidebarDemo.res","content":"$50","type":"registry:example"}],"className":"h-[70svh] min-h-80"}]]}]