Alert

// In your Payload CMS blocks config
export const AlertBlock = {
  slug: "alert",
  fields: [
    { name: "title", type: "text", localized: true },
    { name: "description", type: "textarea", localized: true },
    {
      name: "variant",
      type: "select",
      options: [
        { label: "Default", value: "default" },
        { label: "Destructive", value: "destructive" },
      ],
    },
    { name: "showAction", type: "checkbox" },
    { name: "actionLabel", type: "text", localized: true },
  ],
}

import {
  Alert,
  AlertTitle,
  AlertDescription,
  AlertAction,
} from "@mordecai-design-system/ui"

export function SystemAlert({ data }) {
  return (
    <Alert variant={data.variant}>
      <AlertTitle>{data.title}</AlertTitle>
      <AlertDescription>{data.description}</AlertDescription>
      {data.showAction && (
        <AlertAction>
          <Button size="sm">{data.actionLabel}</Button>
        </AlertAction>
      )}
    </Alert>
  )
}

pnpm add @corew500/ui

import {
  Alert,
  AlertTitle,
  AlertDescription,
} from "@mordecai-design-system/ui"

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the CLI.
  </AlertDescription>
</Alert>

<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>
    Your session has expired. Please log in again.
  </AlertDescription>
</Alert>

<Alert>
  <Terminal className="size-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the CLI.
  </AlertDescription>
</Alert>

<Alert>
  <AlertTitle>Update available</AlertTitle>
  <AlertDescription>
    A new version is available.
  </AlertDescription>
  <AlertAction>
    <Button size="sm" variant="outline">Update</Button>
  </AlertAction>
</Alert>