Introduction

"use client"

import * as React from "react"
import {
  ChevronLeftIcon,
  ChevronRightIcon,
  Columns3Icon,
  LayoutGridIcon,
  ListIcon,
  ShareIcon,
} from "lucide-react"

import { SearchField } from "@/components/ui/search-field"
import {
  Toolbar,
  ToolbarSpacer,
  ToolbarTitle,
} from "@/components/ui/toolbar"
import {
  ToolbarButton,
  ToolbarButtonGroup,
  ToolbarButtonGroupSeparator,
} from "@/components/ui/toolbar-button-group"
import {
  Window,
  WindowContent,
  WindowControls,
  WindowMain,
} from "@/components/ui/window"

export default function ToolbarDemo() {
  const [view, setView] = React.useState("grid")

  return (
    <Window className="h-60 w-full max-w-2xl">
      <WindowMain>
        <Toolbar>
          <WindowControls className="mx-3" />
          <ToolbarButtonGroup>
            <ToolbarButton aria-label="Back">
              <ChevronLeftIcon className="size-5" />
            </ToolbarButton>
            <ToolbarButtonGroupSeparator />
            <ToolbarButton aria-label="Forward" disabled>
              <ChevronRightIcon className="size-5" />
            </ToolbarButton>
          </ToolbarButtonGroup>
          <ToolbarTitle title="Projects" />
          <ToolbarSpacer />
          <ToolbarButtonGroup
            type="single"
            value={view}
            onValueChange={setView}
            aria-label="View"
            className="max-sm:hidden"
          >
            <ToolbarButton value="grid" aria-label="Icons">
              <LayoutGridIcon strokeWidth={1.6} />
            </ToolbarButton>
            <ToolbarButton value="list" aria-label="List">
              <ListIcon strokeWidth={1.6} />
            </ToolbarButton>
            <ToolbarButton value="columns" aria-label="Columns">
              <Columns3Icon strokeWidth={1.6} />
            </ToolbarButton>
          </ToolbarButtonGroup>
          <ToolbarButtonGroup>
            <ToolbarButton aria-label="Share">
              <ShareIcon strokeWidth={1.6} />
            </ToolbarButton>
          </ToolbarButtonGroup>
          <SearchField variant="glass" size="xl" className="w-40 max-md:hidden" aria-label="Search" />
        </Toolbar>
        <WindowContent className="flex items-center justify-center bg-mac-content text-mac-label-secondary">
          Viewing as {view}
        </WindowContent>
      </WindowMain>
    </Window>
  )
}