fave cards

frontend/assets/styles/base/variables.scss

@@ -58,4 +58,11 @@ $card-even-bg: $lightOrange;
 $fave-id-color: $french;
 
 // Content
-$subtext-color: $french;
+$subtext-color: $french;
+
+// Schedule:
+$time-label-bg: $lightOrange-50;
+$time-label-color: $bittersweet;
+$conflict-btn-color: $raspberry;
+$detail-color: $french;
+$system-color: $outer;

frontend/assets/styles/components/schedule.scss

@@ -7,5 +7,45 @@
 }
 
 .schedule-list-time {
-  list-style-type: circle;
+  .time-title {
+    background-color: $time-label-bg;
+    color: $time-label-color;
+    font-weight: 700;
+    padding: 2px 5px;
+  }
+
+  .fave-list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .fave-list-item {
+    margin: 10px;
+  }
+}
+
+.conflicts-btn {
+  border-radius: 5px 5px !important;
+  color: $conflict-btn-color;
+  font-size: 16px;
+}
+
+.fave-title {
+  font-weight: 700;
+  font-size: 18px;
+}
+
+.fave-detail {
+  color: $detail-color;
+  font-size: 14px;
+}
+
+.fave-system {
+  color: $system-color;
+  font-size: 15px;
+}
+
+.fave-description {
+  font-size: 15px;
+  margin-top: 5px;
 }

frontend/components/FaveCard.tsx

@@ -0,0 +1,113 @@
+import { useState } from 'react';
+import { styled } from '@mui/material/styles';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import CardMedia from '@mui/material/CardMedia';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import Collapse from '@mui/material/Collapse';
+import Avatar from '@mui/material/Avatar';
+import IconButton, { IconButtonProps } from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import { red } from '@mui/material/colors';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import ShareIcon from '@mui/icons-material/Share';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+
+import { NewEvent } from '@/assets/interfaces';
+import findEvent from '@/helpers/findEvent';
+
+interface ExpandMoreProps extends IconButtonProps {
+  expand: boolean;
+}
+
+const ExpandMore = styled((props: ExpandMoreProps) => {
+  const { expand, ...other } = props;
+  return <IconButton {...other} />;
+})(({ theme, expand }) => ({
+  marginLeft: 'auto',
+  transition: theme.transitions.create('transform', {
+    duration: theme.transitions.duration.shortest,
+  }),
+}));
+
+export default function FaveCard ({ favoriteEvent }: { favoriteEvent: NewEvent }) {
+  const [expanded, setExpanded] = useState(false);
+  const { title,
+          descriptionShort,
+          startDate,
+          startTime,
+          endDate,
+          endTime,
+          conflicts,
+          location,
+          room,
+          tableNum,
+          gameSystem
+        } = favoriteEvent;
+
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+  };
+
+  const dateSubTitle = startDate === endDate ? `${startTime} - ${endTime}` : `${startDate} ${startTime} - ${endDate} ${endTime}`
+
+  return (
+    <Card
+      sx={{ maxWidth: 345 }}
+      variant='outlined'
+      className='fave-list-item'
+    >
+      <CardContent>
+        <Typography className='fave-title'>
+          {title}
+        </Typography>
+        <Typography className='faveStartAndEnd fave-detail'>
+          {dateSubTitle}
+        </Typography>
+        {location && (
+          <Typography className='fave-location fave-detail'>
+            {location} {room && ` : ${room}`} {tableNum && tableNum > 0 ? ` : ${tableNum}` : ''}
+          </Typography>
+        )}
+        {gameSystem && (
+          <Typography className='fave-system'>
+            <strong>System</strong>: {gameSystem}
+          </Typography>
+        )}
+        <Typography className='fave-description'>
+          {descriptionShort}
+        </Typography>
+      </CardContent>
+      {conflicts && conflicts.length > 0 && (
+        <>
+          <CardActions disableSpacing>
+            <ExpandMore
+              expand={expanded}
+              onClick={handleExpandClick}
+              aria-expanded={expanded}
+              aria-label="show more"
+              className='conflicts-btn'
+            >
+              Conflicts with {conflicts.length} Events {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon /> }
+            </ExpandMore>
+          </CardActions>
+          <Collapse in={expanded} timeout="auto" unmountOnExit>
+            <CardContent>
+              {conflicts.map((conflict, index) => {
+                var conflictEvent = findEvent(conflict)
+                return (
+                  <div key={index}>
+                    {conflictEvent.title}
+                  </div>
+                )
+              })}
+            </CardContent>
+          </Collapse>
+        </>
+      )}
+    </Card>
+  );
+}

frontend/pages/export/index.tsx

@@ -1,6 +1,13 @@
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
 import { filteredEvents } from "@/pages/_app";
 import findEvent from "@/helpers/findEvent";
 import { NewEvent } from "@/assets/interfaces";
+import FaveCard from '@/components/FaveCard';
 
 const eventsListByDay = filteredEvents.startDates;
 const eventsListByStartTime = filteredEvents.startTimes;
@@ -98,12 +105,16 @@ export default function ExportPage () {
 
           if (favesPerDay.length) {
             return (
-              <ul className='schedule-list-day' key={index}>
-                <li>
-                  <strong>
-                    {day}
-                  </strong>
-                  <div className='schedule-container'>
+              <Accordion defaultExpanded={true} key={index}>
+                <AccordionSummary
+                  expandIcon={<ExpandMoreIcon />}
+                  aria-controls="panel1a-content"
+                  id="panel1a-header"
+                >
+                  <Typography>{day} - {favesPerDay.length} Events</Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                  <Typography>
                     {timeLabels.map((time, index) => {
                       const favesPerTime = favesPerDay.filter(val => eventsListByStartTime[time].includes(val));
 
@@ -112,40 +123,23 @@ export default function ExportPage () {
                       if (favesPerTime.length) {
                         return (
                           <ul className='schedule-list-time' key={index}>
-                            <li>
+                            <li className='time-title'>
                               {time}
                             </li>
-                            <ul>
+                            <div className='fave-list'>
                               {faveEventsList.map((fave, index) => {
-                                return (
-                                  <li key={index}>
-                                    <strong>{fave.title}</strong>
-                                    <div>
-                                      <ul>
-                                        {fave.conflicts?.map((conflict, index) => {
-                                          var conflictName = findEvent(conflict);
-                                          return (
-                                            <li key={index}>
-                                              {conflict} - {conflictName.title}
-                                            </li>
-                                          )
-                                        })}
-                                      </ul>
-                                    </div>
-                                  </li>
-                                )
+                                return <FaveCard key={index} favoriteEvent={fave}  />
                               })}
-                            </ul>
+                            </div>
                           </ul>
                         )
                       }
                     })}
-                  </div>
-                </li>
-              </ul>
+                  </Typography>
+                </AccordionDetails>
+              </Accordion>
             )
           }
-
         })}
       </div>
     </>