add listen stuff, fix header responsiveness

src/components/Footer.tsx

@@ -11,7 +11,7 @@ export default function Footer() {
     }, [mailState])
 
     return (
-        <div className="lg:w-1/2 md:w-full mx-auto rounded-lg text-center text-white bottom-0 left-0 right-0 p-4 select-none">
+        <div className="lg:w-1/2 bg-gray-500 md:w-full mx-auto rounded-lg text-center text-white bottom-0 left-0 right-0 p-4 select-none">
             <h1 className="font-bold">&copy; {new Date().getFullYear()}, Alex Frantz. All Rights Reserved</h1>
             <p>All logos & images on this page belong to their respective owners.</p>
 

src/components/Header.tsx

@@ -1,7 +1,8 @@
 export default function Header() {
     return (
-        <div className="text-white pt-4 mx-auto lg:w-1/2 sm:w-full">
+
-            <h1 className="font-bold text-2xl">Alex Frantz</h1>
+        <div className="text-white pt-4 mx-auto w-full sm:w-1/2 text-center sm:text-left">
+            <h1 className="text-2xl font-bold">Alex Frantz</h1>
             <p>Professional button clicker & word typer</p>
 
             <hr className="my-4" />

src/components/ProjectComponents/RecentListens.tsx

@@ -0,0 +1,90 @@
+import { useState, useEffect } from 'react';
+
+type MusicAPIResponse = {
+    data: {
+        tracks: MusicData[]
+    }
+}
+
+type MusicData = {
+    artist: {
+        mbid: string,
+        "#text": string
+    },
+    mbid: string,
+    album: {
+        mbid: string,
+        "#text": string,
+    },
+    name: string,
+    url: string,
+    image: MusicImage[]
+}
+
+type MusicImage = {
+    size: string,
+    "#text": string
+}
+
+export default function RecentListens() {
+    const [ data, setData ] = useState<MusicData[]>();
+    const [ errorState, setErrorState ] = useState<string>("");
+    const [ loading, setLoading ] = useState<boolean>(true);
+
+    useEffect(() => {
+        fetch("https://api.alexav.gg/v4/social/music", {
+            method: "get"
+        })
+        .then(async (res) => {
+            if (res.ok) {
+                const data = await res.json() as MusicAPIResponse
+                setData(data.data.tracks);
+            } else {
+                setErrorState("Failed to load! :(")
+            }
+        })
+        .catch((e: Error) => {
+            setErrorState(e.message)
+        })
+
+        setLoading(false);
+    }, []);
+
+    if (data) {
+        return (
+            <a href={data[0].url} target="_blank">
+                <div className="bg-white text-black p-4">
+                    {
+                        (loading) ? (
+                            <h1>Loading..</h1>
+                        ) : (!errorState && data) ? (
+                            <div className="flex items-center">
+                                <img 
+                                    src={data[0].image.filter((v) => v.size === "large")[0]['#text']}
+                                    width="100"
+                                />
+                                <div className="flex flex-wrap mx-2">
+                                    <h1 className="w-full font-bold">{data[0].name}</h1>
+    
+                                    <h1>{data[0].artist['#text']}</h1>
+                                </div>
+                            </div>
+                        ) : (
+                            <>
+                                <h1 className="font-bold text-2xl">Failed to fetch :(</h1>
+                                <p>Check out <a className="underline" href="https://last.fm/user/lulawex" target="_blank">last.fm/lulawex</a> if this isn't working.</p>
+                                <p className="text-sm italic">{errorState}</p>
+                            </>
+                        )
+                    }
+                </div>
+            </a>
+        )
+    } else {
+       <>
+        <h1 className="font-bold text-2xl">No data :(</h1>
+        <p>Check out <a className="underline" href="https://last.fm/user/lulawex" target="_blank">last.fm/lulawex</a> if this isn't working.</p>
+        <p className="text-sm italic">{errorState}</p>
+       </> 
+    }
+}

src/components/ProjectComponents/RecentPhoto.tsx

@@ -19,10 +19,6 @@ export default function RecentPhoto() {
     const [ loading, setLoading ] = useState<boolean>(true);
     const [ errorState, setErrorState ] = useState<string | null>(null);
 
-    useEffect(() => {
-        console.log(data)
-    }, [data])
-
     useEffect(() => {
         fetch("https://photos-cors.alexav.gg", {
             method: 'get',
@@ -33,7 +29,6 @@ export default function RecentPhoto() {
         .then(async (res) => {    
             if (res.ok) {
                 console.log("ok!")
-                console.log(errorState)
                 const json = await res.json() as PhotoDataResponse[];
                 setData(json[0].result.data.json);
                 setLoading(false)

src/index.tsx

@@ -3,8 +3,11 @@ import Header from "./components/Header";
 import ListBox from "./components/ListBox";
 import Project from "./components/Project";
 import ContactForm from "./components/ContactForm";
-import RecentWatch from "./components/RecentWatch";
+
-import RecentPhoto from "./components/RecentPhoto";
+// project components
+import RecentWatch from "./components/ProjectComponents/RecentWatch";
+import RecentPhoto from "./components/ProjectComponents/RecentPhoto";
+import RecentListens from "./components/ProjectComponents/RecentListens";
 
 export default function Home() {
     return (
@@ -12,7 +15,7 @@ export default function Home() {
             <Header />
             <div className="mx-auto lg:w-1/2">
                 <section id="projects">
-                    <div className="mb-4">
+                    <div className="mb-4 text-center md:text-left">
                         <h1 className="text-3xl font-bold">
                             Projects
                         </h1>
@@ -65,7 +68,20 @@ export default function Home() {
                         </div>
                     </div>
                 </section>
-                <section id="about" className="my-5 bg-gray-500 p-4">
+                <section id="listens" className="my-5 py-10 px-4 bg-gray-500">
+                    <div className="grid lg:grid-cols-2 md:grid-cols-1 gap-4">
+                        <div className="flex justify-center items-center">
+                            <div>
+                                <h1 className="text-4xl font-bold">What am I listening to?</h1>
+                                <p>I listen to some good stuff I swear</p>
+                            </div>
+                        </div>
+                        <div>
+                            <RecentListens />
+                        </div>
+                    </div>
+                </section>
+                <section id="about" className="my-5 p-4">
                     <div className="container max-w-5xl mx-auto">
                         <div className="grid lg:grid-cols-2 md:grid-cols-1 gap-8">
                             <div>