Merge branch 'usereviews-card' into item-details-card

src/components/UserReviewsCard/Mockupdata.js

@@ -0,0 +1,24 @@
+export default [{
+    id: 0,
+    name: "Coca-Cola",
+    quote: "Odlična saradnja. Sve preporuke za kompaniju",
+    isGood: true,
+    isGoodCommunication: "DA",
+    isSuccessfulSwap: "DA"
+}
+,{
+    id: 1,
+    name: "Voda Vrnjci",
+    quote: "Sasvim korektna saradnja, rado bih ponovio poslovanje sa Vama.",
+    isGood: true,
+    isGoodCommunication: "DA",
+    isSuccessfulSwap: "DA"
+}
+,{
+    id: 2,
+    name: "Women's Beauty House",
+    quote: "Nismo se najbolje razumeli, ali generalno ok",
+    isGood: false,
+    isGoodCommunication: "NE",
+    isSuccessfulSwap: "NE"
+}];

src/components/UserReviewsCard/UserReviewsCard.js

@@ -0,0 +1,103 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { ReviewList, ReviewsBox } from "./UserReviewsCard.styled";
+
+import {
+  Avatar,
+  Grid,
+  ListItem,
+  ListItemAvatar,
+  Typography,
+  Divider,
+} from "@mui/material";
+
+import Mockupdata from "./Mockupdata";
+
+import ThumbUpIcon from "@mui/icons-material/ThumbUp";
+import ThumbDownIcon from "@mui/icons-material/ThumbDown";
+import StarBorderIcon from "@mui/icons-material/StarBorder";
+import { PRIMARY_PURPLE_COLOR } from "../../constants/stylesConstants";
+
+const UserReviewsCard = (props) => {
+  var dataMockupdata = JSON.parse(JSON.stringify(Mockupdata));
+
+  return (
+    <>
+      <ReviewsBox>
+        <Grid
+          container
+          direction="row"
+          justifyContent="start"
+          alignItems="center"
+          sx={{ mb: 1.4 }}
+        >
+          <StarBorderIcon color="action" sx={{ mr: 0.9 }} />
+          <Typography>{props.heading}</Typography>
+        </Grid>
+        <ReviewList>
+          {dataMockupdata.map((review) => (
+            <>
+              <ListItem
+                alignItems="flex-start"
+                sx={{ alignItems: "center", mt: 2 }}
+              >
+                <ListItemAvatar sx={{ mt: 0 }}>
+                  <Avatar alt={review.name} src="/static/images/avatar/1.jpg" />
+                </ListItemAvatar>
+                <Typography sx={{ color: PRIMARY_PURPLE_COLOR }}>
+                  <b>{review.name}</b>
+                </Typography>
+              </ListItem>
+              <Grid
+                container
+                direction="row"
+                justifyContent="start"
+                alignItems="center"
+                spacing={2}
+                sx={{ pl: 2, py: 2 }}
+              >
+                <Grid item xs={1}>
+                  {review.isGood ? (
+                    <ThumbUpIcon color="success" />
+                  ) : (
+                    <ThumbDownIcon color="error" />
+                  )}
+                </Grid>
+                <Grid item xs={11}>
+                  <Typography
+                    sx={{ display: "inline" }}
+                    component="span"
+                    variant="body2"
+                    color="text.primary"
+                  >
+                    &quot;{review.quote}&quot;
+                  </Typography>
+                </Grid>
+              </Grid>
+              <Grid sx={{ pl: 2, pb: 2 }}>
+                <Typography variant="body2" sx={{ display: "block" }}>
+                  Korektna komunikacija: <b>{review.isGoodCommunication}</b>
+                </Typography>
+                <Typography variant="body2" sx={{ display: "block" }}>
+                  Uspešna trampa: <b>{review.isSuccessfulSwap}</b>
+                </Typography>
+              </Grid>
+              {review.id < dataMockupdata.length - 1 ? (
+                <Divider variant="inset" component="li" sx={{ ml: 0 }} />
+              ) : (
+                <></>
+              )}
+            </>
+          ))}
+        </ReviewList>
+      </ReviewsBox>
+    </>
+  );
+};
+
+UserReviewsCard.propTypes = {
+  children: PropTypes.node,
+  heading: PropTypes.string,
+};
+
+export default UserReviewsCard;

src/components/UserReviewsCard/UserReviewsCard.styled.js

@@ -0,0 +1,31 @@
+import styledComponents from "styled-components";
+import { List, Box } from "@mui/material";
+//import { PRIMARY_PURPLE_COLOR, PRIMARY_YELLOW_COLOR } from '../../constants/stylesConstants';
+
+export const ReviewsBox = styledComponents(Box)`
+    width: 100%;
+    max-width: 360px;
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    height: calc(100% - 90px);
+`;
+
+export const ReviewList = styledComponents(List)`
+    background: white;
+    padding: 2rem;
+    border-radius: 4px 0 0 4px;
+    height: 100%;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+    &::-webkit-scrollbar-track {
+      background: #ddd;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: #777;
+    }
+    scrollbar-width: thin;
+    scrollbar-color: #ddd;
+`;