ui(admin): consistency tweaks, add egg pages

resources/scripts/components/admin/nests/ImportEggButton.tsx

@@ -0,0 +1,53 @@
+import { jsonLanguage } from '@codemirror/lang-json';
+import Editor from '@/components/elements/Editor';
+import React, { useState } from 'react';
+import Button from '@/components/elements/Button';
+import Modal from '@/components/elements/Modal';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import tw from 'twin.macro';
+
+export default ({ className }: { className?: string }) => {
+    const [ visible, setVisible ] = useState(false);
+
+    return (
+        <>
+            <Modal
+                visible={visible}
+                onDismissed={() => {
+                    setVisible(false);
+                }}
+            >
+                <FlashMessageRender byKey={'egg:import'} css={tw`mb-6`}/>
+
+                <h2 css={tw`mb-6 text-2xl text-neutral-100`}>Import Egg</h2>
+
+                <Editor overrides={tw`h-64 rounded`} initialContent={''} mode={jsonLanguage}/>
+
+                <div css={tw`flex flex-wrap justify-end mt-4 sm:mt-6`}>
+                    <Button
+                        type={'button'}
+                        isSecondary
+                        css={tw`w-full sm:w-auto sm:mr-2`}
+                        onClick={() => setVisible(false)}
+                    >
+                        Cancel
+                    </Button>
+                    <Button css={tw`w-full sm:w-auto mt-4 sm:mt-0`}>
+                        Import Egg
+                    </Button>
+                </div>
+            </Modal>
+
+            <Button
+                type={'button'}
+                size={'large'}
+                css={tw`h-10 px-4 py-0 whitespace-nowrap`}
+                className={className}
+                onClick={() => setVisible(true)}
+                isSecondary
+            >
+                Import
+            </Button>
+        </>
+    );
+};

resources/scripts/components/admin/nests/NestEditContainer.tsx

@@ -1,6 +1,7 @@
+import ImportEggButton from '@/components/admin/nests/ImportEggButton';
 import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router';
-import { useRouteMatch } from 'react-router-dom';
+import { NavLink, useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
 import Spinner from '@/components/elements/Spinner';
@@ -245,10 +246,14 @@ const NestEditContainer = () => {
                     }
                 </div>
 
-                <div css={tw`flex ml-auto pl-4`}>
-                    <Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
-                        New Egg
-                    </Button>
+                <div css={tw`flex flex-row ml-auto pl-4`}>
+                    <ImportEggButton css={tw`mr-4`}/>
+
+                    <NavLink to={`${match.url}/new`}>
+                        <Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
+                            New Egg
+                        </Button>
+                    </NavLink>
                 </div>
             </div>
 

resources/scripts/components/admin/nests/NewEggContainer.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import tw from 'twin.macro';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+
+export default () => {
+    return (
+        <AdminContentBlock title={'New Egg'}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>New Egg</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Add a new egg to the panel.</p>
+                </div>
+            </div>
+        </AdminContentBlock>
+    );
+};