content: import { Button, ButtonGroup, Tile } from '@rocket.chat/fuselage';
  import React from 'react';
  
  import { fullHeightDecorator } from '../../../.storybook/decorators';
  import Page from './Page';
  
  export default {
  	title: 'components/basic/Page',
  	component: Page,
  };
  
  const DummyContent = () => <>
  	{Array.from({ length: 60 }, (_, i) => <Tile key={i} children='Content slice' marginBlock='x16' />)}
  </>;
  
  export const Basic = () =>
  	<Page>
  		<Page.Header title='Header' />
  		<Page.Content>
  			<DummyContent />
  		</Page.Content>
  	</Page>;
  
  export const WithButtonsAtTheHeader = () =>
  	<Page>
  		<Page.Header title='Header'>
  			<ButtonGroup>
  				<Button primary type='button'>Hooray!</Button>
  			</ButtonGroup>
  		</Page.Header>
  		<Page.Content>
  			<DummyContent />
  		</Page.Content>
  	</Page>;
  
  export const WithScrollableContent = () =>
  	<Page>
  		<Page.Header title='Header' />
  		<Page.ScrollableContent>
  			<DummyContent />
  		</Page.ScrollableContent>
  	</Page>;
  WithScrollableContent.story = {
  	decorators: [fullHeightDecorator],
  };
  
  export const WithScrollableContentWithShadow = () =>
  	<Page>
  		<Page.Header title='Header' />
  		<Page.ScrollableContentWithShadow>
  			<DummyContent />
  		</Page.ScrollableContentWithShadow>
  	</Page>;
  WithScrollableContentWithShadow.story = {
  	decorators: [fullHeightDecorator],
  };
  