pr_01m47d15m3e54sn21z27rpy5n9/apps/web/app/components/danger-zone.tsx
| 1 | import type { ReactNode } from "react"; |
| 2 | |
| 3 | /** |
| 4 | * Settings that move or remove what the page is about, apart from the |
| 5 | * rest and outlined in the danger colour, each with what it does. |
| 6 | */ |
| 7 | export function DangerZone({ children }: { children: ReactNode }) { |
| 8 | return ( |
| 9 | <section aria-labelledby="danger-zone" className="space-y-3"> |
| 10 | <h2 id="danger-zone" className="font-medium text-danger"> |
| 11 | Danger zone |
| 12 | </h2> |
| 13 | <div className="divide-y divide-danger/20 rounded-xl border border-danger/40">{children}</div> |
| 14 | </section> |
| 15 | ); |
| 16 | } |
| 17 | |
| 18 | /** One action in the danger zone: what it is, what it does, and its button. */ |
| 19 | export function DangerAction({ title, children, action }: { title: string; children: ReactNode; action: ReactNode }) { |
| 20 | return ( |
| 21 | <div className="flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:justify-between"> |
| 22 | <div className="min-w-0"> |
| 23 | <p className="text-sm font-medium">{title}</p> |
| 24 | <div className="mt-1 text-sm text-muted">{children}</div> |
| 25 | </div> |
| 26 | <div className="shrink-0">{action}</div> |
| 27 | </div> |
| 28 | ); |
| 29 | } |