"use client";

import { Sidebar, SidebarItem, SidebarItemGroup, SidebarItems } from "flowbite-react";

import { HiArrowSmRight, HiChartPie, HiInbox, HiShoppingBag, HiTable, HiUser, HiViewBoards } from "react-icons/hi";

import type { CodeData } from "~/components/code-demo";

const code = `

"use client";

import { Sidebar, SidebarItem, SidebarItemGroup, SidebarItems } from "flowbite-react";

import { HiArrowSmRight, HiChartPie, HiInbox, HiShoppingBag, HiTable, HiUser, HiViewBoards } from "react-icons/hi";

export function Component() {

return (

<Sidebar aria-label="Default sidebar example">

<SidebarItems>

<SidebarItemGroup>

<SidebarItem href="#" icon={HiChartPie}>

Dashboard

</SidebarItem>

<SidebarItem href="#" icon={HiViewBoards} label="Pro" labelColor="dark">

Kanban

</SidebarItem>

<SidebarItem href="#" icon={HiInbox} label="3">

Inbox

</SidebarItem>

<SidebarItem href="#" icon={HiUser}>

Users

</SidebarItem>

<SidebarItem href="#" icon={HiShoppingBag}>

Products

</SidebarItem>

<SidebarItem href="#" icon={HiArrowSmRight}>

Sign In

</SidebarItem>

<SidebarItem href="#" icon={HiTable}>

Sign Up

</SidebarItem>

</SidebarItemGroup>

</SidebarItems>

</Sidebar>

);

}

`;

export function Component() {

return (

<Sidebar aria-label="Default sidebar example">

<SidebarItems>

<SidebarItemGroup>

<SidebarItem href="#" icon={HiChartPie}>

Dashboard

</SidebarItem>

<SidebarItem href="#" icon={HiViewBoards} label="Pro" labelColor="dark">

Kanban

</SidebarItem>

<SidebarItem href="#" icon={HiInbox} label="3">

Inbox

</SidebarItem>

<SidebarItem href="#" icon={HiUser}>

Users

</SidebarItem>

<SidebarItem href="#" icon={HiShoppingBag}>

Products

</SidebarItem>

<SidebarItem href="#" icon={HiArrowSmRight}>

Sign In

</SidebarItem>

<SidebarItem href="#" icon={HiTable}>

Sign Up

</SidebarItem>

</SidebarItemGroup>

</SidebarItems>

</Sidebar>

);

}

export const root: CodeData = {

type: "single",

code: {

fileName: "index",

language: "tsx",

code,

},

githubSlug: "sidebar/sidebar.root.tsx",

component: <Component />,

};