function VoiceSelectionCard({ voiceName = "Default Voice" }) { return /*#__PURE__*/ React.createElement("div", { className: "text-lg font-semibold font-roboto border p-4 rounded border-[#555]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "Voice: ", voiceName); } function VoiceSelectionCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(VoiceSelectionCard, { __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(VoiceSelectionCard, { voiceName: "Voice A", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(VoiceSelectionCard, { voiceName: "Voice B", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this })); } function MainComponent() { const [text, setText] = React.useState(""); const maxChars = 200; const handleTextChange = (event)=>{ setText(event.target.value); }; const speakText = ()=>{ const msg = new SpeechSynthesisUtterance(text); window.speechSynthesis.speak(msg); }; const charsTyped = text.length; const charsLeft = maxChars - charsTyped; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-[#2a2a2a] text-white", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center p-4 bg-[#3a3a3a]", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "Text to Speech App")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between p-4", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-semibold font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "Typed: ", charsTyped), /*#__PURE__*/ React.createElement("div", { className: "font-semibold font-roboto", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Left: ", charsLeft)), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col justify-between p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "textInput", value: text, onChange: handleTextChange, className: "flex-grow border p-2 rounded bg-[#444] text-white", placeholder: "Enter text here...", maxLength: maxChars, __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-center py-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(VoiceSelectionCard, { voiceName: "Default Voice", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: speakText, className: "bg-green-500 text-white px-4 py-2 rounded w-full font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "Generate")), /*#__PURE__*/ React.createElement("nav", { className: "bg-[#3a3a3a] text-[#d3d3d3] p-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-around", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-2xl", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog text-2xl", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Settings")), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-history text-2xl", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "History")), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-shopping-cart text-2xl", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "Cart"))))); }