Data view

import { MailIcon, PencilIcon } from "lucide-react"
import { Badge } from "@booleanpress/ui/badge"
import { Button } from "@booleanpress/ui/button"
import { DataView } from "@booleanpress/ui/data-view"
import { useUiLocale } from "@booleanpress/ui/provider"

const MAILERS = [
  { id: "ses", name: "Transactional", provider: "Amazon SES", status: "Active", sent: 18432 },
  { id: "postmark", name: "Password resets", provider: "Postmark", status: "Active", sent: 2210 },
  { id: "mailgun", name: "Newsletter", provider: "Mailgun", status: "Paused", sent: 40125 },
  { id: "smtp", name: "Office relay", provider: "Custom SMTP", status: "Failing", sent: 312 },
  { id: "brevo", name: "Receipts", provider: "Brevo", status: "Active", sent: 9870 },
]
const TONE: Record<string, "success" | "warning" | "destructive"> = { Active: "success", Paused: "warning", Failing: "destructive" }

export default function DataViewBasic() {
  const { locale } = useUiLocale()
  const count = new Intl.NumberFormat(locale)

  return (
    <DataView
      aria-label="Mailers"
      items={MAILERS}
      getItemKey={(mailer) => mailer.id}
      className="w-full"
      renderItem={(mailer) => (
        <div className="flex items-center gap-4">
          <div className="flex size-12 shrink-0 items-center justify-center rounded-md bg-secondary text-secondary-foreground">
            <MailIcon className="size-5" aria-hidden="true" />
          </div>
          <div className="flex min-w-0 flex-1 flex-col gap-1">
            <span className="text-sm text-muted-foreground">{mailer.provider}</span>
            <span className="text-lg/normal font-medium">{mailer.name}</span>
          </div>
          <Badge variant={TONE[mailer.status]}>{mailer.status}</Badge>
          <span className="w-20 text-end text-lg font-semibold tabular-nums">{count.format(mailer.sent)}</span>
          <Button variant="outline" size="icon" aria-label={`Edit ${mailer.name}`}>
            <PencilIcon />
          </Button>
        </div>
      )}
    />
  )
}

import { MailIcon } from "lucide-react"
import { Badge } from "@booleanpress/ui/badge"
import { Button } from "@booleanpress/ui/button"
import { DataView } from "@booleanpress/ui/data-view"
import { useUiLocale } from "@booleanpress/ui/provider"

const MAILERS = [
  { id: "ses", name: "Transactional", provider: "Amazon SES", status: "Active", sent: 18432 },
  { id: "postmark", name: "Password resets", provider: "Postmark", status: "Active", sent: 2210 },
  { id: "mailgun", name: "Newsletter", provider: "Mailgun", status: "Paused", sent: 40125 },
  { id: "smtp", name: "Office relay", provider: "Custom SMTP", status: "Failing", sent: 312 },
]
const TONE: Record<string, "success" | "warning" | "destructive"> = { Active: "success", Paused: "warning", Failing: "destructive" }

export default function DataViewGrid() {
  const { locale } = useUiLocale()
  const count = new Intl.NumberFormat(locale)

  return (
    <DataView
      aria-label="Mailers"
      items={MAILERS}
      getItemKey={(mailer) => mailer.id}
      defaultLayout="grid"
      className="w-full"
      renderItem={(mailer) => (
        <div className="flex h-full flex-col gap-4 rounded-sm border p-6">
          <div className="relative flex h-28 items-center justify-center rounded-sm bg-subtle text-muted-foreground">
            <MailIcon className="size-8" aria-hidden="true" />
            <Badge variant={TONE[mailer.status]} className="absolute start-1 top-1">
              {mailer.status}
            </Badge>
          </div>
          <div className="flex flex-col gap-1">
            <span className="text-sm text-muted-foreground">{mailer.provider}</span>
            <span className="text-lg/normal font-medium">{mailer.name}</span>
          </div>
          <span className="text-2xl font-semibold tabular-nums">{count.format(mailer.sent)}</span>
          <Button className="mt-auto">Send a test</Button>
        </div>
      )}
    />
  )
}

import { MailIcon } from "lucide-react"
import { Badge } from "@booleanpress/ui/badge"
import { Button } from "@booleanpress/ui/button"
import { DataView } from "@booleanpress/ui/data-view"

