#### On Create

```jsx

import { Flex, Button } from '@ui/components';
import { TutorialModal } from '@ui/compositions';

const [open, setOpen] = React.useState(false);

<Flex justify="center">
  <Button onClick={() => setOpen(!open)}>
    Open Modal
  </Button>
  <TutorialModal
    action={'Create'}
    baseUrl={''}
    open={open}
    steps={undefined}
    target={'#modal-target-sm-1'}
  />
</Flex>
```

#### On View

```jsx

import { Flex, Button } from '@ui/components';
import { TutorialModal } from '@ui/compositions';

const tutorial = {
  _id: '123',
  backgroundColor: '#6EB257',
  emoji: '🦉',
  description: 'Readonly Tutorial Description Placeholder',
  title: 'Readonly Tutorial',
  published: true,
  hero: false,
  steps: [
    {
      title: 'Step One!',
      body: 'This is our first step.',
      lineNumbers: ['1'],
    },
    {
      title: 'Step Two.',
      body: 'This is our second step.',
      lineNumbers: ['3'],
    }
  ],
  snippet: {
    endpoint: {
      apiSetting: '1234',
      slug: 'find-pets',
      title: 'Find Pets',
      method: 'get'
    },
    codeOptions: [
      {
        code: `curl --request POST
        --url <<url>>
        --header 'authorization: Bearer 123'
        --header 'content-type: application/json'`,
        language: 'curl',
        highlightedSyntax: 'curl',
        name: 'Node.js',
      },
    ],
  },
  response: '{"success":true}',
};

const [open, setOpen] = React.useState(false);

<Flex justify="center">
  <Button onClick={() => setOpen(!open)}>
    Open Modal
  </Button>
  <TutorialModal
    action={'View'}
    baseUrl={''}
    open={open}
    target={'#modal-target-sm-2'}
    tutorial={tutorial}
  />
</Flex>
```

<div id="modal-target-sm-1" className="ModalWrapper"></div>
<div id="modal-target-sm-2" className="ModalWrapper"></div>