chore: kanban template
This commit is contained in:
e2e
86
design/scratchpads/empty-states.tsx
Normal file
86
design/scratchpads/empty-states.tsx
Normal file
@@ -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>
|
||||
),
|
||||
},
|
||||
]
|
||||
154
design/scratchpads/entity-card.tsx
Normal file
154
design/scratchpads/entity-card.tsx
Normal file
@@ -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>
|
||||
),
|
||||
},
|
||||
]
|
||||
95
design/scratchpads/status-display.tsx
Normal file
95
design/scratchpads/status-display.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
// A scratchpad: several real, themed ways to show one thing — here, a deploy's
|
||||
// status. Each option is built from @mantine/core, so it carries your theme. The
|
||||
// design agent writes files like this; open the Design tab → Scratchpad to compare
|
||||
// them on the canvas and pick the one you like.
|
||||
import {
|
||||
Alert,
|
||||
Badge,
|
||||
Group,
|
||||
Indicator,
|
||||
Paper,
|
||||
Progress,
|
||||
RingProgress,
|
||||
Stack,
|
||||
Text,
|
||||
} from '@mantine/core'
|
||||
|
||||
export const title = 'Status display'
|
||||
|
||||
export const objects = [
|
||||
{
|
||||
name: 'Status pill',
|
||||
mantine: ['Badge'],
|
||||
render: () => (
|
||||
<Badge color="green" variant="light" size="lg" radius="sm">
|
||||
Live
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: 'Progress card',
|
||||
mantine: ['Paper', 'Progress'],
|
||||
render: () => (
|
||||
<Paper withBorder p="md" radius="md" maw={220}>
|
||||
<Stack gap={8}>
|
||||
<Group justify="space-between">
|
||||
<Text size="sm" fw={600}>
|
||||
Deploying
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
72%
|
||||
</Text>
|
||||
</Group>
|
||||
<Progress value={72} color="blue" radius="xl" />
|
||||
</Stack>
|
||||
</Paper>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: 'Solid badge',
|
||||
mantine: ['Badge'],
|
||||
render: () => (
|
||||
<Badge color="green" variant="filled" size="lg" radius="sm">
|
||||
Deployed
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: 'Progress ring',
|
||||
mantine: ['RingProgress'],
|
||||
render: () => (
|
||||
<RingProgress
|
||||
size={92}
|
||||
thickness={9}
|
||||
roundCaps
|
||||
sections={[{ value: 72, color: 'blue' }]}
|
||||
label={
|
||||
<Text ta="center" size="sm" fw={700}>
|
||||
72%
|
||||
</Text>
|
||||
}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: 'Inline dot',
|
||||
mantine: ['Indicator'],
|
||||
render: () => (
|
||||
<Group gap={10}>
|
||||
<Indicator color="green" size={9} processing />
|
||||
<Text size="sm" fw={500}>
|
||||
Running
|
||||
</Text>
|
||||
</Group>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: 'Tinted banner',
|
||||
mantine: ['Alert'],
|
||||
render: () => (
|
||||
<Alert color="green" radius="md" title="Deployment succeeded" maw={240}>
|
||||
Your changes are live in production.
|
||||
</Alert>
|
||||
),
|
||||
},
|
||||
]
|
||||
Reference in New Issue
Block a user