Add basic listing of server schedules
This commit is contained in:
parent
f9ec96c70a
commit
32e9fb0346
21 changed files with 508 additions and 79 deletions
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Reference in a new issue