implemented ratings, fixes

app/client/components/ReviewCard.tsx

@@ -0,0 +1,54 @@
+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>
+  );
+}