51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import { useState, useEffect } from "react"
|
|
|
|
export default function Header({
|
|
isAudioActive = false
|
|
}: {
|
|
isAudioActive: boolean
|
|
}) {
|
|
const quoteArray = [
|
|
"It works on my machine",
|
|
"Revert 'Revert 'Revert",
|
|
"'fuck the tests'",
|
|
"this is so cooked",
|
|
"Professional Production Tester",
|
|
"I break hearts to save lives.",
|
|
"go bills",
|
|
"josh allen is my goat",
|
|
"lets go buffalo",
|
|
"oorah"
|
|
]
|
|
const [ quote, setQuote ] = useState<string>(quoteArray[Math.floor(Math.random() * quoteArray.length)]);
|
|
|
|
const drawNewQuote = () => {
|
|
const newQuote = quoteArray[Math.floor(Math.random() * quoteArray.length)]
|
|
|
|
// redraw if this quote == current quote
|
|
if (newQuote !== quote) {
|
|
setQuote(newQuote);
|
|
} else drawNewQuote();
|
|
}
|
|
useEffect(() => {
|
|
if (isAudioActive) {
|
|
setQuote("go bills")
|
|
}
|
|
}, [isAudioActive])
|
|
|
|
return (
|
|
<div className="bg-zinc-900 p-4 flex justify-between">
|
|
<div>
|
|
<a href="/" className="hover:underline">
|
|
<h1 className="text-2xl font-bold">Alex Frantz</h1>
|
|
</a>
|
|
<p className="opacity-50 italic select-none" onClick={drawNewQuote}>{quote}</p>
|
|
</div>
|
|
<div className="space-x-2 items-center justify-center flex select-none">
|
|
<a className="hover:underline" href="#projects">Projects</a>
|
|
<a className="hover:underline" href="#data">Data</a>
|
|
<a className="hover:underline" href="#contact">Contact</a>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |