function MainComponent() { const [sql, setSql] = useState("SELECT * FROM sales_data LIMIT 10"); const [results, setResults] = useState([ { id: 1, date: "2024-01-01", product: "ノートパソコン", quantity: 5, revenue: 750000 }, { id: 2, date: "2024-01-02", product: "スマートフォン", quantity: 10, revenue: 800000 }, { id: 3, date: "2024-01-03", product: "タブレット", quantity: 7, revenue: 420000 }, { id: 4, date: "2024-01-04", product: "ヘッドフォン", quantity: 15, revenue: 150000 }, { id: 5, date: "2024-01-05", product: "スマートウォッチ", quantity: 8, revenue: 240000 } ]); const [isLoading, setIsLoading] = useState(false); const handleExecute = async ()=>{ setIsLoading(true); try { setTimeout(()=>{ setIsLoading(false); }, 1000); } catch (error) { setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: sql, onChange: (e)=>setSql(e.target.value), className: "w-full h-48 p-4 font-mono text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "SELECT * FROM your_table LIMIT 10", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleExecute, disabled: isLoading, className: "bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 disabled:bg-gray-400", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, isLoading ? "実行中..." : "SQLを実行")), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto border rounded-lg", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "min-w-full", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full divide-y divide-gray-200", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-50", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, results[0] && /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, Object.keys(results[0]).map((header)=>/*#__PURE__*/ React.createElement("th", { key: header, className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 81, columnNumber: 21 }, __self: this }, header)))), /*#__PURE__*/ React.createElement("tbody", { className: "bg-white divide-y divide-gray-200", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, results.map((row, i)=>/*#__PURE__*/ React.createElement("tr", { key: i, __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }, Object.values(row).map((value, j)=>/*#__PURE__*/ React.createElement("td", { key: j, className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", __source: { fileName: "", lineNumber: 95, columnNumber: 21 }, __self: this }, value))))))))); }

id	date	product	quantity	revenue
1	2024-01-01	ノートパソコン	5	750000
2	2024-01-02	スマートフォン	10	800000
3	2024-01-03	タブレット	7	420000
4	2024-01-04	ヘッドフォン	15	150000
5	2024-01-05	スマートウォッチ	8	240000