From 88149ed26af20850f56f8a95e49b518c4e75aac8 Mon Sep 17 00:00:00 2001
From: Aidan <aidan@p0ntus.com>
Date: Mon, 6 Jan 2025 01:12:21 -0500
Subject: [PATCH] fix structure, add music widget

---
 app/components/NowPlaying.tsx              | 61 ++++++++++++++++++++++
 app/components/{Bio.tsx => pages/Home.tsx} |  4 +-
 app/page.tsx                               | 14 ++---
 package.json                               |  2 +-
 4 files changed, 72 insertions(+), 9 deletions(-)
 create mode 100644 app/components/NowPlaying.tsx
 rename app/components/{Bio.tsx => pages/Home.tsx} (94%)

diff --git a/app/components/NowPlaying.tsx b/app/components/NowPlaying.tsx
new file mode 100644
index 0000000..3e42cfe
--- /dev/null
+++ b/app/components/NowPlaying.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import React, { useEffect, useState, JSX } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faLastfm } from '@fortawesome/free-brands-svg-icons'
+import { faCompactDisc, faUser } from '@fortawesome/free-solid-svg-icons'
+
+interface Track {
+  name: string;
+  artist: { '#text': string };
+  album: { '#text': string };
+  image: { '#text': string; size: string }[];
+  url: string;
+  '@attr'?: { nowplaying: string };
+}
+
+const NowPlaying: React.FC = () => {
+  const [track, setTrack] = useState<Track | null>(null);
+  const apiUrl = process.env.LASTFM_API_URL || 'https://lastfm-last-played.biancarosa.com.br/aidxn_/latest-song';
+
+  useEffect(() => {
+    fetch(apiUrl)
+      .then(response => response.json())
+      .then(data => setTrack(data.track))
+      .catch(error => console.error('Error fetching now playing:', error));
+  }, [apiUrl]);
+
+  if (!track) {
+    return (
+      <div className="max-w-2xl mx-auto">
+        <h2 className="text-2xl font-bold mb-4 pt-10 text-gray-200">Music</h2>
+        <div className="flex justify-center items-center border border-gray-300 rounded-lg p-4 max-w-md mt-8">
+          <span className="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full" role="status"></span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      <h2 className="text-2xl font-bold mb-4 pt-10 text-gray-200">Music</h2>
+      <div className="now-playing flex items-center border border-gray-300 rounded-lg p-4 max-w-md mt-8 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg">
+        <img 
+          src={track.image.find(img => img.size === 'large')?.['#text']} 
+          alt={track.name} 
+          className="w-24 h-24 rounded-lg mr-4"
+        />
+        <div>
+          <p className="font-bold">{track.name}</p>
+          <p><FontAwesomeIcon icon={faCompactDisc} className="mr-1" /> {track.album['#text']}</p>
+          <i><FontAwesomeIcon icon={faUser} className="mr-1" /> {track.artist['#text']}</i>
+          <a href={track.url} target="_blank" rel="noopener noreferrer" className="text-blue-500 flex items-center">
+            <FontAwesomeIcon icon={faLastfm} className="mr-2" /> View on Last.fm
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NowPlaying;
\ No newline at end of file
diff --git a/app/components/Bio.tsx b/app/components/pages/Home.tsx
similarity index 94%
rename from app/components/Bio.tsx
rename to app/components/pages/Home.tsx
index 072c4c7..2c4808b 100644
--- a/app/components/Bio.tsx
+++ b/app/components/pages/Home.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image'
 
-export default function Bio() {
+export default function Home() {
   return (
     <div className="max-w-2xl mx-auto">
       <div className="mb-12 text-center">
@@ -28,7 +28,7 @@ export default function Bio() {
         </p>
       </section>
       
-      <section id="contact" className="text-center">
+      <section id="contact">
         <h2 className="text-2xl font-semibold mb-4 text-gray-200">Send me a message</h2>
         <p className="text-gray-300 mb-6">Feel free to reach out for collaborations or just a hello :)</p>
         <a href="/contact" className="bg-gray-700 text-white px-8 py-3 rounded-full hover:bg-gray-600 transition-colors text-lg font-medium">
diff --git a/app/page.tsx b/app/page.tsx
index 33b71ae..b0b8c05 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,15 +1,17 @@
-import Header from './components/Header'
-import Bio from './components/Bio'
-import Footer from './components/Footer'
+import Header from './components/Header';
+import HomePg from './components/pages/Home';
+import Footer from './components/Footer';
+import NowPlaying from './components/NowPlaying';
 
 export default function Home() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
       <main className="flex-grow container mx-auto px-4 py-12">
-        <Bio />
+        <HomePg />
+        <NowPlaying />
       </main>
       <Footer />
     </div>
-  )
-}
+  );
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 9ef0e8f..556ee0f 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
   "devDependencies": {
     "typescript": "^5",
     "@types/node": "^20",
-    "@types/react": "^19",
+    "@types/react": "^19.0.2",
     "@types/react-dom": "^19",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",