ui(admin): update button components, fix Editor for eggs

resources/scripts/components/admin/nests/eggs/EggExportButton.tsx

@@ -1,22 +1,25 @@
-import { exportEgg } from '@/api/admin/egg';
-import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import useFlash from '@/plugins/useFlash';
-// import { jsonLanguage } from '@codemirror/lang-json';
-// import Editor from '@/components/elements/Editor';
+import { LanguageDescription } from '@codemirror/language';
+import { json } from '@codemirror/lang-json';
 import { useEffect, useState } from 'react';
-import Button from '@/components/elements/Button';
-import Modal from '@/components/elements/Modal';
-import FlashMessageRender from '@/components/FlashMessageRender';
 import { useParams } from 'react-router-dom';
 import tw from 'twin.macro';
 
+import { exportEgg } from '@/api/admin/egg';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import { Button } from '@/components/elements/button';
+import { Variant } from '@/components/elements/button/types';
+import { Editor } from '@/components/elements/editor';
+import Modal from '@/components/elements/Modal';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import useFlash from '@/plugins/useFlash';
+
 export default ({ className }: { className?: string }) => {
     const params = useParams<'id'>();
     const { clearAndAddHttpError, clearFlashes } = useFlash();
 
     const [visible, setVisible] = useState<boolean>(false);
     const [loading, setLoading] = useState<boolean>(true);
-    const [_content, setContent] = useState<Record<string, any> | null>(null);
+    const [content, setContent] = useState<string | undefined>(undefined);
 
     useEffect(() => {
         if (!visible) {
@@ -45,21 +48,22 @@ export default ({ className }: { className?: string }) => {
                 <h2 css={tw`mb-6 text-2xl text-neutral-100`}>Export Egg</h2>
                 <FlashMessageRender byKey={'egg:export'} css={tw`mb-6`} />
 
-                {/*<Editor*/}
-                {/*    overrides={tw`h-[32rem] rounded`}*/}
-                {/*    initialContent={content !== null ? JSON.stringify(content, null, '\t') : ''}*/}
-                {/*    mode={jsonLanguage}*/}
-                {/*/>*/}
+                <Editor
+                    className="h-[32rem] overflow-scroll rounded"
+                    initialContent={content ?? ''}
+                    language={LanguageDescription.of({ name: 'json', support: json() })}
+                />
 
                 <div css={tw`flex flex-wrap justify-end mt-4 sm:mt-6`}>
-                    <Button
-                        type={'button'}
+                    <Button.Text
+                        type="button"
+                        variant={Variant.Secondary}
                         css={tw`w-full sm:w-auto sm:mr-2`}
                         onClick={() => setVisible(false)}
-                        isSecondary
                     >
                         Close
-                    </Button>
+                    </Button.Text>
+
                     <Button
                         css={tw`w-full sm:w-auto mt-4 sm:mt-0`}
                         // onClick={submit}
@@ -70,16 +74,14 @@ export default ({ className }: { className?: string }) => {
                 </div>
             </Modal>
 
-            <Button
-                type={'button'}
-                size={'small'}
+            <Button.Text
+                type="button"
                 css={tw`px-4 py-0 whitespace-nowrap`}
                 className={className}
                 onClick={() => setVisible(true)}
-                isSecondary
             >
                 Export
-            </Button>
+            </Button.Text>
         </>
     );
 };