93 lines
3.4 KiB
TypeScript
93 lines
3.4 KiB
TypeScript
|
"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 (
|
||
|
|
<div className="max-w-2xl mx-auto">
|
||
|
|
<section id="music-carousel" className="mb-12">
|
||
|
|
<h2 className="text-3xl font-semibold mb-4 text-gray-200">Music By Time Period</h2>
|
||
|
|
<div className="mb-4 pb-4">
|
||
|
|
<label htmlFor="timePeriod" className="text-gray-300">Time Period:</label>
|
||
|
|
<select
|
||
|
|
id="timePeriod"
|
||
|
|
value={timePeriod}
|
||
|
|
onChange={(e) => setTimePeriod(e.target.value)}
|
||
|
|
className="ml-2 p-2 bg-gray-700 text-gray-300 rounded"
|
||
|
|
>
|
||
|
|
<option value="Summer 2024">Summer 2024</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{songs.length > 0 && (
|
||
|
|
<div className="relative">
|
||
|
|
<button onClick={handlePrevious} className="absolute left-0 top-1/2 transform -translate-y-1/2 text-gray-300">
|
||
|
|
<FontAwesomeIcon icon={faArrowLeft} size="2x" />
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div className="text-center">
|
||
|
|
<Image
|
||
|
|
src={songs[currentIndex].albumArt}
|
||
|
|
alt={songs[currentIndex].name}
|
||
|
|
width={300}
|
||
|
|
height={300}
|
||
|
|
className="mx-auto mb-4 rounded-lg"
|
||
|
|
/>
|
||
|
|
<h3 className="text-2xl font-bold text-gray-100">{songs[currentIndex].name}</h3>
|
||
|
|
<p className="text-gray-300">{songs[currentIndex].artist}</p>
|
||
|
|
<p className="text-gray-300">{songs[currentIndex].duration}</p>
|
||
|
|
<div className="mt-4">
|
||
|
|
<button className="mr-4 text-gray-300">
|
||
|
|
<FontAwesomeIcon icon={faStepBackward} size="2x" />
|
||
|
|
</button>
|
||
|
|
<button className="mr-4 text-gray-300" onClick={() => window.open(songs[currentIndex]?.link, '_blank')}>
|
||
|
|
<FontAwesomeIcon icon={faPlay} size="2x" />
|
||
|
|
</button>
|
||
|
|
<button className="text-gray-300">
|
||
|
|
<FontAwesomeIcon icon={faStepForward} size="2x" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button onClick={handleNext} className="absolute right-0 top-1/2 transform -translate-y-1/2 text-gray-300">
|
||
|
|
<FontAwesomeIcon icon={faArrowRight} size="2x" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|