Showing Spotify album art on card

src/components/Card.tsx

@@ -1,23 +1,68 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faEnvelope } from '@fortawesome/free-regular-svg-icons'
-import { faPhone } from '@fortawesome/free-solid-svg-icons'
+import { faPhone, faMusic } from '@fortawesome/free-solid-svg-icons'
 import { faXTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons'
 
-import NowPlaying from "./NowPlaying"
+import { useState, useEffect } from 'react';
+
 import Logo from "./Logo"
 
+interface NowPlaying {
+    album?: string
+    artist?: string
+    isPlaying: boolean
+    title?: string
+    link?: string
+    album_art?: string
+}
+
 export default function Card() {
+    const [np, setNp] = useState<NowPlaying>();
+
+    useEffect(() => {
+        fetch(
+            "https://vercel-spotify-api.vercel.app/api/Spotify"
+        )
+        .then(res => res.json())
+        .then(data => {
+            if (data) {
+                setNp(data)
+            }
+        })
+    })
+
     return (
-        <>
+        <div>
+            <div
+                className="absolute opacity-20 -z-10 blur-sm"
+                style={np && np.isPlaying ? {
+                    height: `89%`,
+                    width: `170%`,
+                    left: `-30%`,
+                    backgroundImage: `url(${np.album_art})`,
+                    backgroundColor: `rgba(255, 255, 255, 0.2)`,
+                    backgroundBlendMode: `lighten`
+                } : {}}
+            ></div>
         <div className="flex justify-center items-center">
             <div className="mx-2">
                 <img className="rounded-full" width={100} height={100} src="./avatar.webp" />
             </div>
-            <div className="mx-2 text-left">
+            <div className="mx-2 text-left h-full">
-                <p className="text-5xl text-white">
+                <Logo />
-                    <Logo />
+                <p className="text-white mt-2 -mb-1">
+                    {np && np.isPlaying && 
+                        <div className="flex flex-row">
+                            <div className="w-5 text-gray-300">
+                                <FontAwesomeIcon icon={faMusic} />
+                            </div>
+                            <div className="text-left max-w-xs">
+                                <span className="text-gray-300">{np.artist}</span>
+                                <p className="text-lg">{np.title}</p>
+                            </div>
+                        </div>
+                    }
                 </p>
-                <p className="text-white mt-2 -mb-1"><NowPlaying /></p>
                 <div className="text-white mt-2">
                     <p className="font-mono left-0.5 relative">
                         <FontAwesomeIcon icon={faEnvelope} className="text-gray-300" />{" "}
@@ -46,7 +91,7 @@ export default function Card() {
                 </div>
             </div>
         </div>
-        </>
+        </div>
     )
   }
   

src/components/Logo.tsx

@@ -5,7 +5,7 @@ export default function Logo() {
         id="Layer_1"
         xmlns="http://www.w3.org/2000/svg"
         xmlnsXlink="http://www.w3.org/1999/xlink"
-        width="100px"
+        width="140px"
         viewBox="0 0 188 127"
         enableBackground="new 0 0 188 127"
         xmlSpace="preserve"

src/components/NowPlaying.tsx

@@ -1,47 +0,0 @@
-import { useState, useEffect } from 'react';
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faMusic } from '@fortawesome/free-solid-svg-icons'
-
-export interface NowPlaying {
-    album?: string
-    artist?: string
-    isPlaying: boolean
-    title?: string
-    link?: string
-    album_art?: string
-  }
-  
-
-export default function NowPlaying() {
-    const [np, setNp] = useState<NowPlaying>();
-
-    useEffect(() => {
-        fetch(
-            "https://vercel-spotify-api.vercel.app/api/Spotify"
-        )
-        .then(res => res.json())
-        .then(data => {
-            if (data) {
-                setNp(data)
-            }
-        })
-    })
-    
-    return (
-        <>
-            {np && np.isPlaying && 
-                <div className="flex flex-row">
-                    <div className="w-5 text-gray-300">
-                        <FontAwesomeIcon icon={faMusic} />
-                    </div>
-                    <div className="text-left max-w-xs">
-                        <span className="text-gray-300">{np.artist}</span>
-                        <p className="text-lg">{np.title}</p>
-                    </div>
-                </div>
-            }
-        </>
-    )
-  }
-