"add PartyEvent frontend module with mock data, API actions, UI components and routing configuration"

03_source/frontend/src/sections/party-event/party-event-review-item.tsx

@@ -0,0 +1,124 @@
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import ButtonBase from '@mui/material/ButtonBase';
+import ListItemText from '@mui/material/ListItemText';
+import Rating from '@mui/material/Rating';
+import Typography from '@mui/material/Typography';
+import { Iconify } from 'src/components/iconify';
+import type { IProductReview } from 'src/types/party-event';
+import { fDate } from 'src/utils/format-time';
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  review: IProductReview;
+};
+
+export function ProductReviewItem({ review }: Props) {
+  const renderInfo = () => (
+    <Box
+      sx={{
+        gap: 2,
+        display: 'flex',
+        width: { md: 240 },
+        alignItems: 'center',
+        textAlign: { md: 'center' },
+        flexDirection: { xs: 'row', md: 'column' },
+      }}
+    >
+      <Avatar
+        src={review.avatarUrl}
+        sx={{ width: { xs: 48, md: 64 }, height: { xs: 48, md: 64 } }}
+      />
+
+      <ListItemText
+        primary={review.name}
+        secondary={fDate(review.postedAt)}
+        slotProps={{
+          primary: { noWrap: true },
+          secondary: {
+            noWrap: true,
+            sx: { mt: 0.5, typography: 'caption' },
+          },
+        }}
+      />
+    </Box>
+  );
+
+  const renderContent = () => (
+    <Box
+      sx={{
+        gap: 1,
+        display: 'flex',
+        flex: '1 1 auto',
+        flexDirection: 'column',
+      }}
+    >
+      <Rating size="small" value={review.rating} precision={0.1} readOnly />
+
+      {review.isPurchased && (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            color: 'success.main',
+            typography: 'caption',
+          }}
+        >
+          <Iconify icon="solar:verified-check-bold" width={16} sx={{ mr: 0.5 }} />
+          Verified purchase
+        </Box>
+      )}
+
+      <Typography variant="body2">{review.comment}</Typography>
+
+      {!!review.attachments?.length && (
+        <Box
+          sx={{
+            pt: 1,
+            gap: 1,
+            display: 'flex',
+            flexWrap: 'wrap',
+          }}
+        >
+          {review.attachments.map((attachment) => (
+            <Box
+              key={attachment}
+              component="img"
+              alt={attachment}
+              src={attachment}
+              sx={{ width: 64, height: 64, borderRadius: 1.5 }}
+            />
+          ))}
+        </Box>
+      )}
+
+      <Box sx={{ gap: 2, pt: 1.5, display: 'flex' }}>
+        <ButtonBase disableRipple sx={{ gap: 0.5, typography: 'caption' }}>
+          <Iconify icon="solar:like-outline" width={16} />
+          123
+        </ButtonBase>
+
+        <ButtonBase disableRipple sx={{ gap: 0.5, typography: 'caption' }}>
+          <Iconify icon="solar:dislike-outline" width={16} />
+          34
+        </ButtonBase>
+      </Box>
+    </Box>
+  );
+
+  return (
+    <Box
+      sx={{
+        mt: 5,
+        gap: 2,
+        display: 'flex',
+        px: { xs: 2.5, md: 0 },
+        flexDirection: { xs: 'column', md: 'row' },
+      }}
+    >
+      {renderInfo()}
+      {renderContent()}
+    </Box>
+  );
+}