78 lines
2.8 KiB
TypeScript
78 lines
2.8 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { GitHub, LastFM, Twitter, Medal, Link } from './SocialIcons';
|
|
|
|
export default function Footer() {
|
|
const quoteArray = [
|
|
"It works on my machine",
|
|
"Revert 'Revert 'Revert 'Revert Change'''",
|
|
"releases on Friday. refuses to elaborate. leaves.",
|
|
"this is so cooked",
|
|
"TypeScript: errors not for the weak, but for the spirited",
|
|
"Professional Production Tester",
|
|
"I break hearts to save lives. err.. something like that",
|
|
"The best error is the one that never shows up"
|
|
]
|
|
|
|
// states
|
|
const [mailState, setMailState] = useState<boolean>(false);
|
|
const [ quote, setQuote ] = useState<string>(quoteArray[Math.floor(Math.random() * quoteArray.length)]);
|
|
|
|
useEffect(() => {
|
|
if (mailState) {
|
|
setTimeout(() => {
|
|
setMailState(false)
|
|
}, 3000)
|
|
}
|
|
}, [mailState])
|
|
|
|
const drawNewQuote = () => {
|
|
const newQuote = quoteArray[Math.floor(Math.random() * quoteArray.length)]
|
|
|
|
// redraw if this quote == current quote
|
|
if (newQuote !== quote) {
|
|
setQuote(newQuote);
|
|
} else drawNewQuote();
|
|
}
|
|
|
|
return (
|
|
<div className="lg:w-1/2 bg-zinc-500 md:w-full mx-auto rounded-t-lg text-center p-4 select-none">
|
|
<h1 className="font-bold">© {new Date().getFullYear()}, Alex Frantz. All Rights Reserved</h1>
|
|
<p>All logos & images on this page belong to their respective owners.</p>
|
|
<p className="opacity-50 italic" onClick={drawNewQuote}>{quote}</p>
|
|
|
|
<hr className="my-2 w-1/2 mx-auto" />
|
|
|
|
{
|
|
mailState ? (
|
|
<p className="font-bold hover:underline max-w-fit mx-auto">
|
|
Copied!
|
|
</p>
|
|
) : (
|
|
<button onClick={() => {
|
|
setMailState(true)
|
|
navigator.clipboard.writeText("alex@alexav.gg")
|
|
}} className="hover:underline">alex@alexav.gg</button>
|
|
)
|
|
}
|
|
|
|
<div className="block space-x-2">
|
|
{/* socials */}
|
|
<a href="https://github.com/azpha/website" target="_blank">
|
|
<GitHub />
|
|
</a>
|
|
<a href="https://twitter.com/carlgrimesdupe" target="_blank">
|
|
<Twitter />
|
|
</a>
|
|
<a href="https://last.fm/user/lulawex" target="_blank">
|
|
<LastFM />
|
|
</a>
|
|
<a href="https://medal.tv/users/215577" target="_blank">
|
|
<Medal />
|
|
</a>
|
|
<a href="https://links.alexav.gg" target="_blank">
|
|
<Link />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |