add listen stuff, fix header responsiveness
This commit is contained in:
@@ -11,7 +11,7 @@ export default function Footer() {
|
||||
}, [mailState])
|
||||
|
||||
return (
|
||||
<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">
|
||||
<div className="lg:w-1/2 bg-gray-500 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">© {new Date().getFullYear()}, Alex Frantz. All Rights Reserved</h1>
|
||||
<p>All logos & images on this page belong to their respective owners.</p>
|
||||
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
export default function Header() {
|
||||
return (
|
||||
<div className="text-white pt-4 mx-auto lg:w-1/2 sm:w-full">
|
||||
<h1 className="font-bold text-2xl">Alex Frantz</h1>
|
||||
|
||||
<div className="text-white pt-4 mx-auto w-full sm:w-1/2 text-center sm:text-left">
|
||||
<h1 className="text-2xl font-bold">Alex Frantz</h1>
|
||||
<p>Professional button clicker & word typer</p>
|
||||
|
||||
<hr className="my-4" />
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
type MusicAPIResponse = {
|
||||
data: {
|
||||
tracks: MusicData[]
|
||||
}
|
||||
}
|
||||
|
||||
type MusicData = {
|
||||
artist: {
|
||||
mbid: string,
|
||||
"#text": string
|
||||
},
|
||||
mbid: string,
|
||||
album: {
|
||||
mbid: string,
|
||||
"#text": string,
|
||||
},
|
||||
name: string,
|
||||
url: string,
|
||||
image: MusicImage[]
|
||||
}
|
||||
|
||||
type MusicImage = {
|
||||
size: string,
|
||||
"#text": string
|
||||
}
|
||||
|
||||
export default function RecentListens() {
|
||||
const [ data, setData ] = useState<MusicData[]>();
|
||||
const [ errorState, setErrorState ] = useState<string>("");
|
||||
const [ loading, setLoading ] = useState<boolean>(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetch("https://api.alexav.gg/v4/social/music", {
|
||||
method: "get"
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (res.ok) {
|
||||
const data = await res.json() as MusicAPIResponse
|
||||
setData(data.data.tracks);
|
||||
} else {
|
||||
setErrorState("Failed to load! :(")
|
||||
}
|
||||
})
|
||||
.catch((e: Error) => {
|
||||
setErrorState(e.message)
|
||||
})
|
||||
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
if (data) {
|
||||
return (
|
||||
<a href={data[0].url} 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].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>
|
||||
)
|
||||
} else {
|
||||
<>
|
||||
<h1 className="font-bold text-2xl">No data :(</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>
|
||||
</>
|
||||
}
|
||||
}
|
||||
@@ -19,10 +19,6 @@ export default function RecentPhoto() {
|
||||
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',
|
||||
@@ -33,7 +29,6 @@ export default function RecentPhoto() {
|
||||
.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)
|
||||
+20
-4
@@ -3,8 +3,11 @@ 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";
|
||||
import RecentPhoto from "./components/RecentPhoto";
|
||||
|
||||
// project components
|
||||
import RecentWatch from "./components/ProjectComponents/RecentWatch";
|
||||
import RecentPhoto from "./components/ProjectComponents/RecentPhoto";
|
||||
import RecentListens from "./components/ProjectComponents/RecentListens";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
@@ -12,7 +15,7 @@ export default function Home() {
|
||||
<Header />
|
||||
<div className="mx-auto lg:w-1/2">
|
||||
<section id="projects">
|
||||
<div className="mb-4">
|
||||
<div className="mb-4 text-center md:text-left">
|
||||
<h1 className="text-3xl font-bold">
|
||||
Projects
|
||||
</h1>
|
||||
@@ -65,7 +68,20 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="about" className="my-5 bg-gray-500 p-4">
|
||||
<section id="listens" className="my-5 py-10 px-4 bg-gray-500">
|
||||
<div className="grid lg:grid-cols-2 md:grid-cols-1 gap-4">
|
||||
<div className="flex justify-center items-center">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold">What am I listening to?</h1>
|
||||
<p>I listen to some good stuff I swear</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<RecentListens />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="about" className="my-5 p-4">
|
||||
<div className="container max-w-5xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 md:grid-cols-1 gap-8">
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user