const MAILERS = [
  { id: "ses", name: "Transactional", provider: "Amazon SES", status: "Active" },
  { id: "postmark", name: "Password resets", provider: "Postmark", status: "Active" },
  { id: "mailgun", name: "Newsletter", provider: "Mailgun", status: "Paused" },
  { id: "smtp", name: "Office relay", provider: "Custom SMTP", status: "Failing" },
]
const TONE: Record<string, "success" | "warning" | "destructive"> = { Active: "success", Paused: "warning", Failing: "destructive" }

export default function DataViewLayoutToggleExample() {
  return (
    <DataView
      aria-label="Mailers"
      items={MAILERS}
      getItemKey={(mailer) => mailer.id}
      layoutToggle
      defaultLayout="grid"
      className="w-full"
      renderItem={(mailer, layout) =>
        layout === "list" ? (
          <div className="flex items-center gap-4">
            <MailIcon className="size-5 text-muted-foreground" aria-hidden="true" />
            <div className="flex min-w-0 flex-1 flex-col">
              <span className="font-medium">{mailer.name}</span>
              <span className="text-sm text-muted-foreground">{mailer.provider}</span>
            </div>
            <Badge variant={TONE[mailer.status]}>{mailer.status}</Badge>
            <Button variant="outline" size="sm">
              Send a test
            </Button>
          </div>
        ) : (
          <div className="flex h-full flex-col gap-3 rounded-sm border p-6">
            <div className="flex items-start justify-between gap-2">
              <MailIcon className="size-6 text-muted-foreground" aria-hidden="true" />
              <Badge variant={TONE[mailer.status]}>{mailer.status}</Badge>
            </div>
            <span className="text-lg/normal font-medium">{mailer.name}</span>
            <span className="text-sm text-muted-foreground">{mailer.provider}</span>
            <Button variant="outline" size="sm" className="mt-auto">
              Send a test
            </Button>
          </div>
        )
      }
    />
  )
}

import { DataView, type DataViewSortOption } from "@booleanpress/ui/data-view"
import { useUiLocale } from "@booleanpress/ui/provider"

type Mailer = { id: string; name: string; provider: string; sent: number }

const MAILERS: Mailer[] = [
  { id: "ses", name: "Transactional", provider: "Amazon SES", sent: 18432 },
  { id: "postmark", name: "Password resets", provider: "Postmark", sent: 2210 },
  { id: "mailgun", name: "Newsletter", provider: "Mailgun", sent: 40125 },
  { id: "smtp", name: "Office relay", provider: "Custom SMTP", sent: 312 },
  { id: "brevo", name: "Receipts", provider: "Brevo", sent: 9870 },
]

const SORTS: DataViewSortOption<Mailer>[] = [
  { value: "most-sent", label: "Most sent first", compare: (a, b) => b.sent - a.sent },
  { value: "least-sent", label: "Least sent first", compare: (a, b) => a.sent - b.sent },
  { value: "name", label: "Name, A to Z", compare: (a, b) => a.name.localeCompare(b.name) },
]

export default function DataViewSorting() {
  const { locale } = useUiLocale()
  const count = new Intl.NumberFormat(locale)

  return (
    <DataView
      aria-label="Mailers"
      items={MAILERS}
      getItemKey={(mailer) => mailer.id}
      sortOptions={SORTS}
      defaultSort="most-sent"
      className="w-full"
      renderItem={(mailer) => (
        <div className="flex items-center justify-between gap-4">
          <div className="flex min-w-0 flex-col">
            <span className="font-medium">{mailer.name}</span>
            <span className="text-sm text-muted-foreground">{mailer.provider}</span>
          </div>
          <span className="text-lg font-semibold tabular-nums">{count.format(mailer.sent)}</span>
        </div>
      )}
    />
  )
}

import { Badge } from "@booleanpress/ui/badge"
import { DataView } from "@booleanpress/ui/data-view"

const SUBJECTS = ["SMTP login fails", "Bounce notices missing", "Rotate the API key", "Emails land in spam", "Webhook times out"]
const STATUSES = ["Open", "Pending", "Closed"] as const
const TONE = { Open: "info", Pending: "warning", Closed: "secondary" } as const

// 23 tickets, numbered from #2040, so the last page is a short one.
const TICKETS = Array.from({ length: 23 }, (_, index) => ({
  id: 2040 + index,
  subject: SUBJECTS[index % SUBJECTS.length],
  status: STATUSES[index % STATUSES.length],
}))

