Alert

import { Alert } from "@/ui/Alert";

<Alert.Root variant="warning">
  <Alert.Title>Unsaved changes</Alert.Title>
  <Alert.Description>You have pending edits that are not published yet.</Alert.Description>
  <Alert.Footer>
    <Alert.Action>Review changes</Alert.Action>
  </Alert.Footer>
</Alert.Root>

function AlertRoot({ children }: { children: React.ReactNode }) {
  return <div role="alert" className="rounded-xl border border-slate-200 bg-white p-4">{children}</div>;
}

type AlertCompound = typeof AlertRoot & { Root: typeof AlertRoot };
export const Alert = Object.assign(AlertRoot, { Root: AlertRoot }) as AlertCompound;