function MainComponent() { const [cards, setCards] = React.useState([]); const [form, setForm] = React.useState({ name: "", company: "", position: "", phone: "", email: "" }); const [image, setImage] = React.useState(null); const handleChange = (e)=>{ setForm({ ...form, [e.target.name]: e.target.value }); }; const handleImageChange = (e)=>{ setImage(e.target.files[0]); }; const handleImageUpload = async ()=>{ if (image) { const textData = await recognizeTextFromImage(image); setForm(textData); } }; const recognizeTextFromImage = async (imageFile)=>{ return { name: "山田太郎", company: "株式会社Sample", position: "代表取締役", phone: "090-1234-5678", email: "sample@example.com" }; }; const handleSubmit = (e)=>{ e.preventDefault(); setCards([ ...cards, form ]); setForm({ name: "", company: "", position: "", phone: "", email: "" }); }; const handleDelete = (index)=>{ const newCards = cards.filter((_, i)=>i !== index); setCards(newCards); }; const handleExportToExcel = ()=>{ const xls = cards.map((card)=>({ 名前: card.name, 会社名: card.company, 役職: card.position, 電話番号: card.phone, メールアドレス: card.email })); const worksheet = XLSX.utils.json_to_sheet(xls); const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, "名刺リスト"); XLSX.writeFile(workbook, "名刺リスト.xlsx"); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-[400px] mx-auto p-4", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, "名刺管理アプリ"), /*#__PURE__*/ React.createElement("form", { className: "mb-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-crimson-text text-lg", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "名前"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", className: "w-full border border-gray-300 rounded p-2", placeholder: "山田太郎", value: form.name, onChange: handleChange, __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-crimson-text text-lg", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "会社名"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "company", className: "w-full border border-gray-300 rounded p-2", placeholder: "株式会社Sample", value: form.company, onChange: handleChange, __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-crimson-text text-lg", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "役職"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "position", className: "w-full border border-gray-300 rounded p-2", placeholder: "代表取締役", value: form.position, onChange: handleChange, __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-crimson-text text-lg", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "電話番号"), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phone", className: "w-full border border-gray-300 rounded p-2", placeholder: "090-1234-5678", value: form.phone, onChange: handleChange, __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-crimson-text text-lg", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, "メールアドレス"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", className: "w-full border border-gray-300 rounded p-2", placeholder: "sample@example.com", value: form.email, onChange: handleChange, __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", onChange: handleImageChange, __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleImageUpload, className: "w-full bg-yellow-500 text-white font-roboto py-2 rounded mb-2", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, "画像をアップロード")), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white font-roboto py-2 rounded", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, "保存")), /*#__PURE__*/ React.createElement("button", { onClick: handleExportToExcel, className: "w-full bg-green-500 text-white font-roboto py-2 rounded mb-4", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, "エクスポート"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 128, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-2", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, "保存された名刺"), cards.map((card, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border border-gray-300 rounded p-4 mb-2", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }, "名前: ", card.name), /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, "会社名: ", card.company), /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, "役職: ", card.position), /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }, "電話番号: ", card.phone), /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, "メールアドレス: ", card.email), /*#__PURE__*/ React.createElement("button", { className: "mt-2 bg-red-500 text-white font-roboto py-1 px-2 rounded", onClick: ()=>handleDelete(index), __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, "削除"))))); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 150, columnNumber: 1 }, __self: this }, ` @import "https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js" `);