NickBland/website-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add in crypto address framework

Browse Source
This commit is contained in:
Nick Bland 2022-05-15 00:56:16 +10:00
parent 06c6ba77f8
commit cca535bcd8
No known key found for this signature in database
GPG Key ID: B46CF88E4DAB4A2C
1 changed files with 57 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
components/footer.tsx
View File

@ -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>
</>
);
}