Dropdown Menu

"use client"


import { BookmarkSimple, Copy, DownloadSimple, FileText, Trash } from "@phosphor-icons/react"
import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  IconFrame
} from "@glinui/ui"


const CARD = "mx-auto w-full rounded-2xl border border-[var(--line-soft)] bg-[var(--surface-1)] p-5 [box-shadow:var(--elev-1)]"


export function DropdownRowActionsExample() {
  return (
    <div className={`${CARD} max-w-md`}>
      <div className="flex items-center gap-3">
        <IconFrame size="sm"><FileText aria-hidden="true" /></IconFrame>
        <span className="grid min-w-0 flex-1 text-sm"><span className="font-medium">Vendor agreement.pdf</span><span className="text-xs text-[var(--color-muted)]">2.4 MB, edited yesterday</span></span>
        <DropdownMenu>
          <DropdownMenuTrigger asChild><Button size="icon" variant="ghost" aria-label="File actions">...</Button></DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem><DownloadSimple aria-hidden="true" className="size-4" />Download</DropdownMenuItem>
            <DropdownMenuItem><Copy aria-hidden="true" className="size-4" />Duplicate</DropdownMenuItem>
            <DropdownMenuItem><BookmarkSimple aria-hidden="true" className="size-4" />Add to favorites</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem className="text-[var(--tone-danger-text)]"><Trash aria-hidden="true" className="size-4" />Delete</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  )
}

import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger } from "@glinui/ui"


const variants = ["glinr", "plain", "solid", "soft", "outline", "ghost", "gradient", "glass"] as const


export function Demo() {
  return (
    <div className="flex flex-wrap gap-2">
      {variants.map((variant) => (
        <DropdownMenu key={variant}>
          <DropdownMenuTrigger asChild><Button size="sm" variant="outline">{variant}</Button></DropdownMenuTrigger>
          <DropdownMenuContent variant={variant}>
            <DropdownMenuItem>Profile<DropdownMenuShortcut>⌘P</DropdownMenuShortcut></DropdownMenuItem>
            <DropdownMenuItem>Billing</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem>Sign out</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ))}
    </div>
  )
}

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@glinui/ui"


export function Demo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>Glass menu</DropdownMenuTrigger>
      <DropdownMenuContent variant="glass">
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Billing</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}