diff --git a/public/vite.svg b/public/vite.svg
deleted file mode 100644
index e7b8dfb..0000000
--- a/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/assets/spotify.svg b/src/assets/spotify.svg
new file mode 100644
index 0000000..8f894a4
--- /dev/null
+++ b/src/assets/spotify.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/About.tsx b/src/components/About.tsx
new file mode 100644
index 0000000..d121aba
--- /dev/null
+++ b/src/components/About.tsx
@@ -0,0 +1,13 @@
+import { SpotifyNowPlaying } from "./";
+import { Typography, Stack } from "@mui/material";
+
+export default function About() {
+ return (
+
+
+ I'm a curious being, who loves challenges, people and music...
+
+
+
+ );
+}
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index a5b7d27..eb1e9a1 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -1,8 +1,7 @@
import * as React from "react";
-import { Box, Tab, Tabs, Typography, Stack } from "@mui/material";
+import { Box, Tab, Tabs } from "@mui/material";
import { styled } from "@mui/system";
-import SpotifyNowPlaying from "./SpotifyNowPlaying";
-import { CLIENT_ID, CLIENT_SECRET, REFRESH_TOKEN } from "../constants";
+import { About } from "./";
const TabsWrapper = styled(Box)(({ theme }) => ({
flexGrow: 1,
@@ -98,16 +97,7 @@ export default function Navigation() {
-
-
- I'm a curious being, who loves challenges, people and music...
-
-
-
+
Projects
diff --git a/src/components/SpotifyNowPlaying.tsx b/src/components/SpotifyNowPlaying.tsx
index 5212adb..fe84e18 100644
--- a/src/components/SpotifyNowPlaying.tsx
+++ b/src/components/SpotifyNowPlaying.tsx
@@ -1,21 +1,47 @@
import * as React from "react";
-import type { AuthProps } from "../types/spotify";
import type { GetNowPlayingResponse } from "../services/spotify";
import {
- Stack,
Box,
- Typography,
Card,
CardContent,
CardMedia,
+ Icon,
+ Stack,
+ Typography,
} from "@mui/material";
import { getNowPlaying } from "../services/spotify";
+import SpotifyIcon from "../assets/spotify.svg";
+import {
+ CLIENT_ID as clientId,
+ CLIENT_SECRET as clientSecret,
+ REFRESH_TOKEN as refreshToken,
+} from "../constants";
+import { styled } from "@mui/system";
+
+const StyledTypography = styled(Typography)(({ theme }) => ({
+ maxWidth: 190,
+ whiteSpace: "nowrap",
+ textOverflow: "ellipsis",
+ overflow: "hidden",
+ fontSize: 16,
+ [theme.breakpoints.down("md")]: {
+ fontSize: 12,
+ maxWidth: 120,
+ },
+}));
-export default function SpotifyNowPlaying({
- clientId,
- clientSecret,
- refreshToken,
-}: AuthProps) {
+function SpotifyMessage({ message }: { message: string }) {
+ return (
+
+
+ 
+
+ {message}
+
+ );
+}
+
+export default function SpotifyNowPlaying() {
const [loading, setLoading] = React.useState(true);
const [nowPlayingData, setNowPlayingData] =
React.useState(null);
@@ -29,50 +55,50 @@ export default function SpotifyNowPlaying({
.catch((error) => {
console.error("Error fetching now playing data:", error);
});
- }, [clientId, clientSecret, refreshToken]);
+ }, []);
return (
<>
{loading ? (
- Loading...
+
) : nowPlayingData && nowPlayingData?.is_playing ? (
-
-
-
- {nowPlayingData.item.name}
-
-
- {nowPlayingData.item?.artists
- .map((_artist) => _artist.name)
- .join(",")}
-
-
+
+ {nowPlayingData.item.name}
+
+ {nowPlayingData.item?.artists
+ .map((_artist) => _artist.name)
+ .join(",")}
+
+
+
+
+
+
+
+
+
+
+
-
-
-
) : (
- You're offline.
+
)}
);
diff --git a/src/components/index.ts b/src/components/index.ts
index e29525f..e39d041 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,2 +1,3 @@
+export { default as About } from "./About";
export { default as Navigation } from "./Navigation";
export { default as SpotifyNowPlaying } from "./SpotifyNowPlaying";
diff --git a/src/theme.ts b/src/theme.ts
index f2f7707..334417e 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -38,6 +38,16 @@ export const theme = createTheme({
width: "2rem",
},
},
+ ".MuiIcon-root": {
+ height: "2rem",
+ width: "1.5rem",
+ "@media (max-width:600px)": {
+ width: "1rem",
+ },
+ img: {
+ width: "100%",
+ },
+ },
},
},
},