refactor: reorganize components and move files to appropriate directories

app/about/components/spotify/animation.jsx

@@ -0,0 +1,25 @@
+import { motion } from "framer-motion";
+
+const PlayingAnimation = () => {
+	return (
+		<div className="relative flex justify-between w-4 h-8 space-x-1">
+			<motion.span
+				className="w-1 h-full bg-gray-500 rounded-full"
+				animate={{ scaleY: [0.3, 1, 0.5, 0.75, 0.5] }}
+				transition={{ duration: 2.2, repeat: Infinity }}
+			/>
+			<motion.span
+				className="w-1 h-full bg-gray-500 rounded-full"
+				animate={{ scaleY: [0.3, 1, 0.5, 0.75, 0.5] }}
+				transition={{ duration: 2.2, repeat: Infinity, delay: -2 }}
+			/>
+			<motion.span
+				className="w-1 h-full bg-gray-500 rounded-full"
+				animate={{ scaleY: [0.3, 1, 0.5, 0.75, 0.5] }}
+				transition={{ duration: 2.2, repeat: Infinity, delay: -3.7 }}
+			/>
+		</div>
+	);
+};
+
+export default PlayingAnimation;

app/about/components/spotify/card.jsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from "react";
+import getNowPlayingItem from "./fetch";
+import PlayingAnimation from "./animation";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSpotify } from "@fortawesome/free-brands-svg-icons";
+import Image from "next/image";
+
+const Card = () => {
+	const [loading, setLoading] = useState(true);
+	const [result, setResult] = useState({});
+
+useEffect(() => {
+	const fetchData = async () => {
+		const results = await Promise.all([getNowPlayingItem()]);
+		console.log(results);
+		setResult(results[0]);
+		setLoading(false);
+	};
+	fetchData(); // Fetch data immediately on component mount
+
+	const intervalId = setInterval(fetchData, 60 * 1000); // ! Fetch data every minute: temporary 
+
+	return () => clearInterval(intervalId); 
+}, []);
+
+	return (
+		<div className="mt-3 flex justify-center w-full">
+			{loading ? (
+				<div className="flex justify-center mb-8">
+					{/* Replace this with your own loading spinner */}
+					<div className="loader ease-linear rounded-full border-4 border-t-4 border-black h-12 w-12 mb-4"></div>
+				</div>
+			) : (
+				<div className="relative w-full mb-8 grid grid-cols-2  gap-2 border-2 border-gray-500 p-4 rounded-lg backdrop-filter backdrop-blur-lg bg-white bg-opacity-30">
+					{result.isPlaying && (
+					<Image
+						src={result.albumImageUrl}
+						alt="backgroundImage"
+						layout="fill"
+						objectFit="cover"
+						className="z-0 opacity-20 absolute"
+					/>
+					)}
+					<div className="z-10  flex items-center">
+						<FontAwesomeIcon
+							icon={faSpotify}
+							className="text-black text-5xl me-5 md:me-1 xl:me-8"
+						/>
+						<p className="font-semibold me-5 md:me-1 xl:me-7">
+							{result.isPlaying
+								? "Now playing"
+								: "Currently offline"}
+						</p>
+						{result.isPlaying && <PlayingAnimation />}
+					</div>
+					{result.isPlaying && (
+						<div className="z-10 rounded-lg ms-5">
+							<div className="flex items-center space-x-4">
+								<div className="overflow-hidden">
+									<a
+										href={result.songUrl}
+										target="_blank"
+										className="block font-semibold w-full truncate text-blue-500">
+										{result.title}
+									</a>
+									<p className="truncate text-gray-500">
+										{result.artist}
+									</p>
+								</div>
+							</div>
+						</div>
+					)}
+				</div>
+			)}
+		</div>
+	);
+};
+
+export default Card;
+

app/about/components/spotify/fetch.js

@@ -0,0 +1,53 @@
+import querystring from "querystring";
+const TOKEN_ENDPOINT = `https://accounts.spotify.com/api/token`;
+const NOW_PLAYING_ENDPOINT = `https://api.spotify.com/v1/me/player/currently-playing`;
+const client_id = process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_ID;
+const client_secret = process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_SECRET;
+const refresh_token = process.env.NEXT_PUBLIC_SPOTIFY_REFRESH_TOKEN;
+
+const basic = Buffer.from(`${client_id}:${client_secret}`).toString("base64");
+const getAccessToken = async () => {
+	const response = await fetch(TOKEN_ENDPOINT, {
+		method: "POST",
+		headers: {
+			Authorization: `Basic ${basic}`,
+			"Content-Type": "application/x-www-form-urlencoded",
+		},
+		body: querystring.stringify({
+			grant_type: "refresh_token",
+			refresh_token,
+		}),
+	});
+
+	return response.json();
+};
+
+export const getNowPlaying = async () => {
+	const { access_token } = await getAccessToken();
+	return fetch(NOW_PLAYING_ENDPOINT, {
+		headers: {
+			Authorization: `Bearer ${access_token}`,
+		},
+	});
+};
+
+export default async function getNowPlayingItem() {
+	const response = await getNowPlaying();
+	if (response.status === 204 || response.status > 400) {
+		return false;
+	}
+	const song = await response.json();
+	const albumImageUrl = song.item.album.images[0].url;
+	const artist = song.item.artists.map((_artist) => _artist.name).join(", ");
+	const isPlaying = song.is_playing;
+	const songUrl = song.item.external_urls.spotify;
+	const title = song.item.name;
+
+	return {
+		albumImageUrl,
+		artist,
+		isPlaying,
+		songUrl,
+		title,
+	};
+}