reorganize, package upgrades

app/components/objects/BackButton.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import Link from 'next/link';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+
+interface BackButtonProps {
+  href: string;
+  label?: string;
+}
+
+const BackButton: React.FC<BackButtonProps> = ({ href, label = 'Back' }) => {
+  return (
+    <Link 
+      href={href}
+      className="inline-flex items-center px-4 py-2 mt-4 text-white bg-gray-800 rounded shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+      aria-label={`Go back to ${label}`}
+    >
+      <FontAwesomeIcon icon={faArrowLeft} className="mr-2" />
+      {label}
+    </Link>
+  );
+};
+
+export default BackButton;

app/components/objects/LoadingSpinner.tsx

@@ -0,0 +1,12 @@
+import { Loader2 } from 'lucide-react';
+
+const LoadingSpinner: React.FC = () => {
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+      <Loader2 className="w-12 h-12 text-white animate-spin" />
+    </div>
+  );
+};
+
+export default LoadingSpinner;
+

app/components/objects/MusicInfo.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+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">
+      {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;
+

app/components/objects/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<MusicInfoButtonProps> = ({ href, label }) => {
+  return (
+    <Link 
+      href={href}
+      className="inline-block bg-gray-800 text-white font-bold py-2 px-4 rounded shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+    >
+      {label}
+    </Link>
+  );
+};
+
+export default MusicInfoButton;