new sounds

components/Soundboard/index.tsx

@@ -16,6 +16,14 @@ export default function Soundboard() {
   const notBadRef = useRef<HTMLAudioElement>(null);
   const strongTubasRef = useRef<HTMLAudioElement>(null);
   const tallBandRef = useRef<HTMLAudioElement>(null);
+  const blueRef = useRef<HTMLAudioElement>(null);
+  const carlsbadRef = useRef<HTMLAudioElement>(null);
+  const beforeYouStartRef = useRef<HTMLAudioElement>(null);
+  const makesItBetterRef = useRef<HTMLAudioElement>(null);
+  const fluteRef = useRef<HTMLAudioElement>(null);
+  const slowItDownRef = useRef<HTMLAudioElement>(null);
+  const bassDrumsRef = useRef<HTMLAudioElement>(null);
+  const goodThingsRef = useRef<HTMLAudioElement>(null);
 
   const getButton = (title: string, ref: RefObject<HTMLAudioElement | null>) => {
     return <button className="border-2 rounded-lg p-4 text-center text-xl font-medium cursor-pointer hover:bg-gray-200 active:bg-blue-200" 
@@ -30,9 +38,9 @@ export default function Soundboard() {
   }
 
   return (
-     <div className="grid grid-cols-2 gap-8">
+     <div className="grid grid-cols-2 sm:grid-cols-3 gap-8">
-        {getButton("Boy you play!", boyYouPlayRef)}
+        {getButton("Boy You Play", boyYouPlayRef)}
-        {getButton("Eat It Up!", eatItUpRef)}
+        {getButton("Eat It Up", eatItUpRef)}
         {getButton("Gangbusters", gangbustersRef)}
         {getButton("Husky", huskyRef)}
         {getButton("Pretty Flags", prettyFlagsRef)}
@@ -45,6 +53,14 @@ export default function Soundboard() {
         {getButton("Not Bad", notBadRef)}
         {getButton("Strong Tubas", strongTubasRef)}
         {getButton("Tall Band", tallBandRef)}
+        {getButton("Beautiful Blue", blueRef)}
+        {getButton("Before You Start", beforeYouStartRef)}
+        {getButton("Carlsbad", carlsbadRef)}
+        {getButton("Makes It Better", makesItBetterRef)}
+        {getButton("Flute", fluteRef)}
+        {getButton("Slow It Down", slowItDownRef)}
+        {getButton("Bass Drums", bassDrumsRef)}
+        {getButton("Good Things", goodThingsRef)}
 
         <audio hidden preload="auto" ref={boyYouPlayRef} src="/boyyouplay.m4a"/>
         <audio hidden preload="auto" ref={eatItUpRef} src="/eatitup.m4a"/>
@@ -60,6 +76,14 @@ export default function Soundboard() {
         <audio hidden preload="auto" ref={notBadRef} src="/notbad.m4a"/>
         <audio hidden preload="auto" ref={strongTubasRef} src="/strongtubas.m4a"/>
         <audio hidden preload="auto" ref={tallBandRef} src="/tallband.m4a"/>
+        <audio hidden preload="auto" ref={blueRef} src="/beautifulblue.m4a"/>
+        <audio hidden preload="auto" ref={beforeYouStartRef} src="/beforeyoustart.m4a"/>
+        <audio hidden preload="auto" ref={carlsbadRef} src="/carlsbad.m4a"/>
+        <audio hidden preload="auto" ref={makesItBetterRef} src="/makesitbetter.m4a"/>
+        <audio hidden preload="auto" ref={fluteRef} src="/flute.m4a"/>
+        <audio hidden preload="auto" ref={slowItDownRef} src="/slowitdown.m4a"/>
+        <audio hidden preload="auto" ref={bassDrumsRef} src="/bassdrums.m4a"/>
+        <audio hidden preload="auto" ref={goodThingsRef} src="/goodthings.m4a"/>
       </div>
   );
 }