A notebook-style SQL editor cell with syntax highlighting, line numbers, a run/cancel keyboard shortcut, and a typed results table for exploring query output.
"use client";
import { QueryCell, type QueryResult } from "@/components/ui/query-cell";
const SQL = `SELECT station, count(*) AS rides
FORM rides
GROUP BY station;`;
// Simulated engine: reports a real-looking parser error and marks the failing line.
function run(sql: string, signal: AbortSignal) {
return new Promise<QueryResult>((resolve, reject) => {
const timer = setTimeout(
() => {
const lines = sql.split("\n");
const bad = lines.findIndex((l) =>
/\bform\b/i.test(l.replace(/--.*$/, "")),
);
const col = lines[bad]?.search(/\bform\b/i) ?? 0;
reject(
Object.assign(
new Error(
`Parser Error: syntax error at or near "FORM"\n\nLINE ${bad + 1}: ${lines[bad]}\n${" ".repeat(9 + String(bad + 1).length + col)}^`,
),
{ line: bad + 1 },
),
);
},
380 + Math.random() * 320,
);
signal.addEventListener("abort", () => {
clearTimeout(timer);
reject(new DOMException("Aborted", "AbortError"));
});
});
}
export default function Demo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-[#f4efea] px-4 py-10 sm:px-8">
<div className="w-full max-w-[52rem]">
<QueryCell
defaultSql={SQL}
run={run}
title="muscat_bikes.rides"
locale="en-GB"
/>
</div>
</div>
);
}
