{
  "id": "sql-runner",
  "name": "SQL Runner",
  "category": "data",
  "tags": ["sql", "database", "query", "data"],
  "description": "SQL query input with a mock result table.",
  "triggers": ["sql runner", "query database", "sql", "run query"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "function SqlRunner() {\n  const [query, setQuery] = React.useState('SELECT * FROM users WHERE active = true;');\n  const [results, setResults] = React.useState(null);\n  const [running, setRunning] = React.useState(false);\n\n  const mockData = {\n    'SELECT * FROM users WHERE active = true;': {\n      columns: ['id', 'name', 'email', 'active'],\n      rows: [\n        [1, 'Alice Johnson', 'alice@example.com', true],\n        [3, 'Charlie Kim', 'charlie@example.com', true],\n        [5, 'Eva Martinez', 'eva@example.com', true]\n      ]\n    },\n    'SELECT * FROM users;': {\n      columns: ['id', 'name', 'email', 'active'],\n      rows: [\n        [1, 'Alice Johnson', 'alice@example.com', true],\n        [2, 'Bob Smith', 'bob@example.com', false],\n        [3, 'Charlie Kim', 'charlie@example.com', true],\n        [4, 'Diana Lee', 'diana@example.com', false],\n        [5, 'Eva Martinez', 'eva@example.com', true]\n      ]\n    },\n    'SELECT * FROM orders;': {\n      columns: ['order_id', 'user_id', 'total', 'status'],\n      rows: [\n        [101, 1, 249.99, 'shipped'],\n        [102, 2, 89.50, 'pending'],\n        [103, 1, 19.99, 'delivered'],\n        [104, 3, 150.00, 'shipped']\n      ]\n    }\n  };\n\n  function runQuery() {\n    setRunning(true);\n    setTimeout(() => {\n      const key = Object.keys(mockData).find(k => k.toLowerCase().trim() === query.toLowerCase().trim());\n      if (key) {\n        setResults({ ...mockData[key], duration: 12 });\n      } else {\n        setResults({ columns: [], rows: [], duration: 8, empty: true });\n      }\n      setRunning(false);\n    }, 400);\n  }\n\n  const sampleQueries = Object.keys(mockData);\n\n  return (\n    <div style={{ fontFamily: 'system-ui, sans-serif', padding: 16, background: '#fff', borderRadius: 12, height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column' }}>\n      <h2 style={{ margin: '0 0 12px 0', fontSize: 18, color: '#1a1a1a' }}>SQL Runner</h2>\n      <div style={{ marginBottom: 8, display: 'flex', gap: 6, flexWrap: 'wrap' }}>\n        {sampleQueries.map((q, i) => (\n          <button\n            key={i}\n            onClick={() => setQuery(q)}\n            style={{ padding: '4px 10px', borderRadius: 12, border: '1px solid #ddd', background: '#f3f4f6', fontSize: 11, cursor: 'pointer', color: '#374151' }}\n          >\n            {q.length > 30 ? q.slice(0, 30) + '...' : q}\n          </button>\n        ))}\n      </div>\n      <textarea\n        value={query}\n        onChange={e => setQuery(e.target.value)}\n        style={{ width: '100%', height: 70, padding: 10, borderRadius: 6, border: '1px solid #ddd', fontSize: 12, fontFamily: 'monospace', resize: 'none', boxSizing: 'border-box', marginBottom: 10 }}\n        placeholder=\"Enter SQL query...\"\n      />\n      <button\n        onClick={runQuery}\n        disabled={running}\n        style={{ padding: '8px 16px', borderRadius: 6, border: 'none', background: running ? '#9ca3af' : '#2563eb', color: '#fff', fontSize: 13, cursor: running ? 'not-allowed' : 'pointer', marginBottom: 12, alignSelf: 'flex-start' }}\n      >\n        {running ? 'Running...' : 'Run Query'}\n      </button>\n      <div style={{ flex: 1, overflow: 'auto', border: '1px solid #e5e7eb', borderRadius: 6 }}>\n        {results && (\n          <div style={{ height: '100%' }}>\n            {!results.empty ? (\n              <>\n                <div style={{ padding: '8px 12px', fontSize: 11, color: '#6b7280', borderBottom: '1px solid #e5e7eb', background: '#f9fafb' }}>\n                  {results.rows.length} row{results.rows.length !== 1 ? 's' : ''} · {results.duration}ms\n                </div>\n                <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>\n                  <thead>\n                    <tr>\n                      {results.columns.map((col, i) => (\n                        <th key={i} style={{ padding: '8px 12px', textAlign: 'left', background: '#f3f4f6', borderBottom: '1px solid #e5e7eb', fontWeight: 600, color: '#374151', whiteSpace: 'nowrap' }}>{col}</th>\n                      ))}\n                    </tr>\n                  </thead>\n                  <tbody>\n                    {results.rows.map((row, ri) => (\n                      <tr key={ri} style={{ background: ri % 2 === 0 ? '#fff' : '#f9fafb' }}>\n                        {row.map((cell, ci) => (\n                          <td key={ci} style={{ padding: '8px 12px', borderBottom: '1px solid #e5e7eb', color: '#4b5563', fontFamily: 'monospace', fontSize: 12, whiteSpace: 'nowrap' }}>{String(cell)}</td>\n                        ))}\n                      </tr>\n                    ))}\n                  </tbody>\n                </table>\n              </>\n            ) : (\n              <div style={{ padding: 20, textAlign: 'center', color: '#999', fontSize: 13 }}>No results for this query. Try a sample query above.</div>\n            )}\n          </div>\n        )}\n        {!results && <div style={{ padding: 20, textAlign: 'center', color: '#999', fontSize: 13 }}>Run a query to see results.</div>}\n      </div>\n    </div>\n  );\n}\nrender(<SqlRunner/>);",
  "placeholders": []
}