mirror of
https://github.com/supabase/supabase.git
synced 2026-10-15 22:29:11 +03:00
b91532f6c7
* migrate some www components to tokens * consolidate InteractiveShimmerCard to Panel component * update tokens in blog * update tokens in careers page * update tokens in customers section * update tokens in open-source section * update tokens in Realtime page * update tokens in Storage and Vector * update tokens in SplitCodeBlockCarousel * update tokens in PGCharts * remove unused css files * update tokens in Card * update tokens in Pricing page * clean up priving page imports * remove hardcoded theme vars * migrate first half of defaultTheme.ts to tokens * migrate second half of defaultTheme.ts to tokens * improve inputs * add foreground to text-light and text-lighter * add foreground to text-light and text-lighter * migrate docs components with styling tokens * migrate docs components with styling tokens * fix broken Repos component * fix broken classes in blog * update tokens on Button and other components * update tokens on IconPanel * update studio main layout base styling tokens * update tokens across studio, docs and www * update tokens across studio, docs and www * update ui/Panel to styling tokens * update ExampleProject and TableEditorMenu tokens * www vector page tokens * update studio UI tokens * update other studio UI tokens * update more studio UI tokens * change tokens here, change tokens there * finish updating colors with tokens variables * add gui sandbox for theme experimentation * use common package for www, docs and studio and fix Command K tokens * provide light mode default tokens options * fix conflict leftover * update loading line * fix className typo * fix prettier * update themeSandbox preset default values * fix text-background0 * prettier * update warningBanner with warning color * switch all border-border with border-default * improve border-secondary and foreground-muted in light mode * force ring color on toggle * fix button bg color and border-muted light token * fix input bg color * fix dark button hover * fix homepage product card * fix code-hike table header colors * button dark border * remove tabIndex leftover from homepage main ctas --------- Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com> Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
302 lines
12 KiB
TypeScript
302 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 { useFlag, useIsFeatureEnabled } from 'hooks'
|
|
import APIKeys from './APIKeys'
|
|
import GetStartedHero from './GetStartedHero'
|
|
|
|
const NewProjectPanel = () => {
|
|
const router = useRouter()
|
|
const { ref } = router.query
|
|
const supabaseAIEnabled = useFlag('sqlEditorSupabaseAI')
|
|
|
|
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={
|
|
supabaseAIEnabled
|
|
? `/project/${ref}/sql/new`
|
|
: `/project/${ref}/sql/templates`
|
|
}
|
|
>
|
|
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
|