100 lines
2.4 KiB
JavaScript
100 lines
2.4 KiB
JavaScript
import React from 'react';
|
|
import { Button, Row, Col } from 'react-bootstrap';
|
|
|
|
import ns from './ns.json';
|
|
|
|
// actual chars required to give buttons some height
|
|
// whitespace alone is no good
|
|
const placeholderString = (
|
|
<span className='placeholder-string'>
|
|
placeholder text of 28 chars
|
|
</span>
|
|
);
|
|
const shortString = (
|
|
<span className='placeholder-string'>
|
|
placeholder
|
|
</span>
|
|
);
|
|
|
|
|
|
export default function SettingsSkeleton() {
|
|
return (
|
|
<div className={ `${ns}-skeleton` }>
|
|
<Row>
|
|
<Col xs={ 12 }>
|
|
<Button
|
|
block={ true }
|
|
bsSize='lg'
|
|
className='btn-link-social'
|
|
>
|
|
{ placeholderString }
|
|
</Button>
|
|
<Button
|
|
block={ true }
|
|
bsSize='lg'
|
|
className='btn-link-social'
|
|
>
|
|
{ placeholderString }
|
|
</Button>
|
|
<Button
|
|
block={ true }
|
|
bsSize='lg'
|
|
className='btn-link-social'
|
|
>
|
|
{ placeholderString }
|
|
</Button>
|
|
</Col>
|
|
</Row>
|
|
<h1 className='text-center'>{ placeholderString }</h1>
|
|
<h2 className='text-center'>{ shortString }</h2>
|
|
<Row>
|
|
<Col xs={ 12 }>
|
|
<Button
|
|
block={ true }
|
|
bsSize='lg'
|
|
className='btn-link-social'
|
|
>
|
|
{ placeholderString }
|
|
</Button>
|
|
<Button
|
|
block={ true }
|
|
bsSize='lg'
|
|
className='btn-link-social'
|
|
>
|
|
{ placeholderString }
|
|
</Button>
|
|
<Button
|
|
block={ true }
|
|
bsSize='lg'
|
|
className='btn-link-social'
|
|
>
|
|
{ placeholderString }
|
|
</Button>
|
|
<Button
|
|
block={ true }
|
|
bsSize='lg'
|
|
className='btn-link-social'
|
|
>
|
|
{ placeholderString }
|
|
</Button>
|
|
</Col>
|
|
</Row>
|
|
<div className='spacer' />
|
|
<h2 className='text-center'>{ placeholderString }</h2>
|
|
<Row>
|
|
<Col xs={ 12 }>
|
|
<Button
|
|
block={ true }
|
|
bsSize='lg'
|
|
className='btn-link-social'
|
|
>
|
|
{ placeholderString }
|
|
</Button>
|
|
</Col>
|
|
</Row>
|
|
<div className='spacer' />
|
|
<h2 className='text-center'>{ placeholderString }</h2>
|
|
</div>
|
|
);
|
|
}
|