54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { Avatar } from '@app/client/components/ui/avatar';
|
|
import { toFormattedDate } from '@app/client/helpers';
|
|
import { Box, Card, Stack, Text } from '@chakra-ui/react';
|
|
import { Link } from '@tanstack/react-router';
|
|
|
|
export function ReviewCard({
|
|
review
|
|
}: {
|
|
readonly review: {
|
|
readonly id: string;
|
|
readonly username: string;
|
|
readonly createdAt: string;
|
|
readonly text: string;
|
|
};
|
|
}) {
|
|
return (
|
|
<Stack direction="row" alignItems="start">
|
|
<Link to={`/profile/${review.username}`}>
|
|
<Avatar size="sm" fallback={review.username[0]} />
|
|
</Link>
|
|
<Card.Root variant="subtle" width="100%">
|
|
<Card.Body paddingX="3" paddingY="1">
|
|
<Stack direction="row" justifyContent="space-between" alignItems="center" gap={1}>
|
|
<Link to={`/profile/${review.username}`}>
|
|
<Text
|
|
color="colorPalette.400"
|
|
_hover={{
|
|
textDecoration: 'underline',
|
|
textDecorationColor: 'colorPalette.700'
|
|
}}
|
|
>
|
|
{review.username}
|
|
</Text>
|
|
</Link>
|
|
|
|
<Text color="fg.muted">{toFormattedDate({ value: review.createdAt })}</Text>
|
|
</Stack>
|
|
<Box width="100%" position="relative" padding={0}>
|
|
<Text>{review.text}</Text>
|
|
{/* <Button */}
|
|
{/* size="sm" */}
|
|
{/* position="absolute" */}
|
|
{/* right="2px" */}
|
|
{/* bottom="5px" */}
|
|
{/* padding={0} */}
|
|
{/* variant="ghost" */}
|
|
{/* // onClick={async () => onReviewSubmit(text)} */}
|
|
{/* ></Button> */}
|
|
</Box>
|
|
</Card.Body>
|
|
</Card.Root>
|
|
</Stack>
|
|
);
|
|
}
|