{/* This example requires updating your template: \`\`\` \`\`\` */} }>

) } `,__src__:"registry/ax-base/example/app-shell-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"AppShell"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-app-shell'"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"ExampleAppDrawer"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'./app-shell/example-app-drawer'"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"AppShellExampleContent"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'./app-shell/example-page'"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"AppShellDemo"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"relative h-[calc(100vh-9rem)] w-full overflow-hidden !p-0"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#908CAA",fontStyle:"italic"},children:"/*"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6E6A86",fontStyle:"italic"},children:" This example requires updating your template:"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6E6A86",fontStyle:"italic"},children:" ```"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6E6A86",fontStyle:"italic"},children:' '})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6E6A86",fontStyle:"italic"},children:' '})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6E6A86",fontStyle:"italic"},children:" ```"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#6E6A86",fontStyle:"italic"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA",fontStyle:"italic"},children:"*/"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"AppShell"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"sidebar"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"ExampleAppDrawer"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"AppShellExampleContent"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"fixed"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { AppShell } from '@/registry/ax-base/ui/app-shell' import { ExampleAppDrawer } from '../../ax-base/example/app-shell/example-app-drawer' import { AppShellExampleContent } from '../../ax-base/example/app-shell/example-page' export function AppShellDemo() { return (

{/* This example requires updating your template: \`\`\` \`\`\` */} }>

) } `,__src__:"registry/ax-site/example/app-shell-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"AppShell"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@/registry/ax-base/ui/app-shell'"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"ExampleAppDrawer"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'../../ax-base/example/app-shell/example-app-drawer'"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"AppShellExampleContent"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'../../ax-base/example/app-shell/example-page'"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"AppShellDemo"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"relative h-[calc(100vh-9rem)] w-full overflow-hidden !p-0"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#908CAA",fontStyle:"italic"},children:"/*"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6E6A86",fontStyle:"italic"},children:" This example requires updating your template:"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6E6A86",fontStyle:"italic"},children:" ```"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6E6A86",fontStyle:"italic"},children:' '})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6E6A86",fontStyle:"italic"},children:' '})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6E6A86",fontStyle:"italic"},children:" ```"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#6E6A86",fontStyle:"italic"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA",fontStyle:"italic"},children:"*/"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"AppShell"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"sidebar"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"ExampleAppDrawer"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"AppShellExampleContent"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"fixed"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { AppShell } from '@/registry/ax-base/ui/app-shell' import { ExampleAppDrawer } from '../../ax-base/example/app-shell/example-app-drawer' import { AppShellExampleContent } from '../../ax-base/example/app-shell/example-page' export function AppShellDemo() { return (

{/* This example requires updating your template: \`\`\` \`\`\` */} }>

) } `,__src__:"registry/ax-app/example/app-shell-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"AppShell"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@/registry/ax-base/ui/app-shell'"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"ExampleAppDrawer"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'../../ax-base/example/app-shell/example-app-drawer'"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"AppShellExampleContent"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'../../ax-base/example/app-shell/example-page'"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"AppShellDemo"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"relative h-[calc(100vh-9rem)] w-full overflow-hidden !p-0"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#908CAA",fontStyle:"italic"},children:"/*"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6E6A86",fontStyle:"italic"},children:" This example requires updating your template:"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6E6A86",fontStyle:"italic"},children:" ```"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6E6A86",fontStyle:"italic"},children:' '})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6E6A86",fontStyle:"italic"},children:' '})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6E6A86",fontStyle:"italic"},children:" ```"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#6E6A86",fontStyle:"italic"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA",fontStyle:"italic"},children:"*/"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"AppShell"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"sidebar"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"ExampleAppDrawer"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"AppShellExampleContent"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"fixed"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})})]}),` `,(0,e.jsxs)(l.h2,{id:"installation",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install @brudi/react-app-shell `,__npmCommand__:`npm install @brudi/react-app-shell `,__yarnCommand__:`yarn add @brudi/react-app-shell `,__pnpmCommand__:`pnpm add @brudi/react-app-shell `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"npm"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"install"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"@brudi/react-app-shell"})]})})})}),` `,(0,e.jsxs)(l.h2,{id:"usage",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@brudi/react-tooltip" `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Tooltip"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"TooltipContent"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"TooltipProvider"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"TooltipTrigger"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"@brudi/react-tooltip"'})]})]})})}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:` Hover

Add to library

`,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"TooltipProvider"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Tooltip"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"TooltipTrigger"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Hover"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"TooltipContent"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Add to library"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]})]})})})]})}function x(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(p,n)})):p(n)}var u=x;function N(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(S);})(); ;return Component;

App Shell

Installation

Usage