/
Tooltip.demo.configurator.tsx
65 lines (61 loc) · 1.43 KB
/
Tooltip.demo.configurator.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
53
54
55
56
57
58
59
60
61
62
63
64
65
import React from 'react';
import { Tooltip, TooltipProps, Group, Button } from '@mantine/core';
import { MantineDemo } from '@mantine/ds';
import {
FLOATING_ARROW_POSITION_DATA,
FLOATING_POSITION_DATA,
} from '../../../shared/floating-position-data';
const Wrapper = (props: TooltipProps) => (
<div style={{ padding: 30 }}>
<Group position="center">
<Tooltip label="Tooltip" {...props}>
<Button variant="outline" size="xl">
With tooltip
</Button>
</Tooltip>
</Group>
</div>
);
const codeTemplate = (props: string) => `
import { Tooltip, Button } from '@mantine/core';
function Demo() {
return (
<Tooltip
label="Tooltip"
${props}
>
<Button variant="outline" size="xl">
With tooltip
</Button>
</Tooltip>
);
}
`;
export const configurator: MantineDemo = {
type: 'configurator',
component: Wrapper,
codeTemplate,
configuratorProps: { multiline: 3 },
configurator: [
{
name: 'color',
type: 'color',
initialValue: 'blue',
},
{
name: 'position',
type: 'select',
data: FLOATING_POSITION_DATA,
initialValue: 'top',
defaultValue: 'top',
},
{ name: 'withArrow', type: 'boolean', initialValue: true, defaultValue: false },
{
name: 'arrowPosition',
type: 'select',
data: FLOATING_ARROW_POSITION_DATA,
initialValue: 'side',
defaultValue: 'side',
},
],
};