Add delete house

src/components/user/ban-user-confirm-dialog.tsx

@@ -17,7 +17,14 @@ import {
 } from '@ui/dialog';
 import { UserWithRole } from 'better-auth/plugins';
 import { toast } from 'sonner';
-import DisplayBreakLineMessage from '../DisplayBreakLineMessage';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../ui/table';
 import { useBanContext } from './ban-user-dialog';
 
 type BanConfirmProps = {
@@ -74,20 +81,49 @@ const BanUserConfirm = ({ data }: BanConfirmProps) => {
             {m.users_page_ui_dialog_alert_ban_title()}
           </DialogDescription>
         </DialogHeader>
-        <DisplayBreakLineMessage>
-          {m.users_page_ui_dialog_alert_description({
-            name: data.name,
-            email: data.email,
-          })}
-          {m.users_page_ui_dialog_alert_description_2({
-            reason: submitData.banReason,
-            exp: m.exp_time({
-              time: submitData.banExp.toString() as Parameters<
-                typeof m.exp_time
-              >[0]['time'],
-            }),
-          })}
-        </DisplayBreakLineMessage>
+        <div className="overflow-hidden rounded-md border">
+          <Table className="bg-white">
+            <TableHeader>
+              <TableRow className="bg-primary">
+                <TableHead className="px-2 h-7 text-white text-xs" colSpan={2}>
+                  {m.users_page_ui_dialog_alert_description_title()}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow>
+                <TableCell className="font-bold">
+                  {m.users_page_ui_table_header_name()}:
+                </TableCell>
+                <TableCell>{data.name}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className="font-bold">
+                  {m.users_page_ui_table_header_email()}:
+                </TableCell>
+                <TableCell>{data.email}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className="font-bold">
+                  {m.users_page_ui_form_ban_reason()}:
+                </TableCell>
+                <TableCell>{submitData.banReason}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className="font-bold">
+                  {m.users_page_ui_form_ban_exp()}:
+                </TableCell>
+                <TableCell>
+                  {m.exp_time({
+                    time: submitData.banExp.toString() as Parameters<
+                      typeof m.exp_time
+                    >[0]['time'],
+                  })}
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </div>
         <DialogFooter className="bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4">
           <DialogClose asChild>
             <Button variant="outline" type="button">