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