88 lines
2.1 KiB
JavaScript
88 lines
2.1 KiB
JavaScript
|
import React from "react";
|
||
|
import { Box, Flex, Button, Tooltip } from "@chakra-ui/core";
|
||
|
import { useHistory } from "react-router-dom";
|
||
|
|
||
|
import { Heading1 } from "./util";
|
||
|
|
||
|
import HomepageSplashImg from "../images/homepage-splash.png";
|
||
|
import SpeciesColorPicker from "./SpeciesColorPicker";
|
||
|
|
||
|
function HomePage() {
|
||
|
return (
|
||
|
<Flex
|
||
|
color="green.800"
|
||
|
direction="column"
|
||
|
p="6"
|
||
|
align="center"
|
||
|
textAlign="center"
|
||
|
>
|
||
|
<Box height="8" />
|
||
|
<Box
|
||
|
as="img"
|
||
|
src={HomepageSplashImg}
|
||
|
width="200px"
|
||
|
height="200px"
|
||
|
rounded="lg"
|
||
|
boxShadow="md"
|
||
|
/>
|
||
|
<Box height="4" />
|
||
|
<Heading1>Dress to Impress</Heading1>
|
||
|
<Box height="8" />
|
||
|
<StartOutfitForm />
|
||
|
</Flex>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
function StartOutfitForm() {
|
||
|
const history = useHistory();
|
||
|
|
||
|
const [speciesId, setSpeciesId] = React.useState("1");
|
||
|
const [colorId, setColorId] = React.useState("8");
|
||
|
const [isValid, setIsValid] = React.useState(true);
|
||
|
|
||
|
const onSubmit = () => {
|
||
|
if (!isValid) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
const params = new URLSearchParams({
|
||
|
species: speciesId,
|
||
|
color: colorId,
|
||
|
});
|
||
|
|
||
|
history.push(`/outfits/new?${params}`);
|
||
|
};
|
||
|
|
||
|
return (
|
||
|
<form onSubmit={onSubmit}>
|
||
|
<Flex>
|
||
|
<SpeciesColorPicker
|
||
|
speciesId={speciesId}
|
||
|
colorId={colorId}
|
||
|
showPlaceholders
|
||
|
onChange={(species, color, isValid) => {
|
||
|
setSpeciesId(species.id);
|
||
|
setColorId(color.id);
|
||
|
setIsValid(isValid);
|
||
|
}}
|
||
|
/>
|
||
|
<Box width="4" />
|
||
|
<Tooltip
|
||
|
label="Does not exist 😓"
|
||
|
placement="top"
|
||
|
// HACK: I only want the tooltip to appear when invalid... but the
|
||
|
// API doesn't really give us that option while also retaining
|
||
|
// the same <Button> instance. Instead, we set the max delay ><
|
||
|
showDelay={isValid && 2147483647}
|
||
|
>
|
||
|
<Button type="submit" variantColor="green" disabled={!isValid}>
|
||
|
Start
|
||
|
</Button>
|
||
|
</Tooltip>
|
||
|
</Flex>
|
||
|
</form>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
export default HomePage;
|