CommunitySnippetsSection.tsx62 lines · main

1	import { LOCAL_STORAGE_KEYS, useParams } from 'common'
2	import { BookText } from 'lucide-react'
3	import { useRouter } from 'next/router'
4	import {
5	InnerSideMenuCollapsible,
6	InnerSideMenuCollapsibleContent,
7	InnerSideMenuCollapsibleTrigger,
8	} from 'ui-patterns'
9	import { InnerSideMenuDataItem } from 'ui-patterns/InnerSideMenu'
10
11	import { DEFAULT_SECTION_STATE, type SectionState } from './SQLEditorNav.constants'
12	import { useLocalStorage } from '@/hooks/misc/useLocalStorage'
13
14	const OPTIONS = ['templates', 'quickstarts'] as const
15
16	export function CommunitySnippetsSection() {
17	const { ref } = useParams()
18	const router = useRouter()
19
20	const [sectionVisibility, setSectionVisibility] = useLocalStorage<SectionState>(
21	LOCAL_STORAGE_KEYS.SQL_EDITOR_SECTION_STATE(ref ?? ''),
22	DEFAULT_SECTION_STATE
23	)
24	const { community: showCommunitySnippets } = sectionVisibility
25
26	function isPageActive(key: string): boolean {
27	return router.asPath === `/project/${ref}/sql/${key}`
28	}
29
30	return (
31	<InnerSideMenuCollapsible
32	className="px-0"
33	open={showCommunitySnippets}
34	onOpenChange={(value) => {
35	setSectionVisibility({
36	...(sectionVisibility ?? DEFAULT_SECTION_STATE),
37	community: value,
38	})
39	}}
40	>
41	<InnerSideMenuCollapsibleTrigger title="Community" />
42	<InnerSideMenuCollapsibleContent className="group-data-open:pt-2">
43	{OPTIONS.map((pageId) => {
44	const active = isPageActive(pageId)
45	return (
46	<InnerSideMenuDataItem
47	key={pageId}
48	title={pageId === 'templates' ? 'Templates' : 'Quickstarts'}
49	isActive={active}
50	isOpened={false}
51	href={`/project/${ref}/sql/${pageId}`}
52	className="capitalize"
53	>
54	<BookText size={16} className="text-foreground-muted" />
55	{pageId}
56	</InnerSideMenuDataItem>
57	)
58	})}
59	</InnerSideMenuCollapsibleContent>
60	</InnerSideMenuCollapsible>
61	)
62	}