[pull] master from supabase:master

apps/www/components/CodeBlock/CodeBlock.tsx

@@ -9,10 +9,11 @@ import kotlin from 'react-syntax-highlighter/dist/cjs/languages/hljs/kotlin'
 import py from 'react-syntax-highlighter/dist/cjs/languages/hljs/python'
 import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql'
 import yaml from 'react-syntax-highlighter/dist/cjs/languages/hljs/yaml'
+import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json'
 import { Button, cn } from 'ui'
 import monokaiCustomTheme from './CodeBlock.utils'
 
-export type LANG = 'js' | 'sql' | 'py' | 'bash' | 'ts' | 'tsx' | 'kotlin' | 'yaml'
+export type LANG = 'js' | 'sql' | 'py' | 'bash' | 'ts' | 'tsx' | 'kotlin' | 'yaml' | 'json'
 export interface CodeBlockProps {
   lang: LANG
   startingLineNumber?: number
@@ -62,6 +63,7 @@ function CodeBlock(props: CodeBlockProps) {
   SyntaxHighlighter.registerLanguage('bash', bash)
   SyntaxHighlighter.registerLanguage('kotlin', kotlin)
   SyntaxHighlighter.registerLanguage('yaml', yaml)
+  SyntaxHighlighter.registerLanguage('json', json)
 
   // const large = props.size === 'large' ? true : false
   const large = false

apps/www/components/Enterprise/Security.tsx

@@ -1,10 +1,10 @@
 import React, { FC } from 'react'
-import type { LucideIcon } from 'lucide-react'
-
 import { TextLink } from 'ui'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 
-interface Props {
+import type { LucideIcon } from 'lucide-react'
+
+export interface SecuritySectionProps {
   id: string
   label: string | JSX.Element
   heading: string | JSX.Element
@@ -27,7 +27,7 @@ type FeatureProps = {
   heading: string
 }
 
-const EnterpriseSecurity: FC<Props> = (props) => {
+const EnterpriseSecurity: FC<SecuritySectionProps> = (props) => {
   return (
     <SectionContainer
       id={props.id}

apps/www/components/Footer/index.tsx

@@ -62,8 +62,8 @@ const Footer = (props: Props) => {
         <div className="w-full h-px bg-gradient-to-r from-transparent via-border to-transparent" />
       </div>
       <SectionContainer className="py-8">
-        <div className="xl:grid xl:grid-cols-3 xl:gap-8">
-          <div className="space-y-8 xl:col-span-1">
+        <div className="xl:grid xl:grid-cols-7 xl:gap-4">
+          <div className="space-y-8 xl:col-span-2">
             <Link href="#" as="/" className="w-40">
               <Image
                 src={supabaseLogoWordmarkLight}
@@ -116,8 +116,8 @@ const Footer = (props: Props) => {
               </a>
             </div>
           </div>
-          <div className="mt-12 grid grid-cols-1 gap-8 xl:col-span-2 xl:mt-0">
-            <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
+          <div className="mt-12 grid grid-cols-1 gap-8 xl:col-span-5 xl:mt-0">
+            <div className="grid grid-cols-2 gap-4 md:grid-cols-5">
               {footerData.map((segment) => {
                 return (
                   <div key={`footer_${segment.title}`}>

apps/www/components/Nav/MobileMenu.tsx

@@ -97,11 +97,11 @@ const MobileMenu = ({ open, setOpen, menu }: Props) => {
           </Link>
         </>
       ) : menuItem.title === 'Developers' ? (
-        <div className="px-3 mb-2 flex flex-col gap-2">
+        <div className="px-3 mb-2 flex flex-col gap-6">
           {menuItem.subMenu['navigation'].map((column: any) => (
             <div key={column.label} className="flex flex-col gap-3">
               {column.label !== 'Developers' && (
-                <label className="text-foreground-lighter text-xs uppercase tracking-widest font-mono mt-4">
+                <label className="text-foreground-lighter text-xs uppercase tracking-widest font-mono">
                   {column.label}
                 </label>
               )}
@@ -136,6 +136,27 @@ const MobileMenu = ({ open, setOpen, menu }: Props) => {
             />
           </div>
         </div>
+      ) : menuItem.title === 'Solutions' ? (
+        <div className="px-3 mb-2 flex flex-col gap-6">
+          {menuItem.subMenu['navigation'].map((column: any) => (
+            <div key={column.label} className="flex flex-col gap-3">
+              {column.label !== 'Solutions' && (
+                <label className="text-foreground-lighter text-xs uppercase tracking-widest font-mono">
+                  {column.label}
+                </label>
+              )}
+              {column.links.map((link: any) => (
+                <TextLink
+                  hasChevron={false}
+                  key={link.text}
+                  url={link.url}
+                  label={link.text}
+                  className="focus-visible:ring-offset-4 focus-visible:ring-offset-background-overlay !mt-0"
+                />
+              ))}
+            </div>
+          ))}
+        </div>
       ) : null}
     </>
   )

apps/www/components/Nav/ProductDropdown.tsx

@@ -9,11 +9,10 @@ import { TextLink } from 'ui'
 import { NavigationMenuLink } from 'ui/src/components/shadcn/ui/navigation-menu'
 import MenuItem from './MenuItem'
 
-import ComparisonsData from '~/data/Comparisons'
-import SolutionsData from '~/data/Solutions'
-import CustomersData from '~/data/CustomerStories'
-import MainProductsData from '~/data/MainProducts'
-import ProductModulesData from '~/data/ProductModules'
+import ComparisonsData from 'data/Comparisons'
+import CustomersData from 'data/CustomerStories'
+import MainProductsData from 'data/MainProducts'
+import ProductModulesData from 'data/ProductModules'
 
 const ProductDropdown = () => {
   const { basePath } = useRouter()
@@ -178,23 +177,6 @@ const ProductDropdown = () => {
               ))}
             </ul>
           </div>
-          <div className="col-span-2">
-            <p className="text-foreground-lighter text-xs uppercase tracking-widest font-mono mb-3">
-              {SolutionsData.label}
-            </p>
-            <ul className="flex flex-col gap-2">
-              {SolutionsData.solutions.map((link) => (
-                <li key={link.text}>
-                  <TextLink
-                    chevronAnimation="fadeIn"
-                    url={link.url}
-                    label={link.text}
-                    className="mt-0 hover:text-foreground focus-visible:text-foreground focus-visible:ring-offset-4 focus-visible:ring-offset-background-overlay"
-                  />
-                </li>
-              ))}
-            </ul>
-          </div>
         </div>
       </div>
     </div>

apps/www/components/Nav/SolutionsDropdown.tsx

@@ -0,0 +1,45 @@
+import { ChevronRight } from 'lucide-react'
+import Link from 'next/link'
+
+import { navData as DevelopersData } from 'data/Solutions'
+
+type LinkProps = {
+  text: string
+  description?: string
+  url?: string
+  icon?: any
+  svg?: any
+}
+
+const SolutionsDropdown = () => (
+  <div className="flex flex-col xl:flex-row">
+    <div className="w-[550px] xl:w-[470px] py-8 px-8 bg-background grid gap-3 grid-cols-2">
+      {DevelopersData['navigation'].map((column) => (
+        <div key={column.label} className="p-0 flex flex-col gap-6">
+          <label className="text-foreground-lighter text-xs uppercase tracking-widest font-mono">
+            {column.label}
+          </label>
+          <ul className="flex flex-col gap-4">
+            {column.links.map(({ icon: Icon, ...link }: LinkProps) => (
+              <li key={link.text}>
+                <Link
+                  href={link.url!}
+                  className="flex group items-center gap-2 text-foreground-light text-sm hover:text-foreground focus-visible:text-foreground focus-visible:ring-2 focus-visible:outline-none focus-visible:rounded focus-visible:ring-foreground-lighter"
+                >
+                  {Icon && <Icon size={16} strokeWidth={1.3} />}
+                  <span>{link.text}</span>
+                  <ChevronRight
+                    strokeWidth={2}
+                    className="w-3 -ml-1 transition-all will-change-transform -translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100"
+                  />
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  </div>
+)
+
+export default SolutionsDropdown

apps/www/components/Nav/index.tsx

@@ -25,7 +25,6 @@ import RightClickBrandLogo from './RightClickBrandLogo'
 import { useSendTelemetryEvent } from '~/lib/telemetry'
 import useDropdownMenu from './useDropdownMenu'
 import { AnnouncementBanner, AuthenticatedDropdownMenu } from 'ui-patterns'
-import Announcement from '../LaunchWeek/7/LaunchSection/Announcement'
 
 interface Props {
   hideNavbar: boolean

apps/www/components/Pricing/ComputePricingCalculator.tsx

@@ -30,7 +30,7 @@ const findIntanceValueByColumn = (instance: any, column: string) =>
 
 const parsePrice = (price: string) => parseInt(price?.toString().replace('$', '').replace(',', ''))
 
-const ComputePricingCalculator = () => {
+const ComputePricingCalculator = ({ disableInteractivity }: { disableInteractivity?: boolean }) => {
   const computeInstances = pricingAddOn.database.rows
   const priceSteps = computeInstances.map((instance) =>
     parsePrice(findIntanceValueByColumn(instance, 'pricing'))
@@ -290,12 +290,13 @@ const ComputePricingCalculator = () => {
             type="outline"
             block
             icon={<Plus />}
-            onClick={() =>
+            onClick={() => {
+              if (disableInteractivity) return
               setActiveInstances([
                 ...activeInstances,
                 { ...computeInstances[0], position: activeInstances.length },
               ])
-            }
+            }}
             className="w-full border-dashed text-foreground-light hover:text-foreground"
           >
             <span className="w-full text-left">Add Project</span>

apps/www/components/Products/DatabaseVisual.tsx

@@ -5,16 +5,17 @@ import { cn } from 'ui'
 
 interface Props {
   className?: string
+  hasGlow?: boolean
 }
 
-const DatabaseVisual: React.FC<Props> = ({ className }) => {
+const DatabaseVisual: React.FC<Props> = ({ className, hasGlow = true }) => {
   const containerRef = useRef(null)
   const ref = useRef(null)
   const [gradientPos, setGradientPos] = useState({ x: 0, y: 0 })
   const isSafari = isBrowser && detectBrowser() === 'Safari'
 
   const handleGlow = (event: any) => {
-    if (!ref.current || !containerRef.current) return null
+    if (!ref.current || !containerRef.current || !hasGlow) return null
 
     const containerRefElement = containerRef.current as HTMLDivElement
 
@@ -59,14 +60,15 @@ const DatabaseVisual: React.FC<Props> = ({ className }) => {
       role="img"
       aria-label="Supabase Postgres database visual composition"
     >
-      <span className="absolute w-full md:w-auto h-full md:aspect-square flex items-end md:items-center justify-center md:justify-end right-0 left-0 md:left-auto xl:-right-12 2xl:right-0 top-12 md:top-0 md:bottom-0 my-auto">
+      <span className="absolute group w-full md:w-auto h-full md:aspect-square flex items-end md:items-center justify-center md:justify-end right-0 left-0 md:left-auto xl:-right-12 2xl:right-0 top-12 md:top-0 md:bottom-0 my-auto">
         <Image
           src="/images/index/products/database-dark.png"
           alt="Supabase Postgres database"
           fill
           priority
           quality={100}
           sizes="100%"
+          draggable={false}
           className="hidden dark:block absolute antialiased inset-0 object-contain object-center z-0 w-full md:w-auto h-full transition-opacity group-hover:opacity-80"
         />
         <Image
@@ -75,6 +77,7 @@ const DatabaseVisual: React.FC<Props> = ({ className }) => {
           fill
           priority
           quality={100}
+          draggable={false}
           sizes="100%"
           className="dark:hidden absolute antialiased inset-0 object-contain object-center z-0 w-full md:w-auto h-full transition-opacity group-hover:opacity-80"
         />

apps/www/components/Sections/APISection.tsx

@@ -5,23 +5,25 @@ import Link from 'next/link'
 import { useState } from 'react'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { Button, Tabs } from 'ui'
-import CodeBlock from '../CodeBlock/CodeBlock'
+import CodeBlock, { LANG } from '../CodeBlock/CodeBlock'
 import { ArrowUpRight } from 'lucide-react'
 
-interface Example {
-  lang: 'js' | 'py' | 'sql'
+export interface APIExample {
+  lang: LANG
   title: string
   code: string
 }
 
 interface Props {
   size?: 'small' | 'large'
-  content: Example[]
+  content: APIExample[]
   title: string | React.ReactNode
   footer?: React.ReactNode
   text?: React.ReactNode
   autoHeight?: boolean
   documentation_link?: string
+  showLineNumbers?: boolean
+  ctaLabel?: string
 }
 
 function APISection(props: Props) {
@@ -38,12 +40,12 @@ function APISection(props: Props) {
   return (
     <div className="grid grid-cols-12 lg:gap-16">
       <div className="col-span-12 pb-8 lg:col-span-5 xl:col-span-5">
-        <h2 className="h3">{props.title}</h2>
+        <h2 className="h2">{props.title}</h2>
         <div className="p">{props.text}</div>
         {props.documentation_link && (
           <Button asChild size="small" className="mt-4" type="default" icon={<ArrowUpRight />}>
             <Link href={props.documentation_link} as={props.documentation_link}>
-              Explore documentation
+              {props.ctaLabel ? props.ctaLabel : 'Explore documentation'}
             </Link>
           </Button>
         )}
@@ -56,7 +58,7 @@ function APISection(props: Props) {
           onChange={(id: string) => handleApiSwiperNavChange(Number(id))}
         >
           {props.content &&
-            props.content.map((content: Example, i) => (
+            props.content.map((content: APIExample, i) => (
               <Tabs.Panel label={content.title} id={i.toString()} key={i}>
                 <span key={i}></span>
               </Tabs.Panel>
@@ -75,9 +77,14 @@ function APISection(props: Props) {
             autoHeight={props.autoHeight ? props.autoHeight : false}
           >
             {props.content &&
-              props.content.map((content: Example, i) => (
+              props.content.map((content: APIExample, i) => (
                 <SwiperSlide key={i}>
-                  <CodeBlock key={i} lang={content.lang} size={props.size ? props.size : 'small'}>
+                  <CodeBlock
+                    key={i}
+                    lang={content.lang}
+                    size={props.size ? props.size : 'small'}
+                    showLineNumbers={props.showLineNumbers}
+                  >
                     {content.code}
                   </CodeBlock>
                 </SwiperSlide>

apps/www/components/Sections/ProductHeader2.tsx

@@ -15,13 +15,13 @@ interface Props {
   title?: string
   image?: React.ReactNode
   footer?: React.ReactNode
-  footerPosition?: 'bottom' | 'left'
+  footerPosition?: 'left' | 'bottom' | 'right'
   ctas?: CTA[]
   className?: string
   sectionContainerClassName?: string
 }
 
-const ProductHeader = (props: Props) => (
+const ProductHeader = ({ footerPosition = 'left', ...props }: Props) => (
   <div
     className={cn(
       'w-full max-w-full relative mx-auto py-16 lg:py-24 border-b bg-alternative overflow-hidden',
@@ -61,12 +61,18 @@ const ProductHeader = (props: Props) => (
         )}
         <div className="flex flex-row md:flex-row md:items-center gap-2 mt-2">
           {props.ctas?.map((cta) => (
-            <Button key={cta.href} size="medium" type={cta.type ?? 'default'} asChild>
+            <Button
+              key={cta.href}
+              size="medium"
+              type={cta.type ?? 'default'}
+              onClick={cta.onClick}
+              asChild
+            >
               <Link href={cta.href}>{cta.label ?? 'Start for free'}</Link>
             </Button>
           ))}
         </div>
-        {props.footer && props.footerPosition === 'left' && (
+        {props.footer && footerPosition === 'left' && (
           <div className="ph-footer relative z-10 mt-4 md:mt-8 lg:mt-20 xl:mt-32 col-span-12">
             {props.footer}
           </div>
@@ -77,7 +83,7 @@ const ProductHeader = (props: Props) => (
           {props.image}
         </div>
       )}
-      {props.footer && props.footerPosition !== 'left' && (
+      {props.footer && footerPosition !== 'left' && (
         <div className="relative z-10 mt-4 md:mt-8 lg:mt-20 xl:mt-32 col-span-12">
           {props.footer}
         </div>