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 date_part('hour', started_at) AS hour, count(*) AS rides
FROM rides
GROUP BY hour
ORDER BY hour;`;
const RESULT: QueryResult = {
columns: [
{ name: "hour", type: "BIGINT" },
{ name: "rides", type: "BIGINT" },
],
rows: Array.from({ length: 24 }, (_, h) => [
h,
Math.round(
120 +
900 * Math.exp(-((h - 18) ** 2) / 8) +
520 * Math.exp(-((h - 7.5) ** 2) / 3),
),
]),
};
// 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-[#1f1f1f] px-4 py-10 sm:px-8">
<div className="w-full max-w-[52rem]">
<QueryCell
defaultSql={SQL}
run={run}
title="muscat_bikes.rides"
theme="dark"
locale="en-GB"
/>
</div>
</div>
);
}
