website-2/components/footer.tsx

76 lines
4.0 KiB
TypeScript
Raw Normal View History

import Link from "next/link";
2022-05-15 00:56:16 +10:00
import {Fragment, useState} from "react";
import {Dialog, Transition} from "@headlessui/react";
import {IoLogoGithub, IoLogoGitlab} from "react-icons/io5";
2022-05-15 00:56:16 +10:00
import {SiBitcoin, SiEthereum, SiMonero} from "react-icons/si";
export const Footer = () => {
2022-05-15 00:56:16 +10:00
const addresses: {[index: string]:string} = {
Bitcoin: "bitcoinAddress",
Ethereum: "ethereumAddress",
Monero: "moneroAddress",
};
const [isOpen, setIsOpen] = useState(false);
const [coin, setCoin] = useState<string>("bitcoin");
return (
2022-05-15 00:56:16 +10:00
<>
<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 bottom-0 max-w-full">
<div className="grid grid-flow-col gap-4">
<Link href="/"><a className="link link-hover">Home</a></Link>
2022-05-15 00:56:16 +10:00
<Link href="/"><a className="link link-hover">About</a></Link>
<Link href="/"><a className="link link-hover">Projects</a></Link>
</div>
2022-05-15 00:56:05 +10:00
<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>
<span className="inline-block border-l border-solid mx-0"></span>
<SiBitcoin onClick={() => {setIsOpen(true); setCoin("Bitcoin")}} className="hover:text-[#F7931A] hover:cursor-pointer"></SiBitcoin>
<SiEthereum onClick={() => {setIsOpen(true); setCoin("Ethereum")}} className="hover:text-[#8A93B2] hover:cursor-pointer"></SiEthereum>
<SiMonero onClick={() => {setIsOpen(true); setCoin("Monero")}} className="hover:text-[#F26822] hover:cursor-pointer"></SiMonero>
</div>
<div>
<p>Made with by Nick Bland</p>
</div>
</footer>
2022-05-15 00:56:16 +10:00
<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>
</>
);
}