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 = `-- Busiest stations in September
SELECT station, count(*) AS rides, round(avg(minutes), 1) AS avg_minutes
FROM rides
WHERE started_at >= '2026-09-01'
GROUP BY station
ORDER BY rides DESC
LIMIT 6;`;
const RESULT: QueryResult = {
columns: [
{ name: "station", type: "VARCHAR" },
{ name: "rides", type: "BIGINT" },
{ name: "avg_minutes", type: "DOUBLE" },
],
rows: [
["Mutrah Corniche", 4812, 18.4],
["Qurum Beach", 3977, 22.1],
["Al Mouj Marina", 3120, 14.9],
["Ruwi Centre", 2264, 9.7],
["Seeb Souq", 1508, 11.2],
["Bawshar Dunes", 412, null],
],
};
// Simulated engine: resolves with a canned, synthetic result after a short delay.
function run(sql: string, signal: AbortSignal) {
return new Promise<QueryResult>((resolve, reject) => {
const timer = setTimeout(() => resolve(RESULT), 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>
);
}
