From 0736e98c75d62ee4ee89f0a405b65014f5b6304a Mon Sep 17 00:00:00 2001
From: KimiaMontazeri <kimia.montazerii@snapp.cab>
Date: Sat, 25 Nov 2023 14:50:15 +0330
Subject: [PATCH] refactor: enable customizing presenter card

---
 .../Components/presenters/PresenterCard.jsx   | 140 ++++++++++--------
 1 file changed, 76 insertions(+), 64 deletions(-)

diff --git a/frontend/src/Components/presenters/PresenterCard.jsx b/frontend/src/Components/presenters/PresenterCard.jsx
index de73f8f..d52ffdb 100644
--- a/frontend/src/Components/presenters/PresenterCard.jsx
+++ b/frontend/src/Components/presenters/PresenterCard.jsx
@@ -1,76 +1,88 @@
-import {Box, Button, Card, CardActions, CardContent, Stack, Typography} from '@mui/material';
+import React from 'react';
+import { Box, Button, Card, CardActions, CardContent, Chip, Stack, Typography } from '@mui/material';
 import PropTypes from 'prop-types';
 import '../../css/PresenterCard.css';
 import URL from '../../providers/APIProvider/URL.js';
 import Image from '../image/Image.jsx';
-import React from "react";
 
-const PresenterCard = ({name, photo, desc, logo, onClick}) => {
-    return (
-        <Box className="presenter-card">
-            <Card
-                sx={{
-                    height: 430,
-                    minWidth: 275,
-                    maxWidth: 300,
-                    bgcolor: 'var(--background-color-lighter-20)',
-                    borderRadius: '10px',
-                    cursor: 'pointer',
-                    display: 'flex',
-                    flexDirection: 'column',
-                }}
-                raised
-                onClick={onClick}
+const PresenterCard = ({ name, photo, desc, logo, onClick, showButton = true, showDivider = true, role }) => {
+  return (
+    <Box className="presenter-card">
+      <Card
+        sx={{
+          //   height: 430,
+          height: 'max-content',
+          minWidth: 275,
+          maxWidth: 300,
+          bgcolor: 'var(--background-color-lighter-20)',
+          borderRadius: '10px',
+          cursor: onClick && 'pointer',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+        raised
+        onClick={onClick}
+      >
+        <CardContent>
+          <Stack alignItems="center" justifyContent="center" gap={1}>
+            <Image
+              src={`${URL.baseURL}${photo}`}
+              style={{
+                width: '190px',
+                height: '190px',
+                borderRadius: '10px',
+                objectFit: 'cover',
+                objectPosition: 'center',
+              }}
+            />
+            <Typography
+              sx={{
+                textAlign: 'center',
+                borderBottom: showDivider && '1px solid var(--light-text-color-lighter)',
+                width: '100%',
+              }}
+              variant="h5"
             >
-                <CardContent>
-                    <Stack alignItems="center" justifyContent="center" gap={1}>
-                        <Image
-                            src={`${URL.baseURL}${photo}`}
-                            style={{
-                                width: '190px',
-                                height: '190px',
-                                borderRadius: '10px',
-                                objectFit: 'cover',
-                                objectPosition: 'center',
-                            }}
-                        />
-                        <Typography sx={{
-                            textAlign: 'center',
-                            borderBottom: '1px solid white',
-                            width: '100%'
-                        }} variant="h5">
-                            {name}
-                        </Typography>
-                        <Stack flexDirection="column" alignItems="center" gap={1}>
-                            <Image
-                                src={`${URL.baseURL}${logo}`}
-                                style={{
-                                    width: 'fit-content',
-                                    height: '40px',
-                                    borderRadius: '10px',
-                                    objectFit: 'fit',
-                                    objectPosition: 'center',
-                                }}
-                            />
-                            <Typography variant="string" fontSize="15px" style={{fontWeight: 'lighter'}}>
-                                {desc}
-                            </Typography>
-                        </Stack>
-                    </Stack>
-                </CardContent>
-                <CardActions sx={{marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
-                    <Button>View Details</Button>
-                </CardActions>
-            </Card>
-        </Box>
-    );
+              {name}
+            </Typography>
+            {role && <Chip label={role} />}
+            {logo && (
+              <Stack flexDirection="column" alignItems="center" gap={1}>
+                <Image
+                  src={`${URL.baseURL}${logo}`}
+                  style={{
+                    width: 'fit-content',
+                    height: '40px',
+                    borderRadius: '10px',
+                    objectFit: 'fit',
+                    objectPosition: 'center',
+                  }}
+                />
+                <Typography fontSize="15px" style={{ fontWeight: 'lighter' }}>
+                  {desc}
+                </Typography>
+              </Stack>
+            )}
+          </Stack>
+        </CardContent>
+        {showButton && (
+          <CardActions sx={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <Button>View Details</Button>
+          </CardActions>
+        )}
+      </Card>
+    </Box>
+  );
 };
 
 PresenterCard.propTypes = {
-    name: PropTypes.string,
-    photo: PropTypes.string,
-    desc: PropTypes.string,
-    onClick: PropTypes.func,
+  name: PropTypes.string,
+  photo: PropTypes.string,
+  desc: PropTypes.string,
+  onClick: PropTypes.func,
+  showButton: PropTypes.bool,
+  showDivider: PropTypes.bool,
+  role: PropTypes.string,
 };
 
 export default PresenterCard;