alex/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add Medal icon, add recentwatch

Browse Source
This commit is contained in:
Alex Frantz
2024-07-13 18:37:36 -04:00
parent 248c4295d5
commit 5b9888dd06
4 changed files with 136 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.tsx
+5 -2
View File
@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
import { GitHub, LastFM, Twitter } from './SocialIcons';
import { GitHub, LastFM, Twitter, Medal } from './SocialIcons';
export default function Footer() {
const [mailState, setMailState] = useState(false);
@@ -11,7 +11,7 @@ export default function Footer() {
}, [mailState])
return (
<div className="bg-stone-800 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="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">
<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>
@@ -36,6 +36,9 @@ export default function Footer() {
<a href="https://last.fm/user/lulawex" target="_blank">
<LastFM />
</a>
<a href="https://medal.tv/users/215577" target="_blank">
<Medal />
</a>
</div>
</div>
)
src/components/RecentWatch.tsx
+91
View File
@@ -0,0 +1,91 @@
import { useState, useEffect } from 'react';
type WatchDataResponse = {
result: {
data: {
json: WatchData
}
}
};
type WatchData = {
id: number,
title: string,
description: string,
imageKey: string,
currentEpisode: string,
tmdbID: string,
finished: boolean,
startedOn: Date,
createdAt: Date,
updatedAt: Date,
createdById: string
}
export default function RecentWatch() {
const [ data, setData ] = useState<WatchData | null>(null);
const [ loading, setLoading ] = useState<boolean>(true);
const [ errorState, setErrorState ] = useState<string>("");
useEffect(() => {
fetch("https://watch.alexav.gg/api/trpc/watchItem.getLatest", {
method: 'get'
})
.then(async (res) => {
if (res.ok) {
const json = await res.json() as WatchDataResponse;
setData(json.result.data.json);
setLoading(false)
} else {
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={data?.id ? "https://watch.alexav.gg/?id=" + data?.id : "#"} target="_blank">
<div className="bg-white text-black p-4">
{
loading ? (
<h1>Loading..</h1>
) : !errorState ? (
<div className="flex items-center">
<img
src={data?.imageKey}
width="50"
/>
<div className="flex flex-wrap mx-2">
<h1 className="w-full font-bold">{data?.title}</h1>
{
data?.finished ? (
<h1 className="w-full font-bold">Finished!</h1>
) : (
<h1 className="w-full">Started on {parseDate(new Date(data?.startedOn as Date))}</h1>
)
}
<h1>{data?.currentEpisode}</h1>
</div>
</div>
) : (
<>
<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>
</>
)
}
</div>
</a>
)
}
src/components/SocialIcons.tsx
+28
View File
@@ -46,4 +46,32 @@ export const Twitter = () => {
1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/>
</svg>
)
}
export const Medal = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg" className="w-7 mt-2 mx-auto bg-white p-1 rounded-lg inline" x="0px" y="0px" viewBox="0,0,256,256">
<g fill="none" fillRule="nonzero" stroke="none" strokeWidth="1" strokeLinecap="butt" strokeLinejoin="miter" strokeMiterlimit="10"
strokeDasharray="" strokeDashoffset="0" fontFamily="none" fontWeight="none" fontSize="none" textAnchor="none"
>
<g transform="scale(5.33333,5.33333)">
<path d="M40,18.723l-8.239,4.777l8.239,4.777z" fill="none">
</path>
<path d="M8,28.277l8.239,-4.777l-8.239,-4.777z" fill="none">
</path>
<path d="M8,18.723l8.239,4.777l7.761,-4.5l-16,-9l-8,4.085v18.83l8,-4.638z" fill="#000000">
</path>
<path d="M40,10l-16,9l7.761,4.5l8.239,-4.777v9.554l8,4.638v-18.83z" fill="#000000">
</path><path d="M31.761,23.5l-7.761,4.5l16,9v-8.723z" fill="#000000">
</path><path d="M8,28.277v8.723l16,-9l-7.761,-4.5z" fill="#000000">
</path>
<path d="M0,32.915l8,4.085v-8.723z" fill="#060606"></path>
<path d="M24,19l-7.761,4.5l7.761,4.5l7.761,-4.5z" fill="#060606">
</path>
<path d="M40,37l8,-4.085l-8,-4.638z" fill="#060606">
</path>
</g>
</g>
</svg>
)
}
src/index.tsx
+12 -1
View File
@@ -3,6 +3,7 @@ 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";
export default function Home() {
return (
@@ -37,7 +38,17 @@ export default function Home() {
/>
</div>
</section>
<section className="bg-muted py-10 px-4">
<section 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>
<div>
<RecentWatch />
</div>
</div>
</section>
<section className="my-5 px-4">
<div className="container max-w-5xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>