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> ); }