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

rework project cards

Browse Source
This commit is contained in:
Alex Frantz
2024-08-14 00:58:08 -04:00
parent 614cd7f0bd
commit 09482882f5
7 changed files with 88 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.tsx
+5 -3
View File
@@ -5,9 +5,11 @@ export default function Footer() {
const [mailState, setMailState] = useState(false);
useEffect(() => {
setTimeout(() => {
setMailState(false)
}, 3000)
if (mailState) {
setTimeout(() => {
setMailState(false)
}, 3000)
}
}, [mailState])
return (
src/components/Project.tsx → src/components/ProjectCard.tsx
View File
src/components/ProjectComponent.tsx
+29
View File
@@ -0,0 +1,29 @@
export default function ProjectComponent({
url,
header,
subheader,
image,
imageSize = "100"
}: {
url: string,
header: string,
subheader: string,
image: string,
imageSize?: string
}) {
return (
<a href={url} target="_blank">
<div className="bg-white text-black max-w-fit mx-auto p-2">
<div className="flex items-center">
<img src={image} width={imageSize} />
<div className="flex flex-wrap mx-2">
<h1 className="font-bold">{header}</h1>
<div className="basis-10" />
<h1>{subheader}</h1>
</div>
</div>
</div>
</a>
)
}
src/components/ProjectComponents/RecentListens.tsx
+8 -28
View File
@@ -1,4 +1,5 @@
import { useState, useEffect } from 'react';
import ProjectComponent from '../ProjectComponent';
type MusicAPIResponse = {
data: {
@@ -50,35 +51,14 @@ export default function RecentListens() {
setLoading(false);
}, []);
if (data) {
if (!loading && data) {
return (
<a href={data[0].url} target="_blank">
<div className="bg-white text-black p-4 max-w-fit lg:max-w-full mx-auto">
{
(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>
<ProjectComponent
url={data[0].url}
header={data[0].name}
subheader={data[0].artist["#text"]}
image={data[0].image.filter((v) => v.size === "large")[0]["#text"]}
/>
)
} else {
<>
src/components/ProjectComponents/RecentPhoto.tsx
+20 -29
View File
@@ -1,4 +1,5 @@
import { useState, useEffect } from 'react';
import ProjectComponent from '../ProjectComponent';
type PhotoData = {
id: number,
@@ -45,34 +46,24 @@ export default function RecentPhoto() {
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 max-w-fit lg:max-w-full mx-auto">
{
(loading) ? (
<h1>Loading..</h1>
) : (!errorState && data) ? (
<div className="flex items-center">
<img
src={data.imageUrl}
width="200"
/>
<div className="flex flex-wrap mx-2">
<h1 className="w-full font-bold">{data.name}</h1>
<h1>{parseDate(data.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>
)
if (data && !loading) {
return (
<ProjectComponent
url={"photos.alexav.gg"}
header={data.name}
subheader={parseDate(data.dateTaken as Date)}
image={data.imageUrl}
imageSize={"150"}
/>
)
} else {
return (
<>
<h1 className="font-bold text-2xl">No data :(</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>
</>
)
}
}
src/components/ProjectComponents/RecentWatch.tsx
+20 -38
View File
@@ -1,4 +1,5 @@
import { useState, useEffect } from 'react';
import ProjectComponent from '../ProjectComponent';
type WatchDataResponse = {
status: number,
@@ -48,42 +49,23 @@ export default function RecentWatch() {
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 max-w-fit lg:max-w-full mx-auto">
{
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>
<p className="text-sm italic">{errorState}</p>
</>
)
}
</div>
</a>
)
if (data && !loading) {
return (
<ProjectComponent
header={data.title}
subheader={ data.finished ? "Finished!" : "Started on " + parseDate(data.startedOn) }
url={"https://watch.alexav.gg/?id=" + data.id}
image={data.imageKey}
imageSize={"50"}
/>
)
} else {
return (
<>
<h1 className="font-bold text-2xl">No data :(</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>
</>
)
}
}