Empty

import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@glinui/ui"


export function EmptyVariantsDemo() {
  return (
    <div className="grid gap-4 md:grid-cols-2">
      <Empty variant="glinr"><EmptyHeader><EmptyTitle>glinr</EmptyTitle><EmptyDescription>No items yet.</EmptyDescription></EmptyHeader></Empty>
      <Empty variant="solid"><EmptyHeader><EmptyTitle>solid</EmptyTitle><EmptyDescription>No items yet.</EmptyDescription></EmptyHeader></Empty>
      <Empty variant="plain"><EmptyHeader><EmptyTitle>plain</EmptyTitle><EmptyDescription>No items yet.</EmptyDescription></EmptyHeader></Empty>
      <Empty variant="soft"><EmptyHeader><EmptyTitle>soft</EmptyTitle><EmptyDescription>No items yet.</EmptyDescription></EmptyHeader></Empty>
      <Empty variant="outline"><EmptyHeader><EmptyTitle>outline</EmptyTitle><EmptyDescription>No items yet.</EmptyDescription></EmptyHeader></Empty>
      <Empty variant="ghost"><EmptyHeader><EmptyTitle>ghost</EmptyTitle><EmptyDescription>No items yet.</EmptyDescription></EmptyHeader></Empty>
      <Empty variant="gradient"><EmptyHeader><EmptyTitle>gradient</EmptyTitle><EmptyDescription>No items yet.</EmptyDescription></EmptyHeader></Empty>
    </div>
  )
}

import { MagnifyingGlass, Plus, X } from "@phosphor-icons/react"
import {
  Button,
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle
} from "@glinui/ui"


export function Demo() {
  return (
    <Empty variant="dashed" className="w-full max-w-lg">
      <EmptyHeader>
        <EmptyMedia variant="icon"><MagnifyingGlass aria-hidden /></EmptyMedia>
        <EmptyTitle>No results for "quarterly report"</EmptyTitle>
        <EmptyDescription>Check the spelling, remove a filter, or search by project name instead.</EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <div className="flex flex-wrap justify-center gap-2">
          <Button variant="outline" size="sm">
            <X aria-hidden className="size-4" />
            Clear filters
          </Button>
          <Button size="sm">
            <Plus aria-hidden className="size-4" />
            New document
          </Button>
        </div>
      </EmptyContent>
    </Empty>
  )
}

import { FileArchive } from "@phosphor-icons/react"
import {
  Button,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle
} from "@glinui/ui"


export function Demo() {
  return (
    <Card className="w-full max-w-2xl">
      <CardHeader>
        <div className="flex items-center justify-between gap-3">
          <CardTitle>Exports</CardTitle>
          <Button size="sm" variant="outline">Schedule export</Button>
        </div>
        <CardDescription>Download reports as CSV or PDF.</CardDescription>
      </CardHeader>
      <CardContent>
        <Empty variant="plain">
          <EmptyHeader>
            <EmptyMedia variant="icon"><FileArchive aria-hidden /></EmptyMedia>
            <EmptyTitle>No exports yet</EmptyTitle>
            <EmptyDescription>Exports you create stay available for 30 days.</EmptyDescription>
          </EmptyHeader>
          <EmptyContent>
            <Button size="sm">Create first export</Button>
          </EmptyContent>
        </Empty>
      </CardContent>
    </Card>
  )
}