function MainComponent() { const [inputText, setInputText] = React.useState(''); const [moreTextShownPC, setMoreTextShownPC] = React.useState(false); const [moreTextShownMobile, setMoreTextShownMobile] = React.useState(false); React.useEffect(()=>{ setMoreTextShownPC(inputText.length > 120); setMoreTextShownMobile(inputText.length > 60); }, [ inputText ]); const previewTextPC = moreTextShownPC ? inputText.slice(0, 120) + '... さらに表示' : inputText; const previewTextMobile = moreTextShownMobile ? inputText.slice(0, 60) + '... さらに表示' : inputText; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-black text-white", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "inputText", className: "block text-sm font-medium text-gray-200", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "テキストを入力してください:"), /*#__PURE__*/ React.createElement("textarea", { name: "inputText", id: "inputText", className: "mt-1 p-2 w-full h-24 border border-gray-500 rounded-md shadow-sm bg-gray-800 text-white", value: inputText, onChange: (e)=>setInputText(e.target.value), __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[768px] border border-gray-500 rounded-lg p-4 bg-gray-800", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2 text-lg font-semibold", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "PCプレビュー:"), /*#__PURE__*/ React.createElement("div", { className: "border border-gray-500 rounded p-4 whitespace-pre-wrap", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, previewTextPC)), /*#__PURE__*/ React.createElement("div", { className: "w-full sm:w-[360px] border border-gray-500 rounded-lg p-4 bg-gray-800", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2 text-lg font-semibold", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "スマートフォンプレビュー:"), /*#__PURE__*/ React.createElement("div", { className: "border border-gray-500 rounded p-4 whitespace-pre-wrap", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, previewTextMobile)))); }