Menu

import {ReactNode} from "react"

import {FileText, FolderClosed, LayoutDashboard} from "lucide-react"

import {QButton, QMenu, QMenuItem} from "@qui/react"

export default function Showcase(): ReactNode {
  const items: QMenuItem[] = [
    {
      endIcon: LayoutDashboard,
      id: "dashboard",
      label: "Dashboard",
    },
    {
      endIcon: FolderClosed,
      id: "files",
      label: "Files",
    },
    {
      endIcon: FileText,
      id: "docs",
      label: "Docs",
    },
  ]

  return (
    <div className="flex justify-center gap-6">
      <QMenu
        anchor={
          <QButton aria-label="Default" color="primary" variant="fill">
            Default
          </QButton>
        }
        items={items}
      />

      <QMenu
        anchor={({open, ...anchorProps}) => (
          <QButton
            aria-label="Customized"
            color="primary"
            selected={open}
            variant="fill"
            {...anchorProps}
          >
            Customized
          </QButton>
        )}
        items={items}
      />
    </div>
  )
}

import {ReactNode} from "react"

import {ExternalLink, Link2, Trash} from "lucide-react"
import {Link} from "react-router"

import {QInlineMenu} from "@qui/react"

export default function KitchenSink(): ReactNode {
  return (
    <div className="grid justify-center">
      <QInlineMenu
        items={[
          {id: "start-icon", label: "Start Icon", startIcon: ExternalLink},
          {endIcon: ExternalLink, id: "end-icon", label: "End Icon"},
          {description: "Description", id: "text-labels", label: "Label"},
          {
            description: "Description",
            id: "with-secondary-text",
            label: "Label",
            secondaryText: "Secondary Text",
          },
          {
            description: "Description",
            endIcon: Trash,
            endIconSize: "s",
            id: "with-end-icon",
            label: "Label",
            secondaryText: "Secondary Text",
          },
          {disabled: true, id: "disabled", label: "Disabled"},
          {
            id: "with-separator-and-title",
            sectionTitle: "Section Title (with top separator)",
            separator: "top",
          },
          {id: "just the label", label: "Label"},
          {
            id: "bottom-separator",
            label: "Label (with bottom separator)",
            separator: "bottom",
          },
          {
            endIcon: ExternalLink,
            id: "google-link",
            label: "External Link",
            render: <a href="https://www.google.com" target="_blank" />,
          },
          {
            endIcon: Link2,
            id: "custom-render",
            label: "Internal Link",
            render: <Link to="#item-root-element" />,
          },
        ]}
      />
    </div>
  )
}

import {ReactNode} from "react"

import {ExternalLink, Link2} from "lucide-react"
import {Link} from "react-router"

import {QInlineMenu} from "@qui/react"

export default function CustomMenuItem(): ReactNode {
  return (
    <div className="grid justify-center">
      <QInlineMenu
        items={[
          {
            endIcon: ExternalLink,
            id: "external-link",
            label: "External Link",
            render: <a href="https://www.google.com" target="_blank" />,
          },
          {
            endIcon: Link2,
            id: "internal-link",
            label: "Internal Link (react-router)",
            render: <Link to="#render" />,
          },
        ]}
      />
    </div>
  )
}

import {ReactNode} from "react"

import {
  ChevronRight,
  FileText,
  FolderClosed,
  LayoutDashboard,
} from "lucide-react"

import {QButton, QMenu} from "@qui/react"

export default function SubMenu(): ReactNode {
  return (
    <div className="grid justify-center">
      <QMenu
        anchor={
          <QButton aria-label="Action" color="primary" variant="outline">
            Action
          </QButton>
        }
        items={[
          {
            id: "dashboard",
            label: "Dashboard",
            startIcon: LayoutDashboard,
          },
          {
            endIcon: ChevronRight,
            id: "files",
            items: [
              {
                id: "file-1",
                label: "File",
              },
              {
                id: "file-2",
                label: "File",
              },
              {
                endIcon: ChevronRight,
                id: "folder",
                items: [
                  {id: "folder-file-1", label: "File"},
                  {id: "folder-file-2", label: "File"},
                  {id: "folder-file-3", label: "File"},
                ],
                label: "Folder",
              },
            ],
            label: "Files",
            startIcon: FolderClosed,
          },
          {
            id: "docs",
            label: "Docs",
            startIcon: FileText,
          },
        ]}
      />
    </div>
  )
}

import {MouseEvent, ReactNode, useRef, useState} from "react"

import {QAvatar, QButton, QMenu} from "@qui/react"

export default function AnchorRef(): ReactNode {
  const anchorRef = useRef(null)

  const [open, setOpen] = useState(false)

  return (
    <div className="flex items-center justify-center gap-6">
      <QButton
        color="primary"
        onClick={(event: MouseEvent) => {
          /*
           * since the anchor is attached to another element, we must prevent the
           * click event from bubbling. Otherwise, the list will immediately close
           * from the mouseup event.
           */
          event.stopPropagation()
          setOpen((prevState) => !prevState)
        }}
        variant="fill"
      >
        Action
      </QButton>
      <QAvatar ref={anchorRef} content="AV" variant="text" />
      <QMenu
        anchor={anchorRef}
        items={[
          {
            id: "projects",
            label: "Projects",
          },
          {
            id: "files",
            label: "Files",
          },
        ]}
        onOpenChange={(value: boolean) => {
          setOpen(value)
        }}
        open={open}
      />
    </div>
  )
}