Rebase (#22)

* Some clean up, added Spotify icon for offline/loading state

* Minor clean up in Mobile view

* Updating about text.

* Fixing max width for the Tab Panel

* P-18: fixed bug when type is not track

* P-20: Add real time spotify streaming progress bar. (#21)

package.json

@@ -19,7 +19,8 @@
     "buffer": "^6.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-intersection-observer": "^9.8.2"
+    "react-intersection-observer": "^9.8.2",
+    "react-query": "^3.39.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

src/App.tsx

@@ -29,7 +29,7 @@ export default function App() {
       textAlign="left"
       margin="0 auto"
       alignItems="center"
-      padding={["5rem 2rem", "9rem 2rem"]}
+      padding={["2rem", "5rem 2rem"]}
       spacing={2}
     >
       <Grid item>

src/components/Navigation.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Box, Tab, Tabs } from "@mui/material";
+import { Box, Tab, Tabs, Typography } from "@mui/material";
 import { styled } from "@mui/system";
 import { About } from "./";
 
@@ -78,36 +78,42 @@ function a11yProps(index: number) {
   };
 }
 
+type TabsContent = {
+  label: string;
+  component: React.ReactNode;
+};
+
 export default function Navigation() {
   const [value, setValue] = React.useState(0);
 
   const handleChange = (newValue: number) => {
     setValue(newValue);
   };
 
+  const tabContents: TabsContent[] = [
+    { label: "About", component: <About /> },
+    { label: "Projects", component: <Typography> Projects </Typography> },
+  ];
+
   return (
     <TabsWrapper>
       <StyledTabs
         orientation="vertical"
         variant="scrollable"
         value={value}
-        // (_) Param is intentionally unused.
+        // Param is intentionally unused `_`.
         onChange={(_, newValue) => handleChange(newValue)}
         aria-label="Vertical tabs example"
       >
-        <Tab label="About" {...a11yProps(0)} />
-        <Tab label="Projects" {...a11yProps(1)} />
-        <Tab label="Contact" {...a11yProps(2)} />
+        {tabContents.map((tab, index) => (
+          <Tab key={index} label={tab.label} {...a11yProps(index)} />
+        ))}
       </StyledTabs>
-      <TabPanel value={value} index={0}>
-        <About />
-      </TabPanel>
-      <TabPanel value={value} index={1}>
-        Projects
-      </TabPanel>
-      <TabPanel value={value} index={2}>
-        Contact
-      </TabPanel>
+      {tabContents.map((tab, index) => (
+        <TabPanel key={index} value={value} index={index}>
+          {tab.component}
+        </TabPanel>
+      ))}
     </TabsWrapper>
   );
 }