53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Text } from '@/ui/Text';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { AlertTriangle } from 'lucide-react';
|
|
import React from 'react';
|
|
|
|
interface AppErrorBoundaryViewProps {
|
|
title: string;
|
|
description: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* AppErrorBoundaryView
|
|
*
|
|
* Semantic container for error boundary content.
|
|
* Follows "Precision Racing Minimal" theme.
|
|
*/
|
|
export function AppErrorBoundaryView({ title, description, children }: AppErrorBoundaryViewProps) {
|
|
return (
|
|
<Stack alignItems="center" gap={6} fullWidth>
|
|
{/* Header Icon */}
|
|
<Surface
|
|
padding={4}
|
|
rounded="full"
|
|
bg="rgba(255, 190, 77, 0.1)"
|
|
border="1px solid rgba(255, 190, 77, 0.3)"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
<Icon icon={AlertTriangle} size={8} intent="warning" />
|
|
</Surface>
|
|
|
|
{/* Typography */}
|
|
<Stack alignItems="center" gap={2}>
|
|
<Heading level={1} weight="bold">
|
|
{title}
|
|
</Heading>
|
|
<Text variant="low" align="center" maxWidth="32rem" leading="relaxed">
|
|
{description}
|
|
</Text>
|
|
</Stack>
|
|
|
|
{children}
|
|
</Stack>
|
|
);
|
|
}
|