From 62de90b55de03b3d355526607037bdaed1886e9d Mon Sep 17 00:00:00 2001 From: regalijan <r@regalijan.com> Date: Thu, 19 Oct 2023 16:49:59 -0400 Subject: [PATCH] Create hammer page --- app/routes/hammer.tsx | 70 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 app/routes/hammer.tsx diff --git a/app/routes/hammer.tsx b/app/routes/hammer.tsx new file mode 100644 index 0000000..c3712cc --- /dev/null +++ b/app/routes/hammer.tsx @@ -0,0 +1,70 @@ +import { + Box, + Button, + Card, + CardBody, + Container, + Heading, + HStack, + Image, + Input, + Stack, + StackDivider, + Text, +} from "@chakra-ui/react"; +import { type FormEvent, useState } from "react"; + +export function meta() { + return [{ title: "Hammer - Car Crushers" }]; +} + +export default function () { + const [username, setUsername] = useState(""); + const [uid, setUid] = useState(""); + const [status, setStatus] = useState(""); + const [visible, setVisible] = useState(false); + const [avatarUrl, setAvatarUrl] = useState(""); + + return ( + <Container maxW="container.lg"> + <Heading>User Lookup</Heading> + <HStack> + <Input + id="username" + onBeforeInput={(e) => { + const { data }: { data?: string } & FormEvent<HTMLInputElement> = e; + + if (data?.match(/\W/)) e.preventDefault(); + }} + placeholder="Roblox username" + /> + <Button ml="8px">Search</Button> + </HStack> + <Card maxW="sm" visibility={ visible ? "visible" : "hidden" }> + <CardBody> + <Image mb="16" src={avatarUrl} /> + <Stack divider={<StackDivider />} spacing="6"> + <Box> + <Heading size="xs">USERNAME</Heading> + <Text pt="2" fontSize="sm"> + {username} + </Text> + </Box> + <Box> + <Heading size="xs">USER ID</Heading> + <Text pt="2" fontSize="sm"> + {uid} + </Text> + </Box> + <Box> + <Heading size="xs">MODERATION STATUS</Heading> + <Text pt="2" fontSize="sm"> + {status} + </Text> + </Box> + </Stack> + </CardBody> + </Card> + </Container> + ); +}