redesign list, add a few more cards

src/components/ProjectComponents/RecentClip.tsx

@@ -0,0 +1,70 @@
+import { useState, useEffect } from 'react';
+import ProjectComponent from '../ProjectComponent';
+
+type MedalAPIResponse = {
+    data: MedalClip[]
+}
+type MedalClip = {
+    contentId: string,
+    contentTitle: string,
+    contentViews: number,
+    contentLikes: number,
+    contentThumbnail: string,
+    directClipUrl: string
+}
+
+export default function RecentClip() {
+    const [ data, setData ] = useState<MedalClip[]>();
+    const [ errorState, setErrorState ] = useState<string>("");
+    const [ loading, setLoading ] = useState<boolean>(true);
+
+    const translateToWebsiteUrl = (url: string) => {
+        return url.replace('/clip/', "/clips/")
+    }
+
+    // i'm a neat man what can i say
+    const likeOrLikes = (likes: number) => {
+        return (likes > 1 && likes !== 0) ? "likes" : "like" 
+    }
+    const viewOrViews = (views: number) => {
+        return (views > 1 && views !== 0) ? "views" : "view" 
+    }
+
+    useEffect(() => {
+        fetch("https://api.alexav.gg/v4/social/medal", {
+            method: "get"
+        })
+        .then(async (res) => {
+            if (res.ok) {
+                const data = await res.json() as MedalAPIResponse
+                setData(data.data);
+            } else {
+                setErrorState("Failed to load! :(")
+            }
+        })
+        .catch((e: Error) => {
+            setErrorState(e.message)
+        })
+
+        setLoading(false);
+    }, []);
+
+    if (!loading && data) {
+        return (
+            <ProjectComponent 
+                url={translateToWebsiteUrl(data[0].directClipUrl)}
+                header={"Clips I've taken"}
+                projectHeader={data[0].contentTitle}
+                projectSubheader={`${data[0].contentLikes} ${likeOrLikes(data[0].contentLikes)} | ${data[0].contentViews} ${viewOrViews(data[0].contentViews)}`}
+                projectImage={data[0].contentThumbnail}
+                projectImageSize={"80"}
+            />
+        )
+    } else {
+       <>
+        <h1 className="font-bold text-2xl">No data :(</h1>
+        <p>Check out <a className="underline" href="https://medal.tv/u/alexav" target="_blank">medal.tv/u/alexav</a> if this isn't working.</p>
+        <p className="text-sm italic">{errorState}</p>
+       </> 
+    }
+}

src/components/ProjectComponents/RecentGame.tsx

@@ -0,0 +1,63 @@
+import { useState, useEffect } from 'react';
+import ProjectComponent from '../ProjectComponent';
+
+type SteamAPIResponse = {
+    data: GameItem[]
+}
+type GameItem = {
+    appid: number,
+    name: string,
+    playtime_forever: number,
+    img_icon_url: string,
+}
+
+export default function RecentGame() {
+    const [ data, setData ] = useState<GameItem[]>();
+    const [ errorState, setErrorState ] = useState<string>("");
+    const [ loading, setLoading ] = useState<boolean>(true);
+
+    const translateToAppStorePage = (appId: number) => {
+        return "https://store.steampowered.com/app/" + appId
+    }
+    const buildMediaUrl = (appId: number, hash: string) => {
+        return "https://media.steampowered.com/steamcommunity/public/images/apps/" + appId + "/" + hash + ".jpg"
+    }
+
+    useEffect(() => {
+        fetch("https://api.alexav.gg/v4/social/steam", {
+            method: "get"
+        })
+        .then(async (res) => {
+            if (res.ok) {
+                const data = await res.json() as SteamAPIResponse
+                setData(data.data);
+            } else {
+                setErrorState("Failed to load! :(")
+            }
+        })
+        .catch((e: Error) => {
+            setErrorState(e.message)
+        })
+
+        setLoading(false);
+    }, []);
+
+    if (!loading && data) {
+        return (
+            <ProjectComponent 
+                url={translateToAppStorePage(data[0].appid)}
+                header={"Games I'm playing"}
+                projectHeader={data[0].name}
+                projectSubheader={`${data[0].playtime_forever / 60}h played`}
+                projectImage={buildMediaUrl(data[0].appid, data[0].img_icon_url)}
+                projectImageSize={"40"}
+            />
+        )
+    } else {
+       <>
+        <h1 className="font-bold text-2xl">No data :(</h1>
+        <p>Check out <a className="underline" href="https://steamcommunity.com/id/luvxavierr" target="_blank">steamcommunity.com/id/luvxavierr</a> if this isn't working.</p>
+        <p className="text-sm italic">{errorState}</p>
+       </> 
+    }
+}

src/components/ProjectComponents/RecentListens.tsx

@@ -55,9 +55,11 @@ export default function RecentListens() {
         return (
             <ProjectComponent 
                 url={"https://last.fm/user/lulawex"}
-                header={data[0].name}
-                subheader={data[0].artist["#text"]}
-                image={data[0].image.filter((v) => v.size === "large")[0]["#text"]}
+                header={"Music I'm listening to"}
+                projectHeader={data[0].name}
+                projectSubheader={data[0].artist["#text"]}
+                projectImage={data[0].image.filter((v) => v.size === "medium")[0]["#text"]}
+                projectImageSize={"50"}
             />
         )
     } else {

src/components/ProjectComponents/RecentPhoto.tsx

@@ -49,11 +49,12 @@ export default function RecentPhoto() {
     if (data && !loading) {
         return (
             <ProjectComponent 
-                url={"photos.alexav.gg"}
-                header={data.name}
-                subheader={parseDate(data.dateTaken as Date)}
-                image={data.imageUrl}
-                imageSize={"150"}
+                url={"https://photos.alexav.gg?id=" + data.id}
+                header={"Photos I've captured"}
+                projectHeader={data.name}
+                projectSubheader={parseDate(data.dateTaken as Date)}
+                projectImage={data.imageUrl}
+                projectImageSize={"85"}
             />
         )
     } else {

src/components/ProjectComponents/RecentWatch.tsx

@@ -52,11 +52,12 @@ export default function RecentWatch() {
     if (data && !loading) {
         return (
             <ProjectComponent 
-                header={data.title}
-                subheader={ data.finished ? "Finished!" : "Started on " + parseDate(data.startedOn) }
+                header={"What I'm watching"}
+                projectHeader={data.title}
+                projectSubheader={ data.finished ? "Finished!" : "Started on " + parseDate(data.startedOn) }
                 url={"https://watch.alexav.gg/?id=" + data.id}
-                image={data.imageKey}
-                imageSize={"50"}
+                projectImage={data.imageKey}
+                projectImageSize={"30"}
             />
         )
     } else {