ui(admin): add "working" React admin ui

resources/scripts/components/admin/servers/ServerManageContainer.tsx

@@ -0,0 +1,60 @@
+import tw from 'twin.macro';
+
+import { useServerFromRoute } from '@/api/admin/server';
+import AdminBox from '@/components/admin/AdminBox';
+import Button from '@/components/elements/Button';
+
+export default () => {
+    const { data: server } = useServerFromRoute();
+
+    if (!server) return null;
+
+    return (
+        <div css={tw`grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-x-2 gap-y-2`}>
+            <div css={tw`h-auto flex flex-col`}>
+                <AdminBox title={'Reinstall Server'} css={tw`relative w-full`}>
+                    <div css={tw`flex flex-row text-red-500 justify-start items-center mb-4`}>
+                        <div css={tw`w-12 mr-2`}>
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                <path
+                                    fillRule="evenodd"
+                                    d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                                    clipRule="evenodd"
+                                />
+                            </svg>
+                        </div>
+                        <p css={tw`text-sm`}>Danger! This could overwrite server data.</p>
+                    </div>
+                    <Button size={'large'} color={'red'} css={tw`w-full`}>
+                        Reinstall Server
+                    </Button>
+                    <p css={tw`text-xs text-neutral-400 mt-2`}>
+                        This will reinstall the server with the assigned service scripts.
+                    </p>
+                </AdminBox>
+            </div>
+            <div css={tw`h-auto flex flex-col`}>
+                <AdminBox title={'Install Status'} css={tw`relative w-full`}>
+                    <Button size={'large'} color={'primary'} css={tw`w-full`}>
+                        Set Server as Installing
+                    </Button>
+                    <p css={tw`text-xs text-neutral-400 mt-2`}>
+                        If you need to change the install status from uninstalled to installed, or vice versa, you may
+                        do so with the button below.
+                    </p>
+                </AdminBox>
+            </div>
+            <div css={tw`h-auto flex flex-col`}>
+                <AdminBox title={'Suspend Server '} css={tw`relative w-full`}>
+                    <Button size={'large'} color={'primary'} css={tw`w-full`}>
+                        Suspend Server
+                    </Button>
+                    <p css={tw`text-xs text-neutral-400 mt-2`}>
+                        This will suspend the server, stop any running processes, and immediately block the user from
+                        being able to access their files or otherwise manage the server through the panel or API.
+                    </p>
+                </AdminBox>
+            </div>
+        </div>
+    );
+};