mirror of
https://github.com/supabase/supabase.git
synced 2026-07-06 14:44:23 +08:00
320 lines
12 KiB
TypeScript
320 lines
12 KiB
TypeScript
import { Badge, Button, IconArrowUpRight, IconX, Tabs } from '@supabase/ui'
|
||
// data
|
||
import ApiExamplesData from 'data/products/database/api-examples'
|
||
import ExtensionsExamplesData from 'data/products/database/extensions-examples'
|
||
import SqlViewCarouselData from 'data/products/database/sql-view-carousel.json'
|
||
import TableViewCarouselData from 'data/products/database/table-view-carousel.json'
|
||
import Solutions from 'data/Solutions.json'
|
||
import { NextSeo } from 'next-seo'
|
||
import Image from 'next/image'
|
||
import Link from 'next/link'
|
||
import { useRouter } from 'next/router'
|
||
import { useState } from 'react'
|
||
import { Swiper, SwiperSlide } from 'swiper/react'
|
||
// Import Swiper styles
|
||
import 'swiper/swiper.min.css'
|
||
import ImageCarousel from '~/components/Carousels/ImageCarousel'
|
||
import SplitCodeBlockCarousel from '~/components/Carousels/SplitCodeBlockCarousel'
|
||
import FeatureColumn from '~/components/FeatureColumn'
|
||
import FloatingIcons from '~/components/FloatingIcons'
|
||
import DefaultLayout from '~/components/Layouts/Default'
|
||
import SectionContainer from '~/components/Layouts/SectionContainer'
|
||
import ProductIcon from '~/components/ProductIcon'
|
||
import APISection from '~/components/Sections/APISection'
|
||
import GithubExamples from '~/components/Sections/GithubExamples'
|
||
import ProductHeader from '~/components/Sections/ProductHeader'
|
||
import TweetCard from '~/components/TweetCard'
|
||
|
||
// install Swiper's Controller component
|
||
// SwiperCore.use([Controller])
|
||
|
||
function Database() {
|
||
// base path for images
|
||
const { basePath } = useRouter()
|
||
|
||
const [dashboardSwiper, setDashboardSwiper] = useState(undefined)
|
||
const [dashboardSwiperActiveIndex, setDashboardSwiperActiveIndex] = useState(0)
|
||
|
||
function handleDashboardSwiperNav(e: number) {
|
||
setDashboardSwiperActiveIndex(e)
|
||
// @ts-ignore
|
||
dashboardSwiper.slideTo(e)
|
||
}
|
||
|
||
const meta_title = 'Database | Open source SQL Database'
|
||
const meta_description =
|
||
'With supabase’s APIs and easy to use dashboard, it makes designing relational databases easy.'
|
||
|
||
return (
|
||
<>
|
||
<NextSeo
|
||
title={meta_title}
|
||
description={meta_description}
|
||
openGraph={{
|
||
title: meta_title,
|
||
description: meta_description,
|
||
url: `https://supabase.com/database`,
|
||
images: [
|
||
{
|
||
url: `https://supabase.com${basePath}/images/product/database/database-og.jpg`,
|
||
},
|
||
],
|
||
}}
|
||
/>
|
||
<DefaultLayout>
|
||
<ProductHeader
|
||
icon={Solutions['database'].icon}
|
||
title={Solutions['database'].name}
|
||
h1={[
|
||
<span key={'database-h1'}>
|
||
Open Source SQL Database
|
||
<br /> (without the hassle)
|
||
</span>,
|
||
]}
|
||
subheader={[
|
||
'Every Supabase project is a dedicated PostgreSQL database, trusted by millions of developers.',
|
||
'PostgreSQL is one of the worlds most scalable databases.',
|
||
]}
|
||
image={[
|
||
<div className="header--light block w-full" key="light">
|
||
<Image
|
||
src={`${basePath}/images/product/database/header--light-2.png`}
|
||
alt="database header"
|
||
layout="responsive"
|
||
width="1680"
|
||
height="1116"
|
||
/>
|
||
</div>,
|
||
<div className="header--dark mr-0 w-full dark:block" key="dark">
|
||
<Image
|
||
src={`${basePath}/images/product/database/header--dark-2.png`}
|
||
alt="database header"
|
||
layout="responsive"
|
||
width="1680"
|
||
height="1116"
|
||
/>
|
||
</div>,
|
||
]}
|
||
documentation_url={'/docs/guides/database'}
|
||
/>
|
||
|
||
<SectionContainer>
|
||
<div className="grid grid-cols-12">
|
||
<div className="col-span-12 mb-10 lg:col-span-3 lg:mb-0">
|
||
<div className="p mb-4 flex items-center space-x-2">
|
||
<ProductIcon icon={Solutions['database'].icon} />
|
||
<IconX />
|
||
<div className="flex w-fit items-center">
|
||
<Image
|
||
src={`${basePath}/images/product/database/postgresql-icon.svg`}
|
||
width={30}
|
||
height={30}
|
||
alt="postgresql icon"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<h4 className="h4">Just Postgres</h4>
|
||
<p className="p">Every Supabase project is a dedicated Postgres database.</p>
|
||
<p className="p text-sm">
|
||
100% portable. Bring your existing Postgres database, or migrate away at any time.
|
||
</p>
|
||
</div>
|
||
<div className="col-span-12 mb-10 lg:col-span-3 lg:col-start-5 lg:mb-0">
|
||
<div className="p mb-4 flex items-center space-x-2">
|
||
<ProductIcon icon={Solutions['database'].icon} />
|
||
<IconX />
|
||
<ProductIcon icon={Solutions['authentication'].icon} />
|
||
</div>
|
||
|
||
<h4 className="h4">Built-in Auth</h4>
|
||
<p className="p">Leveraging PostgreSQL's proven Row Level Security.</p>
|
||
<p className="p text-sm">
|
||
Integrated with JWT authentication which controls exactly what your users can
|
||
access.
|
||
</p>
|
||
</div>
|
||
<div className="col-span-12 lg:col-span-3 lg:col-start-9">
|
||
<div className="p mb-4 flex items-center space-x-2">
|
||
<ProductIcon icon={Solutions['database'].icon} />
|
||
<IconX />
|
||
<ProductIcon icon={'M13 10V3L4 14h7v7l9-11h-7z'} />
|
||
</div>
|
||
|
||
<h4 className="h4">Realtime enabled</h4>
|
||
<p className="p">Data-change listeners over websockets.</p>
|
||
<p className="p text-sm">
|
||
Subscribe and react to database changes, milliseconds after they happen.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</SectionContainer>
|
||
|
||
{/* <SectionContainer>÷ */}
|
||
<SectionContainer className="text-center md:pb-0 lg:pb-0">
|
||
<div className="grid grid-cols-12">
|
||
<div className="col-span-12 lg:col-span-8 lg:col-start-3">
|
||
<h2 className="h3">Easy to use dashboard</h2>
|
||
|
||
<p className="p">
|
||
The simplicity of a Table Editor, or the power of a SQL editor. Your choice.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</SectionContainer>
|
||
<div className="grid">
|
||
<div className={'dashboard-tabs sbui-tabs--underline-alt'}>
|
||
<Tabs
|
||
size="xlarge"
|
||
activeId={dashboardSwiperActiveIndex.toString()}
|
||
onChange={(e: string) => handleDashboardSwiperNav(Number(e))}
|
||
type="underlined"
|
||
tabBarStyle={{
|
||
marginBottom: 0,
|
||
// borderBottom: '1px solid #dedede',
|
||
}}
|
||
// block
|
||
>
|
||
<Tabs.Panel id="0" label="Table editor">
|
||
<span></span>
|
||
</Tabs.Panel>
|
||
<Tabs.Panel id="1" label="SQL editor">
|
||
<span></span>
|
||
</Tabs.Panel>
|
||
</Tabs>
|
||
</div>
|
||
</div>
|
||
|
||
<Swiper
|
||
// @ts-ignore
|
||
onSwiper={setDashboardSwiper}
|
||
style={{ overflow: 'hidden' }}
|
||
initialSlide={0}
|
||
spaceBetween={0}
|
||
slidesPerView={1}
|
||
speed={300}
|
||
allowTouchMove={false}
|
||
>
|
||
<div className="grid grid-cols-12">
|
||
<SwiperSlide key={0}>
|
||
<SectionContainer className="pt-16 pb-0">
|
||
<ImageCarousel
|
||
content={TableViewCarouselData}
|
||
footer={[
|
||
<TweetCard
|
||
handle="@Elsolo244"
|
||
key="@Elsolo244"
|
||
img_url={`${basePath}/images/twitter-profiles/v6citnk33y2wpeyzrq05_400x400.jpeg`}
|
||
quote="Where has @supabase been all my life? 😍"
|
||
/>,
|
||
]}
|
||
/>
|
||
</SectionContainer>
|
||
</SwiperSlide>
|
||
<SwiperSlide key={1}>
|
||
<SectionContainer className="pt-16 pb-0">
|
||
<ImageCarousel
|
||
content={SqlViewCarouselData}
|
||
footer={[
|
||
<TweetCard
|
||
handle="@jim_bisenius"
|
||
key="@jim_bisenius"
|
||
img_url={`${basePath}/images/twitter-profiles/rLgwUZSB_400x400.jpg`}
|
||
quote="@MongoDB or @MySQL?!?! Please, let me introduce you to @supabase and the wonderful world of @PostgreSQL before it's too late!!"
|
||
/>,
|
||
]}
|
||
/>
|
||
</SectionContainer>
|
||
</SwiperSlide>
|
||
</div>
|
||
</Swiper>
|
||
|
||
<SectionContainer className="-mb-48">
|
||
<APISection
|
||
// @ts-ignore
|
||
content={ApiExamplesData}
|
||
title="Never write an API again"
|
||
text={[
|
||
<p key={0}>
|
||
We introspect your database and provide instant APIs. Focus on building your
|
||
product, while Supabase handles the CRUD.
|
||
</p>,
|
||
]}
|
||
footer={[
|
||
<div className="grid grid-cols-12" key={0}>
|
||
<div className="col-span-12 mt-0 flex lg:col-span-6 xl:col-span-12 xl:mb-8">
|
||
<p>
|
||
<p className="text-scale-1100 m-0">Libraries coming soon:</p>
|
||
</p>
|
||
<div className="ml-1 space-x-1">
|
||
<Badge dot={false}>Python</Badge>
|
||
<Badge dot={false}>Dart</Badge>
|
||
<Badge dot={false}>C#</Badge>
|
||
<Badge dot={false}>Kotlin</Badge>
|
||
</div>
|
||
</div>
|
||
<div className="col-span-12 hidden lg:col-span-6 xl:col-span-10 xl:block" key={1}>
|
||
{/* <TweetCard
|
||
handle="@eunjae_lee"
|
||
img_url="https://pbs.twimg.com/profile_images/1188191474401320965/eGjSYbQd_400x400.jpg"
|
||
quote="So they just help me use @PostgreSQL better. They don't try to invent a wheel and trap me
|
||
in it. Whereas they provide a good abstraction overall, they also provide a raw access to
|
||
the database."
|
||
/> */}
|
||
</div>
|
||
</div>,
|
||
]}
|
||
documentation_link={'/docs/guides/database'}
|
||
/>
|
||
</SectionContainer>
|
||
|
||
<div className="relative">
|
||
<div className="section--masked">
|
||
<div className="section--bg-masked">
|
||
<div className="section--bg border-t border-b border-gray-100 dark:border-gray-600"></div>
|
||
</div>
|
||
<div className="section-container pt-12 pb-0">
|
||
<FloatingIcons />
|
||
<div className="overflow-x-hidden">
|
||
<SectionContainer className="mb-0 pb-8 lg:pt-32">
|
||
<GithubExamples />
|
||
</SectionContainer>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<SectionContainer className="lg:py-48">
|
||
<div className="grid grid-cols-12 lg:gap-16">
|
||
<div className="col-span-12 mb-8 lg:col-span-6 xl:col-span-5">
|
||
<h2 className="h3">Extend your database</h2>
|
||
|
||
<p className="p">Supabase works natively with Postgres extensions.</p>
|
||
<p className="p">
|
||
Choose from a huge collection of Postgres extensions, enabled with a single click.
|
||
</p>
|
||
|
||
<FeatureColumn
|
||
title="40+ preinstalled extensions"
|
||
text="We only show a few of the extensions supported by supabase here, but we preinstall many more that you can use right away."
|
||
/>
|
||
<Link href="/docs/guides/database" passHref>
|
||
<Button as="a" size="small" type="default" icon={<IconArrowUpRight />}>
|
||
Explore documentation
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
<div className="col-span-12 mt-8 lg:col-span-6 lg:col-start-7 lg:mt-0">
|
||
<SplitCodeBlockCarousel
|
||
// @ts-ignore
|
||
content={ExtensionsExamplesData}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</SectionContainer>
|
||
</DefaultLayout>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default Database
|