function MainComponent() { const [originalUrl, setOriginalUrl] = React.useState(""); const [shortUrl, setShortUrl] = React.useState(""); const [loading, setLoading] = React.useState(false); const generateShortUrl = async (e)=>{ e.preventDefault(); setLoading(true); try { const randomString = Math.random().toString(36).substring(2, 8); await fetch("/api/db/shortlinks", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `url_links` (`original_url`, `short_code`, `created_at`) VALUES (?, ?, ?)", values: [ originalUrl, randomString, new Date().toISOString() ] }) }); const newShortUrl = `https://king-url.site/${randomString}`; setShortUrl(newShortUrl); } catch (error) { console.error(error); } setLoading(false); }; const copyToClipboard = ()=>{ navigator.clipboard.writeText(shortUrl); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full mx-auto space-y-8", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto text-gray-900", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "URL短縮サービス"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "長いURLを短くシンプルに")), /*#__PURE__*/ React.createElement("form", { onSubmit: generateShortUrl, className: "mt-8 space-y-6", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-md shadow-sm -space-y-px", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "url", type: "url", required: true, value: originalUrl, onChange: (e)=>setOriginalUrl(e.target.value), className: "appearance-none rounded relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm", placeholder: "URLを入力してください", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-link mr-2", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }), "短縮URLを生成"))), shortUrl && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-white rounded-lg shadow", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 mb-2 font-roboto", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "短縮URL:"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", readOnly: true, value: shortUrl, className: "flex-1 p-2 border rounded-md text-sm", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: copyToClipboard, className: "p-2 text-indigo-600 hover:text-indigo-800", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy", __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this })))))); }