redesign list, add a few more cards

2024-08-17 22:02:42 -04:00
parent bb49b188f5
commit 1c90898722
8 changed files with 190 additions and 52 deletions
@@ -35,7 +35,7 @@ export default function Footer() {
    }

    return (
-        <div className="lg:w-1/2 bg-gray-500 md:w-full mx-auto rounded-t-lg text-center p-4 select-none">
+        <div className="lg:w-1/2 bg-zinc-500 md:w-full mx-auto rounded-t-lg text-center 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>
            <p className="opacity-50 italic" onClick={drawNewQuote}>{quote}</p>
@@ -1,25 +1,31 @@
 export default function ProjectComponent({
    url,
    header,
-    subheader,
-    image,
-    imageSize = "100"
+    projectHeader,
+    projectSubheader,
+    projectImage,
+    projectImageSize = "100"
 }: {
    url: string,
    header: string,
-    subheader: string,
-    image: string,
-    imageSize?: string
+    projectHeader: string,
+    projectSubheader: string,
+    projectImage: string,
+    projectImageSize?: string
 }) {
    return (
-        <a href={url} target="_blank" className="max-w-fit mx-auto">
-            <div className="bg-white text-black max-w-fit mx-auto p-2">
+        <a href={url} target="_blank" className="mx-auto">
+            <div className="bg-white rounded-lg text-black w-full mx-auto p-2">
+                <div className="p-2">
+                    <h1 className="text-center font-semibold">{header}</h1>
+                </div>
+
                <div className="flex items-center">
-                    <img src={image} width={imageSize} />
+                    <img src={projectImage} width={projectImageSize} />

                    <div className="flex flex-wrap mx-2">
-                        <h1 className="font-bold w-full">{header}</h1>
-                        <h1>{subheader}</h1>
+                        <h1 className="font-bold w-[190px] text-left truncate whitespace-nowrap overflow-hidden">{projectHeader}</h1>
+                        <h1 className="w-3/4 text-left truncate whitespace-nowrap overflow-hidden">{projectSubheader}</h1>
                    </div>
                </div>
            </div>
@@ -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>
+       </> 
+    }
+}
@@ -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>
+       </> 
+    }
+}
@@ -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 {
@@ -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 {
@@ -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 {
@@ -6,6 +6,8 @@ import ContactForm from "./components/ContactForm";
 import RecentWatch from "./components/ProjectComponents/RecentWatch";
 import RecentPhoto from "./components/ProjectComponents/RecentPhoto";
 import RecentListens from "./components/ProjectComponents/RecentListens";
+import RecentClip from './components/ProjectComponents/RecentClip';
+import RecentGame from "./components/ProjectComponents/RecentGame";
 import Layout from "./components/Layout";

 export default function Home() {
@@ -45,36 +47,29 @@ export default function Home() {
                        />
                    </div>
                </section>
-                <section id="watching" className="my-5 py-5 px-4 bg-gray-500">
-                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-                        <div className="w-full flex justify-center items-center">
-                            <h1 className="text-4xl font-bold text-center">What I'm watching</h1>
-                        </div>
+                <section id="data" className="my-5 py-5 px-4 bg-zinc-500">
+                    <div className="text-center lg:text-left mb-4">
+                        <h1 className="text-2xl font-bold">Data</h1>
+                        <p>Cool data from some of my accounts/projects</p>

-                        <div>
-                            <RecentWatch />
-                        </div>
-                    </div>
-                </section>
-                <section id="photos" className="my-5 py-5 px-4">
-                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-                        <div className="w-full flex justify-center items-center">
-                            <h1 className="text-4xl font-bold text-center">Photos I've captured</h1>
-                        </div>
+                        <hr className="my-2" />

-                        <div>
+                        <div className="grid grid-cols-1 md:grid-cols-2 auto-cols-fr gap-4">
+                            <div className="w-full min-w-[200px]">
+                                <RecentListens />
+                            </div>
+                            <div className="w-full min-w-[200px]">
                                <RecentPhoto />
                            </div>
+                            <div className="w-full min-w-[200px]">
+                                <RecentWatch />
                            </div>
-                </section>
-                <section id="listens" className="my-5 py-5 px-4 bg-gray-500">
-                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-                        <div className="w-full flex justify-center items-center">
-                            <h1 className="text-4xl font-bold text-center w-full">Music I'm listening to</h1>
+                            <div className="w-full min-w-[200px]">
+                                <RecentClip />
+                            </div>
+                            <div className="w-full min-w-[200px]">
+                                <RecentGame />
                            </div>
-
-                        <div>
-                            <RecentListens />
                        </div>
                    </div>
                </section>