replace icons, improve music

This commit is contained in:
Aidan 2025-01-08 09:33:27 -05:00
parent b88c258896
commit 2011d7a83e
7 changed files with 128 additions and 67 deletions

View file

@ -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 (
<div className="max-w-2xl mx-auto text-center text-gray-200">
<section className="mb-12">
<h2 className="text-2xl font-semibold mb-4">Late Summer 2024</h2>
<div className="flex justify-center space-x-4">
<Link href="/time-periods/late-summer-2024/what-was-going-on" legacyBehavior>
<a className="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
WHAT WAS GOING ON
</a>
</Link>
</div>
</section>
<section className="mb-12">
<h2 className="text-2xl font-semibold mb-4">Early Summer 2024</h2>
<div className="flex justify-center space-x-4">
<Link href="/time-periods/early-summer-2024/what-was-going-on" legacyBehavior>
<a className="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
WHAT WAS GOING ON
</a>
</Link>
</div>
</section>
{timePeriods.map((period) => (
<section key={period.slug} className="mb-12">
<h2 className="text-2xl font-semibold mb-4">{period.title}</h2>
<div className="flex justify-center">
<MusicInfoButton
href={`/time-periods/${period.slug}/what-was-going-on`}
label="WHAT WAS GOING ON"
/>
</div>
</section>
))}
</div>
);
};
export default MusicInfo;
export default MusicInfo;