38 lines
948 B
TypeScript
38 lines
948 B
TypeScript
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
import { Heading } from './Heading';
|
|
import { Surface } from './Surface';
|
|
import { Text } from './Text';
|
|
|
|
export interface DangerZoneProps {
|
|
title: string;
|
|
description: string;
|
|
children: ReactNode;
|
|
}
|
|
|
|
export const DangerZone = ({
|
|
title,
|
|
description,
|
|
children
|
|
}: DangerZoneProps) => {
|
|
return (
|
|
<Box marginTop={8}>
|
|
<Heading level={3} marginBottom={4}>Danger Zone</Heading>
|
|
<Surface
|
|
variant="muted"
|
|
rounded="lg"
|
|
padding={4}
|
|
style={{ border: '1px solid var(--ui-color-intent-critical)', backgroundColor: 'rgba(227, 92, 92, 0.05)' }}
|
|
>
|
|
<Box marginBottom={4}>
|
|
<Text variant="high" weight="medium" block marginBottom={2}>{title}</Text>
|
|
<Text size="sm" variant="low" block>
|
|
{description}
|
|
</Text>
|
|
</Box>
|
|
{children}
|
|
</Surface>
|
|
</Box>
|
|
);
|
|
};
|