From db81221e2d1046436994f9955b31040731a69073 Mon Sep 17 00:00:00 2001
From: Jing Hua <tohjinghua123@gmail.com>
Date: Mon, 6 Mar 2023 19:53:20 +0800
Subject: [PATCH] feat: about menu

---
 src/assets/icons/AboutIcon.tsx                | 16 ++++++++
 src/components/AboutMenu/AboutMenu.tsx        | 38 +++++++++++++++++++
 src/components/AboutMenu/index.ts             |  1 +
 .../Menu/MenuOptions/MenuOptions.tsx          |  2 +
 src/components/PopupModal/PopupModal.tsx      | 36 ++++++++++--------
 5 files changed, 78 insertions(+), 15 deletions(-)
 create mode 100644 src/assets/icons/AboutIcon.tsx
 create mode 100644 src/components/AboutMenu/AboutMenu.tsx
 create mode 100644 src/components/AboutMenu/index.ts

diff --git a/src/assets/icons/AboutIcon.tsx b/src/assets/icons/AboutIcon.tsx
new file mode 100644
index 0000000..9b26b62
--- /dev/null
+++ b/src/assets/icons/AboutIcon.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const AboutIcon = () => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 512 512'
+      className='h-4 w-4'
+      fill='white'
+    >
+      <path d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z' />
+    </svg>
+  );
+};
+
+export default AboutIcon;
diff --git a/src/components/AboutMenu/AboutMenu.tsx b/src/components/AboutMenu/AboutMenu.tsx
new file mode 100644
index 0000000..b02ca18
--- /dev/null
+++ b/src/components/AboutMenu/AboutMenu.tsx
@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import PopupModal from '@components/PopupModal';
+import AboutIcon from '@icon/AboutIcon';
+
+const AboutMenu = () => {
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      <a
+        className='flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
+        onClick={() => {
+          setIsModalOpen(true);
+        }}
+      >
+        <div>
+          <AboutIcon />
+        </div>
+        About
+      </a>
+      {isModalOpen && (
+        <PopupModal
+          title='About'
+          setIsModalOpen={setIsModalOpen}
+          cancelButton={false}
+        >
+          <div className='p-6 border-b border-gray-200 dark:border-gray-600'>
+            <div className='min-w-fit text-gray-900 dark:text-gray-300 text-sm'>
+              Description
+            </div>
+          </div>
+        </PopupModal>
+      )}
+    </>
+  );
+};
+
+export default AboutMenu;
diff --git a/src/components/AboutMenu/index.ts b/src/components/AboutMenu/index.ts
new file mode 100644
index 0000000..1db402f
--- /dev/null
+++ b/src/components/AboutMenu/index.ts
@@ -0,0 +1 @@
+export { default } from './AboutMenu';
diff --git a/src/components/Menu/MenuOptions/MenuOptions.tsx b/src/components/Menu/MenuOptions/MenuOptions.tsx
index abe5399..f25e099 100644
--- a/src/components/Menu/MenuOptions/MenuOptions.tsx
+++ b/src/components/Menu/MenuOptions/MenuOptions.tsx
@@ -7,10 +7,12 @@ import Logout from './Logout';
 import Me from './Me';
 import ThemeSwitcher from './ThemeSwitcher';
 import Updates from './Updates';
+import AboutMenu from '@components/AboutMenu';
 
 const MenuOptions = () => {
   return (
     <>
+      <AboutMenu />
       <ClearConversation />
       <Api />
       <ThemeSwitcher />
diff --git a/src/components/PopupModal/PopupModal.tsx b/src/components/PopupModal/PopupModal.tsx
index 25065ee..b806444 100644
--- a/src/components/PopupModal/PopupModal.tsx
+++ b/src/components/PopupModal/PopupModal.tsx
@@ -9,13 +9,15 @@ const PopupModal = ({
   setIsModalOpen,
   handleConfirm,
   handleClose,
+  cancelButton = true,
   children,
 }: {
   title?: string;
   message?: string;
   setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  handleConfirm: () => void;
+  handleConfirm?: () => void;
   handleClose?: () => void;
+  cancelButton?: boolean;
   children?: React.ReactElement;
 }) => {
   const modalRoot = document.getElementById('modal-root');
@@ -54,20 +56,24 @@ const PopupModal = ({
             {children}
 
             <div className='flex items-center justify-center p-6 gap-4'>
-              <button
-                type='button'
-                className='btn btn-primary'
-                onClick={handleConfirm}
-              >
-                Confirm
-              </button>
-              <button
-                type='button'
-                className='btn btn-neutral'
-                onClick={_handleClose}
-              >
-                Cancel
-              </button>
+              {handleConfirm && (
+                <button
+                  type='button'
+                  className='btn btn-primary'
+                  onClick={handleConfirm}
+                >
+                  Confirm
+                </button>
+              )}
+              {cancelButton && (
+                <button
+                  type='button'
+                  className='btn btn-neutral'
+                  onClick={_handleClose}
+                >
+                  Cancel
+                </button>
+              )}
             </div>
           </div>
         </div>