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 ( + + + + ); +}; + +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(false); + + return ( + <> + { + setIsModalOpen(true); + }} + > +
+ +
+ About +
+ {isModalOpen && ( + +
+
+ Description +
+
+
+ )} + + ); +}; + +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 ( <> + 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>; - handleConfirm: () => void; + handleConfirm?: () => void; handleClose?: () => void; + cancelButton?: boolean; children?: React.ReactElement; }) => { const modalRoot = document.getElementById('modal-root'); @@ -54,20 +56,24 @@ const PopupModal = ({ {children}
- - + {handleConfirm && ( + + )} + {cancelButton && ( + + )}