Add basic listing of server schedules

This commit is contained in:
Dane Everitt 2020-02-08 15:23:08 -08:00
parent f9ec96c70a
commit 32e9fb0346
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
21 changed files with 508 additions and 79 deletions

View file

@ -8,7 +8,7 @@ type Props = Readonly<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElemen
showFlashes?: string | boolean;
}>;
export default ({ title, borderColor, showFlashes, children, ...props }: Props) => (
const ContentBox = ({ title, borderColor, showFlashes, children, ...props }: Props) => (
<div {...props}>
{title && <h2 className={'text-neutral-300 mb-4 px-4'}>{title}</h2>}
{showFlashes &&
@ -24,3 +24,5 @@ export default ({ title, borderColor, showFlashes, children, ...props }: Props)
</div>
</div>
);
export default ContentBox;

View file

@ -1,5 +1,5 @@
import React from 'react';
import { Field, FieldProps } from 'formik';
import { Field as FormikField, FieldProps } from 'formik';
import classNames from 'classnames';
interface OwnProps {
@ -11,8 +11,8 @@ interface OwnProps {
type Props = OwnProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name'>;
export default ({ id, name, label, description, validate, className, ...props }: Props) => (
<Field name={name} validate={validate}>
const Field = ({ id, name, label, description, validate, className, ...props }: Props) => (
<FormikField name={name} validate={validate}>
{
({ field, form: { errors, touched } }: FieldProps) => (
<React.Fragment>
@ -37,5 +37,7 @@ export default ({ id, name, label, description, validate, className, ...props }:
</React.Fragment>
)
}
</Field>
</FormikField>
);
export default Field;

View file

@ -9,7 +9,7 @@ interface Props {
className?: string;
}
export default ({ size, centered, className }: Props) => (
const Spinner = ({ size, centered, className }: Props) => (
centered ?
<div className={classNames(`flex justify-center ${className}`, { 'm-20': size === 'large', 'm-6': size !== 'large' })}>
<div
@ -27,3 +27,5 @@ export default ({ size, centered, className }: Props) => (
})}
/>
);
export default Spinner;

View file

@ -10,7 +10,7 @@ interface Props {
backgroundOpacity?: number;
}
export default ({ size, fixed, visible, backgroundOpacity }: Props) => (
const SpinnerOverlay = ({ size, fixed, visible, backgroundOpacity }: Props) => (
<CSSTransition timeout={150} classNames={'fade'} in={visible} unmountOnExit={true}>
<div
className={classNames('z-50 pin-t pin-l flex items-center justify-center w-full h-full rounded', {
@ -23,3 +23,5 @@ export default ({ size, fixed, visible, backgroundOpacity }: Props) => (
</div>
</CSSTransition>
);
export default SpinnerOverlay;

View file

@ -1,7 +1,7 @@
import React, { Suspense } from 'react';
import Spinner from '@/components/elements/Spinner';
export default ({ children }: { children?: React.ReactNode }) => (
const SuspenseSpinner = ({ children }: { children?: React.ReactNode }) => (
<Suspense
fallback={
<div className={'mx-4 w-3/4 mr-4 flex items-center justify-center'}>
@ -12,3 +12,5 @@ export default ({ children }: { children?: React.ReactNode }) => (
{children}
</Suspense>
);
export default SuspenseSpinner;

View file

@ -9,7 +9,7 @@ interface Props {
children: React.ReactNode;
}
export default ({ icon, title, children, className }: Props) => (
const TitledGreyBox = ({ icon, title, children, className }: Props) => (
<div className={`rounded shadow-md bg-neutral-700 ${className}`}>
<div className={'bg-neutral-900 rounded-t p-3 border-b border-black'}>
<p className={'text-sm uppercase'}>
@ -21,3 +21,5 @@ export default ({ icon, title, children, className }: Props) => (
</div>
</div>
);
export default TitledGreyBox;