-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
StepperWithAsProps.tsx
60 lines (53 loc) · 1.37 KB
/
StepperWithAsProps.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
import React from 'react';
import { Sandpack } from '@codesandbox/sandpack-react';
import '@codesandbox/sandpack-react/dist/index.css';
const Sandbox = () => {
const code = `
import { Stepper, Step } from 'headless-stepper/components';
import { MantineProvider, Button, Group, Container, Box } from "@mantine/core";
const MyAwesomeStepper = () => {
return (
<MantineProvider withGlobalStyles withNormalizeCSS>
<Container mt="lg">
<Stepper as={Group} currentStep={0} className="example">
<Step as={Button} label="Step 1">
<Box>
Step 1 content
</Box>
</Step>
<Step as={Button} label="Step 2" disabled>
Step 2 content
</Step>
<Step as={Button} label="Step 3">
Step 3 content
</Step>
</Stepper>
</Container>
</MantineProvider>
);
};
export default MyAwesomeStepper;
`;
return (
<Sandpack
template="react-ts"
customSetup={{
dependencies: {
'headless-stepper': 'next',
'@mantine/core': '5',
'@emotion/react': '11',
'@mantine/hooks': '5',
},
}}
files={{
'/App.tsx': code,
}}
options={{
showNavigator: true,
showTabs: true,
showLineNumbers: true,
}}
/>
);
};
export default Sandbox;