import { Meta } from '@storybook/addon-docs';
import Link from '@cloudscape-design/components/link';
import SpaceBetween from '@cloudscape-design/components/space-between';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';

<Meta title="Migration/Inline" />

# Migrating from NorthStar legacy - Inline

Use <Link href='https://cloudscape.design/components/space-between' target='_blank' external>Cloudscape SpaceBetween component </Link>

## Update Import

```diff
- import Inline from 'aws-northstar/layouts/Stack';
+ import SpaceBetween from '@cloudscape-design/components/space-between'';
```

## Update Code

```diff
- <Inline spacing='s'>
+ <SpaceBetween direction="horizontal" size="s">
    <Placeholder/>
    <Placeholder/>
    <Placeholder/>
-  </Inline>
+ </SpaceBetween>
```

export const Component = () => {
  return <SyntaxHighlighter/>;
};