45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
'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>
|
|
);
|
|
}
|