export default function DataViewPagination() {
  return (
    <DataView
      aria-label="Tickets"
      items={TICKETS}
      getItemKey={(ticket) => ticket.id}
      pageSize={5}
      className="w-full"
      renderItem={(ticket) => (
        <div className="flex items-center gap-4">
          <span className="w-14 text-sm text-muted-foreground tabular-nums">#{ticket.id}</span>
          <span className="min-w-0 flex-1 truncate font-medium">{ticket.subject}</span>
          <Badge variant={TONE[ticket.status]}>{ticket.status}</Badge>
        </div>
      )}
    />
  )
}

import { DataView } from "@booleanpress/ui/data-view"

export default function DataViewLoading() {
  return (
    <DataView
      aria-label="Mailers"
      items={[]}
      loading
      defaultLayout="grid"
      skeletonCount={6}
      itemMinWidth="11rem"
      className="w-full"
      renderItem={() => null}
    />
  )
}

import { useState } from "react"
import { RefreshCwIcon } from "lucide-react"
import { Button } from "@booleanpress/ui/button"
import { DataView } from "@booleanpress/ui/data-view"

const LOGS = [
  { id: "l1", to: "ana@example.com", subject: "Your receipt", result: "Delivered" },
  { id: "l2", to: "ben@example.com", subject: "Reset your password", result: "Delivered" },
  { id: "l3", to: "chen@example.org", subject: "Welcome aboard", result: "Bounced" },
]

export default function DataViewRefreshing() {
  const [loading, setLoading] = useState(false)

  const refresh = () => {
    setLoading(true)
    // A stand-in for a request: new rows arrive after a second.
    setTimeout(() => setLoading(false), 1000)
  }

  return (
    <DataView
      aria-label="Delivery log"
      items={LOGS}
      getItemKey={(log) => log.id}
      loading={loading}
      className="w-full"
      header={
        <Button variant="outline" size="sm" onClick={refresh} disabled={loading}>
          <RefreshCwIcon />
          Refresh
        </Button>
      }
      renderItem={(log) => (
        <div className="flex items-center justify-between gap-4 text-sm">
          <span className="min-w-0 flex-1 truncate">{log.to}</span>
          <span className="min-w-0 flex-1 truncate text-muted-foreground">{log.subject}</span>
          <span>{log.result}</span>
        </div>
      )}
    />
  )
}

import { MailPlusIcon } from "lucide-react"
import { Button } from "@booleanpress/ui/button"
import { DataView } from "@booleanpress/ui/data-view"
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@booleanpress/ui/empty"

export default function DataViewEmpty() {
  return (
    <DataView
      aria-label="Mailers"
      items={[]}
      layoutToggle
      className="w-full"
      renderItem={() => null}
      empty={
        <Empty>
          <EmptyHeader>
            <EmptyMedia variant="icon">
              <MailPlusIcon />
            </EmptyMedia>
            <EmptyTitle>No mailers yet</EmptyTitle>
            <EmptyDescription>Add a mailer to start sending email from your site.</EmptyDescription>
          </EmptyHeader>
          <EmptyContent>
            <Button>Add a mailer</Button>
          </EmptyContent>
        </Empty>
      }
    />
  )
}

import { useState } from "react"
import { CircleAlertIcon } from "lucide-react"
import { Button } from "@booleanpress/ui/button"
import { DataView } from "@booleanpress/ui/data-view"
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@booleanpress/ui/empty"

export default function DataViewError() {
  const [loading, setLoading] = useState(false)

  const retry = () => {
    setLoading(true)
    // A stand-in for a request that fails again after a second.
    setTimeout(() => setLoading(false), 1000)
  }

  return (
    <DataView
      aria-label="Mailers"
      items={[]}
      loading={loading}
      className="w-full"
      renderItem={() => null}
      empty={
        <Empty>
          <EmptyHeader>
            <EmptyMedia variant="icon" className="bg-destructive-subtle text-destructive-strong">
              <CircleAlertIcon />
            </EmptyMedia>
            <EmptyTitle>The mailers could not be loaded</EmptyTitle>
            <EmptyDescription>The server did not answer. Check your connection, then try again.</EmptyDescription>
          </EmptyHeader>
          <EmptyContent>
            <Button variant="outline" onClick={retry}>
              Try again
            </Button>
          </EmptyContent>
        </Empty>
      }
    />
  )
}