66 lines
1.7 KiB
TypeScript
66 lines
1.7 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: AppealCardProps) {
|
|
const [dateString, setDateString] = useState(
|
|
new Date(props.createdAt).toUTCString()
|
|
);
|
|
|
|
useEffect(() => {
|
|
setDateString(new Date(props.createdAt).toLocaleString());
|
|
}, [props.createdAt]);
|
|
|
|
return (
|
|
<>
|
|
<Card w="100%">
|
|
<CardHeader>
|
|
<Heading size="md">
|
|
Appeal for {props.username}#{props.discriminator}
|
|
</Heading>
|
|
<Text fontSize="xs">ID: {props.id}</Text>
|
|
</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>
|
|
</Stack>
|
|
</CardBody>
|
|
<CardFooter pb="4px">
|
|
<Box>
|
|
<Button colorScheme="red">Deny</Button>
|
|
<Button colorScheme="blue" ml="8px">
|
|
Accept
|
|
</Button>
|
|
</Box>
|
|
</CardFooter>
|
|
<CardFooter py="4px">
|
|
<Text fontSize="xs">Submitted at: {dateString}</Text>
|
|
</CardFooter>
|
|
</Card>
|
|
</>
|
|
);
|
|
}
|