Added Spotify now playing song in about section.

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.env

package.json

@@ -15,6 +15,8 @@
     "@fontsource/roboto": "^5.0.12",
     "@mui/icons-material": "^5.15.15",
     "@mui/lab": "^5.0.0-alpha.170",
+    "axios": "^1.6.8",
+    "buffer": "^6.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.8.2"

src/components/Navigation.tsx

@@ -1,9 +1,8 @@
 import * as React from "react";
-import Tabs from "@mui/material/Tabs";
-import Tab from "@mui/material/Tab";
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
+import { Box, Tab, Tabs, Typography, Stack } from "@mui/material";
 import { styled } from "@mui/system";
+import SpotifyNowPlaying from "./SpotifyNowPlaying";
+import { CLIENT_ID, CLIENT_SECRET, REFRESH_TOKEN } from "../constants";
 
 const TabsWrapper = styled(Box)(({ theme }) => ({
   flexGrow: 1,
@@ -62,8 +61,8 @@ function TabPanel({ children, value, index, ...other }: TabPanelProps) {
       {...other}
     >
       {value === index && (
-        <Box sx={{ p: 3 }}>
-          <Typography>{children}</Typography>
+        <Box maxWidth={[250, "100%"]} sx={{ paddingX: [1, 4] }}>
+          {children}
         </Box>
       )}
     </div>
@@ -90,6 +89,7 @@ export default function Navigation() {
         orientation="vertical"
         variant="scrollable"
         value={value}
+        // (_) Param is intentionally unused.
         onChange={(_, newValue) => handleChange(newValue)}
         aria-label="Vertical tabs example"
       >
@@ -98,7 +98,16 @@ export default function Navigation() {
         <Tab label="Contact" {...a11yProps(2)} />
       </StyledTabs>
       <TabPanel value={value} index={0}>
-        About me
+        <Stack spacing={1}>
+          <Typography fontSize={[16, 18]}>
+            I'm a curious being, who loves challenges, people and music...
+          </Typography>
+          <SpotifyNowPlaying
+            clientId={CLIENT_ID}
+            clientSecret={CLIENT_SECRET}
+            refreshToken={REFRESH_TOKEN}
+          />
+        </Stack>
       </TabPanel>
       <TabPanel value={value} index={1}>
         Projects

src/components/SpotifyNowPlaying.tsx

@@ -0,0 +1,79 @@
+import * as React from "react";
+import type { AuthProps } from "../types/spotify";
+import type { GetNowPlayingResponse } from "../services/spotify";
+import {
+  Stack,
+  Box,
+  Typography,
+  Card,
+  CardContent,
+  CardMedia,
+} from "@mui/material";
+import { getNowPlaying } from "../services/spotify";
+
+export default function SpotifyNowPlaying({
+  clientId,
+  clientSecret,
+  refreshToken,
+}: AuthProps) {
+  const [loading, setLoading] = React.useState(true);
+  const [nowPlayingData, setNowPlayingData] =
+    React.useState<GetNowPlayingResponse | null>(null);
+
+  React.useEffect(() => {
+    getNowPlaying({ clientId, clientSecret, refreshToken })
+      .then((response) => {
+        setNowPlayingData(response);
+        setLoading(false);
+      })
+      .catch((error) => {
+        console.error("Error fetching now playing data:", error);
+      });
+  }, [clientId, clientSecret, refreshToken]);
+
+  return (
+    <>
+      {loading ? (
+        <Typography>Loading...</Typography>
+      ) : nowPlayingData && nowPlayingData?.is_playing ? (
+        <Card
+          sx={{
+            display: "flex",
+            maxHeight: 70,
+            justifyContent: "space-between",
+            maxWidth: ["fit-content", 300],
+            backgroundColor: "black",
+            color: "white",
+          }}
+        >
+          <Stack flexDirection="column" alignItems="baseline">
+            <CardContent sx={{ padding: 1.5 }}>
+              <Typography fontSize={["0.7rem", "1rem"]}>
+                {nowPlayingData.item.name}
+              </Typography>
+              <Typography
+                variant="subtitle1"
+                component="div"
+                fontSize={["0.7rem", "1rem"]}
+              >
+                {nowPlayingData.item?.artists
+                  .map((_artist) => _artist.name)
+                  .join(",")}
+              </Typography>
+            </CardContent>
+          </Stack>
+          <Box maxWidth={70}>
+            <CardMedia
+              component="img"
+              sx={{ width: "100%" }}
+              image={nowPlayingData.item?.album.images[0].url}
+              alt={nowPlayingData.item.name}
+            />
+          </Box>
+        </Card>
+      ) : (
+        <Typography>You're offline.</Typography>
+      )}
+    </>
+  );
+}

src/components/index.ts

@@ -1 +1,2 @@
 export { default as Navigation } from "./Navigation";
+export { default as SpotifyNowPlaying } from "./SpotifyNowPlaying";

src/constants.ts

@@ -0,0 +1,7 @@
+export const TOKEN_ENDPOINT = "https://accounts.spotify.com/api/token";
+export const NOW_PLAYING_ENDPOINT =
+  "https://api.spotify.com/v1/me/player/currently-playing";
+
+export const CLIENT_ID = import.meta.env.VITE_APP_SPOTIFY_CLIENT_ID;
+export const CLIENT_SECRET = import.meta.env.VITE_APP_SPOTIFY_CLIENT_SECRET;
+export const REFRESH_TOKEN = import.meta.env.VITE_APP_SPOTIFY_REFRESH_TOKEN;