mirror of
https://github.com/supabase/supabase.git
synced 2026-07-07 03:34:27 +08:00
293 lines
12 KiB
TypeScript
293 lines
12 KiB
TypeScript
import Link from 'next/link'
|
|
import { useRouter } from 'next/router'
|
|
import SVG from 'react-inlinesvg'
|
|
import { Button, IconActivity, IconArchive, IconCode, IconExternalLink, IconKey } from 'ui'
|
|
|
|
import Panel from 'components/ui/Panel'
|
|
import { useIsFeatureEnabled } from 'hooks'
|
|
import APIKeys from './APIKeys'
|
|
import GetStartedHero from './GetStartedHero'
|
|
|
|
const NewProjectPanel = () => {
|
|
const router = useRouter()
|
|
const { ref } = router.query
|
|
|
|
const {
|
|
projectAuthAll: authEnabled,
|
|
projectEdgeFunctionAll: edgeFunctionsEnabled,
|
|
projectStorageAll: storageEnabled,
|
|
} = useIsFeatureEnabled(['project_auth:all', 'project_edge_function:all', 'project_storage:all'])
|
|
|
|
return (
|
|
<div className="grid grid-cols-12 gap-4 lg:gap-20">
|
|
<div className="col-span-12">
|
|
<div className="flex flex-col space-y-20">
|
|
<div className="flex h-full flex-col justify-between">
|
|
<div className="space-y-2">
|
|
<h3 className="text-xl text-foreground">Welcome to your new project</h3>
|
|
<p className="text-base text-foreground-light">
|
|
Your project has been deployed on its own instance, with its own API all set up and
|
|
ready to use.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-12 gap-4">
|
|
<div className="col-span-12 flex flex-col justify-center space-y-8 lg:col-span-7">
|
|
<div className="space-y-2">
|
|
<h3 className="text-xl text-foreground">
|
|
Get started by building out your database
|
|
</h3>
|
|
<p className="text-base text-foreground-light">
|
|
Start building your app by creating tables and inserting data. Our Table Editor
|
|
makes Postgres as easy to use as a spreadsheet, but there's also our SQL Editor if
|
|
you need something more.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Button
|
|
asChild
|
|
type="default"
|
|
icon={
|
|
<SVG
|
|
src={`${router.basePath}/img/table-editor.svg`}
|
|
style={{ width: `${14}px`, height: `${14}px` }}
|
|
preProcessor={(code) =>
|
|
code.replace(/svg/, 'svg class="m-auto text-color-inherit"')
|
|
}
|
|
/>
|
|
}
|
|
>
|
|
<Link href={`/project/${ref}/editor`}>Table Editor</Link>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
type="default"
|
|
icon={
|
|
<SVG
|
|
src={`${router.basePath}/img/sql-editor.svg`}
|
|
style={{ width: `${14}px`, height: `${14}px` }}
|
|
preProcessor={(code) =>
|
|
code.replace(/svg/, 'svg class="m-auto text-color-inherit"')
|
|
}
|
|
/>
|
|
}
|
|
>
|
|
<Link href={`/project/${ref}/sql/new`}>SQL editor</Link>
|
|
</Button>
|
|
<Button asChild type="default" icon={<IconExternalLink size={14} />}>
|
|
<Link
|
|
href="https://supabase.com/docs/guides/database"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
About Database
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="col-span-12 lg:col-span-5">
|
|
<GetStartedHero />
|
|
</div>
|
|
</div>
|
|
|
|
{authEnabled && edgeFunctionsEnabled && storageEnabled && (
|
|
<div className="flex h-full flex-col justify-between space-y-6">
|
|
<div className="max-w-2xl space-y-2">
|
|
<h3 className="text-xl text-foreground">Explore our other products</h3>
|
|
<p className="text-base text-foreground-light">
|
|
Supabase provides all the backend features you need to build a product. You can
|
|
use it completely, or just the features you need.
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-4 md:gap-y-0 xl:grid-cols-4">
|
|
<Panel>
|
|
<Panel.Content className="flex flex-col space-y-4 md:px-3">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="rounded bg-surface-300 p-1.5 text-foreground-light shadow-sm">
|
|
<IconKey strokeWidth={2} size={16} />
|
|
</div>
|
|
<h5>Authentication</h5>
|
|
</div>
|
|
<div className="flex flex-grow md:min-h-[50px] xl:min-h-[75px]">
|
|
<p className="text-sm text-foreground-light">
|
|
A complete user management system that works without any additional tools.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Button type="default" asChild>
|
|
<Link href={`/project/${ref}/auth/users`}>Explore Auth</Link>
|
|
</Button>
|
|
|
|
<Button
|
|
className="translate-y-[1px]"
|
|
icon={<IconExternalLink size={14} />}
|
|
type="default"
|
|
asChild
|
|
>
|
|
<Link
|
|
href="https://supabase.com/docs/guides/auth"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
About Auth
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</Panel.Content>
|
|
</Panel>
|
|
|
|
<Panel>
|
|
<Panel.Content className="flex flex-col space-y-4 md:px-3">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="rounded bg-surface-300 p-1.5 text-foreground-light shadow-sm">
|
|
<IconArchive strokeWidth={2} size={16} />
|
|
</div>
|
|
<h5>Storage</h5>
|
|
</div>
|
|
<div className="flex md:min-h-[50px] xl:min-h-[75px]">
|
|
<p className="text-sm text-foreground-light">
|
|
Store, organize, and serve any file types of any size from multiple buckets.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Button type="default" asChild>
|
|
<Link href={`/project/${ref}/storage/buckets`}>Explore Storage</Link>
|
|
</Button>
|
|
|
|
<Button
|
|
className="translate-y-[1px]"
|
|
icon={<IconExternalLink size={14} />}
|
|
type="default"
|
|
asChild
|
|
>
|
|
<Link
|
|
href="https://supabase.com/docs/guides/storage"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
About Storage
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</Panel.Content>
|
|
</Panel>
|
|
|
|
<Panel>
|
|
<Panel.Content className="flex flex-col space-y-4 md:px-3">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="rounded bg-surface-300 p-1.5 text-foreground-light shadow-sm">
|
|
<IconCode strokeWidth={2} size={16} />
|
|
</div>
|
|
<h5>Edge Functions</h5>
|
|
</div>
|
|
<div className="flex md:min-h-[50px] xl:min-h-[75px]">
|
|
<p className="text-sm text-foreground-light">
|
|
Write custom code without deploying or scaling servers, with fast deploy
|
|
times and low latency.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Button type="default" asChild>
|
|
<Link href={`/project/${ref}/functions`}>Explore Functions</Link>
|
|
</Button>
|
|
<Button
|
|
className="translate-y-[1px]"
|
|
icon={<IconExternalLink size={14} />}
|
|
type="default"
|
|
asChild
|
|
>
|
|
<Link
|
|
href="https://supabase.com/docs/guides/functions"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
About Functions
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</Panel.Content>
|
|
</Panel>
|
|
<Panel>
|
|
<Panel.Content className="flex flex-col space-y-4 md:px-3">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="rounded bg-surface-300 p-1.5 text-foreground-light shadow-sm">
|
|
<IconActivity strokeWidth={2} size={16} />
|
|
</div>
|
|
<h5>Realtime</h5>
|
|
</div>
|
|
<div className="flex md:min-h-[50px] xl:min-h-[75px]">
|
|
<p className="text-sm text-foreground-light">
|
|
Listen to your PostgreSQL database in realtime via websockets.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Button
|
|
className="translate-y-[1px]"
|
|
icon={<IconExternalLink size={14} />}
|
|
type="default"
|
|
asChild
|
|
>
|
|
<Link
|
|
href="https://supabase.com/docs/guides/realtime"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
About Realtime
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</Panel.Content>
|
|
</Panel>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-span-12 lg:col-span-4">
|
|
<div className="space-y-6">
|
|
<div className="space-y-2">
|
|
<h3 className="text-xl text-foreground">Connecting to your new project</h3>
|
|
<p className="text-base text-foreground-light lg:max-w-sm">
|
|
Interact with your database through the{' '}
|
|
<Link href="https://supabase.com/docs/reference" className="text-brand">
|
|
Supabase client libraries
|
|
</Link>{' '}
|
|
with your API keys.
|
|
</p>
|
|
<p className="text-base text-foreground-light lg:max-w-sm">
|
|
More information about your project's keys can be found in your project's API
|
|
settings.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Button asChild type="default">
|
|
<Link href={`/project/${ref}/settings/api`}>View API settings</Link>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
className="translate-y-[1px]"
|
|
type="default"
|
|
icon={<IconExternalLink />}
|
|
>
|
|
<Link
|
|
href="https://supabase.com/docs/guides/database/api"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
About APIs
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-span-12 lg:col-span-8">
|
|
<APIKeys />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default NewProjectPanel
|