From 9d5766b4110a15bdafff5c76d42720ee69432f4c Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sun, 25 Jun 2023 22:39:26 +0800
Subject: [PATCH] chore: add about dialog

---
 web/src/components/AboutDialog.tsx | 37 +++++++++++++
 web/src/components/Header.tsx      | 85 +++++++++++++++++-------------
 2 files changed, 86 insertions(+), 36 deletions(-)
 create mode 100644 web/src/components/AboutDialog.tsx

diff --git a/web/src/components/AboutDialog.tsx b/web/src/components/AboutDialog.tsx
new file mode 100644
index 0000000..554e507
--- /dev/null
+++ b/web/src/components/AboutDialog.tsx
@@ -0,0 +1,37 @@
+import { Button, Link, Modal, ModalDialog } from "@mui/joy";
+import Icon from "./Icon";
+
+interface Props {
+  onClose: () => void;
+}
+
+const AboutDialog: React.FC<Props> = (props: Props) => {
+  const { onClose } = props;
+
+  return (
+    <Modal open={true}>
+      <ModalDialog>
+        <div className="w-full flex flex-row justify-between items-center">
+          <span className="text-lg font-medium">About</span>
+          <Button variant="plain" onClick={onClose}>
+            <Icon.X className="w-5 h-auto text-gray-600" />
+          </Button>
+        </div>
+        <div className="max-w-full w-80 sm:w-96">
+          <p>
+            <span className="font-medium">Shortify</span> is a free and open source project. It is a simple bookmarking tool that allows you
+            to save your favorite links and access them from anywhere.
+          </p>
+          <div className="mt-1">
+            <span className="mr-2">See more in:</span>
+            <Link variant="plain" href="https://github.com/boojack/shortify">
+              GitHub
+            </Link>
+          </div>
+        </div>
+      </ModalDialog>
+    </Modal>
+  );
+};
+
+export default AboutDialog;
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 159d575..293a335 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -1,56 +1,69 @@
+import { Avatar } from "@mui/joy";
+import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { useAppSelector } from "../stores";
 import Icon from "./Icon";
 import Dropdown from "./common/Dropdown";
-import { Avatar } from "@mui/joy";
+import AboutDialog from "./AboutDialog";
 
 const Header: React.FC = () => {
   const navigate = useNavigate();
   const user = useAppSelector((state) => state.user).user as User;
+  const [showAboutDialog, setShowAboutDialog] = useState<boolean>(false);
 
   const handleSignOutButtonClick = async () => {
     navigate("/auth");
   };
 
   return (
-    <div className="w-full bg-amber-50">
-      <div className="w-full max-w-4xl mx-auto px-3 py-5 flex flex-row justify-between items-center">
-        <div className="flex flex-row justify-start items-center shrink mr-2">
-          <Link to="/" className="text-base font-mono font-medium cursor-pointer flex flex-row justify-start items-center">
-            <img src="/logo.png" className="w-8 h-auto mr-2" alt="" />
-            Shortify
-          </Link>
-        </div>
-        <div className="relative flex-shrink-0">
-          <Dropdown
-            trigger={
-              <button className="flex flex-row justify-end items-center cursor-pointer">
-                <Avatar size="sm" variant="plain" />
-                <span>{user.nickname}</span>
-                <Icon.ChevronDown className="ml-1 w-5 h-auto text-gray-600" />
-              </button>
-            }
-            actionsClassName="!w-36"
-            actions={
-              <>
-                <Link
-                  to="/setting"
-                  className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
-                >
-                  <Icon.Settings className="w-4 h-auto mr-2" /> Setting
-                </Link>
-                <button
-                  className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
-                  onClick={() => handleSignOutButtonClick()}
-                >
-                  <Icon.LogOut className="w-4 h-auto mr-2" /> Sign out
+    <>
+      <div className="w-full bg-amber-50">
+        <div className="w-full max-w-4xl mx-auto px-3 py-5 flex flex-row justify-between items-center">
+          <div className="flex flex-row justify-start items-center shrink mr-2">
+            <Link to="/" className="text-base font-mono font-medium cursor-pointer flex flex-row justify-start items-center">
+              <img src="/logo.png" className="w-8 h-auto mr-2" alt="" />
+              Shortify
+            </Link>
+          </div>
+          <div className="relative flex-shrink-0">
+            <Dropdown
+              trigger={
+                <button className="flex flex-row justify-end items-center cursor-pointer">
+                  <Avatar size="sm" variant="plain" />
+                  <span>{user.nickname}</span>
+                  <Icon.ChevronDown className="ml-1 w-5 h-auto text-gray-600" />
                 </button>
-              </>
-            }
-          ></Dropdown>
+              }
+              actionsClassName="!w-36"
+              actions={
+                <>
+                  <Link
+                    to="/setting"
+                    className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
+                  >
+                    <Icon.Settings className="w-4 h-auto mr-2" /> Setting
+                  </Link>
+                  <button
+                    className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
+                    onClick={() => setShowAboutDialog(true)}
+                  >
+                    <Icon.Info className="w-4 h-auto mr-2" /> About
+                  </button>
+                  <button
+                    className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
+                    onClick={() => handleSignOutButtonClick()}
+                  >
+                    <Icon.LogOut className="w-4 h-auto mr-2" /> Sign out
+                  </button>
+                </>
+              }
+            ></Dropdown>
+          </div>
         </div>
       </div>
-    </div>
+
+      {showAboutDialog && <AboutDialog onClose={() => setShowAboutDialog(false)} />}
+    </>
   );
 };