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