feat: add podcast list and spotify embedded

client/src/assets/placeholder/podcast.js

@@ -2,35 +2,34 @@
 export const PODCAST = Object.freeze([
   {
     cover: 'cover.png',
-    title: 'Interview-02: John Doe',
-    tags: ['Technology', 'Academics'],
+    title: '#1-Prof. Saroj Kumar Patel',
     authors: ['Debabrata Malik', 'Rama Krushna Behera'],
     duration: '3:21',
     description:
       "Delve into Momo's vibrant world as he prepares for his Valentines Day. Delve into Momo's vibrant world as he prepares for his Valentines Day. Delve into Momo's vibrant world as he prepares for his Valentines Day.",
   },
   {
     cover: 'cover.png',
-    title: 'Interview-02: John Doe',
-    tags: ['Technology', 'Academics'],
+    title:
+      '#27-Sai Swarup Mohanty: Product Design Intern at Scaler,UX Design Intern at Upstox, Product Designer',
     authors: ['Debabrata Malik', 'Rama Krushna Behera'],
     duration: '3:20',
     description:
       "Delve into Momo's vibrant world as he prepares for his Valentines Day. Delve into Momo's vibrant world as he prepares for his Valentines Day. Delve into Momo's vibrant world as he prepares for his Valentines Day.",
   },
   {
     cover: 'cover.png',
-    title: 'Interview-02: John Doe',
-    tags: ['Technology', 'Academics'],
+    title:
+      '#26-Rupesh Mahore: Research intern at Harvard, Former ISRO intern, Innovator of Oxyserve, TEDxSpeake',
     authors: ['Debabrata Malik', 'Rama Krushna Behera'],
     duration: '3:19',
     description:
       "Delve into Momo's vibrant world as he prepares for his Valentines Day. Delve into Momo's vibrant world as he prepares for his Valentines Day. Delve into Momo's vibrant world as he prepares for his Valentines Day.",
   },
   {
     cover: 'cover.png',
-    title: 'Interview-02: John Doe',
-    tags: ['Technology', 'Academics'],
+    title:
+      '#25-Parul Rath: Former President of Clarion, Chief Coordinator of the Training Committee, Former intern at Citi Bank, Placed at ZS Associates, CH Class of 2022',
     authors: ['Debabrata Malik', 'Rama Krushna Behera'],
     duration: '3:18',
     description:

client/src/components/podcast/List.js

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import Image from 'next/image';
+import theme from '../../config/themes/light';
 
 // Libraries
-import { Container, Paper } from '@mui/material';
+import { Container, Paper, useMediaQuery } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import { Table, TableHead, TableBody } from '@mui/material';
 import { Heart, PlayCircle } from 'react-feather';
@@ -15,19 +16,20 @@ import podcastCover from '../../assets/images/podcast_cover.png';
 
 const PodcastList = ({ spotify }) => {
   const Podcast = PODCAST;
+  const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const mediumScreen = useMediaQuery(theme.breakpoints.down('md'));
   const classes = useStyles();
   return (
     <Container>
-      {/* <div className={classes.wrapper}>
+      <div className={classes.wrapper}>
         <Paper>
           <Table>
             <TableHead>
               <tr className={classes.headerRow}>
                 <th></th>
                 <th>Title</th>
-                <th>Tags</th>
                 <th>Time</th>
-                <th>Favorite</th>
+                <th>Fav</th>
               </tr>
             </TableHead>
             <TableBody>
@@ -37,15 +39,11 @@ const PodcastList = ({ spotify }) => {
                     <td>
                       <PlayCircle />
                     </td>
-                    <td>{podcast.title}</td>
                     <td>
-                      {podcast.tags.map((tag, key, podcast) => {
-                        if (key === podcast.length - 1) {
-                          return <span key={key}> {tag} </span>;
-                        } else {
-                          return <span key={key}> {tag}, </span>;
-                        }
-                      })}
+                      {podcast.title.substring(
+                        0,
+                        smallScreen ? 10 : mediumScreen ? 50 : 80,
+                      )}
                     </td>
                     <td>{podcast.duration}</td>
                     <td>
@@ -57,11 +55,11 @@ const PodcastList = ({ spotify }) => {
             </TableBody>
           </Table>
         </Paper>
-      </div> */}
+      </div>
 
       <div>
         <iframe
-          src={`https://open.spotify.com/embed/episode/${spotify[0].id}`}
+          // src={`https://open.spotify.com/embed/episode/${spotify[0].id}`}
           width='100%'
           height='152'
           frameBorder='0'
@@ -86,6 +84,9 @@ const useStyles = makeStyles((theme) => ({
       fontSize: '1.5rem',
       textAlign: 'center',
       padding: '0.75rem',
+      [theme.breakpoints.down('sm')]: {
+        fontSize: '16px',
+      },
     },
     '& th:nth-child(2)': {
       textAlign: 'start',
@@ -105,6 +106,7 @@ const useStyles = makeStyles((theme) => ({
     '& td:nth-child(1)': {
       position: 'absolute',
       botton: '0rem',
+      marginTop: '0.1rem',
     },
     '& td:nth-child(2)': {
       textAlign: 'start',

client/src/screens/Podcast.js

@@ -11,9 +11,9 @@ const Podcast = () => (
   <>
     <Container>
       <BackLink />
+      <LatestPodcast />
+      <PodcastList />
     </Container>
-    <LatestPodcast />
-    <PodcastList />
   </>
 );