87 lines
2.1 KiB
TypeScript
87 lines
2.1 KiB
TypeScript
import {
|
|
Box,
|
|
Button,
|
|
Card,
|
|
CardBody,
|
|
Container,
|
|
Heading,
|
|
HStack,
|
|
Image,
|
|
Input,
|
|
Stack,
|
|
StackDivider,
|
|
Text,
|
|
} from "@chakra-ui/react";
|
|
import { type FormEvent, useState } from "react";
|
|
|
|
export async function loader({ context }: { context: RequestContext }) {
|
|
const { current_user: currentUser } = context.data;
|
|
|
|
if (!currentUser)
|
|
throw new Response(null, {
|
|
status: 401,
|
|
});
|
|
|
|
if (!(currentUser.permissions & (1 << 5)))
|
|
throw new Response(null, {
|
|
status: 403,
|
|
});
|
|
|
|
return null;
|
|
}
|
|
|
|
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>
|
|
);
|
|
}
|