From 2011d7a83e36e57e577aa4010a1c702416a49313 Mon Sep 17 00:00:00 2001 From: Aidan Date: Wed, 8 Jan 2025 09:33:27 -0500 Subject: [PATCH] replace icons, improve music --- app/components/BackButton.tsx | 19 +++++--- app/components/LoadingSpinner.tsx | 12 +++++ app/components/Music.tsx | 72 +++++++++++++++--------------- app/components/MusicInfo.tsx | 47 +++++++++---------- app/components/MusicInfoButton.tsx | 20 +++++++++ next.config.ts | 24 +++++++++- package.json | 1 + 7 files changed, 128 insertions(+), 67 deletions(-) create mode 100644 app/components/LoadingSpinner.tsx create mode 100644 app/components/MusicInfoButton.tsx diff --git a/app/components/BackButton.tsx b/app/components/BackButton.tsx index c9e07bd..d22c60e 100644 --- a/app/components/BackButton.tsx +++ b/app/components/BackButton.tsx @@ -3,13 +3,20 @@ import Link from 'next/link'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'; -const BackButton: React.FC<{ href: string }> = ({ href }) => { +interface BackButtonProps { + href: string; + label?: string; +} + +const BackButton: React.FC = ({ href, label = 'Back' }) => { return ( - - - - Back - + + + {label} ); }; diff --git a/app/components/LoadingSpinner.tsx b/app/components/LoadingSpinner.tsx new file mode 100644 index 0000000..7501b8c --- /dev/null +++ b/app/components/LoadingSpinner.tsx @@ -0,0 +1,12 @@ +import { Loader2 } from 'lucide-react'; + +const LoadingSpinner: React.FC = () => { + return ( +
+ +
+ ); +}; + +export default LoadingSpinner; + diff --git a/app/components/Music.tsx b/app/components/Music.tsx index 57f79ab..89bb0d6 100644 --- a/app/components/Music.tsx +++ b/app/components/Music.tsx @@ -2,48 +2,45 @@ import { useState, useEffect } from 'react'; import Image from 'next/image'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faPlay, faStepBackward, faStepForward, faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons'; +import { Play, SkipBack, SkipForward, ChevronLeft, ChevronRight } from 'lucide-react'; +import LoadingSpinner from './LoadingSpinner'; + +interface Song { + albumArt: string; + name: string; + artist: string; + duration: string; + link?: string; +} + +interface Period { + timePeriod: string; + songs: Song[]; +} export default function Home() { - const [timePeriod, setTimePeriod] = useState('2020s'); - interface Song { - albumArt: string; - name: string; - artist: string; - duration: string; - link?: string; - } + const [timePeriod, setTimePeriod] = useState('Summer 2024'); const [songs, setSongs] = useState([]); const [currentIndex, setCurrentIndex] = useState(0); + const [isLoading, setIsLoading] = useState(true); useEffect(() => { + setIsLoading(true); fetch('/data/music.json') .then(response => response.json()) - .then(data => { - interface Song { - albumArt: string; - name: string; - artist: string; - duration: string; - } - interface Period { - timePeriod: string; - songs: Song[]; - } - const selectedPeriod = data.find((period: Period) => period.timePeriod === timePeriod); const songsList = selectedPeriod ? selectedPeriod.songs : []; + .then((data: Period[]) => { + const selectedPeriod = data.find((period) => period.timePeriod === timePeriod); + const songsList = selectedPeriod ? selectedPeriod.songs : []; setSongs(songsList); setCurrentIndex(Math.floor(Math.random() * songsList.length)); + setIsLoading(false); + }) + .catch(error => { + console.error('Error fetching music data:', error); + setIsLoading(false); }); }, [timePeriod]); - useEffect(() => { - const selectElement = document.getElementById('timePeriod'); - if (selectElement) { - setTimePeriod((selectElement as HTMLSelectElement).value); - } - }, []); - const handleNext = () => { setCurrentIndex((currentIndex + 1) % songs.length); }; @@ -68,10 +65,12 @@ export default function Home() { - {songs.length > 0 && ( + {isLoading && } + + {!isLoading && songs.length > 0 && (
@@ -87,23 +86,24 @@ export default function Home() {

{songs[currentIndex].duration}

)} ); -} \ No newline at end of file +} + diff --git a/app/components/MusicInfo.tsx b/app/components/MusicInfo.tsx index 19752d8..2ffd98b 100644 --- a/app/components/MusicInfo.tsx +++ b/app/components/MusicInfo.tsx @@ -1,32 +1,33 @@ import React from 'react'; -import Link from 'next/link'; +import MusicInfoButton from './MusicInfoButton'; + +interface TimePeriod { + title: string; + slug: string; +} + +const timePeriods: TimePeriod[] = [ + { title: 'Late Summer 2024', slug: 'late-summer-2024' }, + { title: 'Early Summer 2024', slug: 'early-summer-2024' }, +]; const MusicInfo: React.FC = () => { return (
-
-

Late Summer 2024

- -
- -
-

Early Summer 2024

- -
+ {timePeriods.map((period) => ( +
+

{period.title}

+
+ +
+
+ ))}
); }; -export default MusicInfo; \ No newline at end of file +export default MusicInfo; + diff --git a/app/components/MusicInfoButton.tsx b/app/components/MusicInfoButton.tsx new file mode 100644 index 0000000..a8afb1b --- /dev/null +++ b/app/components/MusicInfoButton.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import Link from 'next/link'; + +interface MusicInfoButtonProps { + href: string; + label: string; +} + +const MusicInfoButton: React.FC = ({ href, label }) => { + return ( + + {label} + + ); +}; + +export default MusicInfoButton; \ No newline at end of file diff --git a/next.config.ts b/next.config.ts index 55859a8..36604e1 100644 --- a/next.config.ts +++ b/next.config.ts @@ -2,8 +2,28 @@ import type { NextConfig } from "next"; const nextConfig: NextConfig = { images: { - domains: ['lastfm.freetls.fastly.net', 'p0ntus.com', 'github-readme-stats.vercel.app'], + remotePatterns: [ + { + protocol: 'https', + hostname: 'lastfm.freetls.fastly.net', + port: '', + pathname: '/**', + }, + { + protocol: 'https', + hostname: 'p0ntus.com', + port: '', + pathname: '/**', + }, + { + protocol: 'https', + hostname: 'github-readme-stats.vercel.app', + port: '', + pathname: '/**', + }, + ], }, }; -export default nextConfig; \ No newline at end of file +export default nextConfig; + diff --git a/package.json b/package.json index 4d702a8..b3e3a1d 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@vercel/analytics": "^1.4.1", "@vercel/speed-insights": "^1.1.0", "geist": "^1.3.1", + "lucide-react": "^0.469.0", "next": "15.1.3", "react": "^19.0.0", "react-dom": "^19.0.0"