quickstarts.tsx44 lines · main

1	import { useParams } from 'next/navigation'
2	import { useRouter } from 'next/router'
3	import { useEffect } from 'react'
4
5	import SQLQuickstarts from '@/components/interfaces/SQLEditor/SQLTemplates/SQLQuickstarts'
6	import DefaultLayout from '@/components/layouts/DefaultLayout'
7	import { EditorBaseLayout } from '@/components/layouts/editors/EditorBaseLayout'
8	import SQLEditorLayout from '@/components/layouts/SQLEditorLayout/SQLEditorLayout'
9	import { SQLEditorMenu } from '@/components/layouts/SQLEditorLayout/SQLEditorMenu'
10	import { createTabId, useTabsStateSnapshot } from '@/state/tabs'
11	import type { NextPageWithLayout } from '@/types'
12
13	const SqlQuickstarts: NextPageWithLayout = () => {
14	const router = useRouter()
15	const ref = useParams<{ ref: string }>()?.ref
16	const tabs = useTabsStateSnapshot()
17
18	useEffect(() => {
19	if (!router.isReady) return
20
21	const tabId = createTabId('sql', { id: 'quickstarts' })
22	tabs.addTab({
23	id: tabId,
24	type: 'sql',
25	label: 'Quickstarts',
26	metadata: {
27	sqlId: 'quickstarts',
28	name: 'quickstarts',
29	},
30	})
31	}, [router.isReady, ref])
32
33	return <SQLQuickstarts />
34	}
35
36	SqlQuickstarts.getLayout = (page) => (
37	<DefaultLayout>
38	<EditorBaseLayout productMenu={<SQLEditorMenu />} product="SQL Editor">
39	<SQLEditorLayout>{page}</SQLEditorLayout>
40	</EditorBaseLayout>
41	</DefaultLayout>
42	)
43
44	export default SqlQuickstarts