forked from mantinedev/mantine
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Indicator.story.tsx
52 lines (44 loc) · 1.38 KB
/
Indicator.story.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import React from 'react';
import { Avatar } from '../Avatar';
import { Box } from '../Box';
import { Group } from '../Group';
import { Indicator } from './Indicator';
export default { title: 'Indicator' };
const positions = ['top', 'middle', 'bottom'] as const;
const placements = ['start', 'center', 'end'] as const;
export const Positions = () => {
const items = positions.map((position) => {
const _items = placements.map((placement) => (
<Indicator dot position={`${position}-${placement}`}>
<Avatar radius={0} />
</Indicator>
));
return <Group mt="md">{_items}</Group>;
});
return <Box sx={{ padding: 40 }}>{items}</Box>;
};
export const Inline = () => (
<Box sx={{ padding: 40 }}>
<Indicator dot inline withBorder>
<Avatar radius={0} />
</Indicator>
</Box>
);
export const WithRadius = () => (
<Box sx={{ padding: 40 }}>
<Indicator inline dot offset={12} size={20} position="bottom-end" withBorder color="red">
<Avatar
radius={50000}
size="xl"
src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=250&q=80"
/>
</Indicator>
</Box>
);
export const WithLabel = () => (
<Box sx={{ padding: 40 }}>
<Indicator inline label="New" size={18}>
<Avatar radius={0} />
</Indicator>
</Box>
);