InferredSQLViewer.tsx44 lines · main

1	import { UntrustedSqlFragment } from '@supabase/pg-meta'
2	import { Loader2 } from 'lucide-react'
3	import { Badge, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
4
5	import CodeEditor from '@/components/ui/CodeEditor/CodeEditor'
6
7	export const InferredSQLViewer = ({
8	sql,
9	isLoading = false,
10	}: {
11	sql: UntrustedSqlFragment | undefined
12	isLoading?: boolean
13	}) => {
14	return (
15	<>
16	<div className="flex items-center justify-between px-4 py-2">
17	<div className="flex items-center gap-x-2">
18	<p className="text-sm">Inferred SQL:</p>
19	{isLoading && <Loader2 size={14} className="animate-spin text-foreground-lighter" />}
20	</div>
21	<div className="flex items-center gap-x-2">
22	<Tooltip>
23	<TooltipTrigger>
24	<Badge variant="warning">Generated</Badge>
25	</TooltipTrigger>
26	<TooltipContent side="bottom" align="end" className="w-64 text-center">
27	This query is inferred from client library code with the help of the Assistant and may
28	not guarantee correctness.
29	</TooltipContent>
30	</Tooltip>
31	</div>
32	</div>
33	<div className="h-44 relative">
34	{isLoading && !sql ? (
35	<div className="flex h-full items-center justify-center bg-surface-100 text-foreground-lighter">
36	<Loader2 size={20} className="animate-spin" />
37	</div>
38	) : (
39	<CodeEditor isReadOnly id="inferred-sql" language="pgsql" value={sql ?? ''} />
40	)}
41	</div>
42	</>
43	)
44	}