import React, { useState } from "react";
import { Button, Input } from "@/components/ui";
import { Howl } from "howler";
// Define piano keys and their corresponding note names (1.5 octaves, chromatic scale)
const pianoKeys = [
{ note: "C", key: "C4", color: "white" },
{ note: "C#", key: "C#4", color: "black" },
{ note: "D", key: "D4", color: "white" },
{ note: "D#", key: "D#4", color: "black" },
{ note: "E", key: "E4", color: "white" },
{ note: "F", key: "F4", color: "white" },
{ note: "F#", key: "F#4", color: "black" },
{ note: "G", key: "G4", color: "white" },
{ note: "G#", key: "G#4", color: "black" },
{ note: "A", key: "A4", color: "white" },
{ note: "A#", key: "A#4", color: "black" },
{ note: "B", key: "B4", color: "white" },
{ note: "C", key: "C5", color: "white" },
{ note: "C#", key: "C#5", color: "black" },
{ note: "D", key: "D5", color: "white" },
{ note: "D#", key: "D#5", color: "black" },
{ note: "E", key: "E5", color: "white" },
{ note: "F", key: "F5", color: "white" },
{ note: "F#", key: "F#5", color: "black" },
{ note: "G", key: "G5", color: "white" }
];
export default function Piano() {
const [selectedNotes, setSelectedNotes] = useState([]);
const [formData, setFormData] = useState({ name: "", email: "", phone: "", address: "" });
const playNote = (note) => {
if (selectedNotes.length < 5) {
setSelectedNotes([...selectedNotes, note]);
new Howl({ src: [`/sounds/${note}.mp3`] }).play();
}
};
const handleSubmit = async () => {
if (selectedNotes.length !== 5) {
alert("Please select exactly 5 notes.");
return;
}
if (!formData.name || !formData.email || !formData.phone || !formData.address) {
alert("Please fill in all fields.");
return;
}
const response = await fetch("/api/store-notes", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ ...formData, notes: selectedNotes })
});
if (response.ok) {
alert("Submission successful!");
setSelectedNotes([]);
setFormData({ name: "", email: "", phone: "", address: "" });
} else {
alert("Error submitting data.");
}
};
return (
);
}
Select Five Notes
{pianoKeys.map(({ note, key, color }) => (
))}
Selected Notes: {selectedNotes.join(", ")}
setFormData({ ...formData, name: e.target.value })} />
setFormData({ ...formData, email: e.target.value })} />
setFormData({ ...formData, phone: e.target.value })} />
setFormData({ ...formData, address: e.target.value })} />