chore: starter template

packages/components/src/NotFoundState.tsx

@@ -0,0 +1,40 @@
+import { Center, Stack, Text } from '@mantine/core'
+
+interface NotFoundStateProps {
+  title?: string
+  description?: string
+}
+
+export function NotFoundState({
+  title = 'Page not found',
+  description = "The resource you're looking for doesn't exist or has been removed.",
+}: NotFoundStateProps) {
+  return (
+    <Center flex={1}>
+      <Stack
+        align="center"
+        justify="center"
+        gap="xs"
+        py="xl"
+        style={{ minHeight: '60vh', width: '100%' }}
+      >
+        <Text
+          style={{
+            fontSize: 72,
+            lineHeight: 1,
+            letterSpacing: '-0.06em',
+            fontWeight: 600,
+          }}
+        >
+          404
+        </Text>
+        <Text size="xl" fw={600}>
+          {title}
+        </Text>
+        <Text ta="center" maw={520} c="dimmed">
+          {description}
+        </Text>
+      </Stack>
+    </Center>
+  )
+}