mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 15:19:08 +03:00
Ivan VasilovandJoshen Lim
05a542ccea
* Add lucide-react to docs (to make the autocomplete work). * Migrate the docs app icons. * Migrate the ui-patterns. * Remove the old icons from ui package. * Migrate the www app from react-feather icons. * Migrate all of studio icons. * Migrate the only component in design-system. * Fix an old import in ui package. Revert an import in docs app. * Fix some pages in www. * Remove unneeded files used in generation of icons. * Fix a prettier error. * Fix more issues in www. * Fix an issue in Log Date picker. * Replace all string sizes with number sizes because the icons grew in some cases. * Fix more imports in security page. * Fix an extra import. * Remove the size prop from all icons if they're in a button and they match the button size. * Minor fixes for docs and www. --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
244 lines
9.5 KiB
TypeScript
244 lines
9.5 KiB
TypeScript
import ApiExamples from 'data/products/realtime/api-examples'
|
|
import AppExamples from 'data/products/realtime/app-examples'
|
|
import Solutions from 'data/Solutions'
|
|
import { NextSeo } from 'next-seo'
|
|
import Link from 'next/link'
|
|
import { useRouter } from 'next/router'
|
|
import { Button, Image } from 'ui'
|
|
import CTABanner from '~/components/CTABanner'
|
|
import DefaultLayout from '~/components/Layouts/Default'
|
|
import SectionContainer from '~/components/Layouts/SectionContainer'
|
|
import ProductsNav from '~/components/Products/ProductsNav'
|
|
import APISection from '~/components/Sections/APISection'
|
|
import ProductHeader from '~/components/Sections/ProductHeader'
|
|
import RealtimeStyles from '~/styles/realtime.module.css'
|
|
|
|
import { Grid, Layers, Menu } from 'lucide-react'
|
|
import { PRODUCT_NAMES } from 'shared-data/products'
|
|
import 'swiper/css'
|
|
|
|
const Cursor = ({ className = '', color = 'none' }) => {
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill={color}
|
|
viewBox="0 0 24 24"
|
|
aria-hidden="true"
|
|
className={`h-10 w-10 stroke-foreground ${className}`}
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"
|
|
/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
function RealtimePage() {
|
|
// base path for images
|
|
const { basePath } = useRouter()
|
|
const meta_title = 'Realtime | Sync your data in real time'
|
|
const meta_description =
|
|
'Listens to changes in a PostgreSQL Database and broadcasts them over WebSockets'
|
|
|
|
return (
|
|
<>
|
|
<NextSeo
|
|
title={meta_title}
|
|
description={meta_description}
|
|
openGraph={{
|
|
title: meta_title,
|
|
description: meta_description,
|
|
url: `https://supabase.com/realtime`,
|
|
images: [
|
|
{
|
|
url: `https://supabase.com${basePath}/images/realtime/og.jpg`,
|
|
},
|
|
],
|
|
}}
|
|
/>
|
|
<DefaultLayout>
|
|
<ProductsNav activePage={PRODUCT_NAMES.REALTIME} />
|
|
<ProductHeader
|
|
icon={Solutions['realtime']?.icon}
|
|
title={Solutions['realtime']?.name}
|
|
h1={[<span key={'authentication-h1'}>Build modern web and mobile applications</span>]}
|
|
subheader={['Sync client state globally over WebSockets in Realtime']}
|
|
image={[
|
|
<div className="bg-surface-100 border-default relative flex h-[372px] w-[560px] items-center justify-center overflow-hidden rounded border drop-shadow-md">
|
|
<div
|
|
className={[
|
|
'border-brand-300 relative h-12 w-48 bg-brand',
|
|
`flex items-center justify-center ${RealtimeStyles['shape']}`,
|
|
].join(' ')}
|
|
>
|
|
<p
|
|
className={`text-foreground text-[18px] font-medium ${RealtimeStyles['button-text']}`}
|
|
>
|
|
Start a project
|
|
</p>
|
|
</div>
|
|
<Cursor
|
|
color="var(--colors-yellow9)"
|
|
className={`${RealtimeStyles['cursor-one']} absolute top-[220px] right-[130px]`}
|
|
/>
|
|
<Cursor
|
|
color="var(--colors-indigo9)"
|
|
className={`${RealtimeStyles['cursor-two']} absolute top-[180px] right-[280px]`}
|
|
/>
|
|
<div
|
|
className={[
|
|
'border-foreground absolute bottom-[40px] left-[175px] flex h-10 w-20',
|
|
'items-center justify-center space-x-2 rounded-full border-[3px] bg-indigo-900',
|
|
`${RealtimeStyles['cursor-two-comment']}`,
|
|
].join(' ')}
|
|
>
|
|
<p className="text-lg">🤔</p>
|
|
</div>
|
|
<Cursor
|
|
color="var(--colors-tomato9)"
|
|
className={`${RealtimeStyles['cursor-three']} absolute top-[170px] right-[180px]`}
|
|
/>
|
|
<div
|
|
className={[
|
|
'border-foreground absolute top-[72px] left-[320px] flex h-10 w-20',
|
|
'items-center justify-center space-x-2 rounded-full border-[3px] bg-tomato-900',
|
|
`${RealtimeStyles['cursor-three-comment']}`,
|
|
].join(' ')}
|
|
>
|
|
<p className="text-lg">😄</p>
|
|
</div>
|
|
<div className="bg-background border-default absolute top-0 flex h-9 w-full items-center justify-between border-b">
|
|
<div className="flex items-center">
|
|
<Menu className="text-foreground mx-3" strokeWidth={1} size={16} />
|
|
<Grid className="text-foreground mx-3" strokeWidth={1} size={15} />
|
|
<Layers className="text-foreground mx-3" strokeWidth={1} size={15} />
|
|
</div>
|
|
<div className="mx-3 flex items-center">
|
|
<div className="border-foreground bg-tomato-900 relative -right-4 h-5 w-5 rounded-full border" />
|
|
<div className="border-foreground bg-yellow-900 relative -right-2 z-[2] h-5 w-5 rounded-full border" />
|
|
<div className="border-foreground bg-indigo-900 z-[3] h-5 w-5 rounded-full border" />
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
]}
|
|
documentation_url={'/docs/guides/realtime/broadcast'}
|
|
/>
|
|
|
|
<SectionContainer>
|
|
<div className="grid grid-cols-12">
|
|
<div className="prose col-span-12 mb-10 lg:col-span-3 lg:mb-0">
|
|
<div className="p mb-4">
|
|
<img
|
|
src="/images/realtime/icons/database-changes.svg"
|
|
alt="realtime broadcast"
|
|
className="-mb-4 w-9"
|
|
/>
|
|
</div>
|
|
<h3>Database changes</h3>
|
|
<p>
|
|
Listen to changes in the Database inserts, updates, and deletes and other changes.
|
|
</p>
|
|
<div className="not-prose mt-3">
|
|
<Button asChild type="default">
|
|
<Link href="/docs/guides/realtime/postgres-changes">View docs</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="prose col-span-12 mb-10 lg:col-span-3 lg:col-start-5 lg:mb-0">
|
|
<div className="p mb-4">
|
|
<img
|
|
src="/images/realtime/icons/presence.svg"
|
|
alt="realtime broadcast"
|
|
className="-mb-4 w-9"
|
|
/>
|
|
</div>
|
|
<h3>Presence</h3>
|
|
<p>Store and synchronize online user state consistently across clients.</p>
|
|
<div className="not-prose mt-3">
|
|
<Button asChild type="default">
|
|
<Link href="/docs/guides/realtime/presence">View docs</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="prose col-span-12 lg:col-span-3 lg:col-start-9">
|
|
<div className="p mb-4">
|
|
<img
|
|
src="/images/realtime/icons/broadcast.svg"
|
|
alt="realtime broadcast"
|
|
className="-mb-4 w-9"
|
|
/>
|
|
</div>
|
|
<h3>Broadcast</h3>
|
|
<p>Send any data to any client subscribed to the same Channel.</p>
|
|
<div className="not-prose mt-3">
|
|
<Button asChild type="default">
|
|
<Link href="/docs/guides/realtime/broadcast">View docs</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SectionContainer>
|
|
|
|
<SectionContainer className="flex flex-col gap-8">
|
|
<div className="flex flex-col items-center justify-center">
|
|
<h2 className="h3">What you can build with Realtime</h2>
|
|
<p className="p mx-auto text-center lg:w-1/2">
|
|
Build any kind of Realtime application with ease, including any of these scenarios.
|
|
</p>
|
|
</div>
|
|
<div className="grid gap-10 grid-cols-2 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4">
|
|
{AppExamples.map((example) => {
|
|
return (
|
|
<>
|
|
<div className="flex flex-col gap-3">
|
|
<Image
|
|
alt={example.title}
|
|
src={{
|
|
light: `/images/realtime/example-apps/light/${example.img}?type=1`,
|
|
dark: `/images/realtime/example-apps/dark/${example.img}`,
|
|
}}
|
|
className="bg-surface-100 rounded-lg"
|
|
layout="fill"
|
|
objectFit="contain"
|
|
/>
|
|
<div className="prose">
|
|
<h4>{example.title}</h4>
|
|
<p className="text-sm">{example.description}</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
})}
|
|
</div>
|
|
</SectionContainer>
|
|
|
|
<SectionContainer>
|
|
<APISection
|
|
title="Simple and convenient APIs"
|
|
// @ts-ignore
|
|
content={ApiExamples}
|
|
size="large"
|
|
text={[
|
|
<p key={0}>
|
|
<p className="text-base lg:text-lg">
|
|
APIs that you can understand. With powerful libraries that work on client and
|
|
server-side applications.
|
|
</p>
|
|
</p>,
|
|
]}
|
|
// [TODO] Point to the correct docs URL
|
|
documentation_link={'/docs/guides/realtime/broadcast'}
|
|
/>
|
|
</SectionContainer>
|
|
|
|
<CTABanner />
|
|
</DefaultLayout>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default RealtimePage
|