car-crushers-portal/components/InactivityNoticeCard.tsx

48 lines
1.2 KiB
TypeScript

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>
);
}