From 37d478d9b806714c4af7505f15ba6589a18d716d Mon Sep 17 00:00:00 2001 From: Aidan Date: Tue, 7 Jan 2025 19:33:22 -0500 Subject: [PATCH] implement music by time period, clean up header --- app/components/Header.tsx | 19 ++++---- app/components/Music.tsx | 93 +++++++++++++++++++++++++++++++++++++++ app/music/page.tsx | 15 +++++++ next.config.ts | 2 +- public/data/music.json | 42 ++++++++++++++++++ 5 files changed, 161 insertions(+), 10 deletions(-) create mode 100644 app/components/Music.tsx create mode 100644 app/music/page.tsx create mode 100644 public/data/music.json diff --git a/app/components/Header.tsx b/app/components/Header.tsx index cf8115b..43a8153 100644 --- a/app/components/Header.tsx +++ b/app/components/Header.tsx @@ -1,17 +1,17 @@ "use client"; -import { useState } from 'react' -import Link from 'next/link' -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faWordpressSimple } from '@fortawesome/free-brands-svg-icons' -import { faLink, faHouse, faUser, faPhone, faBars, faTimes, faTerminal } from '@fortawesome/free-solid-svg-icons' +import { useState } from 'react'; +import Link from 'next/link'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faWordpressSimple } from '@fortawesome/free-brands-svg-icons'; +import { faLink, faHouse, faUser, faPhone, faBars, faTimes, faTerminal, faMusic } from '@fortawesome/free-solid-svg-icons'; export default function Header() { - const [isOpen, setIsOpen] = useState(false) + const [isOpen, setIsOpen] = useState(false); const toggleMenu = () => { - setIsOpen(!isOpen) - } + setIsOpen(!isOpen); + }; return (
@@ -28,6 +28,7 @@ export default function Header() {
  • Contact
  • Domains
  • Blog
    • +
  • Music by Time
  • Tilde @@ -39,5 +40,5 @@ export default function Header() {
    • - ) + ); } \ No newline at end of file diff --git a/app/components/Music.tsx b/app/components/Music.tsx new file mode 100644 index 0000000..596dbfc --- /dev/null +++ b/app/components/Music.tsx @@ -0,0 +1,93 @@ +"use client"; + +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'; + +export default function Home() { + const [timePeriod, setTimePeriod] = useState('2020s'); + const [songs, setSongs] = useState([]); + const [currentIndex, setCurrentIndex] = useState(0); + + useEffect(() => { + fetch('/data/music.json') + .then(response => response.json()) + .then(data => { + const selectedPeriod = data.find(period => period.timePeriod === timePeriod); + const songsList = selectedPeriod ? selectedPeriod.songs : []; + setSongs(songsList); + setCurrentIndex(Math.floor(Math.random() * songsList.length)); + }); + }, [timePeriod]); + + useEffect(() => { + const selectElement = document.getElementById('timePeriod'); + if (selectElement) { + setTimePeriod(selectElement.value); + } + }, []); + + const handleNext = () => { + setCurrentIndex((currentIndex + 1) % songs.length); + }; + + const handlePrevious = () => { + setCurrentIndex((currentIndex - 1 + songs.length) % songs.length); + }; + + return ( +
    + +
    + ); +} \ No newline at end of file diff --git a/app/music/page.tsx b/app/music/page.tsx new file mode 100644 index 0000000..88dc59b --- /dev/null +++ b/app/music/page.tsx @@ -0,0 +1,15 @@ +import Header from '../components/Header' +import MusicWidget from '../components/Music' +import Footer from '../components/Footer' + +export default function Music() { + return ( +
    +
    +
    + +
    +
    + ) +} \ No newline at end of file diff --git a/next.config.ts b/next.config.ts index 78aff46..a8a1b64 100644 --- a/next.config.ts +++ b/next.config.ts @@ -2,7 +2,7 @@ import type { NextConfig } from "next"; const nextConfig: NextConfig = { images: { - domains: ['lastfm.freetls.fastly.net'], + domains: ['lastfm.freetls.fastly.net', 'p0ntus.com'], }, }; diff --git a/public/data/music.json b/public/data/music.json new file mode 100644 index 0000000..b12cf54 --- /dev/null +++ b/public/data/music.json @@ -0,0 +1,42 @@ +[ + { + "timePeriod": "Summer 2024", + "songs": [ + { + "albumArt": "https://p0ntus.com/archives/img/noticeme.png", + "name": "Notice Me", + "artist": "​tobi lou feat. MIA GLADSTONE", + "duration": "2:35", + "link": "https://www.last.fm/music/tobi+lou/Notice+Me" + }, + { + "albumArt": "https://p0ntus.com/archives/img/comforttexas.webp", + "name": "comfort, texas", + "artist": "Buppy.", + "duration": "2:11", + "link": "https://www.last.fm/music/Buppy./comfort,+texas" + }, + { + "albumArt": "https://p0ntus.com/archives/img/nonperishable.webp", + "name": "Jelly", + "artist": "tobi lou", + "duration": "1:50", + "link": "https://www.last.fm/music/tobi+lou/_/Jelly" + }, + { + "albumArt": "https://p0ntus.com/archives/img/exes.webp", + "name": "exes", + "artist": "Tate McRae", + "duration": "2:39", + "link": "https://www.last.fm/music/Tate+McRae/exes/exes" + }, + { + "albumArt": "https://p0ntus.com/archives/img/ick.webp", + "name": "Ick", + "artist": "Lay Bankz", + "duration": "1:55", + "link": "https://www.last.fm/music/Lay+Bankz/_/Ick" + } + ] + } +] \ No newline at end of file