-
- Build your app without leaving the dashboard
-
+
Signed in: {user.email}
-
-
- )
- }
- return props.children
- }
+ // const AuthContainer = (props: any) => {
+ // const { user } = Auth.useUser()
+ // if (user) {
+ // return (
+ // <>
+ // Sign in with
+
+ {/*
-
+ */}
@@ -208,7 +205,7 @@ function AuthComponentExample() {
+
Build your app without leaving the dashboard
- {TabMarkup['tabTableEditor'].header}
+
- {TabMarkup['tabTableEditor'].description}
+
@@ -38,9 +38,9 @@ function Tabs(props: Props) {
{TabMarkup['tabTableEditor'].header}
{TabMarkup['tabTableEditor'].description}
- {TabMarkup['tabSqlEditor'].header}
+
- {TabMarkup['tabSqlEditor'].description}
+
@@ -49,9 +49,9 @@ function Tabs(props: Props) {
{TabMarkup['tabSqlEditor'].header}
{TabMarkup['tabSqlEditor'].description}
- {TabMarkup['tabAuthRules'].header}
+
- {TabMarkup['tabAuthRules'].description}
+
diff --git a/www/components/AuthWidget/AuthComponentExample.tsx b/www/components/AuthWidget/AuthComponentExample.tsx
index d4a0e08f0cf..ec0e3b3e7c0 100644
--- a/www/components/AuthWidget/AuthComponentExample.tsx
+++ b/www/components/AuthWidget/AuthComponentExample.tsx
@@ -4,10 +4,9 @@ import {
Badge,
Button,
Card,
- Auth,
+ // Auth,
Space,
Tabs,
- Typography,
IconCode,
IconSearch,
} from '@supabase/ui'
@@ -28,31 +27,31 @@ function AuthComponentExample() {
const { isDarkMode } = useTheme()
const { basePath } = useRouter()
- // store API swiper instance
- const [imageSwiper, setImageSwiper] = useState(undefined)
- const [imageSwiperActiveIndex, setImageSwiperActiveIndex] = useState(0)
+ // // store API swiper instance
+ // const [imageSwiper, setImageSwiper] = useState(undefined)
+ // const [imageSwiperActiveIndex, setImageSwiperActiveIndex] = useState(0)
- function handleNavChange(e: number) {
- console.log(e)
- setImageSwiperActiveIndex(e)
- // @ts-ignore
- imageSwiper.slideTo(e)
- }
+ // function handleNavChange(e: number) {
+ // console.log(e)
+ // setImageSwiperActiveIndex(e)
+ // // @ts-ignore
+ // imageSwiper.slideTo(e)
+ // }
- const AuthContainer = (props: any) => {
- const { user } = Auth.useUser()
- if (user) {
- return (
- <>
- {TabMarkup['tabAuthRules'].header}
{TabMarkup['tabAuthRules'].description}
Signed in: {user.email}
+ // + // + // ) + // } + // return props.children + // } return (
@@ -96,11 +95,11 @@ function AuthComponentExample() {
width="96"
alt="Logo"
/>
- {'Acme Company'}
+ Demo
- {'Acme Company'}
Sign in with
-
- or continue with
-
+
- or continue with
Signed in: {user.email}
diff --git a/www/components/AuthWidget/AuthWidget.tsx b/www/components/AuthWidget/AuthWidget.tsx index 308896e195a..87aa96947cf 100644 --- a/www/components/AuthWidget/AuthWidget.tsx +++ b/www/components/AuthWidget/AuthWidget.tsx @@ -5,7 +5,7 @@ import DefaultLayout from '~/components/Layouts/Default' import CodeBlock from '~/components/CodeBlock/CodeBlock' import { Button, - Auth, + // Auth, Card, Checkbox, Divider, @@ -13,7 +13,6 @@ import { Select, Space, Tabs, - Typography, Input, Toggle, IconCode, @@ -49,13 +48,11 @@ function AuthPage() {
-
- ReactJS Auth Widget
-
-
+
+
ReactJS Auth Widget
+An API built from the groud up just for Storage.With powerful library clients coming soon that allow for asset optimasation and image transformation -
- {companyName}
- Customise your login form
-
- Our ReactJS Auth form will help you get going even quicker{' '}
-
+
Customise your login form
+Our ReactJS Auth form will help you get going even quicker
-
+
+
{title} -
-
+
+
diff --git a/www/components/BuiltWithSupabase/index.tsx b/www/components/BuiltWithSupabase/index.tsx
index 1683235d713..e928f6994bf 100644
--- a/www/components/BuiltWithSupabase/index.tsx
+++ b/www/components/BuiltWithSupabase/index.tsx
@@ -1,7 +1,5 @@
import { useRouter } from 'next/router'
-import SectionHeader from 'components/UI/SectionHeader'
-import ProjectExamples from 'data/ProjectExamples.json'
-import { Button, Card, Typography, Space, IconGitHub } from '@supabase/ui'
+import { Button, IconGitHub } from '@supabase/ui'
import SectionContainer from '../Layouts/SectionContainer'
import ExampleCard from '../ExampleCard'
@@ -14,29 +12,24 @@ const BuiltExamples = () => {
return (
-
-
+
- {blog.date}
-
-
-
-
+
+
-
- {blog.title}
-
-
- {blog.description}
-{post.title}
+ {post.type === 'blog' && post.date && ( +{post.date}
+ )} +{post.description}
+
+ {author.map((author: any) => {
+ return (
+
- {author && (
-
+ {author.author_image_url && (
+ 
+ )}
+
+ )
+ })}
-
- {author.author_image_url && (
-
- )}
-
- {author.author}
-
- {author.position}
-
-
-
-
- )}
- What can you build with supabase?
-
-
-
-
-
-
-
-
-
- }>
- Official github library
-
-
-
-
-
+
- There are many example apps and starter projects to get going -
-What can you build with supabase?
+There are many example apps and starter projects to get going
+
+
+
+
+
+ } size="small">
+ Official github library
+
+
+
{Examples.slice(0, 6).map((example, i) => {
diff --git a/www/components/CTABanner/index.tsx b/www/components/CTABanner/index.tsx
index ec6ad84e8bf..5d9cffc6a44 100644
--- a/www/components/CTABanner/index.tsx
+++ b/www/components/CTABanner/index.tsx
@@ -1,4 +1,4 @@
-import { Button, Typography } from '@supabase/ui'
+import { Button } from '@supabase/ui'
const CTABanner = (props: any) => {
const { darkerBg } = props
@@ -10,14 +10,16 @@ const CTABanner = (props: any) => {
`}
>
diff --git a/www/components/Card.tsx b/www/components/Card.tsx
index c319e2e0c80..f6c995195e2 100644
--- a/www/components/Card.tsx
+++ b/www/components/Card.tsx
@@ -59,7 +59,7 @@ const Card = (props: Props) => {
-
- Build in a weekend,
- scale to millions
-
+
+ Build in a weekend, + scale to millions +
+
-
{/* {icons && (
diff --git a/www/components/Carousels/ImageCarousel.tsx b/www/components/Carousels/ImageCarousel.tsx
index 9c6c5649824..f461f5bea5c 100644
--- a/www/components/Carousels/ImageCarousel.tsx
+++ b/www/components/Carousels/ImageCarousel.tsx
@@ -1,5 +1,5 @@
import { useRouter } from 'next/router'
-import { Tabs, Typography, Button, IconCornerRightUp, IconArrowUpRight } from '@supabase/ui'
+import { Tabs, Button, IconCornerRightUp, IconArrowUpRight } from '@supabase/ui'
import { useState } from 'react'
// Import Swiper React components
@@ -11,6 +11,7 @@ import 'swiper/swiper.min.css'
import ImageCarouselStyles from './ImageCarousel.module.css'
import Link from 'next/link'
import Image from 'next/image'
+import TextLink from '../TextLink'
interface Content {
title: string
@@ -48,20 +49,20 @@ function ImageCarousel(props: ImageCarouselProps) {
const details = (
-
+
-
+
+
-
+
+
+
)
@@ -133,17 +134,14 @@ function ImageCarousel(props: ImageCarouselProps) {
Allow fetch something -
This would only allow the authenticated user access to a folder that is named after their own account UID. This is useful for things like profile images.
-}> View documentation -
+
handleImageSwiperNav(Number(id))}
- block
>
{props.content.map((content: Content, i: number) => {
return (
@@ -151,9 +149,7 @@ function ImageCarousel(props: ImageCarouselProps) {
label={content.label ? content.label : content.title}
id={i.toString()}
key={i}
- >
-
-
+ />
)
})}
@@ -168,29 +164,13 @@ function ImageCarousel(props: ImageCarouselProps) {
>
{props.content.map((content, i) => {
return (
-
-
+
)
})}
diff --git a/www/components/Carousels/SplitCodeBlockCarousel.tsx b/www/components/Carousels/SplitCodeBlockCarousel.tsx
index d6df338b85b..ee4e7cb1197 100644
--- a/www/components/Carousels/SplitCodeBlockCarousel.tsx
+++ b/www/components/Carousels/SplitCodeBlockCarousel.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react'
-import { Tabs, Typography, Button, Space } from '@supabase/ui'
+import { Tabs, Button, Space } from '@supabase/ui'
import CodeBlock from '../CodeBlock/CodeBlock'
// Import Swiper styles
@@ -44,29 +44,30 @@ function SplitCodeBlockCarousel(props: SplitCodeBlockCarousel) {
const details = (
- {content.title}
-
-
- {content.url && (
-
-
-
- }
- >
- {content.cta ? content.cta : 'View documentation'}
-
-
-
-
- )}
-
+ {content.text}
-{content.title}
+{content.text}
+
-
+
-
+
+
-
+
+
+
)
return (
- Allow fetch something -
This would only allow the authenticated user access to a folder that is named after their own account UID. This is useful for things like profile images.
--
+
handleApiSwiperNavChange(Number(id))}
+ type="pills"
>
{props.content.map((extension, i) => {
return (
@@ -76,80 +77,73 @@ function SplitCodeBlockCarousel(props: SplitCodeBlockCarousel) {
)
})}
-
+
+
+ {props.content.map((extension, i) => {
+ return (
+
+
+ {extension.code}
+
+
+ )
+ })}
+
+
+
{props.content.map((extension, i) => {
return (
-
- {extension.code}
-
+
+ {extension.url && (
+
+
+
+
+
+ )}
+
)
})}
-
-
)
diff --git a/www/components/CaseStudies/benchmark.tsx b/www/components/CaseStudies/benchmark.tsx
index f86c9cd3117..4c97dc281fc 100644
--- a/www/components/CaseStudies/benchmark.tsx
+++ b/www/components/CaseStudies/benchmark.tsx
@@ -1,4 +1,4 @@
-import { Button, Typography } from '@supabase/ui'
+import { Button } from '@supabase/ui'
import { useRouter } from 'next/router'
const Benchmark = () => {
@@ -18,17 +18,17 @@ const Benchmark = () => {
alt="Benchmark illustration"
/>
+ + {extension.detail_title} + +
+{extension.detail_text}
+
+ {badge}
+ })}
+
+ {extension.badges_label}
+ {extension.badges && + extension.badges.map((badge, i) => { + return
-
- {props.content.map((extension, i) => {
- return (
-
-
- )
- })}
-
-
-
-
- {extension.detail_title}
-
-
-
-
-
- {extension.url && (
-
-
-
-
-
-
-
- )}
-
-
- {extension.detail_text}
-
-
- {extension.badges_label}
-
- {extension.badges &&
- extension.badges.map((badge, i) => {
- return {badge}
- })}
-
-
-
+
-
+
+
+
Built for speed and reliability -
Supabase outperforms equivalent systems by more than 300%. Sign up for our public benchmark release and we'll send it to your inbox. -
diff --git a/www/components/CaseStudies/index.tsx b/www/components/CaseStudies/index.tsx
index 078192c5074..f3862997eee 100644
--- a/www/components/CaseStudies/index.tsx
+++ b/www/components/CaseStudies/index.tsx
@@ -1,8 +1,7 @@
-import { useRouter } from 'next/router'
-import Benchmark from 'components/CaseStudies/benchmark'
import SectionHeader from 'components/UI/SectionHeader'
import CaseStudiesData from 'data/CaseStudies.json'
-import { Card, Space, Typography } from '@supabase/ui'
+import { useRouter } from 'next/router'
+import BlogListItem from '../Blog/BlogListItem'
import SectionContainer from '../Layouts/SectionContainer'
const CaseStudies = () => {
@@ -12,33 +11,44 @@ const CaseStudies = () => {
- {CaseStudiesData.map((caseStudy: any, idx: number) => (
-
-
+
- }>
+ }>
Copy
diff --git a/www/components/DarkModeToggle.tsx b/www/components/DarkModeToggle.tsx
index d4a1812f33d..a36ab085c57 100644
--- a/www/components/DarkModeToggle.tsx
+++ b/www/components/DarkModeToggle.tsx
@@ -1,43 +1,5 @@
import { useTheme } from '~/components/Providers'
-
-const SunEmoji = () => (
-
-)
-
-const MoonEmoji = () => (
-
-)
+import { IconSun, IconMoon } from '@supabase/ui'
function DarkModeToggle() {
const { isDarkMode, toggleTheme } = useTheme()
@@ -52,14 +14,14 @@ function DarkModeToggle() {
return (
-
- {title}
-
-
+ {icon &&
+ {CaseStudiesData.map((caseStudy, idx: number) => (
+ {caseStudy.description}
-
-
-
+
{/*
-
- Project example
-
- {caseStudy.title}
+
- Project example
+{caseStudy.title}
{caseStudy.description}
+ + */ ))}
-
)
}
diff --git a/www/components/ExampleCard.tsx b/www/components/ExampleCard.tsx
index b937d6c678b..bf211f2c418 100644
--- a/www/components/ExampleCard.tsx
+++ b/www/components/ExampleCard.tsx
@@ -1,63 +1,55 @@
-import {
- Button,
- Divider,
- IconArrowUpRight,
- IconGitHub,
- IconTriangle,
- Space,
- Typography,
-} from '@supabase/ui'
+import { Button, Divider, IconArrowUpRight, IconGitHub, IconTriangle, Space } from '@supabase/ui'
import Link from 'next/link'
function ExampleCard(props: any) {
return (
<>
-
- {props.title}
-
-
-
+
{props.description}
-
- Created by:
- 
- {props.author}
-
- {props.title}
+{props.description}
+
+
+ {props.author}
+
-
-
-
- {props.repo_name}
-
-
-
+
+
+ {props.repo_name}
+
+
{props.vercel_deploy_url && (
@@ -81,7 +73,7 @@ function ExampleCard(props: any) {
)}
-
+
{icon}
-{text}
-{icon}
}
+ {title}
+{text}
) } diff --git a/www/components/Features/index.tsx b/www/components/Features/index.tsx index 034a2be6fa0..21dbc854381 100644 --- a/www/components/Features/index.tsx +++ b/www/components/Features/index.tsx @@ -1,4 +1,4 @@ -import { Button, Badge, Typography, IconArrowRight } from '@supabase/ui' +import { Button, Badge, IconArrowRight } from '@supabase/ui' import SectionHeader from 'components/UI/SectionHeader' import Solutions from 'data/Solutions.json' import Link from 'next/link' @@ -10,20 +10,16 @@ const Features = () => { const IconSections = Object.values(Solutions).map((solution: any) => { const { name, description, icon, label, url } = solution return ( -
+
-
- {name}
-
-
-
-
- {description}
+ {name}
+
+ {description}
+ {label && ( -
+
{label}
)}
@@ -33,10 +29,8 @@ const Features = () => {
})
return (
-
-
- Build faster and focus on your products
-
+
+
- Build faster and focus on your products
-
{IconSections}
-
- © Supabase Inc -
+
+ © Supabase Inc
diff --git a/www/components/Hero.tsx b/www/components/Hero.tsx
index 6be5838e9d6..8b938e8b954 100644
--- a/www/components/Hero.tsx
+++ b/www/components/Hero.tsx
@@ -1,4 +1,4 @@
-import { Button, IconBookOpen, Space, Typography } from '@supabase/ui'
+import { Button, IconBookOpen, Space } from '@supabase/ui'
import Link from 'next/link'
import { useRouter } from 'next/router'
import SectionContainer from './Layouts/SectionContainer'
@@ -14,70 +14,76 @@ const Hero = () => {
-
-
-
-
-
-
-
-
+
- The Open Source - Firebase Alternative -
-- Create a backend in less than 2 minutes. Start your project with a Postgres - Database, Authentication, instant APIs, Realtime subscriptions and Storage. -
-Serverless functions coming soon
-
+
+
+ + The Open Source + Firebase Alternative +
+
+
+ + Create a backend in less than 2 minutes. Start your project with a + Postgres Database, Authentication, instant APIs, Realtime subscriptions + and Storage. +
+Serverless functions coming soon
+
+
+
-
-
- }
- >
- Documentation
-
-
+
+ }>
+ Documentation
+
-
-
backed by
-
-
- 
- 
- 
+
+
-
-
+
+ backed by
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+