konnosDashboard
NewProjectPanel.tsx236 lines · main
1import { useParams } from 'common'
2import { Auth, EdgeFunctions, Realtime, SqlEditor, Storage, TableEditor } from 'icons'
3import { ExternalLink, Settings } from 'lucide-react'
4import Link from 'next/link'
5import { Button } from 'ui'
6
7import { APIKeys } from './APIKeys'
8import { GetStartedHero } from './GetStartedHero'
9import { DocsButton } from '@/components/ui/DocsButton'
10import { InlineLink } from '@/components/ui/InlineLink'
11import Panel from '@/components/ui/Panel'
12import { EditorIndexPageLink } from '@/data/prefetchers/project.$ref.editor'
13import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
14import { DOCS_URL } from '@/lib/constants'
15
16export const NewProjectPanel = () => {
17 const { ref } = useParams()
18
19 const {
20 projectAuthAll: authEnabled,
21 projectEdgeFunctionAll: edgeFunctionsEnabled,
22 projectStorageAll: storageEnabled,
23 } = useIsFeatureEnabled(['project_auth:all', 'project_edge_function:all', 'project_storage:all'])
24
25 return (
26 <div className="grid grid-cols-12 gap-4 lg:gap-20">
27 <div className="col-span-12">
28 <div className="flex flex-col space-y-12 md:space-y-20">
29 <div className="flex h-full flex-col justify-between">
30 <div className="space-y-2">
31 <h2>Welcome to your new project</h2>
32 <p className="text-base text-foreground-light">
33 Your project has been deployed on its own instance, with its own API all set up and
34 ready to use.
35 </p>
36 </div>
37 </div>
38
39 <div className="grid grid-cols-12 gap-4">
40 <div className="col-span-12 flex flex-col justify-center space-y-8 lg:col-span-7">
41 <div className="space-y-2">
42 <h2>Build out your database</h2>
43 <p className="text-base text-foreground-light">
44 Start building your app by creating tables and inserting data. Our Table Editor
45 makes Postgres as easy to use as a spreadsheet, but there's also our SQL Editor if
46 you need something more.
47 </p>
48 </div>
49 <div className="flex flex-wrap items-center gap-2">
50 <Button asChild type="default" icon={<TableEditor strokeWidth={1.5} />}>
51 <EditorIndexPageLink projectRef={ref}>Table Editor</EditorIndexPageLink>
52 </Button>
53 <Button asChild type="default" icon={<SqlEditor strokeWidth={1.5} />}>
54 <Link href={`/project/${ref}/sql/new`}>SQL Editor</Link>
55 </Button>
56 <Button asChild type="default" icon={<ExternalLink />}>
57 <Link href={`${DOCS_URL}/guides/database`} target="_blank" rel="noreferrer">
58 About Database
59 </Link>
60 </Button>
61 </div>
62 </div>
63 <div className="col-span-12 lg:col-span-5">
64 <GetStartedHero />
65 </div>
66 </div>
67
68 {authEnabled && edgeFunctionsEnabled && storageEnabled && (
69 <div className="flex h-full flex-col justify-between space-y-6">
70 <div className="max-w-2xl space-y-2">
71 <h2>Explore our other products</h2>
72 <p className="text-base text-foreground-light">
73 Briven provides all the backend features you need to build a product. You can
74 use it completely, or just the features you need.
75 </p>
76 </div>
77 <div className="grid grid-cols-1 md:grid-cols-2 md:gap-4 md:gap-y-0 xl:grid-cols-4">
78 <Panel>
79 <Panel.Content className="flex flex-col space-y-4 md:px-3">
80 <div className="flex items-center space-x-3">
81 <div className="rounded-sm bg-surface-300 p-1.5 text-foreground-light shadow-xs">
82 <Auth size={16} strokeWidth={1.5} />
83 </div>
84 <h5>Authentication</h5>
85 </div>
86 <div className="flex grow md:min-h-[50px] xl:min-h-[75px]">
87 <p className="text-sm text-foreground-light">
88 A complete user management system that works without any additional tools.
89 </p>
90 </div>
91 <div className="flex items-center space-x-2">
92 <Button type="default" asChild>
93 <Link href={`/project/${ref}/auth/users`}>Explore Auth</Link>
94 </Button>
95
96 <Button
97 className="translate-y-px"
98 icon={<ExternalLink />}
99 type="default"
100 asChild
101 >
102 <Link href={`${DOCS_URL}/guides/auth`} target="_blank" rel="noreferrer">
103 About Auth
104 </Link>
105 </Button>
106 </div>
107 </Panel.Content>
108 </Panel>
109
110 <Panel>
111 <Panel.Content className="flex flex-col space-y-4 md:px-3">
112 <div className="flex items-center space-x-3">
113 <div className="rounded-sm bg-surface-300 p-1.5 text-foreground-light shadow-xs">
114 <Storage size={16} strokeWidth={1.5} />
115 </div>
116 <h5>Storage</h5>
117 </div>
118 <div className="flex md:min-h-[50px] xl:min-h-[75px]">
119 <p className="text-sm text-foreground-light">
120 Store, organize, and serve any file types of any size from multiple buckets.
121 </p>
122 </div>
123 <div className="flex items-center space-x-2">
124 <Button type="default" asChild>
125 <Link href={`/project/${ref}/storage/buckets`}>Explore Storage</Link>
126 </Button>
127
128 <Button
129 className="translate-y-px"
130 icon={<ExternalLink />}
131 type="default"
132 asChild
133 >
134 <Link href={`${DOCS_URL}/guides/storage`} target="_blank" rel="noreferrer">
135 About Storage
136 </Link>
137 </Button>
138 </div>
139 </Panel.Content>
140 </Panel>
141
142 <Panel>
143 <Panel.Content className="flex flex-col space-y-4 md:px-3">
144 <div className="flex items-center space-x-3">
145 <div className="rounded-sm bg-surface-300 p-1.5 text-foreground-light shadow-xs">
146 <EdgeFunctions size={16} strokeWidth={1.5} />
147 </div>
148 <h5>Edge Functions</h5>
149 </div>
150 <div className="flex md:min-h-[50px] xl:min-h-[75px]">
151 <p className="text-sm text-foreground-light">
152 Write custom code without deploying or scaling servers, with fast deploy
153 times and low latency.
154 </p>
155 </div>
156 <div className="flex items-center space-x-2">
157 <Button type="default" asChild>
158 <Link href={`/project/${ref}/functions`}>Explore Functions</Link>
159 </Button>
160 <Button
161 className="translate-y-px"
162 icon={<ExternalLink />}
163 type="default"
164 asChild
165 >
166 <Link
167 href={`${DOCS_URL}/guides/functions`}
168 target="_blank"
169 rel="noreferrer"
170 >
171 About Functions
172 </Link>
173 </Button>
174 </div>
175 </Panel.Content>
176 </Panel>
177 <Panel>
178 <Panel.Content className="flex flex-col space-y-4 md:px-3">
179 <div className="flex items-center space-x-4">
180 <div className="rounded-sm bg-surface-300 p-1.5 text-foreground-light shadow-xs">
181 <Realtime size={16} strokeWidth={1.5} />
182 </div>
183 <h5>Realtime</h5>
184 </div>
185 <div className="flex md:min-h-[50px] xl:min-h-[75px]">
186 <p className="text-sm text-foreground-light">
187 Listen to your PostgreSQL database in realtime via websockets.
188 </p>
189 </div>
190 <div className="flex items-center space-x-2">
191 <Button type="default" asChild>
192 <Link href={`/project/${ref}/realtime/inspector`}>Explore Realtime</Link>
193 </Button>
194 <Button
195 className="translate-y-px"
196 icon={<ExternalLink />}
197 type="default"
198 asChild
199 >
200 <Link href={`${DOCS_URL}/guides/realtime`} target="_blank" rel="noreferrer">
201 About Realtime
202 </Link>
203 </Button>
204 </div>
205 </Panel.Content>
206 </Panel>
207 </div>
208 </div>
209 )}
210 </div>
211 </div>
212
213 <div className="col-span-12 lg:col-span-4">
214 <div className="space-y-6">
215 <div className="space-y-2">
216 <h2>Connect to your project</h2>
217 <p className="text-base text-foreground-light text-balance">
218 Interact with your database through the{' '}
219 <InlineLink href={`${DOCS_URL}/reference`}>Briven client libraries</InlineLink> and
220 your API keys.
221 </p>
222 </div>
223 <div className="flex items-center space-x-2">
224 <Button asChild type="default" icon={<Settings size={16} strokeWidth={1.5} />}>
225 <Link href={`/project/${ref}/settings/api-keys`}>API Keys settings</Link>
226 </Button>
227 <DocsButton href={`${DOCS_URL}/guides/database/api`} />
228 </div>
229 </div>
230 </div>
231 <div className="col-span-12 lg:col-span-8">
232 <APIKeys />
233 </div>
234 </div>
235 )
236}