96 lines
2.1 KiB
TypeScript
96 lines
2.1 KiB
TypeScript
// 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>
|
|
),
|
|
},
|
|
]
|