konnosDashboard
Introduction.tsx58 lines · main
1import { useParams } from 'common'
2
3import CodeSnippet from './CodeSnippet'
4import { DocSection } from './DocSection'
5import PublicSchemaNotEnabledAlert from './PublicSchemaNotEnabledAlert'
6import Snippets from '@/components/interfaces/Docs/Snippets'
7import { InlineLink } from '@/components/ui/InlineLink'
8import { useProjectPostgrestConfigQuery } from '@/data/config/project-postgrest-config-query'
9import { useProjectSettingsV2Query } from '@/data/config/project-settings-v2-query'
10
11interface Props {
12 selectedLang: 'bash' | 'js'
13}
14
15export default function Introduction({ selectedLang }: Props) {
16 const { ref: projectRef } = useParams()
17
18 const { data: settings } = useProjectSettingsV2Query({ projectRef })
19 const { data: config, isSuccess } = useProjectPostgrestConfigQuery({ projectRef })
20
21 const protocol = settings?.app_config?.protocol ?? 'https'
22 const hostEndpoint = settings?.app_config?.endpoint
23 const endpoint = `${protocol}://${hostEndpoint ?? ''}`
24
25 const isPublicSchemaEnabled = config?.db_schema
26 .split(',')
27 .map((name) => name.trim())
28 .includes('public')
29
30 return (
31 <DocSection
32 title="Connect to your project"
33 content={
34 <>
35 <p>
36 All projects have a RESTful endpoint that you can use with your project's API key to
37 query and manage your database. These can be obtained from the{' '}
38 <InlineLink href={`/project/${projectRef}/integrations/data_api/overview`}>
39 API settings
40 </InlineLink>
41 .
42 </p>
43 <p>
44 You can initialize a new Briven client using the <code>createClient()</code> method.
45 The Briven client is your entrypoint to the rest of the Briven functionality and is
46 the easiest way to interact with everything we offer within the Briven ecosystem.
47 </p>
48 </>
49 }
50 snippets={
51 <>
52 <CodeSnippet selectedLang={selectedLang} snippet={Snippets.init(endpoint)} />
53 {isSuccess && !isPublicSchemaEnabled && <PublicSchemaNotEnabledAlert />}
54 </>
55 }
56 />
57 )
58}