\n      <InputGroupAddon align=\"block-end\">\n        <Menu>\n          <MenuTrigger\n            render={\n              <Button size=\"sm-icon\" variant=\"outline\" pill>\n                <PlusIcon />\n              </Button>\n            }\n          />\n          <MenuPopup align=\"start\" className=\"w-52\">\n            <MenuItem>\n              <PaperclipIcon /> Add from local files\n            </MenuItem>\n            <MenuItem>\n              <DriveIcon />\n              Open Google Drive\n            </MenuItem>\n            <MenuSeparator />\n            <MenuItem render={<label />} closeOnClick={false}>\n              <BrainIcon />\n              Thinking\n              <Switch />\n            </MenuItem>\n            <MenuItem render={<label />} closeOnClick={false}>\n              <BrainIcon />\n              Web Search\n              <Switch />\n            </MenuItem>\n          </MenuPopup>\n        </Menu>\n        <Select defaultValue={models[1]} items={models}>\n          <SelectTrigger className=\"ml-auto w-auto mr-2\" variant=\"plain\">\n            <SelectValue placeholder=\"Model\" />\n          </SelectTrigger>\n          <SelectPopup>\n            <SelectList>\n              {models.map((model) => (\n                <SelectItem key={model.value} value={model}>\n                  {model.icon}\n                  {model.label}\n                </SelectItem>\n              ))}\n            </SelectList>\n          </SelectPopup>\n        </Select>\n        <Button size=\"sm-icon\" pill>\n          <ArrowUpIcon />\n        </Button>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n\nconst models = [\n  {\n    value: 'gpt',\n    label: 'GPT 5 Chat',\n    icon: (\n      <svg viewBox=\"0 0 256 260\" xmlns=\"http://www.w3.org/2000/svg\" className=\"dark:invert\">\n        <g>\n          <path d=\"M239.183914,106.202783 C245.054304,88.5242096 243.02228,69.1733805 233.607599,53.0998864 C219.451678,28.4588021 190.999703,15.7836129 163.213007,21.739505 C147.554077,4.32145883 123.794909,-3.42398554 100.87901,1.41873898 C77.9631105,6.26146349 59.3690093,22.9572536 52.0959621,45.2214219 C33.8436494,48.9644867 18.0901721,60.392749 8.86672513,76.5818033 C-5.443491,101.182962 -2.19544431,132.215255 16.8986662,153.320094 C11.0060865,170.990656 13.0197283,190.343991 22.4238231,206.422991 C36.5975553,231.072344 65.0680342,243.746566 92.8695738,237.783372 C105.235639,251.708249 123.001113,259.630942 141.623968,259.52692 C170.105359,259.552169 195.337611,241.165718 204.037777,214.045661 C222.28734,210.296356 238.038489,198.869783 247.267014,182.68528 C261.404453,158.127515 258.142494,127.262775 239.183914,106.202783 L239.183914,106.202783 Z M141.623968,242.541207 C130.255682,242.559177 119.243876,238.574642 110.519381,231.286197 L112.054146,230.416496 L163.724595,200.590881 C166.340648,199.056444 167.954321,196.256818 167.970781,193.224005 L167.970781,120.373788 L189.815614,133.010026 C190.034132,133.121423 190.186235,133.330564 190.224885,133.572774 L190.224885,193.940229 C190.168603,220.758427 168.442166,242.484864 141.623968,242.541207 Z M37.1575749,197.93062 C31.456498,188.086359 29.4094818,176.546984 31.3766237,165.342426 L32.9113895,166.263285 L84.6329973,196.088901 C87.2389349,197.618207 90.4682717,197.618207 93.0742093,196.088901 L156.255402,159.663793 L156.255402,184.885111 C156.243557,185.149771 156.111725,185.394602 155.89729,185.550176 L103.561776,215.733903 C80.3054953,229.131632 50.5924954,221.165435 37.1575749,197.93062 Z M23.5493181,85.3811273 C29.2899861,75.4733097 38.3511911,67.9162648 49.1287482,64.0478825 L49.1287482,125.438515 C49.0891492,128.459425 50.6965386,131.262556 53.3237748,132.754232 L116.198014,169.025864 L94.3531808,181.662102 C94.1132325,181.789434 93.8257461,181.789434 93.5857979,181.662102 L41.3526015,151.529534 C18.1419426,138.076098 10.1817681,108.385562 23.5493181,85.125333 L23.5493181,85.3811273 Z M203.0146,127.075598 L139.935725,90.4458545 L161.7294,77.8607748 C161.969348,77.7334434 162.256834,77.7334434 162.496783,77.8607748 L214.729979,108.044502 C231.032329,117.451747 240.437294,135.426109 238.871504,154.182739 C237.305714,172.939368 225.050719,189.105572 207.414262,195.67963 L207.414262,134.288998 C207.322521,131.276867 205.650697,128.535853 203.0146,127.075598 Z M224.757116,94.3850867 L223.22235,93.4642272 L171.60306,63.3828173 C168.981293,61.8443751 165.732456,61.8443751 163.110689,63.3828173 L99.9806554,99.8079259 L99.9806554,74.5866077 C99.9533004,74.3254088 100.071095,74.0701869 100.287609,73.9215426 L152.520805,43.7889738 C168.863098,34.3743518 189.174256,35.2529043 204.642579,46.0434841 C220.110903,56.8340638 227.949269,75.5923959 224.757116,94.1804513 L224.757116,94.3850867 Z M88.0606409,139.097931 L66.2158076,126.512851 C65.9950399,126.379091 65.8450965,126.154176 65.8065367,125.898945 L65.8065367,65.684966 C65.8314495,46.8285367 76.7500605,29.6846032 93.8270852,21.6883055 C110.90411,13.6920079 131.063833,16.2835462 145.5632,28.338998 L144.028434,29.2086986 L92.3579852,59.0343142 C89.7419327,60.5687513 88.1282597,63.3683767 88.1117998,66.4011901 L88.0606409,139.097931 Z M99.9294965,113.5185 L128.06687,97.3011417 L156.255402,113.5185 L156.255402,145.953218 L128.169187,162.170577 L99.9806554,145.953218 L99.9294965,113.5185 Z\" fill=\"#000000\"></path>\n        </g>\n      </svg>\n    )\n  },\n  {\n    value: 'claude',\n    label: 'Claude',\n    icon: (\n      <svg viewBox=\"0 0 256 257\" xmlns=\"http://www.w3.org/2000/svg\">\n        <g>\n          <path d=\"M50.2278481,170.321013 L100.585316,142.063797 L101.427848,139.601013 L100.585316,138.24 L98.1225316,138.24 L89.6972152,137.721519 L60.921519,136.943797 L35.9696203,135.906835 L11.795443,134.610633 L5.70329114,133.31443 L0,125.796456 L0.583291139,122.037468 L5.70329114,118.602532 L13.0268354,119.250633 L29.2293671,120.352405 L53.5331646,122.037468 L71.161519,123.07443 L97.28,125.796456 L101.427848,125.796456 L102.011139,124.111392 L100.585316,123.07443 L99.4835443,122.037468 L74.3372152,104.992405 L47.116962,86.9751899 L32.8587342,76.6055696 L25.1463291,71.3559494 L21.2577215,66.4303797 L19.5726582,55.6718987 L26.5721519,47.9594937 L35.9696203,48.6075949 L38.3675949,49.2556962 L47.8946835,56.5792405 L68.2450633,72.3281013 L94.8172152,91.9007595 L98.7058228,95.1412658 L100.261266,94.0394937 L100.455696,93.2617722 L98.7058228,90.3453165 L84.2531646,64.2268354 L68.8283544,37.6546835 L61.958481,26.636962 L60.1437975,20.0263291 C59.4956962,17.3043038 59.0420253,15.0359494 59.0420253,12.2491139 L67.0136709,1.42582278 L71.4207595,-1.42108547e-14 L82.0496203,1.42582278 L86.521519,5.31443038 L93.1321519,20.4151899 L103.825823,44.2005063 L120.417215,76.5407595 L125.277975,86.1326582 L127.87038,95.0116456 L128.842532,97.7336709 L130.527595,97.7336709 L130.527595,96.1782278 L131.888608,77.9665823 L134.416203,55.6070886 L136.878987,26.8313924 L137.721519,18.7301266 L141.739747,9.00860759 L149.711392,3.75898734 L155.933165,6.74025316 L161.053165,14.0637975 L160.340253,18.7949367 L157.294177,38.5620253 L151.331646,69.5412658 L147.443038,90.2805063 L149.711392,90.2805063 L152.303797,87.6881013 L162.803038,73.7539241 L180.431392,51.718481 L188.208608,42.9691139 L197.282025,33.3124051 L203.114937,28.7108861 L214.132658,28.7108861 L222.233924,40.7655696 L218.604557,53.2091139 L207.262785,67.596962 L197.865316,79.7812658 L184.38481,97.9281013 L175.959494,112.44557 L176.737215,113.612152 L178.746329,113.417722 L209.207089,106.936709 L225.668861,103.955443 L245.306329,100.585316 L254.185316,104.733165 L255.157468,108.945823 L251.657722,117.56557 L230.659241,122.75038 L206.031392,127.675949 L169.348861,136.360506 L168.89519,136.684557 L169.413671,137.332658 L185.940253,138.888101 L193.004557,139.276962 L210.308861,139.276962 L242.519494,141.674937 L250.94481,147.248608 L256,154.053671 L255.157468,159.238481 L242.195443,165.849114 L224.696709,161.701266 L183.866329,151.979747 L169.867342,148.48 L167.923038,148.48 L167.923038,149.646582 L179.588861,161.053165 L200.976203,180.366582 L227.742785,205.253671 L229.103797,211.410633 L225.668861,216.271392 L222.039494,215.752911 L198.513418,198.059747 L189.44,190.088101 L168.89519,172.783797 L167.534177,172.783797 L167.534177,174.598481 L172.265316,181.533165 L197.282025,219.123038 L198.578228,230.659241 L196.763544,234.418228 L190.282532,236.686582 L183.153418,235.39038 L168.506329,214.84557 L153.40557,191.708354 L141.221266,170.969114 L139.730633,171.811646 L132.536709,249.259747 L129.166582,253.213165 L121.389367,256.19443 L114.908354,251.268861 L111.473418,243.297215 L114.908354,227.548354 L119.056203,207.003544 L122.426329,190.671392 L125.472405,170.385823 L127.287089,163.64557 L127.157468,163.191899 L125.666835,163.386329 L110.371646,184.38481 L87.1048101,215.817722 L68.6987342,235.52 L64.2916456,237.269873 L56.6440506,233.316456 L57.356962,226.252152 L61.6344304,219.96557 L87.1048101,187.560506 L102.46481,167.469367 L112.380759,155.868354 L112.315949,154.183291 L111.732658,154.183291 L44.0708861,198.124557 L32.0162025,199.68 L26.8313924,194.819241 L27.4794937,186.847595 L29.9422785,184.25519 L50.2926582,170.256203 L50.2278481,170.321013 Z\" fill=\"#D97757\"></path>\n        </g>\n      </svg>\n    )\n  },\n];\n\nfunction DriveIcon() {\n  return (\n    <svg viewBox=\"0 0 87.3 78\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z\"\n        fill=\"#0066da\"\n      />\n      <path\n        d=\"m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z\"\n        fill=\"#00ac47\"\n      />\n      <path\n        d=\"m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z\"\n        fill=\"#ea4335\"\n      />\n      <path\n        d=\"m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z\"\n        fill=\"#00832d\"\n      />\n      <path\n        d=\"m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\n        fill=\"#2684fc\"\n      />\n      <path\n        d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z\"\n        fill=\"#ffba00\"\n      />\n    </svg>\n  );\n}","greeting.tsx","import { Button } from \"components/selia/button\";\nimport { IconBox } from \"components/selia/icon-box\";\nimport { Item, ItemAction, ItemContent, ItemDescription, ItemMedia, ItemTitle } from \"components/selia/item\";\nimport { ArrowRightIcon, CalculatorIcon, GlobeIcon, MessageCircleCodeIcon, MessageCircleMoreIcon } from \"lucide-react\";\n\nexport function Greeting() {\n  return (\n    <div className=\"w-10/12 mx-auto 2xl:mt-40 mt-20\">\n      <div className=\"font-light text-3xl text-muted\">Hello, there!</div>\n      <h1 className=\"text-4xl font-light\">What can I do for you today?</h1>\n      <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 mt-6 *:cursor-pointer\">\n        <Item render={<button />}>\n          <ItemMedia>\n            <IconBox>\n              <MessageCircleMoreIcon />\n            </IconBox>\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>\n              General Questions\n            </ItemTitle>\n            <ItemDescription>\n              Ask me anything about the general topics.\n            </ItemDescription>\n          </ItemContent>\n          <ItemAction>\n            <ArrowRightIcon />\n          </ItemAction>\n        </Item>\n        <Item render={<button />}>\n          <ItemMedia>\n            <IconBox variant=\"danger\">\n              <CalculatorIcon />\n            </IconBox>\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>\n              Solve Math Problems\n            </ItemTitle>\n            <ItemDescription>\n              Solve math problems with detailed steps.\n            </ItemDescription>\n          </ItemContent>\n          <ItemAction>\n            <ArrowRightIcon />\n          </ItemAction>\n        </Item>\n        <Item render={<button />}>\n          <ItemMedia>\n            <IconBox variant=\"success\">\n              <MessageCircleCodeIcon />\n            </IconBox>\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>\n              Generate Code\n            </ItemTitle>\n            <ItemDescription>\n              Generate code for your application.\n            </ItemDescription>\n          </ItemContent>\n          <ItemAction>\n            <ArrowRightIcon />\n          </ItemAction>\n        </Item>\n        <Item render={<button />}>\n          <ItemMedia>\n            <IconBox variant=\"info\">\n              <GlobeIcon />\n            </IconBox>\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>\n              Deep Research\n            </ItemTitle>\n            <ItemDescription>\n              Deep research on any topic you want.\n            </ItemDescription>\n          </ItemContent>\n          <ItemAction>\n            <ArrowRightIcon />\n          </ItemAction>\n        </Item>\n      </div>\n      <div className=\"text-center mt-6\">\n        <Button variant=\"secondary\" pill size=\"xs\" className=\"text-sm\">\n          Explore More\n          <ArrowRightIcon />\n        </Button>\n      </div>\n    </div>\n  );\n}","layout.tsx","import { cn } from \"#utils\";\nimport { Button } from \"components/selia/button\";\nimport { Heading } from \"components/selia/heading\";\nimport { HatGlassesIcon, SidebarCloseIcon, SidebarOpenIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { SidebarChat } from \"./sidebar\";\n\nexport function Layout({ children }: { children: React.ReactNode }) {\n  // in real case you should use the layout store to manage the sidebar open state\n  const [sidebarOpen, setSidebarOpen] = useState(true);\n\n  useEffect(() => {\n    const windowResize = () => {\n      if (window.innerWidth < 1024) {\n        setSidebarOpen(false);\n      } else {\n        setSidebarOpen(true);\n      }\n    };\n\n    windowResize();\n    window.addEventListener('resize', windowResize);\n    return () => window.removeEventListener('resize', windowResize);\n  }, []);\n\n  function handleSidebarOpen() {\n    setSidebarOpen(!sidebarOpen);\n  }\n\n  return (\n    <div className=\"flex h-dvh\">\n      <div className={cn(\"lg:w-72 lg:sticky top-0 lg:h-dvh transition-all duration-200\", \"fixed size-full z-50 max-lg:bg-background\", sidebarOpen ? 'ml-0 left-0' : '-left-full lg:-ml-72')}>\n        <SidebarChat sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />\n      </div>\n      <main className=\"flex-1 flex flex-col\">\n        <nav className=\"p-4 border-b border-card-separator flex items-center gap-2.5\">\n          <Button variant=\"plain\" size=\"sm-icon\" className=\"text-muted\" onClick={handleSidebarOpen}>\n            {sidebarOpen ? <SidebarCloseIcon /> : <SidebarOpenIcon />}\n          </Button>\n          <Heading size=\"sm\" level={2}>New Chat</Heading>\n          <Button variant=\"secondary\" size=\"sm-icon\" className=\"ml-auto\">\n            <HatGlassesIcon />\n          </Button>\n        </nav>\n        {children}\n      </main>\n    </div>\n  );\n}","import { ScrollArea } from \"components/selia/scroll-area\";\nimport { Editor } from \"./editor\";\nimport { Layout } from \"./layout\";\nimport { Greeting } from \"./greeting\";\n\nexport default function AiChat() {\n  return (\n    <Layout>\n      <ScrollArea className=\"flex-1\">\n        <div className=\"w-full max-w-3xl mx-auto\">\n          <Greeting />\n        </div>\n      </ScrollArea>\n      <div className=\"shrink-0 w-full max-w-3xl mx-auto py-4 px-4 lg:px-0\">\n        <Editor />\n      </div>\n    </Layout >\n  );\n}\n","sidebar.tsx","import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupTitle, SidebarHeader, SidebarItem, SidebarItemButton, SidebarItemAction, SidebarList, SidebarLogo, SidebarMenu } from 'components/selia/sidebar';\nimport { SearchIcon, PlusIcon, StoreIcon, HardDriveIcon, CodeSquareIcon, FolderIcon, EllipsisIcon, PencilIcon, ArchiveIcon, TrashIcon, ShareIcon, PinIcon, ChevronsUpDownIcon, LogOutIcon, SparklesIcon, PaletteIcon, SettingsIcon, SidebarCloseIcon, SidebarOpenIcon } from 'lucide-react';\nimport { Button } from 'components/selia/button';\nimport { Menu, MenuTrigger, MenuPopup, MenuItem, MenuSeparator } from 'components/selia/menu';\nimport { Avatar, AvatarFallback, AvatarImage } from 'components/selia/avatar';\nimport { ScrollArea } from 'components/selia/scroll-area';\n\nexport function SidebarChat({ sidebarOpen, setSidebarOpen }: { sidebarOpen: boolean, setSidebarOpen: (open: boolean) => void }) {\n  return (\n    <Sidebar\n      className='size-full bg-[oklch(0.977_0.0007_247.83)] dark:bg-[oklch(0.1574_0.0017_247.94)] border-r border-separator/60'\n      size=\"compact\"\n    >\n      <SidebarHeader>\n        <div className=\"flex items-center justify-between\">\n          <SidebarLogo>\n            <img src=\"/selia.png\" alt=\"Selia\" className=\"size-8\" />\n            <span className=\"font-semibold text-lg\">Chat</span>\n          </SidebarLogo>\n          <div className=\"flex items-center gap-2.5\">\n            <Button variant=\"plain\" size=\"sm-icon\">\n              <SearchIcon />\n            </Button>\n            <Button className=\"lg:hidden\" variant=\"plain\" size=\"sm-icon\" onClick={() => setSidebarOpen(!sidebarOpen)}>\n              {sidebarOpen ? <SidebarCloseIcon /> : <SidebarOpenIcon />}\n            </Button>\n          </div>\n        </div>\n        <SidebarMenu className=\"mt-4.5\">\n          <Button variant=\"primary\" block>\n            <PlusIcon />\n            New Chat\n          </Button>\n          <SidebarGroup>\n            <SidebarList>\n              <SidebarItem>\n                <SidebarItemButton>\n                  <StoreIcon />\n                  Marketplace\n                </SidebarItemButton>\n              </SidebarItem>\n              <SidebarItem>\n                <SidebarItemButton>\n                  <HardDriveIcon />\n                  Storage\n                </SidebarItemButton>\n              </SidebarItem>\n              <SidebarItem>\n                <SidebarItemButton>\n                  <CodeSquareIcon />\n                  Artifacts\n                </SidebarItemButton>\n              </SidebarItem>\n            </SidebarList>\n          </SidebarGroup>\n          <SidebarGroup>\n            <SidebarGroupTitle>Projects</SidebarGroupTitle>\n            <SidebarList>\n              <SidebarItem>\n                <SidebarItemButton>\n                  <FolderIcon />\n                  Programming\n                </SidebarItemButton>\n              </SidebarItem>\n              <SidebarItem>\n                <SidebarItemButton>\n                  <FolderIcon />\n                  Design\n                </SidebarItemButton>\n              </SidebarItem>\n              <SidebarItem>\n                <SidebarItemButton>\n                  <PlusIcon />\n                  New Project\n                </SidebarItemButton>\n              </SidebarItem>\n            </SidebarList>\n          </SidebarGroup>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent render={<ScrollArea />}>\n        <SidebarMenu>\n          <SidebarGroup>\n            <SidebarGroupTitle>Recent</SidebarGroupTitle>\n            <SidebarList>\n              {recentChats.map((chat, index) => (\n                <SidebarItem key={index}>\n                  <SidebarItemButton active={index === 0}>\n                    {chat.pinned && <PinIcon />}\n                    <span className=\"truncate flex-1 text-left\">\n                      {chat.title}\n                    </span>\n                  </SidebarItemButton>\n                  <SidebarItemAction showOnHover>\n                    <Menu>\n                      <MenuTrigger className=\"text-foreground size-full flex justify-center items-center\">\n                        <EllipsisIcon />\n                      </MenuTrigger>\n                      <MenuPopup className=\"w-42\" size=\"compact\">\n                        <MenuItem>\n                          <PinIcon />\n                          Pin\n                        </MenuItem>\n                        <MenuItem>\n                          <ShareIcon />\n                          Share\n                        </MenuItem>\n                        <MenuItem>\n                          <PencilIcon />\n                          Rename\n                        </MenuItem>\n                        <MenuItem>\n                          <ArchiveIcon />\n                          Archive\n                        </MenuItem>\n                        <MenuSeparator />\n                        <MenuItem className=\"text-danger\">\n                          <TrashIcon className=\"text-danger\" />\n                          Delete\n                        </MenuItem>\n                      </MenuPopup>\n                    </Menu>\n                  </SidebarItemAction>\n                </SidebarItem>\n              ))}\n            </SidebarList>\n          </SidebarGroup>\n        </SidebarMenu>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarList>\n            <SidebarItem>\n              <Menu>\n                <MenuTrigger\n                  data-slot=\"sidebar-item-button\"\n                  nativeButton={false}\n                  render={\n                    <SidebarItemButton>\n                      <Avatar size=\"sm\">\n                        <AvatarImage\n                          src=\"https://pbs.twimg.com/profile_images/1881314507865411584/aXlN8o5e_400x400.jpg\"\n                          alt=\"Avatar\"\n                        />\n                        <AvatarFallback>RF</AvatarFallback>\n                      </Avatar>\n                      <div className=\"flex flex-col\">\n                        <span className=\"font-medium\">Rizal Fakhri</span>\n                        <span className=\"text-sm text-muted\">Free plan</span>\n                      </div>\n                      <ChevronsUpDownIcon className=\"ml-auto\" />\n                    </SidebarItemButton>\n                  }\n                />\n                <MenuPopup className=\"w-(--anchor-width)\" side=\"top\">\n                  <MenuItem>\n                    <SparklesIcon />\n                    Upgrade Plan\n                  </MenuItem>\n                  <MenuItem>\n                    <PaletteIcon />\n                    Personalization\n                  </MenuItem>\n                  <MenuItem>\n                    <SettingsIcon />\n                    Settings\n                  </MenuItem>\n                  <MenuSeparator />\n                  <MenuItem>\n                    <LogOutIcon />\n                    Logout\n                  </MenuItem>\n                </MenuPopup>\n              </Menu>\n            </SidebarItem>\n          </SidebarList>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  );\n}\n\nconst recentChats = [\n  { title: 'Atomic CSS vs Utility-first CSS', pinned: true },\n  { title: 'React Server Components basic example', pinned: true },\n  { title: 'Next.js dynamic routing gotchas', pinned: false },\n  { title: 'Better folder structure for reusable UI', pinned: false },\n  { title: 'State management with Zustand pattern', pinned: false },\n  { title: 'Collapsible sidebar accessibility best practices', pinned: false },\n  { title: 'Optimizing React rendering performance', pinned: false },\n  { title: 'Dark mode implementation overview', pinned: false },\n  { title: 'Vite vs Webpack build speeds', pinned: false },\n  { title: 'Shared form validation rules in React', pinned: false },\n  { title: 'Comparing tRPC and REST for API design', pinned: false },\n  { title: 'Tips for CSS-in-JS migration', pinned: false },\n  { title: 'React context and prop drilling explained', pinned: false },\n  { title: 'Keyboard shortcuts in web apps', pinned: false },\n  { title: 'TypeScript generics for UI components', pinned: false },\n  { title: 'Testing React components with RTL', pinned: false },\n  { title: 'Deploying fullstack apps on Vercel', pinned: false },\n  { title: 'Animating list reordering in Framer Motion', pinned: false },\n  { title: 'Responsive design with Tailwind CSS', pinned: false },\n  { title: 'Handling errors in async React flows', pinned: false },\n  { title: 'Managing complex state with reducers', pinned: false },\n  { title: 'Component-driven design workflows', pinned: false },\n  { title: 'Integration testing in monorepos', pinned: false },\n  { title: 'Mocking API responses for frontend dev', pinned: false },\n];\n\n","import { useState } from 'react';\nimport { Button } from 'components/selia/button';\nimport { Card, CardHeader, CardTitle, CardDescription, CardBody } from 'components/selia/card';\nimport { Input } from 'components/selia/input';\nimport { Field, FieldLabel } from 'components/selia/field';\nimport { Text, TextLink } from 'components/selia/text';\nimport { Divider } from 'components/selia/divider';\n\nexport default function LoginBlock() {\n  const [pending, setPending] = useState(false);\n\n  return (\n    <div className=\"w-full lg:h-screen flex items-center justify-center p-4\">\n      <Card className=\"w-full lg:w-5/12 xl:w-md\">\n        <CardHeader align=\"center\">\n          <CardTitle>Sign in to your account</CardTitle>\n          <CardDescription>\n            Login with your Google or GitHub account\n          </CardDescription>\n        </CardHeader>\n        <CardBody className=\"flex flex-col gap-5\">\n          <div className=\"flex flex-col gap-2.5\">\n            <Button variant=\"secondary\" block size=\"lg\">\n              <svg\n                width=\"19\"\n                height=\"19\"\n                viewBox=\"0 0 19 19\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <g clipPath=\"url(#clip0_213_6713)\">\n                  <path\n                    d=\"M6.77029 1.09195C4.97181 1.71586 3.42081 2.90006 2.34509 4.47061C1.26938 6.04116 0.725656 7.91528 0.79379 9.81769C0.861924 11.7201 1.53832 13.5505 2.72364 15.0401C3.90895 16.5297 5.54069 17.5999 7.3792 18.0935C8.86972 18.4781 10.4313 18.495 11.9298 18.1427C13.2873 17.8378 14.5423 17.1856 15.572 16.2499C16.6437 15.2463 17.4216 13.9697 17.822 12.5571C18.2571 11.021 18.3346 9.40562 18.0484 7.83492H9.67842V11.307H14.5258C14.4289 11.8607 14.2213 12.3892 13.9154 12.8609C13.6095 13.3326 13.2116 13.7377 12.7455 14.052C12.1536 14.4436 11.4863 14.7071 10.7865 14.8254C10.0847 14.9559 9.3649 14.9559 8.66311 14.8254C7.95176 14.6785 7.27885 14.3849 6.68732 13.9634C5.73691 13.2906 5.02328 12.3348 4.64826 11.2324C4.26701 10.1094 4.26701 8.89188 4.64826 7.76883C4.91521 6.98163 5.3565 6.26489 5.9392 5.67211C6.60603 4.98128 7.45026 4.48748 8.37926 4.24487C9.30826 4.00226 10.2861 4.02023 11.2056 4.2968C11.9239 4.51719 12.5808 4.90244 13.1237 5.4218C13.6703 4.87805 14.2159 4.33289 14.7606 3.78633C15.0419 3.49242 15.3484 3.21258 15.6254 2.91164C14.7965 2.14034 13.8236 1.54013 12.7623 1.14539C10.8297 0.443657 8.71511 0.424798 6.77029 1.09195Z\"\n                    fill=\"white\"\n                  />\n                  <path\n                    d=\"M6.77004 1.09215C8.71469 0.42454 10.8293 0.442902 12.7621 1.14418C13.8235 1.5416 14.796 2.1447 15.6238 2.91887C15.3425 3.2198 15.0458 3.50105 14.7589 3.79355C14.2133 4.33824 13.6682 4.88105 13.1235 5.42199C12.5805 4.90263 11.9237 4.51738 11.2054 4.29699C10.2862 4.01945 9.30835 4.00045 8.3791 4.24207C7.44985 4.48368 6.6051 4.97658 5.93754 5.66668C5.35484 6.25946 4.91354 6.9762 4.6466 7.7634L1.73145 5.50637C2.77489 3.43716 4.58156 1.85437 6.77004 1.09215Z\"\n                    fill=\"#E33629\"\n                  />\n                  <path\n                    d=\"M0.958551 7.74229C1.11512 6.96571 1.37526 6.21368 1.73199 5.50635L4.64714 7.769C4.2659 8.89206 4.2659 10.1095 4.64714 11.2326C3.67589 11.9826 2.70418 12.7363 1.73199 13.4938C0.839231 11.7168 0.566956 9.69205 0.958551 7.74229Z\"\n                    fill=\"#F8BD00\"\n                  />\n                  <path\n                    d=\"M9.67836 7.8335H18.0484C18.3345 9.40419 18.2571 11.0196 17.822 12.5557C17.4215 13.9682 16.6436 15.2449 15.572 16.2485C14.6312 15.5144 13.6862 14.786 12.7454 14.0519C13.2118 13.7373 13.6099 13.3318 13.9158 12.8596C14.2217 12.3875 14.4292 11.8584 14.5257 11.3041H9.67836C9.67695 10.1482 9.67836 8.99084 9.67836 7.8335Z\"\n                    fill=\"#587DBD\"\n                  />\n                  <path\n                    d=\"M1.73047 13.4937C2.70266 12.7437 3.67437 11.9899 4.64562 11.2324C5.02139 12.3352 5.73604 13.291 6.6875 13.9634C7.28087 14.3829 7.95523 14.6741 8.6675 14.8184C9.3693 14.9489 10.0891 14.9489 10.7909 14.8184C11.4907 14.7001 12.158 14.4366 12.7498 14.0449C13.6906 14.779 14.6356 15.5074 15.5764 16.2415C14.5469 17.1777 13.2918 17.8304 11.9342 18.1357C10.4357 18.488 8.87411 18.4711 7.38359 18.0865C6.20474 17.7717 5.10361 17.2169 4.14922 16.4566C3.13915 15.6545 2.31411 14.6439 1.73047 13.4937Z\"\n                    fill=\"#319F43\"\n                  />\n                </g>\n                <defs>\n                  <clipPath id=\"clip0_213_6713\">\n                    <rect\n                      width=\"18\"\n                      height=\"18\"\n                      fill=\"white\"\n                      transform=\"translate(0.5 0.5)\"\n                    />\n                  </clipPath>\n                </defs>\n              </svg>\n              Login with Google\n            </Button>\n            <Button variant=\"secondary\" block size=\"lg\">\n              <svg\n                width=\"18\"\n                height=\"19\"\n                viewBox=\"0 0 18 19\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fillRule=\"evenodd\"\n                  clipRule=\"evenodd\"\n                  d=\"M8.99988 1.21753C4.31045 1.21753 0.507812 5.01933 0.507812 9.70959C0.507812 13.4617 2.94105 16.6448 6.3152 17.7678C6.73947 17.8466 6.89528 17.5836 6.89528 17.3593C6.89528 17.1568 6.88741 16.4879 6.88375 15.7783C4.52125 16.292 4.02273 14.7763 4.02273 14.7763C3.63644 13.7947 3.07984 13.5337 3.07984 13.5337C2.30922 13.0067 3.13792 13.0177 3.13792 13.0177C3.99053 13.0774 4.43969 13.8928 4.43969 13.8928C5.19709 15.1907 6.4263 14.8155 6.91089 14.5987C6.98711 14.0498 7.20719 13.6751 7.45005 13.463C5.56384 13.2486 3.58089 12.5203 3.58089 9.26634C3.58089 8.3392 3.91277 7.58165 4.456 6.98681C4.36769 6.77306 4.07702 5.90934 4.53813 4.73962C4.53813 4.73962 5.25109 4.51139 6.87391 5.61009C7.55144 5.42179 8.27805 5.32715 8.99988 5.32392C9.72128 5.32715 10.4483 5.42151 11.1271 5.60981C12.748 4.51111 13.4601 4.73934 13.4601 4.73934C13.9223 5.90892 13.6316 6.77278 13.5435 6.98653C14.088 7.58137 14.4175 8.33892 14.4175 9.26606C14.4175 12.5277 12.4308 13.2457 10.5399 13.4561C10.8446 13.7197 11.116 14.2366 11.116 15.0287C11.116 16.165 11.1062 17.0795 11.1062 17.3592C11.1062 17.5852 11.2592 17.85 11.6895 17.7666C15.0617 16.6424 17.4921 13.4603 17.4921 9.70959C17.4919 5.01961 13.6897 1.21753 8.99988 1.21753Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M3.72465 13.4101C3.70595 13.4523 3.63957 13.465 3.5791 13.4361C3.51723 13.4086 3.48278 13.351 3.50274 13.3087C3.52103 13.2651 3.58754 13.2532 3.64899 13.2823C3.71087 13.31 3.74603 13.3681 3.72451 13.4103L3.72465 13.4101ZM4.06862 13.7939C4.02826 13.8314 3.94909 13.814 3.89537 13.7545C3.83968 13.6954 3.82928 13.6163 3.87048 13.5782C3.91239 13.5408 3.98917 13.5585 4.04485 13.6175C4.10026 13.6774 4.11123 13.7559 4.06876 13.794L4.06862 13.7939ZM4.40359 14.2828C4.35156 14.3191 4.26634 14.2852 4.21374 14.2097C4.16171 14.134 4.16171 14.0433 4.21515 14.0072C4.2676 13.9709 4.35156 14.0037 4.40499 14.0785C4.45674 14.1551 4.45674 14.246 4.40359 14.2828ZM4.86217 14.7555C4.81576 14.8068 4.71648 14.793 4.64392 14.7231C4.56981 14.6546 4.54914 14.5572 4.59568 14.506C4.64293 14.4545 4.74264 14.4689 4.81562 14.5383C4.88973 14.6067 4.91209 14.7043 4.86245 14.7553L4.86217 14.7555ZM5.49498 15.0298C5.47431 15.0963 5.37896 15.1266 5.28264 15.0982C5.18659 15.0691 5.12373 14.9913 5.14342 14.9241C5.1631 14.857 5.25915 14.8256 5.35604 14.8559C5.45209 14.8848 5.51495 14.9622 5.49498 15.0298ZM6.19009 15.0806C6.19248 15.1506 6.11092 15.2086 6.01009 15.21C5.90842 15.2124 5.82615 15.1555 5.82517 15.0866C5.82517 15.0159 5.90504 14.9587 6.00657 14.9567C6.1074 14.9549 6.19023 15.0111 6.19023 15.0805L6.19009 15.0806ZM6.83668 14.9706C6.84878 15.0388 6.7786 15.109 6.67834 15.1277C6.5799 15.146 6.48849 15.1035 6.47584 15.0359C6.46374 14.9658 6.53518 14.8957 6.63362 14.8775C6.73403 14.8602 6.82403 14.9013 6.83668 14.9706Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              Login with GitHub\n            </Button>\n          </div>\n          <Divider variant=\"center\" className=\"my-2\">\n            Or continue with email\n          </Divider>\n          <Field>\n            <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n            <Input id=\"email\" type=\"email\" placeholder=\"Enter your email\" />\n          </Field>\n          <Field>\n            <div className=\"flex items-center\">\n              <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n              <TextLink href=\"#\" className=\"ml-auto\">\n                Forgot password?\n              </TextLink>\n            </div>\n            <Input\n              id=\"password\"\n              type=\"password\"\n              placeholder=\"Enter your password\"\n            />\n          </Field>\n          <Button\n            variant=\"primary\"\n            block\n            size=\"lg\"\n            progress={pending}\n            onClick={() => {\n              setPending(true);\n              setTimeout(() => setPending(false), 2000);\n            }}\n          >\n            Sign In\n          </Button>\n          <Text className=\"text-center\">\n            Don't have an account? <TextLink href=\"#\">Sign up</TextLink>\n          </Text>\n        </CardBody>\n      </Card>\n    </div>\n  );\n}\n",{"_332":333,"_334":335,"_336":337,"_325":338,"_279":339,"_340":341},"app-sidebar.tsx","import { Sidebar, SidebarCollapsible, SidebarCollapsiblePanel, SidebarCollapsibleTrigger, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupTitle, SidebarHeader, SidebarItem, SidebarItemButton, SidebarList, SidebarLogo, SidebarMenu, SidebarSubmenu } from 'components/selia/sidebar';\nimport { ChartAreaIcon, ChevronsUpDownIcon, HomeIcon, LogOutIcon, Package2Icon, SearchIcon, SettingsIcon, ShoppingBagIcon, TagsIcon, UserIcon } from 'lucide-react';\nimport { Menu, MenuPopup, MenuItem, MenuTrigger } from 'components/selia/menu';\nimport { Avatar, AvatarFallback, AvatarImage } from 'components/selia/avatar';\nimport { InputGroup, InputGroupAddon } from 'components/selia/input-group';\nimport { Input } from 'components/selia/input';\nimport { Kbd } from 'components/selia/kbd';\n\nexport function AppSidebar() {\n  return (\n    <Sidebar\n      size=\"loose\"\n      className=\"bg-background xl:bg-transparent max-lg:border-r border-border\"\n    >\n      <SidebarHeader>\n        <SidebarLogo>\n          <img src=\"/selia.png\" alt=\"Selia\" className=\"size-8\" />\n          <span className=\"font-semibold\">Selia</span>\n        </SidebarLogo>\n        <InputGroup className=\"mt-4\">\n          <InputGroupAddon>\n            <SearchIcon />\n          </InputGroupAddon>\n          <Input placeholder=\"Search\" />\n          <InputGroupAddon align=\"end\">\n            <Kbd>/</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarMenu>\n          <SidebarGroup>\n            <SidebarGroupTitle>Navigation</SidebarGroupTitle>\n            <SidebarList>\n              <SidebarItem>\n                <SidebarItemButton active>\n                  <HomeIcon />\n                  Dashboard\n                </SidebarItemButton>\n              </SidebarItem>\n              <SidebarItem>\n                <SidebarItemButton>\n                  <ShoppingBagIcon />\n                  Products\n                </SidebarItemButton>\n              </SidebarItem>\n              <SidebarItem>\n                <SidebarItemButton>\n                  <TagsIcon />\n                  Categories\n                </SidebarItemButton>\n              </SidebarItem>\n              <SidebarItem>\n                <SidebarItemButton>\n                  <Package2Icon />\n                  Orders\n                </SidebarItemButton>\n              </SidebarItem>\n              <SidebarCollapsible>\n                <SidebarCollapsibleTrigger\n                  render={\n                    <SidebarItemButton>\n                      <ChartAreaIcon />\n                      Reports\n                    </SidebarItemButton>\n                  }\n                />\n                <SidebarCollapsiblePanel>\n                  <SidebarSubmenu>\n                    <SidebarList>\n                      <SidebarItem>\n                        <SidebarItemButton>Sales</SidebarItemButton>\n                      </SidebarItem>\n                      <SidebarItem>\n                        <SidebarItemButton>Traffic</SidebarItemButton>\n                      </SidebarItem>\n                      <SidebarItem>\n                        <SidebarItemButton>Conversion</SidebarItemButton>\n                      </SidebarItem>\n                    </SidebarList>\n                  </SidebarSubmenu>\n                </SidebarCollapsiblePanel>\n              </SidebarCollapsible>\n            </SidebarList>\n          </SidebarGroup>\n        </SidebarMenu>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarList>\n            <SidebarItem>\n              <Menu>\n                <MenuTrigger\n                  data-slot=\"sidebar-item-button\"\n                  nativeButton={false}\n                  render={\n                    <SidebarItemButton className=\"border border-border\">\n                      <Avatar>\n                        <AvatarImage src=\"/human01.jpg\" alt=\"Avatar\" />\n                        <AvatarFallback>BS</AvatarFallback>\n                      </Avatar>\n                      <div className=\"flex flex-col\">\n                        <span className=\"font-medium\">Anna Thompson</span>\n                        <span className=\"text-sm text-muted\">\n                          anna@example.com\n                        </span>\n                      </div>\n                      <ChevronsUpDownIcon className=\"ml-auto\" />\n                    </SidebarItemButton>\n                  }\n                />\n                <MenuPopup className=\"w-(--anchor-width)\" side=\"top\">\n                  <MenuItem>\n                    <UserIcon />\n                    Profile\n                  </MenuItem>\n                  <MenuItem>\n                    <SettingsIcon />\n                    Settings\n                  </MenuItem>\n                  <MenuItem>\n                    <LogOutIcon />\n                    Logout\n                  </MenuItem>\n                </MenuPopup>\n              </Menu>\n            </SidebarItem>\n          </SidebarList>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  );\n}\n","chart.tsx","import { Card, CardBody, CardHeader, CardTitle, CardHeaderAction } from 'components/selia/card';\nimport { Select, SelectPopup, SelectItem, SelectList, SelectTrigger, SelectValue } from 'components/selia/select';\nimport { cn } from 'lib/utils';\nimport { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';\nimport { data } from './data';\n\nexport function Chart() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Sales</CardTitle>\n        <CardHeaderAction>\n          <Select defaultValue=\"Last Week\">\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectPopup>\n              <SelectList>\n                <SelectItem value=\"Last Week\">Last Week</SelectItem>\n                <SelectItem value=\"Last Month\">Last Month</SelectItem>\n                <SelectItem value=\"Last Year\">Last Year</SelectItem>\n              </SelectList>\n            </SelectPopup>\n          </Select>\n        </CardHeaderAction>\n      </CardHeader>\n      <CardBody>\n        <div\n          className={cn(\n            'w-full h-[200px] md:h-[480px] [&_*]:outline-none',\n            '[&_.recharts-cartesian-axis-tick-value]:text-sm [&_.recharts-cartesian-axis-tick-value]:fill-dimmed',\n          )}\n        >\n          <ResponsiveContainer>\n            <AreaChart\n              data={data}\n              margin={{\n                top: 8,\n                right: 0,\n                left: 20,\n                bottom: 0,\n              }}\n            >\n              <defs>\n                <linearGradient id=\"colorSeries1\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                  <stop offset=\"5%\" stopColor=\"#60a5fa\" stopOpacity={0.38} />\n                  <stop offset=\"95%\" stopColor=\"#60a5fa\" stopOpacity={0.08} />\n                </linearGradient>\n                <linearGradient id=\"colorSeries2\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                  <stop\n                    offset=\"5%\"\n                    stopColor=\"var(--color-primary)\"\n                    stopOpacity={0.25}\n                  />\n                  <stop\n                    offset=\"95%\"\n                    stopColor=\"var(--color-primary)\"\n                    stopOpacity={0.07}\n                  />\n                </linearGradient>\n              </defs>\n              <CartesianGrid vertical={false} stroke=\"var(--color-separator)\" />\n              <XAxis dataKey=\"name\" axisLine={false} tickLine={false} />\n              <YAxis axisLine={false} width={32} tickLine={false} />\n              <Tooltip\n                contentStyle={{\n                  borderRadius: 'var(--radius)',\n                  boxShadow: '0 3px 8px rgba(0,0,0,0.08)',\n                  background: 'var(--color-popover)',\n                  border: 'none',\n                }}\n                itemStyle={{\n                  color: 'var(--color-muted)',\n                  fontSize: 'var(--text-sm)',\n                  display: 'flex',\n                }}\n                labelStyle={{\n                  color: 'var(--color-foreground)',\n                  fontSize: 'var(--text-sm)',\n                  fontWeight: 600,\n                  marginBottom: 4,\n                }}\n                cursor={false}\n              />\n              <Area\n                type=\"monotone\"\n                dataKey=\"orders\"\n                name=\"Orders\"\n                stroke=\"var(--color-primary)\"\n                fillOpacity={1}\n                fill=\"url(#colorSeries2)\"\n                strokeWidth={2}\n              />\n            </AreaChart>\n          </ResponsiveContainer>\n        </div>\n      </CardBody>\n    </Card>\n  );\n}\n","data.ts","export const data = [\n  {\n    name: 'Mon',\n    orders: 800,\n  },\n  {\n    name: 'Tue',\n    orders: 1250,\n  },\n  {\n    name: 'Wed',\n    orders: 1120,\n  },\n  {\n    name: 'Thu',\n    orders: 1500,\n  },\n  {\n    name: 'Fri',\n    orders: 1850,\n  },\n  {\n    name: 'Sat',\n    orders: 1420,\n  },\n  {\n    name: 'Sun',\n    orders: 1700,\n  },\n];\n","import { useState, useEffect } from 'react';\nimport { cn } from 'lib/utils';\nimport { Button } from 'components/selia/button';\nimport { Heading } from 'components/selia/heading';\nimport { SidebarCloseIcon, SidebarOpenIcon } from 'lucide-react';\n\nexport function Layout({\n  children,\n  sidebar,\n}: {\n  children: React.ReactNode;\n  sidebar: React.ReactNode;\n}) {\n  const [sidebarOpen, setSidebarOpen] = useState(true);\n\n  useEffect(() => {\n    const windowResize = () => {\n      if (window.innerWidth < 1024) {\n        setSidebarOpen(false);\n      } else {\n        setSidebarOpen(true);\n      }\n    };\n\n    windowResize();\n    window.addEventListener('resize', windowResize);\n    return () => window.removeEventListener('resize', windowResize);\n  }, []);\n\n  function handleSidebarOpen() {\n    setSidebarOpen(!sidebarOpen);\n  }\n\n  return (\n    <>\n      <div\n        className={cn(\n          'fixed inset-0 bg-black backdrop-blur-sm z-10 transition-all',\n          'max-lg:block hidden',\n          sidebarOpen ? 'opacity-40 visible' : 'opacity-0 invisible',\n        )}\n        onClick={handleSidebarOpen}\n      />\n      <div\n        className={cn(\n          'fixed top-0 z-50 w-full max-w-72 md:w-72 h-dvh *:h-full transition-all',\n          sidebarOpen ? 'left-0' : '-left-full',\n        )}\n      >\n        {sidebar}\n      </div>\n      <main\n        className={cn('transition-all', sidebarOpen ? 'xl:ml-72' : 'xl:ml-0')}\n      >\n        <nav\n          className={cn(\n            'h-16 flex items-center gap-2.5 max-lg:px-4',\n            sidebarOpen ? 'xl:pr-4' : 'xl:px-4',\n          )}\n        >\n          <Button\n            variant=\"secondary-plain\"\n            size=\"sm-icon\"\n            onClick={handleSidebarOpen}\n          >\n            {sidebarOpen ? <SidebarCloseIcon /> : <SidebarOpenIcon />}\n          </Button>\n          <Heading size=\"sm\">Dashboard</Heading>\n        </nav>\n        <div\n          className={cn(\n            'min-h-[calc(100vh-4rem)] flex flex-col gap-6 max-lg:px-4 pb-6',\n            sidebarOpen ? 'xl:pr-4' : 'xl:px-4',\n          )}\n        >\n          {children}\n        </div>\n      </main>\n    </>\n  );\n}\n","import { Layout } from './layout';\nimport { AppSidebar } from './app-sidebar';\nimport { StatCard } from './stat-card';\nimport { Chart } from './chart';\nimport { ArrowRightCircleIcon, ArrowRightIcon, Package2Icon, ShoppingBagIcon, TagsIcon, Users2Icon } from 'lucide-react';\nimport { Badge } from 'components/selia/badge';\nimport { Button } from 'components/selia/button';\nimport { Card, CardBody, CardFooter, CardHeader, CardHeaderAction, CardTitle } from 'components/selia/card';\nimport { Text } from 'components/selia/text';\nimport { Stack } from 'components/selia/stack';\nimport { Item, ItemContent, ItemDescription, ItemMedia, ItemMeta, ItemTitle } from 'components/selia/item';\nimport { Separator } from 'components/selia/separator';\nimport { Table, TableBody, TableCell, TableContainer, TableHead, TableHeader, TableRow } from 'components/selia/table';\n\nexport default function Dashboard() {\n  return (\n    <Layout sidebar={<AppSidebar />}>\n      <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4\">\n        <StatCard\n          icon={<ShoppingBagIcon />}\n          title=\"Total Sales\"\n          value=\"$12,340\"\n          change=\"+8.2%\"\n          changeType=\"increase\"\n        />\n        <StatCard\n          icon={<Users2Icon />}\n          title=\"Customers\"\n          value=\"3,210\"\n          change=\"+4.1%\"\n          changeType=\"increase\"\n        />\n        <StatCard\n          icon={<Package2Icon />}\n          title=\"Orders\"\n          value=\"1,520\"\n          change=\"-2.3%\"\n          changeType=\"decrease\"\n        />\n        <StatCard\n          icon={<TagsIcon />}\n          title=\"Revenue\"\n          value=\"$24,580\"\n          change=\"+6.9%\"\n          changeType=\"increase\"\n        />\n      </div>\n      <div className=\"flex gap-4 lg:flex-nowrap flex-wrap\">\n        <div className=\"w-full lg:w-8/12\">\n          <Chart />\n        </div>\n        <div className=\"w-full lg:w-4/12\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Best Selling</CardTitle>\n            </CardHeader>\n            <CardBody>\n              <Stack>\n                <Item render={<a href=\"#\" />} variant=\"plain\">\n                  <ItemMedia>\n                    <img\n                      src=\"https://images.unsplash.com/photo-1545127398-14699f92334b\"\n                      alt=\"Product\"\n                      className=\"size-11 rounded\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Golden Beats Headphones</ItemTitle>\n                    <ItemDescription>$120.00</ItemDescription>\n                  </ItemContent>\n                  <ItemMeta className=\"ml-auto shrink-0\">40 sales</ItemMeta>\n                </Item>\n                <Separator />\n                <Item render={<a href=\"#\" />} variant=\"plain\">\n                  <ItemMedia>\n                    <img\n                      src=\"https://images.unsplash.com/photo-1516962126636-27ad087061cc\"\n                      alt=\"Product\"\n                      className=\"size-11 rounded\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Polaroid Pronto 600 Instant Camera</ItemTitle>\n                    <ItemDescription>$730.00</ItemDescription>\n                  </ItemContent>\n                  <ItemMeta className=\"ml-auto shrink-0\">40 sales</ItemMeta>\n                </Item>\n                <Separator />\n                <Item render={<a href=\"#\" />} variant=\"plain\">\n                  <ItemMedia>\n                    <img\n                      src=\"https://images.unsplash.com/photo-1549482199-bc1ca6f58502\"\n                      alt=\"Product\"\n                      className=\"size-11 rounded\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Black Leather Strap Smartwatch</ItemTitle>\n                    <ItemDescription>$600.00</ItemDescription>\n                  </ItemContent>\n                  <ItemMeta className=\"ml-auto shrink-0\">12 sales</ItemMeta>\n                </Item>\n                <Separator />\n                <Item render={<a href=\"#\" />} variant=\"plain\">\n                  <ItemMedia>\n                    <img\n                      src=\"https://images.unsplash.com/photo-1619008054959-921a896885c7\"\n                      alt=\"Product\"\n                      className=\"size-11 rounded\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>DJI Remote Controller</ItemTitle>\n                    <ItemDescription>$350.00</ItemDescription>\n                  </ItemContent>\n                  <ItemMeta className=\"ml-auto shrink-0\">21 sales</ItemMeta>\n                </Item>\n                <Separator />\n                <Item render={<a href=\"#\" />} variant=\"plain\">\n                  <ItemMedia>\n                    <img\n                      src=\"https://images.unsplash.com/photo-1605034313761-73ea4a0cfbf3\"\n                      alt=\"Product\"\n                      className=\"size-11 rounded\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>PUMA Suede Classic Grey Sneakers</ItemTitle>\n                    <ItemDescription>$120.00</ItemDescription>\n                  </ItemContent>\n                  <ItemMeta className=\"ml-auto shrink-0\">28 sales</ItemMeta>\n                </Item>\n              </Stack>\n            </CardBody>\n            <CardFooter>\n              <Button variant=\"secondary\" block size=\"lg\">\n                View All <ArrowRightCircleIcon />\n              </Button>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n      <Card>\n        <CardHeader>\n          <CardTitle>Recent Orders</CardTitle>\n          <CardHeaderAction>\n            <Button variant=\"secondary\" render={<a href=\"#\" />}>\n              View All\n              <ArrowRightIcon />\n            </Button>\n          </CardHeaderAction>\n        </CardHeader>\n        <CardBody>\n          <TableContainer>\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead>Order ID</TableHead>\n                  <TableHead>Customer</TableHead>\n                  <TableHead>Date</TableHead>\n                  <TableHead>Total</TableHead>\n                  <TableHead>Status</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow>\n                  <TableCell>\n                    <a href=\"#\">\n                      <Text className=\"text-muted\">5678</Text>\n                    </a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">Jessica Pearson</a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">2025-06-01</a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">$532.44</a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">\n                      <Badge variant=\"success\">Completed</Badge>\n                    </a>\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <a href=\"#\">\n                      <Text className=\"text-muted\">5683</Text>\n                    </a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">Michael Ross</a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">2025-06-02</a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">$89.99</a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">\n                      <Badge variant=\"warning\">Pending</Badge>\n                    </a>\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <a href=\"#\">\n                      <Text className=\"text-muted\">5690</Text>\n                    </a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">Rachel Zane</a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">2025-06-04</a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">$250.00</a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">\n                      <Badge variant=\"danger\">Canceled</Badge>\n                    </a>\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <a href=\"#\">\n                      <Text className=\"text-muted\">5765</Text>\n                    </a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">Harvey Specter</a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">2025-06-06</a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">$1,732.10</a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">\n                      <Badge variant=\"success\">Completed</Badge>\n                    </a>\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <a href=\"#\">\n                      <Text className=\"text-muted\">5892</Text>\n                    </a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">Donna Paulsen</a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">2025-06-08</a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">$423.67</a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">\n                      <Badge variant=\"info\">Processing</Badge>\n                    </a>\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <a href=\"#\">\n                      <Text className=\"text-muted\">5921</Text>\n                    </a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">Larry Litt</a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">2025-06-09</a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">$205.49</a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">\n                      <Badge variant=\"warning\">Pending</Badge>\n                    </a>\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <a href=\"#\">\n                      <Text className=\"text-muted\">6002</Text>\n                    </a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">Katrina Bennett</a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">2025-06-10</a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">$1,225.00</a>\n                  </TableCell>\n                  <TableCell>\n                    <a href=\"#\">\n                      <Badge variant=\"success\">Completed</Badge>\n                    </a>\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n            </Table>\n          </TableContainer>\n        </CardBody>\n      </Card>\n    </Layout>\n  );\n}\n","stat-card.tsx","import { Card, CardBody } from 'components/selia/card';\nimport { IconBox } from 'components/selia/icon-box';\nimport { Heading } from 'components/selia/heading';\nimport { Text } from 'components/selia/text';\nimport { Badge } from 'components/selia/badge';\n\nexport function StatCard({\n  icon,\n  title,\n  value,\n  change,\n  changeType,\n}: {\n  icon: React.ReactNode;\n  title: string;\n  value: string;\n  change: string;\n  changeType: 'increase' | 'decrease';\n}) {\n  return (\n    <Card>\n      <CardBody>\n        <IconBox size=\"lg\" variant=\"info-subtle\" className=\"mb-4\">\n          {icon}\n        </IconBox>\n        <Heading size=\"sm\" className=\"font-medium text-dimmed\">\n          {title}\n        </Heading>\n        <Text className=\"text-4xl font-semibold mt-2\">{value}</Text>\n        <div className=\"flex items-center gap-2 mt-2\">\n          <Badge\n            variant={changeType === 'increase' ? 'success' : 'danger'}\n            className=\"mt-2\"\n          >\n            {change}\n          </Badge>\n          <Text className=\"text-sm text-dimmed mt-2\">\n            {changeType === 'increase'\n              ? 'Compared to last month'\n              : 'Compared to last week'}\n          </Text>\n        </div>\n      </CardBody>\n    </Card>\n  );\n}\n","import { useState } from 'react';\nimport { Button } from 'components/selia/button';\nimport { Card, CardHeader, CardTitle, CardDescription, CardBody } from 'components/selia/card';\nimport { Input } from 'components/selia/input';\nimport { Field, FieldControl, FieldError, FieldLabel } from 'components/selia/field';\nimport { Textarea } from 'components/selia/textarea';\nimport { Select, SelectTrigger, SelectValue, SelectPopup, SelectList, SelectItem } from 'components/selia/select';\nimport { Heading } from 'components/selia/heading';\nimport { Text } from 'components/selia/text';\nimport { MailIcon, PhoneIcon, MapPinIcon } from 'lucide-react';\nimport { IconBox } from 'components/selia/icon-box';\nimport { Form } from 'components/selia/form';\nimport { toastManager } from 'components/selia/toast';\n\nexport default function ContactBlock() {\n  const [pending, setPending] = useState(false);\n\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    const form = event.currentTarget;\n    setPending(true);\n\n    setTimeout(() => {\n      setPending(false);\n\n      toastManager.add({\n        title: 'Message sent',\n        description: 'We will get back to you shortly.',\n        type: 'success',\n      });\n\n      form.reset();\n    }, 2000);\n  };\n\n  return (\n    <div className=\"w-full lg:min-h-screen flex items-center justify-center p-4 py-20\">\n      <div className=\"container max-w-6xl 2xl:max-w-5xl grid lg:grid-cols-2 gap-10 items-start\">\n        <div className=\"flex flex-col gap-8\">\n          <div className=\"flex flex-col gap-4\">\n            <Heading size=\"lg\">Get in touch</Heading>\n            <Text className=\"text-dimmed lg:max-w-md\">\n              Have a question or just want to say hi? We'd love to hear from\n              you. Fill out the form and our team will get back to you shortly.\n            </Text>\n          </div>\n\n          <div className=\"flex flex-col gap-6\">\n            <div className=\"flex items-start gap-4\">\n              <IconBox variant=\"primary-subtle\" circle>\n                <MailIcon />\n              </IconBox>\n              <div>\n                <Heading level={4} size=\"sm\">\n                  Email\n                </Heading>\n                <Text className=\"text-dimmed\">hello@selia.earth</Text>\n              </div>\n            </div>\n            <div className=\"flex items-start gap-4\">\n              <IconBox variant=\"primary-subtle\" circle>\n                <PhoneIcon />\n              </IconBox>\n              <div>\n                <Heading level={4} size=\"sm\">\n                  Phone\n                </Heading>\n                <Text className=\"text-dimmed\">+62 (822) 000-0000</Text>\n              </div>\n            </div>\n            <div className=\"flex items-start gap-4\">\n              <IconBox variant=\"primary-subtle\" circle>\n                <MapPinIcon />\n              </IconBox>\n              <div>\n                <Heading level={4} size=\"sm\">\n                  Office\n                </Heading>\n                <Text className=\"text-dimmed\">\n                  123 Design St, Jakarta, ID 90210\n                </Text>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <Card className=\"w-full\">\n          <CardHeader align=\"center\">\n            <CardTitle>Send us a message</CardTitle>\n            <CardDescription>We'll respond as soon as we can.</CardDescription>\n          </CardHeader>\n          <CardBody className=\"flex flex-col gap-5\">\n            <Form onSubmit={handleSubmit}>\n              <div className=\"grid md:grid-cols-2 gap-5\">\n                <Field>\n                  <FieldLabel htmlFor=\"first-name\">First Name</FieldLabel>\n                  <Input id=\"first-name\" placeholder=\"John\" required />\n                  <FieldError match=\"valueMissing\">This is required</FieldError>\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"last-name\">Last Name</FieldLabel>\n                  <Input id=\"last-name\" placeholder=\"Doe\" required />\n                  <FieldError match=\"valueMissing\">This is required</FieldError>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"john@example.com\"\n                  required\n                />\n                <FieldError match=\"valueMissing\">This is required</FieldError>\n              </Field>\n              <Field>\n                <FieldLabel>Subject</FieldLabel>\n                <Select defaultValue={subjectOptions[0]} required>\n                  <SelectTrigger>\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectPopup>\n                    <SelectList>\n                      {subjectOptions.map((option) => (\n                        <SelectItem key={option.value} value={option.value}>\n                          {option.label}\n                        </SelectItem>\n                      ))}\n                    </SelectList>\n                  </SelectPopup>\n                </Select>\n                <FieldError match=\"valueMissing\">This is required</FieldError>\n              </Field>\n              <Field name=\"message\">\n                <FieldLabel htmlFor=\"message\">Message</FieldLabel>\n                <FieldControl\n                  render={<Textarea data-slot=\"textarea\" />}\n                  required\n                />\n                <FieldError match=\"valueMissing\">This is required</FieldError>\n              </Field>\n              <Button\n                variant=\"primary\"\n                block\n                size=\"lg\"\n                progress={pending}\n                type=\"submit\"\n              >\n                Send Message\n              </Button>\n            </Form>\n          </CardBody>\n        </Card>\n      </div>\n    </div>\n  );\n}\n\nconst subjectOptions = [\n  {\n    label: 'General Inquiry',\n    value: 'general',\n  },\n  {\n    label: 'Technical Support',\n    value: 'support',\n  },\n  {\n    label: 'Billing',\n    value: 'billing',\n  },\n  {\n    label: 'Other',\n    value: 'other',\n  },\n];\n","actionData","errors"]
</article></body></html>

Build Faster with Pre-Built Blocks