mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
Update GetStartedPanel
This commit is contained in:
Joshen Lim committed
1 parent
b57dbdf449
commit
91d69fb801
5 files changed
+428
-148
No files matched your search
@@ -0,0 +1,20 @@
|
||||
import Panel from 'components/ui/Panel'
|
||||
|
||||
const APIKeys = () => {
|
||||
return (
|
||||
<Panel
|
||||
title={
|
||||
<div className="space-y-3">
|
||||
<h5 className="text-base">Project API</h5>
|
||||
<p className="text-sm text-scale-1000">
|
||||
Your API is secured behind an API gateway which requires an API Key for every request.
|
||||
<br />
|
||||
You can use the keys below to use Supabase client libraries.
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
></Panel>
|
||||
)
|
||||
}
|
||||
|
||||
export default APIKeys
|
||||
@@ -0,0 +1,172 @@
|
||||
const GetStartedHero = () => {
|
||||
return (
|
||||
<div className="col-span-5">
|
||||
<div className="w-full h-full relative pointer-events-none">
|
||||
<div className="w-[400px] h-[180px] bg-scale-100 border border-scale-500 rounded-t px-4 py-3 space-y-1">
|
||||
<div className="text-xs font-mono space-x-4 flex items-center">
|
||||
<span className="text-scale-1000">1</span>
|
||||
<p className="text-blue-900">
|
||||
create table <span className="text-scale-1200">countries {`(`}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-xs font-mono space-x-8 flex items-center">
|
||||
<span className="text-scale-1000">2</span>
|
||||
<p className="text-scale-1200">
|
||||
id <span className="text-blue-900">bigint generated by default</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-xs font-mono space-x-8 flex items-center">
|
||||
<span className="text-scale-1000">3</span>
|
||||
<p className="text-scale-1200">
|
||||
name <span className="text-blue-900">text</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-xs font-mono space-x-8 flex items-center">
|
||||
<span className="text-scale-1000">4</span>
|
||||
<p className="text-scale-1200">
|
||||
iso2 <span className="text-blue-900">text not null</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-xs font-mono space-x-8 flex items-center">
|
||||
<span className="text-scale-1000">5</span>
|
||||
<p className="text-scale-1200">
|
||||
iso3 <span className="text-blue-900">text</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-xs font-mono space-x-8 flex items-center">
|
||||
<span className="text-scale-1000">6</span>
|
||||
<p className="text-scale-1200">
|
||||
local_name <span className="text-blue-900">text</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-xs font-mono space-x-8 flex items-center">
|
||||
<span className="text-scale-1000">7</span>
|
||||
<p className="text-scale-1200">
|
||||
continent <span className="text-blue-900">continents</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-xs font-mono space-x-4 flex items-center">
|
||||
<span className="text-scale-1000">8</span>
|
||||
<p className="text-blue-900">{`);`}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[320px] h-[220px] bg-scale-300 border border-scale-500 absolute right-0 -top-[40px] z-10 rounded-t overflow-y-hidden">
|
||||
<div className="h-[24px] flex items-center border-b border-scale-500">
|
||||
<div className="w-[10%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<div className="w-3 h-3 rounded border border-scale-600" />
|
||||
</div>
|
||||
<div className="w-[20%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<p className="text-xs">id</p>
|
||||
</div>
|
||||
<div className="w-[40%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<p className="text-xs">name</p>
|
||||
</div>
|
||||
<div className="w-[30%] h-full flex items-center px-2">
|
||||
<p className="text-xs">iso2</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[30px] flex items-center bg-scale-200 border-b border-scale-500">
|
||||
<div className="w-[10%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<div className="w-3 h-3 rounded border border-scale-600" />
|
||||
</div>
|
||||
<div className="w-[20%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<p className="text-xs">1</p>
|
||||
</div>
|
||||
<div className="w-[40%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<p className="text-xs">Angola</p>
|
||||
</div>
|
||||
<div className="w-[30%] h-full flex items-center px-2">
|
||||
<p className="text-xs">AO</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[30px] flex items-center bg-scale-200 border-b border-scale-500">
|
||||
<div className="w-[10%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<div className="w-3 h-3 rounded border border-scale-600" />
|
||||
</div>
|
||||
<div className="w-[20%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<p className="text-xs">2</p>
|
||||
</div>
|
||||
<div className="w-[40%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<p className="text-xs">Timor-Leste</p>
|
||||
</div>
|
||||
<div className="w-[30%] h-full flex items-center px-2">
|
||||
<p className="text-xs">TL</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[30px] flex items-center bg-scale-200 border-b border-scale-500">
|
||||
<div className="w-[10%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<div className="w-3 h-3 rounded border border-scale-600" />
|
||||
</div>
|
||||
<div className="w-[20%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<p className="text-xs">3</p>
|
||||
</div>
|
||||
<div className="w-[40%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<p className="text-xs">Serbia</p>
|
||||
</div>
|
||||
<div className="w-[30%] h-full flex items-center px-2">
|
||||
<p className="text-xs">RS</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[30px] flex items-center bg-scale-200 border-b border-scale-500">
|
||||
<div className="w-[10%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<div className="w-3 h-3 rounded border border-scale-600" />
|
||||
</div>
|
||||
<div className="w-[20%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<p className="text-xs">4</p>
|
||||
</div>
|
||||
<div className="w-[40%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<p className="text-xs">Bahamas</p>
|
||||
</div>
|
||||
<div className="w-[30%] h-full flex items-center px-2">
|
||||
<p className="text-xs">BS</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[30px] flex items-center bg-scale-200 border-b border-scale-500">
|
||||
<div className="w-[10%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<div className="w-3 h-3 rounded border border-scale-600" />
|
||||
</div>
|
||||
<div className="w-[20%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<p className="text-xs">5</p>
|
||||
</div>
|
||||
<div className="w-[40%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<p className="text-xs">Chile</p>
|
||||
</div>
|
||||
<div className="w-[30%] h-full flex items-center px-2">
|
||||
<p className="text-xs">CL</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[30px] flex items-center bg-scale-200 border-b border-scale-500">
|
||||
<div className="w-[10%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<div className="w-3 h-3 rounded border border-scale-600" />
|
||||
</div>
|
||||
<div className="w-[20%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<p className="text-xs">6</p>
|
||||
</div>
|
||||
<div className="w-[40%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<p className="text-xs">Denmark</p>
|
||||
</div>
|
||||
<div className="w-[30%] h-full flex items-center px-2">
|
||||
<p className="text-xs">DK</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[30px] flex items-center bg-scale-200 border-b border-scale-500">
|
||||
<div className="w-[10%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<div className="w-3 h-3 rounded border border-scale-600" />
|
||||
</div>
|
||||
<div className="w-[20%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<p className="text-xs">7</p>
|
||||
</div>
|
||||
<div className="w-[40%] h-full flex items-center border-r border-scale-500 px-2">
|
||||
<p className="text-xs">Singapore</p>
|
||||
</div>
|
||||
<div className="w-[30%] h-full flex items-center px-2">
|
||||
<p className="text-xs">SG</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default GetStartedHero
|
||||
@@ -1,127 +0,0 @@
|
||||
import { FC } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import { Button, IconDatabase, IconKey, IconArchive } from '@supabase/ui'
|
||||
import Panel from 'components/ui/Panel'
|
||||
|
||||
interface Props {}
|
||||
|
||||
const GetStartedPanel: FC<Props> = ({}) => {
|
||||
const router = useRouter()
|
||||
const { ref } = router.query
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col space-y-20">
|
||||
<div className="flex flex-col justify-between h-full space-y-6">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-xl text-scale-1200">Welcome to your new project</h3>
|
||||
<p className="text-base text-scale-1000">
|
||||
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 flex">
|
||||
<div className="col-span-7 space-y-2">
|
||||
<h4 className="text-lg text-scale-1200">Get started by building out your database</h4>
|
||||
<p className="text-base text-scale-1000">
|
||||
Start building your app by creating tables and inserting some 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="col-span-1" />
|
||||
<div className="col-span-4">Hello</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 lg:gap-8">
|
||||
<Panel>
|
||||
<Panel.Content className=" flex flex-col space-y-4 lg:h-40">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="bg-scale-600 text-scale-1000 shadow-sm rounded p-1.5">
|
||||
<IconDatabase strokeWidth={2} size={16} />
|
||||
</div>
|
||||
<h5>Database</h5>
|
||||
</div>
|
||||
<div className="flex flex-grow">
|
||||
<p className="text-scale-1000 text-sm">
|
||||
Supabase is built on top of Postgres, an extremely scalable Relational Database.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-x-2">
|
||||
<Link href={`/project/${ref}/editor`}>
|
||||
<a>
|
||||
<Button type="default">Table editor</Button>
|
||||
</a>
|
||||
</Link>
|
||||
<Link href={`/project/${ref}/sql`}>
|
||||
<a>
|
||||
<Button type="default">SQL editor</Button>
|
||||
</a>
|
||||
</Link>
|
||||
<a href="https://supabase.com/docs/guides/database" target="_blank">
|
||||
<Button type="text">Documentation</Button>
|
||||
</a>
|
||||
</div>
|
||||
</Panel.Content>
|
||||
</Panel>
|
||||
|
||||
<Panel className="">
|
||||
<Panel.Content className=" flex flex-col space-y-4 lg:h-40">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="bg-scale-600 text-scale-1000 shadow-sm rounded p-1.5">
|
||||
<IconKey strokeWidth={2} size={16} />
|
||||
</div>
|
||||
<h5>Auth</h5>
|
||||
</div>
|
||||
<div className="flex flex-grow">
|
||||
<p className="text-scale-1000 text-sm">
|
||||
Supabase makes it simple to manage your users.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-x-2">
|
||||
<Link href={`/project/${ref}/auth/users`}>
|
||||
<a>
|
||||
<Button type="default">Try Auth</Button>
|
||||
</a>
|
||||
</Link>
|
||||
<a href="https://supabase.com/docs/guides/auth" target="_blank">
|
||||
<Button type="text">Documentation</Button>
|
||||
</a>
|
||||
</div>
|
||||
</Panel.Content>
|
||||
</Panel>
|
||||
|
||||
<Panel>
|
||||
<Panel.Content className=" flex flex-col space-y-4 lg:h-40">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="bg-scale-600 text-scale-1000 shadow-sm rounded p-1.5">
|
||||
<IconArchive strokeWidth={2} size={16} />
|
||||
</div>
|
||||
<h5>Storage</h5>
|
||||
</div>
|
||||
<div className="flex flex-grow">
|
||||
<p className="text-scale-1000 text-sm">
|
||||
Store and serve large files from multiple buckets.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-x-2">
|
||||
<Link href={`/project/${ref}/storage/buckets`}>
|
||||
<a>
|
||||
<Button type="default">Try Storage</Button>
|
||||
</a>
|
||||
</Link>
|
||||
<a href="https://supabase.com/docs/guides/storage" target="_blank">
|
||||
<Button type="text">Documentation</Button>
|
||||
</a>
|
||||
</div>
|
||||
</Panel.Content>
|
||||
</Panel>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default GetStartedPanel
|
||||
@@ -1,28 +1,245 @@
|
||||
import { DisplayApiSettings, DisplayConfigSettings } from 'components/ui/ProjectSettings'
|
||||
import Link from 'next/link'
|
||||
import { FC } from 'react'
|
||||
import GetStartedPanel from './GetStartedPanel'
|
||||
import SVG from 'react-inlinesvg'
|
||||
import { useRouter } from 'next/router'
|
||||
import { Button, IconKey, IconArchive, IconExternalLink, IconCode } from '@supabase/ui'
|
||||
|
||||
import Panel from 'components/ui/Panel'
|
||||
import APIKeys from './APIKeys'
|
||||
import GetStartedHero from './GetStartedHero'
|
||||
import { DisplayApiSettings, DisplayConfigSettings } from 'components/ui/ProjectSettings'
|
||||
|
||||
interface Props {}
|
||||
|
||||
const NewProjectPanel: FC<Props> = ({}) => (
|
||||
<div className="grid grid-cols-12 gap-8">
|
||||
<div className="col-span-12">
|
||||
<GetStartedPanel />
|
||||
</div>
|
||||
<div className="col-span-4">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-xl text-scale-1200">Connecting to your new project</h3>
|
||||
const NewProjectPanel: FC<Props> = ({}) => {
|
||||
const router = useRouter()
|
||||
const { ref } = router.query
|
||||
|
||||
<p className="lg:max-w-sm text-scale-1000">
|
||||
Your project has API keys for interacting with the database via Supabase client libraries.
|
||||
</p>
|
||||
return (
|
||||
<div className="grid grid-cols-12 gap-20">
|
||||
<div className="col-span-12">
|
||||
<div className="flex flex-col space-y-20">
|
||||
<div className="flex flex-col justify-between h-full">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-xl text-scale-1200">Welcome to your new project</h3>
|
||||
<p className="text-base text-scale-1100">
|
||||
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 flex gap-4">
|
||||
<div className="col-span-7 space-y-8 flex flex-col justify-center">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-xl text-scale-1200">
|
||||
Get started by building out your database
|
||||
</h3>
|
||||
<p className="text-base text-scale-1100">
|
||||
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 items-center space-x-2">
|
||||
<Link href={`/project/${ref}/editor`}>
|
||||
<a>
|
||||
<Button
|
||||
type="default"
|
||||
icon={
|
||||
<SVG
|
||||
src="/img/table-editor.svg"
|
||||
style={{ width: `${14}px`, height: `${14}px` }}
|
||||
preProcessor={(code) =>
|
||||
code.replace(/svg/, 'svg class="m-auto text-color-inherit"')
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
Table editor
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
<Link href={`/project/${ref}/sql`}>
|
||||
<a>
|
||||
<Button
|
||||
type="default"
|
||||
icon={
|
||||
<SVG
|
||||
src="/img/sql-editor.svg"
|
||||
style={{ width: `${14}px`, height: `${14}px` }}
|
||||
preProcessor={(code) =>
|
||||
code.replace(/svg/, 'svg class="m-auto text-color-inherit"')
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
SQL editor
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="https://supabase.com/docs/guides/database">
|
||||
<a>
|
||||
<Button type="default" icon={<IconExternalLink size={14} />}>
|
||||
About Database
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<GetStartedHero />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-between h-full space-y-6">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-xl text-scale-1200">Explore our other products</h3>
|
||||
<p className="text-base text-scale-1100">
|
||||
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 lg:grid-cols-3 lg:gap-8">
|
||||
<Panel>
|
||||
<Panel.Content className="flex flex-col space-y-4 lg:h-40">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="bg-scale-600 text-scale-1000 shadow-sm rounded p-1.5">
|
||||
<IconKey strokeWidth={2} size={16} />
|
||||
</div>
|
||||
<h5>Authentication</h5>
|
||||
</div>
|
||||
<div className="flex flex-grow">
|
||||
<p className="text-scale-1000 text-sm">
|
||||
A complete user management system that works without any additional tools.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-x-2 flex items-center">
|
||||
<Link href={`/project/${ref}/auth/users`}>
|
||||
<a>
|
||||
<Button type="default">Explore Auth</Button>
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="https://supabase.com/docs/guides/auth">
|
||||
<a>
|
||||
<Button
|
||||
className="translate-y-[1px]"
|
||||
icon={<IconExternalLink size={14} />}
|
||||
type="default"
|
||||
>
|
||||
About Auth
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</Panel.Content>
|
||||
</Panel>
|
||||
|
||||
<Panel>
|
||||
<Panel.Content className="flex flex-col space-y-4 lg:h-40">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="bg-scale-600 text-scale-1000 shadow-sm rounded p-1.5">
|
||||
<IconArchive strokeWidth={2} size={16} />
|
||||
</div>
|
||||
<h5>Storage</h5>
|
||||
</div>
|
||||
<div className="flex flex-grow">
|
||||
<p className="text-scale-1000 text-sm">
|
||||
Store, organize, and serve any file types of any size from multiple buckets.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-x-2 flex items-center">
|
||||
<Link href={`/project/${ref}/storage/buckets`}>
|
||||
<a>
|
||||
<Button type="default">Explore Storage</Button>
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="https://supabase.com/docs/guides/storage">
|
||||
<a>
|
||||
<Button
|
||||
className="translate-y-[1px]"
|
||||
icon={<IconExternalLink size={14} />}
|
||||
type="default"
|
||||
>
|
||||
About Storage
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</Panel.Content>
|
||||
</Panel>
|
||||
|
||||
<Panel>
|
||||
<Panel.Content className="flex flex-col space-y-4 lg:h-40">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="bg-scale-600 text-scale-1000 shadow-sm rounded p-1.5">
|
||||
<IconCode strokeWidth={2} size={16} />
|
||||
</div>
|
||||
<h5>Edge Functions</h5>
|
||||
</div>
|
||||
<div className="flex flex-grow">
|
||||
<p className="text-scale-1000 text-sm">
|
||||
Write custom code without deploying or scaling servers, with fast deploy times
|
||||
and low latency.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-x-2 flex items-center">
|
||||
<Link href={`/project/${ref}/functions`}>
|
||||
<a>
|
||||
<Button type="default">Explore Functions</Button>
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="https://supabase.com/docs/guides/functions">
|
||||
<a>
|
||||
<Button
|
||||
className="translate-y-[1px]"
|
||||
icon={<IconExternalLink size={14} />}
|
||||
type="default"
|
||||
>
|
||||
About Functions
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</Panel.Content>
|
||||
</Panel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-4">
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-xl text-scale-1200">Connecting to your new project</h3>
|
||||
<p className="lg:max-w-sm text-scale-1100">
|
||||
Interact with your database through the Supabase client libraries with your API keys.
|
||||
</p>
|
||||
<p className="lg:max-w-sm text-scale-1100">
|
||||
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">
|
||||
<Link href={`/project/${ref}/settings/api`}>
|
||||
<a>
|
||||
<Button type="default">View API settings</Button>
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="https://supabase.com/docs/guides/api">
|
||||
<a>
|
||||
<Button className="translate-y-[1px]" type="default" icon={<IconExternalLink />}>
|
||||
About APIs
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-8">
|
||||
<APIKeys />
|
||||
<DisplayApiSettings />
|
||||
<DisplayConfigSettings />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-8">
|
||||
<DisplayApiSettings />
|
||||
<DisplayConfigSettings />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
export default NewProjectPanel
|
||||
@@ -9,10 +9,8 @@ import {
|
||||
IconUsers,
|
||||
} from '@supabase/ui'
|
||||
import SVG from 'react-inlinesvg'
|
||||
import { PermissionAction } from '@supabase/shared-types/out/constants'
|
||||
|
||||
import { ProjectBase } from 'types'
|
||||
import { checkPermissions } from 'hooks'
|
||||
import { Route } from 'components/ui/ui.types'
|
||||
import { IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'
|
||||
|
||||
|
||||
Reference in new issue
Block a user