e03266008c
* form handler example: Update deps and fix build from dep update * Ran lint error fixers * Fixes errors that occur when commit occurs * Commit linter fixes
51 lines
1.7 KiB
JavaScript
51 lines
1.7 KiB
JavaScript
import 'semantic-ui-css/semantic.min.css'
|
|
import { Modal, Button, Icon } from 'semantic-ui-react'
|
|
|
|
import SmallImage from './SmallImage.png'
|
|
import LargeImage from './LargeImage.png'
|
|
import './styles.css'
|
|
|
|
export default () => (
|
|
<div className='centered'>
|
|
<Icon size='massive' name='world' />
|
|
<div className='separator' />
|
|
<Modal trigger={<Button>Show Modal</Button>}>
|
|
<Modal.Header>
|
|
<em>publicPath</em> should be set to <em>/_next/static/</em>
|
|
</Modal.Header>
|
|
<Modal.Content>
|
|
<Modal.Description>
|
|
<div className='wrapper'>
|
|
<div className='row'>
|
|
<p>
|
|
Larger content should be still availble as a fallback to{' '}
|
|
<em>fileLoader</em> but it should not polute{' '}
|
|
<em>/.next/static/css</em> folder. You should see two images
|
|
below. One, smaller, loaded as data url, and one, bigger, loaded
|
|
via url.
|
|
</p>
|
|
</div>
|
|
<div className='row'>
|
|
<img src={SmallImage} />
|
|
<p>
|
|
A small image should be loaded as data url:{' '}
|
|
<em>{SmallImage.substr(0, 100)}...</em>
|
|
</p>
|
|
</div>
|
|
|
|
<div className='row'>
|
|
<img src={LargeImage} />
|
|
<p>
|
|
A large image should be loaded as a url: <em>{LargeImage}</em>
|
|
</p>
|
|
</div>
|
|
<p className='border'>
|
|
You should also still be able to load regular css. This text
|
|
should have border.
|
|
</p>
|
|
</div>
|
|
</Modal.Description>
|
|
</Modal.Content>
|
|
</Modal>
|
|
</div>
|
|
)
|