metadata

app/page.tsx

@@ -1,27 +1,16 @@
-"use client"
+import Soundboard from '@/components/Soundboard';
-import useSound from 'use-sound';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: "Doyle Gammill Soundboard",
+  description: "The huskiest sounds on the Internet!",
+};
 
 export default function Home() {
-  const [playBoyYouPlay] = useSound("/boyyouplay.m4a");
-  const [playEatItUp] = useSound("/eatitup.m4a");
-  const [playGangbusters] = useSound("/gangbusters.m4a");
-  const [playHusky] = useSound("/husky.m4a");
-  const [playPrettyFlags] = useSound("/prettyflags.m4a");
-
-  const getButton = (title: string, play: () => void) => {
-    return <button className="border-2 rounded-lg p-4 text-center text-xl font-medium cursor-pointer hover:bg-gray-200" onClick={() => play()}>{title}</button>
-  }
-
   return (
     <div className="flex flex-col items-center justify-center py-16 gap-16">
       <h1 className="text-4xl font-bold">Doyle Gammill Soundboard</h1>
-      <div className="grid grid-cols-2 gap-8">
+      <Soundboard/>
-        {getButton("Boy you play!", playBoyYouPlay)}
-        {getButton("Eat It Up!", playEatItUp)}
-        {getButton("Gangbusters", playGangbusters)}
-        {getButton("Husky", playHusky)}
-        {getButton("Pretty Flags", playPrettyFlags)}
-      </div>
     </div>
   );
 }

components/Soundboard/index.tsx

@@ -0,0 +1,24 @@
+"use client"
+import useSound from 'use-sound';
+
+export default function Soundboard() {
+  const [playBoyYouPlay] = useSound("/boyyouplay.m4a");
+  const [playEatItUp] = useSound("/eatitup.m4a");
+  const [playGangbusters] = useSound("/gangbusters.m4a");
+  const [playHusky] = useSound("/husky.m4a");
+  const [playPrettyFlags] = useSound("/prettyflags.m4a");
+
+  const getButton = (title: string, play: () => void) => {
+    return <button className="border-2 rounded-lg p-4 text-center text-xl font-medium cursor-pointer hover:bg-gray-200" onClick={() => play()}>{title}</button>
+  }
+
+  return (
+     <div className="grid grid-cols-2 gap-8">
+        {getButton("Boy you play!", playBoyYouPlay)}
+        {getButton("Eat It Up!", playEatItUp)}
+        {getButton("Gangbusters", playGangbusters)}
+        {getButton("Husky", playHusky)}
+        {getButton("Pretty Flags", playPrettyFlags)}
+      </div>
+  );
+}