feat: about menu

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;

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;

src/components/AboutMenu/index.ts

@@ -0,0 +1 @@
+export { default } from './AboutMenu';

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 />

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
+              {handleConfirm && (
-                type='button'
+                <button
-                className='btn btn-primary'
+                  type='button'
-                onClick={handleConfirm}
+                  className='btn btn-primary'
-              >
+                  onClick={handleConfirm}
-                Confirm
+                >
-              </button>
+                  Confirm
-              <button
+                </button>
-                type='button'
+              )}
-                className='btn btn-neutral'
+              {cancelButton && (
-                onClick={_handleClose}
+                <button
-              >
+                  type='button'
-                Cancel
+                  className='btn btn-neutral'
-              </button>
+                  onClick={_handleClose}
+                >
+                  Cancel
+                </button>
+              )}
             </div>
           </div>
         </div>