Add in crypto address framework

components/footer.tsx

@@ -1,25 +1,77 @@
 import Link from "next/link";
+import {Fragment, useState} from "react";
+import {Dialog, Transition} from "@headlessui/react";
 import {IoLogoGithub, IoLogoGitlab} from "react-icons/io5";
+import {SiBitcoin, SiEthereum, SiMonero} from "react-icons/si";
 
 export const Footer = () => {
+
+    const addresses: {[index: string]:string} = {
+        Bitcoin: "bitcoinAddress",
+        Ethereum: "ethereumAddress",
+        Monero: "moneroAddress",
+    };
+
+    const [isOpen, setIsOpen] = useState(false);
+    const [coin, setCoin] = useState<string>("bitcoin");
+
     return (
-        <div>
+        <>
             <footer className="footer grid w-full grid-flow-row place-items-center text-center gap-y-10 gap-x-4 text-sm p-10 dark:bg-black bg-white dark:text-white text-black rounded">
                 <div className="grid grid-flow-col gap-4">
                     <Link href="/"><a className="link link-hover">Home</a></Link>
-                    <Link href="/"><a className="link link-hover">Home 2</a></Link>
+                    <Link href="/"><a className="link link-hover">About</a></Link>
                     <Link href="/"><a className="link link-hover">Home 3</a></Link>
                 </div>
-                <div>
                 <div className="grid grid-flow-col gap-4">
                     <Link href="https://github.com/NickBland"><a><IoLogoGithub></IoLogoGithub></a></Link>
                     <Link href="https://git.nickbland.dev/explore"><a><IoLogoGitlab></IoLogoGitlab></a></Link>
                 </div>
+                <div className="grid grid-flow-col gap-4"> 
+                    <SiBitcoin onClick={() => {setIsOpen(true); setCoin("Bitcoin")}} className="hover:text-orange-300 hover:cursor-pointer"></SiBitcoin>
+                    <SiEthereum onClick={() => {setIsOpen(true); setCoin("Ethereum")}} className="hover:text-blue-400 hover:cursor-pointer"></SiEthereum>
+                    <SiMonero onClick={() => {setIsOpen(true); setCoin("Monero")}} className="hover:text-orange-600 hover:cursor-pointer"></SiMonero>
                 </div>
                 <div>
                     <p>Made with ❤️ by Nick Bland</p>
                 </div>
             </footer>
+
+            <Transition appear show={isOpen} as={Fragment}>
+                <Dialog as="div" className="relative z-10" onClose={() => setIsOpen(false)}>
+                    <Transition.Child
+                        as={Fragment}
+                        enter="ease-out duration-300"
+                        enterFrom="opacity-0"
+                        enterTo="opacity-100"
+                        leave="ease-in duration-200"
+                        leaveFrom="opacity-100"
+                        leaveTo="opacity-0"
+                    >
+                        <div className="fixed inset-0 bg-black bg-opacity-25" />
+                    </Transition.Child>
+                    <div className="fixed inset-0 overflow-y-auto">
+                        <div className="flex min-h-full items-center justify-center p-4 text-center">
+                            <Transition.Child
+                                as={Fragment}
+                                enter="ease-out duration-300"
+                                enterFrom="opacity-0 scale-95"
+                                enterTo="opacity-100 scale-100"
+                                leave="ease-in duration-200"
+                                leaveFrom="opacity-100 scale-100"
+                                leaveTo="opacity-0 scale-95"
+                            >
+                                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-white p-6 text-left align-middle shadow-xl transition-all">
+                                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-dark-100">{coin}</Dialog.Title>
+                                    <div className="text-sm text-dark-200 select-all">
+                                        {addresses[coin]}
                                     </div>
+                                </Dialog.Panel>
+                            </Transition.Child>
+                        </div>
+                    </div>
+                </Dialog>
+            </Transition>
+        </>
     );
 }