\n Rizal Fakhri\n \n rizal@yayan.com\n \n

\n \n \n }\n />\n \n \n \n Profile\n \n \n \n Settings\n \n \n \n Help\n \n \n \n Switch Account\n \n }\n >\n \n \n \n RF\n \n \n \n Rizal Fakhri\n \n rizal@yayan.com\n \n \n \n }\n >\n \n \n \n NA\n \n \n \n Nauval Azhar\n \n nauval@azhar.com\n \n \n \n \n \n \n \n \n Log Out\n \n \n \n \n \n \n \n \n );\n}\n","import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupTitle, SidebarHeader, SidebarItem, SidebarItemButton, SidebarList, SidebarLogo, SidebarMenu } from 'components/selia/sidebar';\nimport { Menu, MenuTrigger, MenuPopup, MenuItem, MenuSeparator } from 'components/selia/menu';\nimport { Button } from 'components/selia/button';\nimport { PlusIcon, FolderIcon, UploadIcon, FolderUpIcon, FileIcon, HomeIcon, ClockIcon, ShareIcon, SettingsIcon, ShieldIcon, SparklesIcon } from 'lucide-react';\n\nexport default function SidebarStorage() {\n return (\n \n \n \n $\"Selia\"$ \n Storage\n \n \n \n \n New\n \n }\n />\n \n \n \n New Folder\n \n \n \n New File\n \n \n \n \n Upload File\n \n \n \n Upload Folder\n \n \n \n \n \n \n \n \n \n \n \n My Drive\n \n \n \n \n \n Recent\n \n \n \n \n \n Shared by me\n \n \n \n \n \n Folders\n \n \n \n \n Work\n \n \n \n \n \n Personal\n \n \n \n \n \n Projects\n \n \n \n \n \n Archive\n \n \n \n \n \n \n \n \n \n \n \n \n \n Settings\n \n \n \n \n \n Privacy\n \n \n \n \n \n Upgrade Storage\n \n \n \n \n \n \n \n );\n}\n","import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupTitle, SidebarHeader, SidebarItem, SidebarItemButton, SidebarList, SidebarLogo, SidebarMenu } from 'components/selia/sidebar';\nimport { ShareIcon, SettingsIcon, UserIcon, GitBranchIcon, GitCommitIcon, AlertCircleIcon, GitPullRequestIcon, TagIcon, CodeIcon, BookIcon, WorkflowIcon, PackageIcon, RocketIcon } from 'lucide-react';\nimport { Badge } from 'components/selia/badge';\n\nexport default function SidebarGit() {\n return (\n \n \n \n $\"Selia\"$ \n

\n Git\n nauvalazhar/selia\n

\n \n \n \n \n \n \n \n \n \n Code\n \n \n \n \n \n Issues\n 12\n \n \n \n \n \n Commits\n \n \n \n \n \n Branches\n \n \n \n \n \n Merge Requests\n 3\n \n \n \n \n \n Tags\n \n \n \n \n \n Wiki\n \n \n \n \n \n CI/CD\n \n \n \n \n \n Releases\n \n \n \n \n \n Deployments\n \n \n \n \n \n \n \n \n \n Settings\n \n \n \n \n General\n \n \n \n \n \n Members\n \n \n \n \n \n Integrations\n \n \n \n \n \n \n \n );\n}\n","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 } 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 { SidebarCloseIcon } from 'lucide-react';\n\nexport default function SidebarChat() {\n return (\n \n \n

\n \n $\"Selia\"$ \n Chat\n \n \n

\n \n \n \n \n \n \n \n Search\n \n \n \n \n \n Marketplace\n \n \n \n \n \n Storage\n \n \n \n \n \n Artifacts\n \n \n \n \n \n \n \n \n \n Projects\n \n \n \n \n Programming\n \n \n \n \n \n Design\n \n \n \n \n \n New Project\n \n \n \n \n \n Recent\n \n {recentChats.map((chat, index) => (\n \n \n {chat.pinned && }\n \n {chat.title}\n \n \n \n \n \n \n \n \n \n \n Pin\n \n \n \n Share\n \n \n \n Rename\n \n \n \n Archive\n \n \n \n \n Delete\n \n \n \n \n \n ))}\n \n \n \n \n \n \n \n \n \n \n \n \n RF\n \n

\n Rizal Fakhri\n Free plan\n

\n \n \n }\n />\n \n \n \n Upgrade Plan\n \n \n \n Personalization\n \n \n \n Settings\n \n \n \n \n Logout\n \n \n \n \n \n \n \n \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","import { Sidebar, SidebarCollapsible, SidebarCollapsiblePanel, SidebarCollapsibleTrigger, SidebarContent, SidebarGroup, SidebarGroupAction, SidebarGroupTitle, SidebarHeader, SidebarItem, SidebarItemButton, SidebarList, SidebarLogo, SidebarMenu, SidebarSubmenu } from 'components/selia/sidebar';\nimport { InputGroup, InputGroupAddon } from 'components/selia/input-group';\nimport { FileIcon, SearchIcon, PlusIcon, FolderPlusIcon, ChevronRightIcon } from 'lucide-react';\nimport { Input } from 'components/selia/input';\nimport { Kbd } from 'components/selia/kbd';\n\nexport default function SidebarCode() {\n return (\n \n \n \n $\"Selia\"$ \n Code Editor\n \n \n \n \n \n \n \n /\n \n \n \n \n \n \n Opened\n \n {openedFiles.map((file, index) => (\n \n \n \n {file}\n \n \n ))}\n \n \n \n Files\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction FileTree({ tree }: { tree?: Tree[] }) {\n if (!tree) return null;\n\n return (\n <>\n {tree.map((item) => {\n if (item.type === 'file') {\n return (\n \n \n \n {item.name}\n \n \n );\n }\n\n return (\n \n \n \n \n {item.name}\n \n }\n />\n \n \n \n \n \n \n \n \n \n );\n })}\n \n );\n}\n\ntype Tree = {\n name: string;\n type: 'file' | 'folder';\n active?: boolean;\n children?: Tree[];\n};\n\nconst tree: Tree[] = [\n {\n name: 'src',\n type: 'folder',\n children: [\n {\n name: 'components',\n type: 'folder',\n children: [\n { name: 'Button.tsx', type: 'file', active: true },\n { name: 'Header.tsx', type: 'file' },\n { name: 'Sidebar.tsx', type: 'file' },\n ],\n },\n {\n name: 'pages',\n type: 'folder',\n children: [\n { name: 'index.tsx', type: 'file' },\n { name: 'about.tsx', type: 'file' },\n {\n name: 'api',\n type: 'folder',\n children: [{ name: 'user.ts', type: 'file' }],\n },\n ],\n },\n { name: 'App.tsx', type: 'file' },\n { name: 'main.tsx', type: 'file' },\n ],\n },\n { name: 'package.json', type: 'file' },\n { name: 'tsconfig.json', type: 'file' },\n { name: 'README.md', type: 'file' },\n];\n\nconst openedFiles = ['src/components/Button.tsx', 'src/pages/index.tsx'];\n","actionData","errors"]

Build Faster with Pre-Built Blocks