Alert

<x-alert
 title="title"
 type="success"
 description="description"
 :actions="[
    { name: 'action 1', callback: () => {} },
    { name: 'action 2', callback: () => {} },
  ]"
></x-alert>
<x-alert
 title="title"
 type="warning"
 description="description"
 :actions="[
    { name: 'action 1', callback: () => {} },
    { name: 'action 2', callback: () => {} },
  ]"
></x-alert>
<x-alert
 title="title"
 type="error"
 description="description"
 :actions="[
    { name: 'action 1', callback: () => {} },
    { name: 'action 2', callback: () => {} },
  ]"
></x-alert>
<x-alert
 title="title"
 type="info"
 description="description"
 :actions="[
    { name: 'action 1', callback: () => {} },
    { name: 'action 2', callback: () => {} },
  ]"
></x-alert>

/**
 * Props for the alert component.
 *
 * @since 0.11
 */
type AlertProps = {
  title?: string;
  type: "success" | "warning" | "error" | "info";
  description: string;
  actions?: [{ name: string; callback: () => void }];
};