AppealCard.tsx

import {
  Box,
  Button,
  Card,
  CardBody,
  CardFooter,
  CardHeader,
  Heading,
  Stack,
  StackDivider,
  Text,
} from "@chakra-ui/react";

export default function (props: {
  ban_reason: string;
  createdAt: number;
  discriminator: string;
  id: string;
  learned: string;
  reason_for_unban: string;
  username: string;
}) {
  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: {new Date(props.createdAt).toLocaleString()}
            <br />
            ID: {props.id}
          </Text>
        </CardFooter>
      </Card>
    </>
  );
}