leaky-ships/leaky-ships/pages/dev/index.tsx

47 lines
1.5 KiB
TypeScript

import { faPlus, faUserPlus } from "@fortawesome/pro-solid-svg-icons"
import { faEye, faLeftLong } from "@fortawesome/pro-regular-svg-icons"
import { faCirclePlay } from "@fortawesome/pro-thin-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { useState } from "react"
import Logo from "../../components/Logo"
import BurgerMenu from "../../components/BurgerMenu"
export default function Home() {
const [heWantsToPlay, setHeWantsToPlay] = useState(false)
return (
<div id="box">
<BurgerMenu />
<Logo />
{!heWantsToPlay ? (
<>
<div id="videoWrapper">
<FontAwesomeIcon icon={faCirclePlay} />
</div>
<button id="startButton" onClick={() => setHeWantsToPlay(true)}>
START
</button>
</>
) : (
<div id="startBox">
<button id="back" onClick={() => setHeWantsToPlay(false)}>
<FontAwesomeIcon icon={faLeftLong} />
</button>
<div id="sameWidth">
<button className="optionButton">
<span>Raum erstellen</span>
<FontAwesomeIcon icon={faPlus} />
</button>
<button className="optionButton">
<span>Raum beitreten</span>
<FontAwesomeIcon icon={faUserPlus} />
</button>
<button className="optionButton">
<span>Zuschauen</span>
<FontAwesomeIcon icon={faEye} />
</button>
</div>
</div>
)}
</div>
)
}