InactivityNoticeCard.tsx

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

export default function (props: InactivityNoticeProps) {
  return (
    <Card w="100%">
      <CardHeader>
        <Heading size="md">Inactivity Notice for {props.user.username}</Heading>
        <Text fontSize="xs">ID: {props.user.id}</Text>
      </CardHeader>
      <CardBody>
        <Stack divider={<StackDivider />}>
          <Box>
            <Heading size="xs">Reason for Inactivity</Heading>
            <Text>{props.reason}</Text>
          </Box>
          <Box>
            <Heading size="xs">Start Date</Heading>
            <Text>{new Date(props.start).toLocaleDateString()}</Text>
          </Box>
          <Box>
            <Heading size="xs">End Date</Heading>
            <Text>{new Date(props.end).toLocaleDateString()}</Text>
          </Box>
        </Stack>
      </CardBody>
      <CardFooter pb="4px">
        <Box>
          <Button colorScheme="red">Deny</Button>
          <Button colorScheme="blue" ml="8px">
            Accept
          </Button>
        </Box>
      </CardFooter>
    </Card>
  );
}