42 lines
2.1 KiB
TypeScript
42 lines
2.1 KiB
TypeScript
"use client"
|
|
import useSound from 'use-sound';
|
|
|
|
export default function Soundboard() {
|
|
const [playBoyYouPlay] = useSound("/boyyouplay.m4a", {soundEnabled: true});
|
|
const [playEatItUp] = useSound("/eatitup.m4a", {soundEnabled: true});
|
|
const [playGangbusters] = useSound("/gangbusters.m4a", {soundEnabled: true});
|
|
const [playHusky] = useSound("/husky.m4a", {soundEnabled: true});
|
|
const [playPrettyFlags] = useSound("/prettyflags.m4a", {soundEnabled: true});
|
|
const [playHobbs] = useSound("/hobbs.m4a", {soundEnabled: true});
|
|
const [playGoodLooking] = useSound("/goodlookingband.m4a", {soundEnabled: true});
|
|
const [playImpressive] = useSound("/impressive.m4a", {soundEnabled: true});
|
|
const [playTallTubas] = useSound("/talltubas.m4a", {soundEnabled: true});
|
|
const [playWildChart] = useSound("/wildchart.m4a", {soundEnabled: true});
|
|
const [playScared] = useSound("/scared.m4a", {soundEnabled: true});
|
|
const [playNotBad] = useSound("/notbad.m4a", {soundEnabled: true});
|
|
const [playStrongTubas] = useSound("/strongtubas.m4a", {soundEnabled: true});
|
|
const [playTallBand] = useSound("/tallband.m4a", {soundEnabled: true});
|
|
|
|
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 active:bg-blue-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)}
|
|
{getButton("Hobbs", playHobbs)}
|
|
{getButton("Good Looking Band", playGoodLooking)}
|
|
{getButton("Pretty Impressive", playImpressive)}
|
|
{getButton("3 Tall Tubas", playTallTubas)}
|
|
{getButton("Wild Chart", playWildChart)}
|
|
{getButton("Scared Me", playScared)}
|
|
{getButton("Not Bad", playNotBad)}
|
|
{getButton("Strong Tubas", playStrongTubas)}
|
|
{getButton("Tall Band", playTallBand)}
|
|
</div>
|
|
);
|
|
} |