pr_01m47d24b0e6n91zwymwxg0vpx/apps/web/app/components/danger-zone.tsx
Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.
| Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look | 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 | } |