Add Spotify Now Playing

src/components/Card.tsx

@@ -3,6 +3,9 @@ import { faEnvelope } from '@fortawesome/free-regular-svg-icons'
 import { faPhone } from '@fortawesome/free-solid-svg-icons'
 import { faXTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons'
 
+import NowPlaying from "./NowPlaying"
+import Logo from "./Logo"
+
 export default function Card() {
     return (
         <>
@@ -12,26 +15,32 @@ export default function Card() {
             </div>
             <div className="mx-2 text-left">
                 <p className="text-5xl text-white">
-                    yude
+                    <Logo />
                 </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} /> i@yude.jp
+                        <FontAwesomeIcon icon={faEnvelope} className="text-gray-300" />{" "}
+                        i@yude.jp
                     </p>
                     <p className="font-mono left-0.5 relative">
-                        <FontAwesomeIcon icon={faPhone} /> +81 70-8909-1949
+                        <FontAwesomeIcon icon={faPhone} className="text-gray-300" />{" "}
+                        +81 70-8909-1949
                     </p>
                     <p className="font-mono left-0.5 relative">
                         <a href="https://x.com/yude_jp">
-                            <FontAwesomeIcon icon={faXTwitter} /> @yude_jp
+                            <FontAwesomeIcon icon={faXTwitter} className="text-gray-300" />{" "}
+                            @yude_jp
                         </a>
                     </p>
                     <p className="font-mono left-0.5 relative">
-                        <FontAwesomeIcon icon={faDiscord} /> <span className="-ml-1">yude</span>
+                        <FontAwesomeIcon icon={faDiscord} className="text-gray-300" />{" "}
+                        <span className="-ml-1">yude</span>
                     </p>
                     <p className="font-mono left-0.5 relative">
                         <a href="https://github.com/yude">
-                            <FontAwesomeIcon icon={faGithub} /> yude
+                            <FontAwesomeIcon icon={faGithub} className="text-gray-300" />{" "}
+                            yude
                         </a>
                     </p>
                 </div>

src/components/NowPlaying.tsx

@@ -0,0 +1,47 @@
+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">
+                        <span className="text-gray-300">{np.artist}</span>
+                        <p className="text-lg">{np.title}</p>
+                    </div>
+                </div>
+            }
+        </>
+    )
+  }
+