feat: add @mui/joy component

web/src/components/CreateShortcutDialog.tsx

@@ -1,4 +1,4 @@
-import { Dialog, DialogContent, DialogTitle } from "@mui/material";
+import { Button, Input, Modal, ModalDialog, Radio, RadioGroup } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { shortcutService } from "../services";
 import useLoading from "../hooks/useLoading";
@@ -105,94 +105,63 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
   };
 
   return (
-    <Dialog open={true}>
-      <DialogTitle className="flex flex-row justify-between items-center w-80 sm:w-96">
-        <p className="text-base">{shortcutId ? "Edit Shortcut" : "Create Shortcut"}</p>
-        <button className="rounded p-1 hover:bg-gray-100" onClick={onClose}>
-          <Icon.X className="w-5 h-auto text-gray-600" />
-        </button>
-      </DialogTitle>
-      <DialogContent>
-        <div className="w-full flex flex-col justify-start items-start mb-3">
-          <span className="mb-2">Name</span>
-          <input
-            className="w-full rounded border shadow-inner text-sm px-2 py-2"
-            type="text"
-            placeholder="shortcut-name"
-            value={state.shortcutCreate.name}
-            onChange={handleNameInputChange}
-          />
+    <Modal open={true}>
+      <ModalDialog>
+        <div className="flex flex-row justify-between items-center w-80 sm:w-96 mb-4">
+          <span className="text-lg font-medium">{shortcutId ? "Edit Shortcut" : "Create Shortcut"}</span>
+          <Button variant="plain" onClick={onClose}>
+            <Icon.X className="w-5 h-auto text-gray-600" />
+          </Button>
         </div>
-        <div className="w-full flex flex-col justify-start items-start mb-3">
-          <span className="mb-2">Link</span>
-          <input
-            className="w-full rounded border shadow-inner text-sm px-2 py-2"
-            type="text"
-            placeholder="The full URL of the page you want to get to"
-            value={state.shortcutCreate.link}
-            onChange={handleLinkInputChange}
-          />
-        </div>
-        <div className="w-full flex flex-col justify-start items-start mb-3">
-          <span className="mb-2">Description</span>
-          <input
-            className="w-full rounded border shadow-inner text-sm px-2 py-2"
-            type="text"
-            placeholder="Something to describe the link"
-            value={state.shortcutCreate.description}
-            onChange={handleDescriptionInputChange}
-          />
-        </div>
-        <div className="w-full flex flex-col justify-start items-start mb-3">
-          <span className="mb-2">Visibility</span>
-          <div className="w-full flex flex-row justify-start items-center text-base">
-            <input
-              type="radio"
-              name="visibility"
-              id="visibility-private"
-              value="PRIVATE"
-              onChange={handleVisibilityInputChange}
-              checked={state.shortcutCreate.visibility === "PRIVATE"}
+        <div>
+          <div className="w-full flex flex-col justify-start items-start mb-3">
+            <span className="mb-2">Name</span>
+            <Input
+              className="w-full"
+              type="text"
+              placeholder="shortcut-name"
+              value={state.shortcutCreate.name}
+              onChange={handleNameInputChange}
             />
-            <label htmlFor="visibility-private" className="ml-1 mr-4">
-              Private
-            </label>
-            <input
-              type="radio"
-              name="visibility"
-              id="visibility-workspace"
-              value="WORKSPACE"
-              onChange={handleVisibilityInputChange}
-              checked={state.shortcutCreate.visibility === "WORKSPACE"}
+          </div>
+          <div className="w-full flex flex-col justify-start items-start mb-3">
+            <span className="mb-2">Link</span>
+            <Input
+              className="w-full"
+              type="text"
+              placeholder="The full URL of the page you want to get to"
+              value={state.shortcutCreate.link}
+              onChange={handleLinkInputChange}
             />
-            <label htmlFor="visibility-workspace" className="ml-1 mr-4">
-              Workspace
-            </label>
-            <input
-              type="radio"
-              name="visibility"
-              id="visibility-public"
-              value="PUBLIC"
-              onChange={handleVisibilityInputChange}
-              checked={state.shortcutCreate.visibility === "PUBLIC"}
+          </div>
+          <div className="w-full flex flex-col justify-start items-start mb-3">
+            <span className="mb-2">Description</span>
+            <Input
+              className="w-full"
+              type="text"
+              placeholder="Something to describe the link"
+              value={state.shortcutCreate.description}
+              onChange={handleDescriptionInputChange}
             />
-            <label htmlFor="visibility-public" className="ml-1">
-              Public
-            </label>
+          </div>
+          <div className="w-full flex flex-col justify-start items-start mb-3">
+            <span className="mb-2">Visibility</span>
+            <div className="w-full flex flex-row justify-start items-center text-base">
+              <RadioGroup row value={state.shortcutCreate.visibility} onChange={handleVisibilityInputChange}>
+                <Radio value="PRIVATE" label="Private" />
+                <Radio value="WORKSPACE" label="Workspace" />
+                <Radio value="PUBLIC" label="Public" />
+              </RadioGroup>
+            </div>
+          </div>
+          <div className="w-full flex flex-row justify-end items-center">
+            <Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleSaveBtnClick}>
+              Save
+            </Button>
           </div>
         </div>
-        <div className="w-full flex flex-row justify-end items-center">
-          <button
-            className={`rounded px-3 leading-9 shadow bg-green-600 text-white hover:bg-green-700 ${
-              requestState.isLoading ? "opacity-80" : ""
-            }`}
-            onClick={handleSaveBtnClick}
-          >
-            Save
-          </button>
-        </div>
-      </DialogContent>
-    </Dialog>
+      </ModalDialog>
+    </Modal>
   );
 };