75 lines
1.8 KiB
TypeScript

import {
Box,
Button,
Card,
CardBody,
CardFooter,
CardHeader,
Heading,
Stack,
StackDivider,
Text,
} from "@chakra-ui/react";
import { useEffect, useState } from "react";
export default function (props: {
ban_reason: string;
createdAt: number;
discriminator: string;
id: string;
learned: string;
reason_for_unban: string;
username: string;
}) {
const [dateString, setDateString] = useState(
new Date(props.createdAt).toUTCString()
);
useEffect(() => {
setDateString(new Date(props.createdAt).toLocaleString());
}, [props.createdAt]);
return (
<>
<Card>
<CardHeader>
<Heading size="md">
Appeal for {props.username}#{props.discriminator}
</Heading>
</CardHeader>
<CardBody>
<Stack divider={<StackDivider />}>
<Box>
<Heading size="xs">Response: Why were you banned?</Heading>
<Text>{props.ban_reason}</Text>
</Box>
<Box>
<Heading size="xs">Response: Why should we unban you?</Heading>
<Text>{props.reason_for_unban}</Text>
</Box>
<Box>
<Heading size="xs">
Response: What have you learned from your mistake?
</Heading>
<Text>{props.learned}</Text>
</Box>
<Box>
<Button colorScheme="red">Deny</Button>
<Button colorScheme="blue" ml="8px">
Accept
</Button>
</Box>
</Stack>
</CardBody>
<CardFooter>
<Text fontSize="xs">
Submitted at: {dateString}
<br />
ID: {props.id}
</Text>
</CardFooter>
</Card>
</>
);
}