InlineEditorPreview.tsx30 lines · main

1	import Image from 'next/image'
2
3	import { BASE_PATH } from '@/lib/constants'
4
5	export const InlineEditorPreview = () => {
6	return (
7	<div>
8	<Image
9	src={`${BASE_PATH}/img/previews/inline-editor-preview.png`}
10	width={1296}
11	height={900}
12	alt="api-docs-side-panel-preview"
13	className="rounded-sm border mb-4"
14	/>
15	<p className="text-sm text-foreground-light mb-4">
16	Edit policies, functions, and triggers directly in the inline SQL editor. When you select
17	any of these database objects, the editor opens automatically, allowing you to make changes
18	without switching contexts.
19	</p>
20	<p className="text-sm text-foreground-light mb-4">
21	Need help writing SQL? Use the inline Assistant to generate or modify code for your
22	policies, triggers, and functions without leaving the editor.
23	</p>
24	<p className="text-sm text-foreground-light">
25	Access the inline editor anytime by clicking the code editor icon in the top right corner of
26	your dashboard.
27	</p>
28	</div>
29	)
30	}