website refactor

apps/website/components/admin/AdminDangerZonePanel.tsx

@@ -1,9 +1,6 @@
 'use client';
 
-import { Card } from '@/ui/Card';
-import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
-import { Text } from '@/ui/Text';
+import { DangerZone } from '@/ui/DangerZone';
 import React from 'react';
 
 interface AdminDangerZonePanelProps {
@@ -24,20 +21,11 @@ export function AdminDangerZonePanel({
   children
 }: AdminDangerZonePanelProps) {
   return (
-    <Card borderColor="border-error-red/30" bg="bg-error-red/5">
-      <Stack direction={{ base: 'col', md: 'row' }} align="center" justify="between" gap={6}>
-        <Stack>
-          <Heading level={4} weight="bold" color="text-error-red">
-            {title}
-          </Heading>
-          <Text size="sm" color="text-gray-400" block mt={1}>
-            {description}
-          </Text>
-        </Stack>
-        <Stack>
-          {children}
-        </Stack>
-      </Stack>
-    </Card>
+    <DangerZone
+      title={title}
+      description={description}
+    >
+      {children}
+    </DangerZone>
   );
 }