Add view for editing the details of a schedule

resources/scripts/components/elements/Switch.tsx

@@ -0,0 +1,85 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import v4 from 'uuid/v4';
+import classNames from 'classnames';
+import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
+import { Field, FieldProps } from 'formik';
+
+const ToggleContainer = styled.div`
+    ${tw`relative select-none w-12 leading-normal`};
+
+    & > input[type="checkbox"] {
+        ${tw`hidden`};
+
+        &:checked + label {
+            ${tw`bg-primary-500 border-primary-700 shadow-none`};
+        }
+
+        &:checked + label:before {
+            right: 0.125rem;
+        }
+    }
+
+    & > label {
+        ${tw`mb-0 block overflow-hidden cursor-pointer bg-neutral-400 border border-neutral-700 rounded-full h-6 shadow-inner`};
+        transition: all 75ms linear;
+
+        &::before {
+            ${tw`absolute block bg-white border h-5 w-5 rounded-full`};
+            top: 0.125rem;
+            right: calc(50% + 0.125rem);
+            //width: 1.25rem;
+            //height: 1.25rem;
+            content: "";
+            transition: all 75ms ease-in;
+        }
+    }
+`;
+
+interface Props {
+    name: string;
+    description?: string;
+    label: string;
+    enabled?: boolean;
+}
+
+const Switch = ({ name, label, description }: Props) => {
+    const uuid = useMemo(() => v4(), []);
+
+    return (
+        <FormikFieldWrapper name={name}>
+            <div className={'flex items-center'}>
+                <ToggleContainer className={'mr-4 flex-none'}>
+                    <Field name={name}>
+                        {({ field, form }: FieldProps) => (
+                            <input
+                                id={uuid}
+                                name={name}
+                                type={'checkbox'}
+                                onChange={() => {
+                                    form.setFieldTouched(name);
+                                    form.setFieldValue(field.name, !field.value);
+                                }}
+                                defaultChecked={field.value}
+                            />
+                        )}
+                    </Field>
+                    <label htmlFor={uuid}/>
+                </ToggleContainer>
+                <div className={'w-full'}>
+                    <label
+                        className={classNames('input-dark-label cursor-pointer', { 'mb-0': !!description })}
+                        htmlFor={uuid}
+                    >{label}</label>
+                    {description &&
+                    <p className={'input-help'}>
+                        {description}
+                    </p>
+                    }
+                </div>
+            </div>
+        </FormikFieldWrapper>
+    );
+};
+
+export default Switch;