1import { ThemeColor } from '@proton/colors';
2
3import { Card } from '..';
4import NotificationDot from './NotificationDot';
5import mdx from './NotificationDot.mdx';
6
7export default {
8    component: NotificationDot,
9    title: 'components/NotificationDot',
10    parameters: { docs: { page: mdx } },
11};
12
13export const Basic = () => <NotificationDot />;
14
15export const Colors = () => (
16    <div className="flex">
17        {Object.values(ThemeColor).map((color) => (
18            <NotificationDot className="mr-4" color={color} />
19        ))}
20    </div>
21);
22
23export const PositionHelper = () => (
24    <>
25        <Card className="relative mb-4">
26            With helper
27            <NotificationDot className="absolute top-0 right-0 notification-dot--top-right" />
28        </Card>
29        <Card className="relative">
30            Without helper
31            <NotificationDot className="absolute top-0 right-0" />
32        </Card>
33    </>
34);