Auth Account Delete

1"use client";
2 
3import { AlertTriangle, Loader2, Trash2 } from "lucide-react";
4import { useCallback, useState } from "react";
5import { cn } from "@/lib/utils";
6import {
7  AlertDialog,
8  AlertDialogAction,
9  AlertDialogCancel,
10  AlertDialogContent,
11  AlertDialogDescription,
12  AlertDialogFooter,
13  AlertDialogHeader,
14  AlertDialogTitle,
15  AlertDialogTrigger,
16} from "@/registry/new-york/ui/alert-dialog";
17import { Button } from "@/registry/new-york/ui/button";
18import {
19  Card,
20  CardContent,
21  CardDescription,
22  CardHeader,
23  CardTitle,
24} from "@/registry/new-york/ui/card";
25import { Checkbox } from "@/registry/new-york/ui/checkbox";
26import {
27  Field,
28  FieldContent,
29  FieldError,
30  FieldLabel,
31} from "@/registry/new-york/ui/field";
32import {
33  InputGroup,
34  InputGroupInput,
35} from "@/registry/new-york/ui/input-group";
36import { Label } from "../../ui/label";
37 
38export interface AuthAccountDeleteProps {
39  onDelete?: (data: { confirmText: string }) => void;
40  className?: string;
41  isLoading?: boolean;
42  errors?: {
43    confirmText?: string;
44    general?: string;
45  };
46  confirmText?: string;
47  dataSummary?: {
48    projects?: number;
49    files?: number;
50    storage?: string;
51  };
52}
53 
54interface WarningBannerProps {
55  className?: string;
56}
57 
58function WarningBanner({ className }: WarningBannerProps) {
59  return (
60    <div
61      className={cn(
62        "flex items-start gap-3 rounded-lg border border-destructive/50 bg-destructive/5 p-4",
63        className
64      )}
65    >
66      <AlertTriangle
67        aria-hidden="true"
68        className="size-5 shrink-0 text-destructive"
69      />
70      <div className="flex flex-1 flex-col gap-2">
71        <p className="font-medium text-destructive text-sm">
72          This action cannot be undone
73        </p>
74        <p className="text-muted-foreground text-xs">
75          This will permanently delete your account and remove all of your data
76          from our servers. This action is irreversible.
77        </p>
78      </div>
79    </div>
80  );
81}
82 
83interface DataSummaryProps {
84  dataSummary: {
85    projects?: number;
86    files?: number;
87    storage?: string;
88  };
89}
90 
91function DataSummary({ dataSummary }: DataSummaryProps) {
92  return (
93    <div className="flex flex-col gap-2 rounded-lg border bg-muted/50 p-4">
94      <h3 className="font-medium text-sm">Data that will be deleted:</h3>
95      <ul className="flex flex-col gap-1 text-muted-foreground text-xs">
96        {dataSummary.projects !== undefined && (
97          <li>
98            •{" "}
99// … truncated