function FramedImage({ characterName, dialogueText }) { return /*#__PURE__*/ React.createElement("div", { className: "relative w-full max-w-[400px] h-[100px] border-4 border-pink-500 mx-2 sm:px-2", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-[-12px] left-[-4px] py-1 px-2 bg-pink-700 text-white text-sm font-bold font-roboto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, characterName), /*#__PURE__*/ React.createElement("div", { className: "absolute top-6 left-2 right-2 bg-white bg-opacity-80 text-black text-lg px-2 font-roboto", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, dialogueText)); } function FramedImageStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4 items-center", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FramedImage, { characterName: "ずんだもん", dialogueText: "……てか俺が構うわドアホ！出てけ！", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this })); } function MainComponent() { const [text, setText] = React.useState("音声入力した文字を表示"); const [isRecording, setIsRecording] = React.useState(false); const handleVoiceInput = ()=>{ const recognition = new webkitSpeechRecognition(); recognition.lang = "ja-JP"; recognition.onresult = (event)=>{ setText(event.results[0][0].transcript); setIsRecording(false); }; recognition.onstart = ()=>{ setIsRecording(true); }; recognition.onend = ()=>{ setIsRecording(false); }; recognition.start(); }; const buttonClasses = `mt-4 w-[60px] h-[60px] flex items-center justify-center text-2xl ${isRecording ? 'bg-red-500' : 'bg-blue-500'} rounded-full text-white`; const iconClass = isRecording ? 'fas fa-square' : 'fas fa-microphone'; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full min-h-screen", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/b6b3f827-c521-4835-a7d4-5db0c87c9818/-/format/auto/", alt: "キャラクターの画像", className: "w-full h-auto sm:w-full object-cover", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] sm:max-w-full sm:px-4 mt-4", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(FramedImage, { characterName: "ずんだもん", dialogueText: text, __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleVoiceInput, className: buttonClasses, __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: iconClass, __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }))); }