Sidebar with sections

"use client";

import React from "react";
import { Avatar } from "@/ui/components/Avatar";
import { IconButton } from "@/ui/components/IconButton";
import { SidebarWithSections } from "@/ui/components/SidebarWithSections";
import { FeatherMoreHorizontal } from "@subframe/core";

function SidebarWithSectionsExample() {
  return (
    <SidebarWithSections
      header={
        <img
          className="h-6 flex-none object-cover"
          src="https://res.cloudinary.com/subframe/image/upload/v1711417507/shared/y2rsnhq3mex4auk54aye.png"
        />
      }
      footer={
        <>
          <div className="flex grow shrink-0 basis-0 items-start gap-2">
            <Avatar image="https://res.cloudinary.com/subframe/image/upload/v1711417513/shared/kwut7rhuyivweg8tmyzl.jpg">
              A
            </Avatar>
            <div className="flex flex-col items-start">
              <span className="text-caption-bold font-caption-bold text-default-font">
                Irvin
              </span>
              <span className="text-caption font-caption text-subtext-color">
                Founder
              </span>
            </div>
          </div>
          <IconButton
            size="small"
            icon={<FeatherMoreHorizontal />}
            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}}
          />
        </>
      }
    >
      <SidebarWithSections.NavItem selected={true}>
        Item
      </SidebarWithSections.NavItem>
      <SidebarWithSections.NavItem>Item</SidebarWithSections.NavItem>
      <SidebarWithSections.NavItem>Item</SidebarWithSections.NavItem>
      <SidebarWithSections.NavSection label="Section">
        <SidebarWithSections.NavItem>Item</SidebarWithSections.NavItem>
        <SidebarWithSections.NavItem>Item</SidebarWithSections.NavItem>
        <SidebarWithSections.NavItem>Item</SidebarWithSections.NavItem>
      </SidebarWithSections.NavSection>
      <SidebarWithSections.NavSection label="Section">
        <SidebarWithSections.NavItem>Item</SidebarWithSections.NavItem>
        <SidebarWithSections.NavItem>Item</SidebarWithSections.NavItem>
        <SidebarWithSections.NavItem>Item</SidebarWithSections.NavItem>
      </SidebarWithSections.NavSection>
    </SidebarWithSections>
  );
}

export default SidebarWithSectionsExample;