Create hammer page

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