Item

import { Item, ItemContent, ItemDescription, ItemTitle } from "@glinui/ui"


export function ItemVariantsDemo() {
  return (
    <div className="grid gap-3 md:grid-cols-2">
      <Item variant="glinr"><ItemContent><ItemTitle>glinr</ItemTitle><ItemDescription>Item description</ItemDescription></ItemContent></Item>
      <Item variant="solid"><ItemContent><ItemTitle>solid</ItemTitle><ItemDescription>Item description</ItemDescription></ItemContent></Item>
      <Item variant="plain"><ItemContent><ItemTitle>plain</ItemTitle><ItemDescription>Item description</ItemDescription></ItemContent></Item>
      <Item variant="soft"><ItemContent><ItemTitle>soft</ItemTitle><ItemDescription>Item description</ItemDescription></ItemContent></Item>
      <Item variant="outline"><ItemContent><ItemTitle>outline</ItemTitle><ItemDescription>Item description</ItemDescription></ItemContent></Item>
      <Item variant="ghost"><ItemContent><ItemTitle>ghost</ItemTitle><ItemDescription>Item description</ItemDescription></ItemContent></Item>
      <Item variant="gradient"><ItemContent><ItemTitle>gradient</ItemTitle><ItemDescription>Item description</ItemDescription></ItemContent></Item>
    </div>
  )
}

import { CaretDown, Warning } from "@phosphor-icons/react"
import {
  Avatar,
  Button,
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemTitle
} from "@glinui/ui"


export function Demo() {
  const tracks = [
    { title: "Night Drive", artist: "Mira Lowe", length: "3:42", tone: "accent" as const },
    { title: "Paper Lanterns", artist: "The Quiet Hours", length: "4:08", tone: "success" as const },
    { title: "Low Tide", artist: "Oskar Venn", length: "2:56", tone: "info" as const }
  ]
  return (
    <ItemGroup className="w-full max-w-lg gap-2">
      {tracks.map((track) => (
        <Item key={track.title} variant="outline" size="sm">
          <ItemMedia>
            <Avatar radius="lg" fallback={track.title.slice(0, 2)} tone={track.tone} />
          </ItemMedia>
          <ItemContent>
            <ItemTitle>{track.title}</ItemTitle>
            <ItemDescription>{track.artist}</ItemDescription>
          </ItemContent>
          <ItemActions>
            <span className="text-xs tabular-nums text-[var(--color-muted)]">{track.length}</span>
            <Button variant="ghost" size="sm" aria-label={`More options for ${track.title}`}>
              <CaretDown aria-hidden className="size-4" />
            </Button>
          </ItemActions>
        </Item>
      ))}
      <Item variant="soft" tone="warning" size="sm">
        <ItemMedia variant="icon"><Warning aria-hidden /></ItemMedia>
        <ItemContent>
          <ItemTitle>Offline mode is on</ItemTitle>
          <ItemDescription>Only downloaded tracks will play.</ItemDescription>
        </ItemContent>
      </Item>
    </ItemGroup>
  )
}