website refactor

apps/website/components/admin/AdminDangerZonePanel.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import React from 'react';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+
+interface AdminDangerZonePanelProps {
+  title: string;
+  description: string;
+  children: React.ReactNode;
+}
+
+/**
+ * AdminDangerZonePanel
+ * 
+ * Semantic panel for destructive or dangerous admin actions.
+ * Restrained but clear warning styling.
+ */
+export function AdminDangerZonePanel({
+  title,
+  description,
+  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}>
+        <Box>
+          <Heading level={4} weight="bold" color="text-error-red">
+            {title}
+          </Heading>
+          <Text size="sm" color="text-gray-400" block mt={1}>
+            {description}
+          </Text>
+        </Box>
+        <Box>
+          {children}
+        </Box>
+      </Stack>
+    </Card>
+  );
+}