frontend/src/screens/Register.js

import React from 'react';

import {
	FlexboxGrid,
	Panel,
	Form,
	FormGroup,
	FormControl,
	HelpBlock,
	Button,
	Dropdown,
} from 'rsuite';

const boxStyle = {
	margin: '50px 10px',
};

export default function Register() {
	return (
		<FlexboxGrid justify='center'>
			<FlexboxGrid.Item>
				<Panel header={<h3>Register</h3>} bordered style={boxStyle}>
					<Form horizontal>
						<FormGroup>
							<FormControl
								name='username'
								type='plaintext'
								placeholder='username'
							/>
						</FormGroup>
						<FormGroup>
							<FormControl
								name='email'
								type='email'
								placeholder='email'
							/>
						</FormGroup>
						<FormGroup>
							<Dropdown title='Timezone'>
								<Dropdown.Item>
									Australian Central Time
								</Dropdown.Item>
								<Dropdown.Item>
									Australian Eastern Time
								</Dropdown.Item>
								<Dropdown.Item>
									Alaska Standard Time
								</Dropdown.Item>
								<Dropdown.Item>
									Bangladesh Standard Time{' '}
								</Dropdown.Item>
								<Dropdown.Item>...</Dropdown.Item>
							</Dropdown>
						</FormGroup>
						<FormGroup>
							<FormControl
								name='password'
								type='password'
								placeholder='password'
							/>
							<HelpBlock tooltip>
								Minimum password length is 8 characters
							</HelpBlock>
						</FormGroup>
						<FormGroup>
							<Button appearance='primary' block>
								Register
							</Button>
						</FormGroup>
					</Form>
				</Panel>
			</FlexboxGrid.Item>
		</FlexboxGrid>
	);
}