chore: kanban template

design/scratchpads/empty-states.tsx

@@ -0,0 +1,86 @@
+// A scratchpad of the "non-happy" states for a list or page — loading, empty,
+// error, and skeleton. Each option is a real @mantine/core composition so the one
+// you pick drops straight into your app as a component variation. Open the Design
+// tab → Scratchpad to compare them on the canvas.
+import { Alert, Button, Center, Group, Loader, Paper, Skeleton, Stack, Text, ThemeIcon } from '@mantine/core'
+
+export const title = 'Empty & loading states'
+
+export const objects = [
+  {
+    name: 'Loading',
+    mantine: ['Loader', 'Stack'],
+    render: () => (
+      <Stack align="center" gap="xs" maw={200} py="sm">
+        <Loader size="md" color="grape" />
+        <Text size="sm" c="dimmed">
+          Loading your items…
+        </Text>
+      </Stack>
+    ),
+  },
+  {
+    name: 'Empty',
+    mantine: ['ThemeIcon', 'Stack', 'Button'],
+    render: () => (
+      <Stack align="center" gap="xs" maw={224} py="sm">
+        <ThemeIcon size={46} radius="xl" variant="light" color="grape">
+          <Text size="xl">✦</Text>
+        </ThemeIcon>
+        <Text size="sm" fw={600}>
+          No items yet
+        </Text>
+        <Text size="xs" c="dimmed" ta="center">
+          Create your first item to get started.
+        </Text>
+        <Button size="xs" variant="light" mt={4}>
+          New item
+        </Button>
+      </Stack>
+    ),
+  },
+  {
+    name: 'Error',
+    mantine: ['Alert', 'Button'],
+    render: () => (
+      <Alert color="red" radius="md" title="Couldn't load" maw={236}>
+        <Stack gap="xs">
+          <Text size="xs">Something went wrong fetching your items.</Text>
+          <Button size="xs" variant="white" color="red" w="fit-content">
+            Try again
+          </Button>
+        </Stack>
+      </Alert>
+    ),
+  },
+  {
+    name: 'Skeleton list',
+    mantine: ['Skeleton', 'Group'],
+    render: () => (
+      <Stack gap="sm" maw={236}>
+        {[0, 1, 2].map((i) => (
+          <Group key={i} wrap="nowrap" gap="sm">
+            <Skeleton height={32} circle />
+            <Stack gap={6} style={{ flex: 1 }}>
+              <Skeleton height={8} radius="xl" />
+              <Skeleton height={8} width="60%" radius="xl" />
+            </Stack>
+          </Group>
+        ))}
+      </Stack>
+    ),
+  },
+  {
+    name: 'Inline empty',
+    mantine: ['Paper', 'Center'],
+    render: () => (
+      <Paper radius="md" p="lg" maw={236} style={{ borderStyle: 'dashed' }} withBorder>
+        <Center>
+          <Text size="sm" c="dimmed">
+            Nothing here yet — drop something in.
+          </Text>
+        </Center>
+      </Paper>
+    ),
+  },
+]