From d46314b5853b0aaa0bc3aeec659038fb48e40d19 Mon Sep 17 00:00:00 2001 From: Phoenix Pereira <47909638+phoenixpereira@users.noreply.github.com> Date: Mon, 14 Oct 2024 01:23:51 +1030 Subject: [PATCH] feat(footer): Improve footer ui (#17) * feat(footer): Improve footer ui * fix(footer): Avoid footer text overlap on mobile * fix(footer): Fix className typo * chore(footer): Address feedback * chore(footer): Remove redundant rel attribute * feat: use `mobile:` instead of `md:` * chore(format): eof * refactor(footer): use grid instead of flex --------- Co-authored-by: jsun969 --- .prettierrc.cjs | 1 + src/components/Footer.tsx | 94 +++++++++++++++++++++++++++++++-------- 2 files changed, 77 insertions(+), 18 deletions(-) diff --git a/.prettierrc.cjs b/.prettierrc.cjs index 38b8f3f..2e02d54 100644 --- a/.prettierrc.cjs +++ b/.prettierrc.cjs @@ -9,4 +9,5 @@ module.exports = { ], importOrder: ['', '^[./]'], importOrderSeparation: true, + endOfLine: 'lf', }; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 87bfda1..5b3c6eb 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,4 +1,11 @@ -import { Divider } from '@nextui-org/react'; +import { + Divider, + Modal, + ModalBody, + ModalContent, + ModalHeader, +} from '@nextui-org/react'; +import { useState } from 'react'; import { FaDiscord, FaEnvelope, @@ -8,6 +15,26 @@ import { FaLinkedin, } from 'react-icons/fa'; +interface FooterModalProps { + title: string; + content: string; + isOpen: boolean; + onClose: () => void; +} + +const FooterModal = ({ title, content, isOpen, onClose }: FooterModalProps) => { + return ( + + + {title} + +

{content}

+ + + + ); +}; + const FOOTER_SECTIONS = [ { title: 'About', @@ -22,7 +49,7 @@ const FOOTER_SECTIONS = [ { title: 'Privacy', content: - 'MyTimetable collects anonymous analytics data to help improve user experience and enhance the functionality of the website. This data is collected without personally identifying users and is used solely for analytical purposes. We may share collective data with relevant third parties to provide insights into user engagement and improve our services. We are committed to protecting your privacy and will not share any personally identifiable information.', + 'MyTimetable collects anonymous analytics data to help improve user experience and enhance the functionality of the website. We may share collective data with relevant third parties to provide insights into user engagement and improve our services. We are committed to protecting your privacy and will not share any personally identifiable information.', }, ]; @@ -36,34 +63,65 @@ const LINKS = [ ]; export const Footer = () => { + const [openModal, setOpenModal] = useState(null); + return ( - ); };