chore: starter template

packages/components/src/ServerErrorState.tsx

@@ -0,0 +1,70 @@
+import type { ReactNode } from 'react'
+import { Button, Center, Stack, Text } from '@mantine/core'
+import { RefreshCw } from 'lucide-react'
+
+interface ServerErrorStateProps {
+  title?: string
+  description?: string
+  onRetry?: () => void
+  retrying?: boolean
+  retryLabel?: string
+  glyph?: ReactNode
+}
+
+export function ServerErrorState({
+  title = 'Something went wrong',
+  description = 'The server returned an error while loading this page.',
+  onRetry,
+  retrying = false,
+  retryLabel = 'Retry',
+  glyph,
+}: ServerErrorStateProps) {
+  const normalizedDescription = typeof description === 'string' ? description.trim() : ''
+  const showDescription =
+    normalizedDescription.length > 0 &&
+    normalizedDescription !== 'HTTP 500' &&
+    normalizedDescription !== 'HTTP 500.'
+
+  return (
+    <Center flex={1}>
+      <Stack
+        align="center"
+        justify="center"
+        gap="xs"
+        py="xl"
+        style={{ minHeight: '60vh', width: '100%' }}
+      >
+        {glyph ?? (
+          <Text
+            style={{
+              fontSize: 72,
+              lineHeight: 1,
+              letterSpacing: '-0.06em',
+              fontWeight: 600,
+            }}
+          >
+            500
+          </Text>
+        )}
+        <Text size="xl" fw={600}>
+          {title}
+        </Text>
+        {showDescription ? (
+          <Text ta="center" maw={520} c="dimmed">
+            {normalizedDescription}
+          </Text>
+        ) : null}
+        {onRetry ? (
+          <Button
+            onClick={onRetry}
+            loading={retrying}
+            leftSection={<RefreshCw size={16} />}
+            variant="default"
+          >
+            {retryLabel}
+          </Button>
+        ) : null}
+      </Stack>
+    </Center>
+  )
+}