82 lines
4.5 KiB
TypeScript
82 lines
4.5 KiB
TypeScript
import * as React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import ContentBox from '@/components/elements/ContentBox';
|
|
|
|
export default class DesignElementsContainer extends React.PureComponent {
|
|
render () {
|
|
return (
|
|
<React.Fragment>
|
|
<div className={'my-10'}>
|
|
<div className={'flex'}>
|
|
<ContentBox
|
|
className={'flex-1 mr-4'}
|
|
title={'A Special Announcement'}
|
|
borderColor={'border-primary-400'}
|
|
>
|
|
<p className={'text-neutral-200 text-sm'}>
|
|
Your demands have been received: Dark Mode will be default in Pterodactyl 0.8!
|
|
</p>
|
|
<p><Link to={'/'}>Back</Link></p>
|
|
</ContentBox>
|
|
<div className={'ml-4 flex-1'}>
|
|
<h2 className={'text-neutral-300 mb-2 px-4'}>Form Elements</h2>
|
|
<div className={'bg-neutral-700 p-4 rounded shadow-lg border-t-4 border-primary-400'}>
|
|
<label className={'uppercase text-neutral-200'}>Email</label>
|
|
<input type={'text'} className={'input-dark'}/>
|
|
<p className={'input-help'}>
|
|
This is some descriptive helper text to explain how things work.
|
|
</p>
|
|
<div className={'mt-6'}/>
|
|
<label className={'uppercase text-neutral-200'}>Username</label>
|
|
<input type={'text'} className={'input-dark error'}/>
|
|
<p className={'input-help'}>
|
|
This field has an error.
|
|
</p>
|
|
<div className={'mt-6'}/>
|
|
<label className={'uppercase text-neutral-200'}>Disabled Field</label>
|
|
<input type={'text'} className={'input-dark'} disabled={true}/>
|
|
<div className={'mt-6'}/>
|
|
<label className={'uppercase text-neutral-200'}>Select</label>
|
|
<select className={'input-dark'}>
|
|
<option>Option 1</option>
|
|
<option>Option 2</option>
|
|
<option>Option 3</option>
|
|
</select>
|
|
<div className={'mt-6'}/>
|
|
<label className={'uppercase text-neutral-200'}>Textarea</label>
|
|
<textarea className={'input-dark h-32'}></textarea>
|
|
<div className={'mt-6'}/>
|
|
<button className={'btn btn-primary btn-sm'}>
|
|
Blue
|
|
</button>
|
|
<button className={'btn btn-grey btn-sm ml-2'}>
|
|
Grey
|
|
</button>
|
|
<button className={'btn btn-green btn-sm ml-2'}>
|
|
Green
|
|
</button>
|
|
<button className={'btn btn-red btn-sm ml-2'}>
|
|
Red
|
|
</button>
|
|
<div className={'mt-6'}/>
|
|
<button className={'btn btn-secondary btn-sm'}>
|
|
Secondary
|
|
</button>
|
|
<button className={'btn btn-secondary btn-red btn-sm ml-2'}>
|
|
Secondary Danger
|
|
</button>
|
|
<div className={'mt-6'}/>
|
|
<button className={'btn btn-primary btn-lg'}>
|
|
Large
|
|
</button>
|
|
<button className={'btn btn-primary btn-xs ml-2'}>
|
|
Tiny
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|