chore: kanban template

design/scratchpads/entity-card.tsx

@@ -0,0 +1,154 @@
+// A richer scratchpad: several ways to display the SAME entity (a team member)
+// in a list or grid. Every option is a real @mantine/core composition — picking
+// one gives you an adoptable component variation, not a pile of CSS. Open the
+// Design tab → Scratchpad to compare them on the canvas.
+import {
+  Anchor,
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  Divider,
+  Group,
+  Paper,
+  Progress,
+  Stack,
+  Text,
+} from '@mantine/core'
+
+export const title = 'Member card'
+
+export const objects = [
+  {
+    name: 'List row',
+    mantine: ['Group', 'Avatar', 'Badge'],
+    render: () => (
+      <Group wrap="nowrap" maw={264} gap="sm">
+        <Avatar radius="xl" color="grape">
+          AL
+        </Avatar>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <Text size="sm" fw={600} truncate>
+            Ada Lovelace
+          </Text>
+          <Text size="xs" c="dimmed" truncate>
+            ada@example.com
+          </Text>
+        </div>
+        <Badge color="green" variant="light" radius="sm">
+          Active
+        </Badge>
+      </Group>
+    ),
+  },
+  {
+    name: 'Detail card',
+    mantine: ['Card', 'Avatar', 'Badge', 'Divider'],
+    render: () => (
+      <Card withBorder radius="md" padding="md" maw={248}>
+        <Group justify="space-between" wrap="nowrap">
+          <Group gap="sm" wrap="nowrap">
+            <Avatar radius="xl" color="grape">
+              AL
+            </Avatar>
+            <div style={{ minWidth: 0 }}>
+              <Text size="sm" fw={600} truncate>
+                Ada Lovelace
+              </Text>
+              <Text size="xs" c="dimmed">
+                Engineering
+              </Text>
+            </div>
+          </Group>
+          <Badge color="green" variant="dot">
+            Online
+          </Badge>
+        </Group>
+        <Divider my="sm" />
+        <Group justify="space-between">
+          <Stack gap={0}>
+            <Text size="xs" c="dimmed">
+              Commits
+            </Text>
+            <Text size="sm" fw={600}>
+              1,204
+            </Text>
+          </Stack>
+          <Stack gap={0}>
+            <Text size="xs" c="dimmed">
+              Reviews
+            </Text>
+            <Text size="sm" fw={600}>
+              318
+            </Text>
+          </Stack>
+          <Anchor size="xs" fw={500}>
+            View
+          </Anchor>
+        </Group>
+      </Card>
+    ),
+  },
+  {
+    name: 'Grid tile',
+    mantine: ['Card', 'Avatar', 'Button'],
+    render: () => (
+      <Card withBorder radius="md" padding="lg" maw={184}>
+        <Stack align="center" gap="xs">
+          <Avatar size="lg" radius="xl" color="grape">
+            AL
+          </Avatar>
+          <Text size="sm" fw={600}>
+            Ada Lovelace
+          </Text>
+          <Badge color="grape" variant="light" radius="sm">
+            Maintainer
+          </Badge>
+          <Button size="xs" variant="light" fullWidth mt={4}>
+            View profile
+          </Button>
+        </Stack>
+      </Card>
+    ),
+  },
+  {
+    name: 'Compact chip',
+    mantine: ['Badge', 'Avatar'],
+    render: () => (
+      <Badge
+        size="lg"
+        radius="xl"
+        variant="light"
+        color="grape"
+        pl={3}
+        leftSection={
+          <Avatar size={18} radius="xl" color="grape">
+            AL
+          </Avatar>
+        }
+      >
+        Ada Lovelace
+      </Badge>
+    ),
+  },
+  {
+    name: 'Stat card',
+    mantine: ['Paper', 'Progress', 'Badge'],
+    render: () => (
+      <Paper withBorder radius="md" p="md" maw={224}>
+        <Group justify="space-between" mb={6}>
+          <Text size="xs" c="dimmed" fw={600} tt="uppercase">
+            Contribution
+          </Text>
+          <Badge color="teal" variant="light" size="sm">
+            +12%
+          </Badge>
+        </Group>
+        <Text size="xl" fw={700} lh={1}>
+          84%
+        </Text>
+        <Progress value={84} color="grape" radius="xl" mt="sm" />
+      </Paper>
+    ),
+  },
+]