add recent photos

src/components/Footer.tsx

@@ -11,7 +11,7 @@ export default function Footer() {
     }, [mailState])
 
     return (
-        <div className="bg-gray-500 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 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/RecentPhoto.tsx

@@ -0,0 +1,87 @@
+import { useState, useEffect } from 'react';
+
+type PhotoDataResponse = {
+    result: {
+        data: {
+            json: PhotoData[]
+        }
+    }
+};
+type PhotoData = {
+    id: number,
+    name: string,
+    imageUrl: string,
+    dateTaken: Date
+}
+
+export default function RecentPhoto() {
+    const [ data, setData ] = useState<PhotoData[] | null>(null);
+    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',
+            headers: {
+                'content-type': 'application/json'
+            }
+        })
+        .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)
+            } else {
+                console.log("not ok :(")
+                setErrorState("Failed to fetch data!");
+                setLoading(false);
+            }
+        })
+        .catch((e) => {
+            setLoading(false);
+            setErrorState(e.message)
+        })
+    }, []);
+
+    const parseDate = (date: Date) => {
+        const jsDate = new Date(date);
+        return `${jsDate.getFullYear()}/${jsDate.getMonth() + 1}/${jsDate.getDate()}`;
+    }
+
+    return (
+        <a href={"https://photos.alexav.gg/"} 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].imageUrl}
+                                width="200"
+                            />
+                            <div className="flex flex-wrap mx-2">
+                                <h1 className="w-full font-bold">{data[0].name}</h1>
+
+                                <h1>{parseDate(data[0].dateTaken as Date)}</h1>
+                            </div>
+                        </div>
+                    ) : (
+                        <>
+                            <h1 className="font-bold text-2xl">Failed to fetch :(</h1>
+                            <p>Check out <a className="underline" href="https://photos.alexav.gg" target="_blank">photos.alexav.gg</a> if this isn't working.</p>
+                            <p className="text-sm italic">{errorState}</p>
+                        </>
+                    )
+                }
+            </div>
+        </a>
+    )
+
+}

src/components/RecentWatch.tsx

@@ -53,7 +53,7 @@ export default function RecentWatch() {
 
     return (
         <a href={data?.id ? "https://watch.alexav.gg/?id=" + data?.id : "#"} target="_blank">
-            <div className="bg-white text-black p-4 max-w-fit">
+            <div className="bg-white text-black p-4">
                 {
                     loading ? (
                         <h1>Loading..</h1>
@@ -81,6 +81,7 @@ export default function RecentWatch() {
                         <>
                             <h1 className="font-bold text-2xl">Failed to fetch :(</h1>
                             <p>Check out <a className="underline" href="https://watch.alexav.gg" target="_blank">watch.alexav.gg</a> if this isn't working.</p>
+                            <p className="text-sm italic">{errorState}</p>
                         </>
                     )
                 }

src/index.tsx

@@ -4,6 +4,7 @@ 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";
 
 export default function Home() {
     return (
@@ -41,14 +42,30 @@ export default function Home() {
                 <section id="watching" className="my-5 py-10 px-4 bg-gray-500">
                     <div className="grid grid-cols-2 gap-4">
                         <div className="flex justify-center items-center">
-                            <h1 className="text-4xl font-bold">What am I watching?</h1>
+                            <div>
+                                <h1 className="text-4xl font-bold">What am I watching?</h1>
+                                <p>Cool shows and movies I'm watching</p>
+                            </div>
                         </div>
                         <div>
                             <RecentWatch />
                         </div>
                     </div>
                 </section>
-                <section id="about" className="my-5 px-4">
+                <section id="photos" className="my-5 py-10 px-4">
+                    <div className="grid grid-cols-2 gap-4">
+                        <div className="flex justify-center items-center">
+                            <div>
+                                <h1 className="text-4xl font-bold">What am I picturing?</h1>
+                                <p>Cool game photos I've taken recently</p>
+                            </div>
+                        </div>
+                        <div>
+                            <RecentPhoto />
+                        </div>
+                    </div>
+                </section>
+                <section id="about" className="my-5 bg-gray-500 p-4">
                     <div className="container max-w-5xl mx-auto">
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                             <div>