mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 07:09:07 +03:00
new products menu
This commit is contained in:
Francesco Sansalvadore committed
1 parent
ceba5ebc87
commit
fa097e8f56
15 files changed
+423
-77
No files matched your search
@@ -40,7 +40,7 @@ const MenuItem = React.forwardRef<
|
||||
{children ?? (
|
||||
<>
|
||||
{icon && (
|
||||
<div className="shrink-0 bg-surface-200 min-w-10 w-10 h-10 flex items-center justify-center rounded-lg">
|
||||
<div className="shrink-0 border bg-surface-200 min-w-10 w-10 h-10 flex items-center justify-center rounded-lg">
|
||||
<svg
|
||||
className="h-5 w-5 group-hover/menu-item:text-foreground group-focus-visible/menu-item:text-foreground"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -71,12 +71,12 @@ const MenuItem = React.forwardRef<
|
||||
{hasChevron && (
|
||||
<ChevronRight
|
||||
strokeWidth={2}
|
||||
className="w-3 text-foreground transition-all will-change-transform -translate-x-1 opacity-0 group-hover/menu-item:translate-x-0 group-hover/menu-item:opacity-100"
|
||||
className="w-3 h-3 text-foreground transition-all will-change-transform -translate-x-1 opacity-0 group-hover/menu-item:translate-x-0 group-hover/menu-item:opacity-100"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{description && (
|
||||
<p className="line-clamp-1 -mb-1 leading-relaxed text-foreground-lighter group-hover/menu-item:text-foreground-light group-focus-visible/menu-item:text-foreground-light">
|
||||
<p className="line-clamp-2 leading-snug text-foreground-lighter group-hover/menu-item:text-foreground-light group-focus-visible/menu-item:text-foreground-light text-xs">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
@@ -0,0 +1,186 @@
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import { useRouter } from 'next/router'
|
||||
import Link from 'next/link'
|
||||
import { ChevronRight, Sparkles } from 'lucide-react'
|
||||
|
||||
import { useBreakpoint } from 'common'
|
||||
import { TextLink } from 'ui'
|
||||
import { NavigationMenuLink } from 'ui/src/components/shadcn/ui/navigation-menu'
|
||||
import MenuItem from './MenuItem'
|
||||
|
||||
import ComparisonsData from '~/data/Comparisons'
|
||||
import CustomersData from '~/data/CustomerStories'
|
||||
import MainProductsData from '~/data/MainProducts'
|
||||
import IntegrationsProductsData from '~/data/IntegrationsProducts'
|
||||
|
||||
const ProductDropdown = () => {
|
||||
const { basePath } = useRouter()
|
||||
const isTablet = useBreakpoint(1279)
|
||||
|
||||
return (
|
||||
<div className="flex flex-col lg:flex-row">
|
||||
<div className="flex flex-col py-6 px-6 gap-8 w-[400px] xl:w-[600px] bg-background">
|
||||
<ul className="grid gap-4 grid-cols-2">
|
||||
{Object.values(MainProductsData)
|
||||
.filter((product) => product.name !== 'Vector')
|
||||
.map((product) => (
|
||||
<NavigationMenuLink key={product.name} asChild>
|
||||
<MenuItem
|
||||
title={product.name}
|
||||
href={product.url}
|
||||
description={product.description_short}
|
||||
icon={product.icon}
|
||||
className="h-fit"
|
||||
hasChevron
|
||||
/>
|
||||
</NavigationMenuLink>
|
||||
))}
|
||||
</ul>
|
||||
<div className="flex flex-col gap-4 w-full">
|
||||
<div className="group flex items-center gap-1 text-foreground-lighter hover:text-foreground text-xs uppercase tracking-widest font-mono focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-sm focus-visible:text-foreground">
|
||||
Postgres Integrations
|
||||
</div>
|
||||
<ul className="grid grid-cols-2 gap-2">
|
||||
{Object.values(IntegrationsProductsData).map((subProduct) => (
|
||||
<NavigationMenuLink key={subProduct.name} asChild>
|
||||
<Link
|
||||
href={subProduct.url}
|
||||
className="
|
||||
h-fit group/menu-item
|
||||
flex items-start
|
||||
p-2 gap-2
|
||||
bg-surface-200
|
||||
text-xs leading-none
|
||||
text-foreground-light hover:text-foreground
|
||||
rounded-md border hover:border-stronger
|
||||
no-underline outline-none select-none
|
||||
focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:text-foreground
|
||||
"
|
||||
>
|
||||
<div className="w-8 h-8 min-w-8 shrink-0 bg-background border flex items-center justify-center rounded-md">
|
||||
<svg
|
||||
className="h-4 w-4 group-hover/menu-item:text-foreground group-focus-visible/menu-item:text-foreground"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
d={subProduct.icon}
|
||||
stroke="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center">
|
||||
<div className="flex items-center gap-1">
|
||||
<p className="leading-snug text-foreground">{subProduct.name}</p>
|
||||
<ChevronRight
|
||||
strokeWidth={2}
|
||||
className="w-3 h-3 text-foreground transition-all will-change-transform -translate-x-1 opacity-0 group-hover/menu-item:translate-x-0 group-hover/menu-item:opacity-100"
|
||||
/>
|
||||
</div>
|
||||
{subProduct.description_short && (
|
||||
<p className="line-clamp-2 leading-tight text-foreground-lighter group-hover/menu-item:text-foreground-light group-focus-visible/menu-item:text-foreground-light">
|
||||
{subProduct.description_short}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
</NavigationMenuLink>
|
||||
))}
|
||||
</ul>
|
||||
<Link
|
||||
href="/features"
|
||||
className="
|
||||
flex items-center justify-between group text-sm
|
||||
p-3 gap-2
|
||||
rounded-lg border
|
||||
bg-background text-foreground-light
|
||||
hover:text-foreground hover:border-foreground-muted
|
||||
focus-visible:text-foreground focus-visible:ring-2 focus-visible:outline-none
|
||||
focus-visible:rounded focus-visible:ring-foreground-lighter
|
||||
"
|
||||
>
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="shrink-0 bg-surface-200 min-w-8 w-8 h-8 flex items-center justify-center rounded">
|
||||
<Sparkles size={16} strokeWidth={1.3} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 !leading-3">
|
||||
<span>Features</span>
|
||||
<span className="text-foreground-lighter text-xs leading-3">
|
||||
Explore everything you can do with Supabase.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight
|
||||
strokeWidth={2}
|
||||
className="w-3 -ml-1 transition-all will-change-transform -translate-x-1 opacity-80 group-hover:translate-x-0 group-hover:opacity-100"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-surface-75 border-t xl:border-t-0 xl:border-l p-8 gap-8 grid grid-cols-5 xl:flex xl:flex-col w-full xl:w-[450px]">
|
||||
<div className="col-span-3 flex flex-col gap-8 xl:w-auto">
|
||||
<div>
|
||||
<Link
|
||||
href="/customers"
|
||||
className="group flex items-center gap-1 text-foreground-lighter hover:text-foreground text-xs uppercase tracking-widest font-mono mb-4 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-sm focus-visible:text-foreground"
|
||||
>
|
||||
Customer Stories
|
||||
<ChevronRight className="h-3 w-3 transition-transform will-change-transform -translate-x-1 group-hover:translate-x-0" />
|
||||
</Link>
|
||||
<ul className="flex flex-col gap-2">
|
||||
{CustomersData.slice(0, isTablet ? 2 : 2).map((customer) => (
|
||||
<li key={customer.organization}>
|
||||
<Link
|
||||
href={customer.url}
|
||||
className="group flex items-center gap-3 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded"
|
||||
>
|
||||
<div className="relative rounded-md bg-background border group-hover:border-foreground-muted/50 h-14 w-28 xl:h-16 xl:w-32 flex-shrink-0 overflow-auto">
|
||||
<Image
|
||||
src={`${basePath}/${customer.imgUrl}`}
|
||||
alt={customer.title}
|
||||
fill
|
||||
className="!p-4 object-contain brightness-70 contrast-[.35] filter"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h4 className="text-light group-hover:text-foreground group-focus-visible:text-foreground text-normal mb-0 text-sm line-clamp-3">
|
||||
{customer.title}
|
||||
</h4>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-2 grid grid-cols-1 gap-6 xl:gap-2">
|
||||
<div>
|
||||
<p className="text-foreground-lighter text-xs uppercase tracking-widest font-mono mb-3">
|
||||
{ComparisonsData.label}
|
||||
</p>
|
||||
<ul className="flex flex-col gap-2">
|
||||
{ComparisonsData.comparisons.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>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProductDropdown
|
||||
@@ -2,70 +2,131 @@ import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import { useRouter } from 'next/router'
|
||||
import Link from 'next/link'
|
||||
import { ChevronRight, LayoutGrid, Sparkles } from 'lucide-react'
|
||||
import { ChevronRight, Sparkles } from 'lucide-react'
|
||||
|
||||
import { useBreakpoint } from 'common'
|
||||
import { TextLink } from 'ui'
|
||||
import { NavigationMenuLink } from 'ui/src/components/shadcn/ui/navigation-menu'
|
||||
import MenuItem from './MenuItem'
|
||||
|
||||
import EventCallout from '~/components/EventCallout'
|
||||
import Panel from '~/components/Panel'
|
||||
|
||||
import ComparisonsData from 'data/Comparisons'
|
||||
import CustomersData from 'data/CustomerStories'
|
||||
import SolutionsData from 'data/Solutions'
|
||||
import ComparisonsData from '~/data/Comparisons'
|
||||
import CustomersData from '~/data/CustomerStories'
|
||||
import MainProductsData from '~/data/MainProducts'
|
||||
import IntegrationsProductsData from '~/data/IntegrationsProducts'
|
||||
|
||||
const ProductDropdown = () => {
|
||||
const { basePath } = useRouter()
|
||||
const isTablet = useBreakpoint(1279)
|
||||
|
||||
return (
|
||||
<div className="flex flex-col xl:flex-row">
|
||||
<ul className="bg-background grid gap-2 py-6 px-6 grid-cols-2 xl:grid-cols-1 w-[700px] xl:w-[360px]">
|
||||
{Object.values(SolutionsData).map((component) => (
|
||||
<NavigationMenuLink key={component.name} asChild>
|
||||
<MenuItem
|
||||
title={component.name}
|
||||
href={component.url}
|
||||
description={component.description_short}
|
||||
icon={component.icon}
|
||||
className="h-fit"
|
||||
hasChevron
|
||||
/>
|
||||
</NavigationMenuLink>
|
||||
))}
|
||||
</ul>
|
||||
<div className="bg-surface-75 border-t xl:border-t-0 xl:border-l p-8 gap-8 grid grid-cols-5 xl:flex xl:flex-col w-full xl:w-[500px]">
|
||||
<div className="col-span-3 flex flex-col gap-8 xl:w-auto">
|
||||
<Link
|
||||
href="/features"
|
||||
className="
|
||||
<div className="flex flex-col lg:flex-row">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex flex-row py-6 px-6 gap-2">
|
||||
<ul className="flex flex-col gap-4 w-[280px]">
|
||||
{Object.values(MainProductsData)
|
||||
.filter((product) => product.name !== 'Vector')
|
||||
.map((product) => (
|
||||
<NavigationMenuLink key={product.name} asChild>
|
||||
<MenuItem
|
||||
title={product.name}
|
||||
href={product.url}
|
||||
description={product.description_short}
|
||||
icon={product.icon}
|
||||
className="h-fit p-0"
|
||||
hasChevron
|
||||
/>
|
||||
</NavigationMenuLink>
|
||||
))}
|
||||
</ul>
|
||||
<div className="flex flex-col gap-4 w-[250px]">
|
||||
<div className="group flex items-center gap-1 text-foreground-lighter hover:text-foreground text-xs uppercase tracking-widest font-mono focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-sm focus-visible:text-foreground">
|
||||
Postgres Integrations
|
||||
</div>
|
||||
<ul className="flex flex-col gap-4">
|
||||
{Object.values(IntegrationsProductsData).map((subProduct) => (
|
||||
<NavigationMenuLink key={subProduct.name} asChild>
|
||||
<Link
|
||||
href={subProduct.url}
|
||||
className="
|
||||
h-fit group/menu-item
|
||||
flex items-start gap-2
|
||||
text-xs leading-none
|
||||
text-foreground-light hover:text-foreground
|
||||
no-underline outline-none select-none
|
||||
focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:text-foreground
|
||||
"
|
||||
>
|
||||
<div className="w-8 h-8 min-w-8 shrink-0 bg-background border flex items-center justify-center rounded-md">
|
||||
<svg
|
||||
className="h-4 w-4 group-hover/menu-item:text-foreground group-focus-visible/menu-item:text-foreground"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
d={subProduct.icon}
|
||||
stroke="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center">
|
||||
<div className="flex items-center gap-1">
|
||||
<p className="leading-snug text-foreground">{subProduct.name}</p>
|
||||
<ChevronRight
|
||||
strokeWidth={2}
|
||||
className="w-3 h-3 text-foreground transition-all will-change-transform -translate-x-1 opacity-0 group-hover/menu-item:translate-x-0 group-hover/menu-item:opacity-100"
|
||||
/>
|
||||
</div>
|
||||
{subProduct.description_short && (
|
||||
<p className="line-clamp-2 leading-tight text-foreground-lighter group-hover/menu-item:text-foreground-light group-focus-visible/menu-item:text-foreground-light">
|
||||
{subProduct.description_short}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
</NavigationMenuLink>
|
||||
))}
|
||||
</ul>
|
||||
<Link
|
||||
href="/features"
|
||||
className="
|
||||
flex items-center justify-between group text-sm
|
||||
p-3 gap-2
|
||||
p-3 gap-2 mt-6
|
||||
rounded-lg border
|
||||
bg-background text-foreground-light
|
||||
hover:text-foreground hover:border-foreground-muted
|
||||
focus-visible:text-foreground focus-visible:ring-2 focus-visible:outline-none
|
||||
focus-visible:rounded focus-visible:ring-foreground-lighter
|
||||
"
|
||||
>
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="shrink-0 bg-surface-200 min-w-8 w-8 h-8 flex items-center justify-center rounded">
|
||||
<Sparkles size={16} strokeWidth={1.3} />
|
||||
>
|
||||
<div className="flex gap-2 items-start">
|
||||
<div className="shrink-0 bg-surface-200 min-w-8 w-8 h-8 flex items-center justify-center rounded">
|
||||
<Sparkles size={16} strokeWidth={1.3} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 !leading-3">
|
||||
<span>Features</span>
|
||||
<span className="text-foreground-lighter text-xs leading-tight">
|
||||
Explore everything you can do with Supabase.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 !leading-3">
|
||||
<span>Features</span>
|
||||
<span className="text-foreground-lighter text-xs leading-3">
|
||||
Explore everything you can do with Supabase.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight
|
||||
strokeWidth={2}
|
||||
className="w-3 -ml-1 transition-all will-change-transform -translate-x-1 opacity-80 group-hover:translate-x-0 group-hover:opacity-100"
|
||||
/>
|
||||
</Link>
|
||||
<ChevronRight
|
||||
strokeWidth={2}
|
||||
className="w-3 -ml-1 transition-all will-change-transform -translate-x-1 opacity-80 group-hover:translate-x-0 group-hover:opacity-100"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="py-6 pt-0 px-6">
|
||||
|
||||
</div> */}
|
||||
</div>
|
||||
<div className="bg-surface-75 border-t xl:border-t-0 xl:border-l p-6 gap-8 grid grid-cols-5 xl:flex xl:flex-col w-full xl:w-[400px]">
|
||||
<div className="col-span-3 flex flex-col gap-8 xl:w-auto">
|
||||
<div>
|
||||
<Link
|
||||
href="/customers"
|
||||
@@ -75,18 +136,18 @@ const ProductDropdown = () => {
|
||||
<ChevronRight className="h-3 w-3 transition-transform will-change-transform -translate-x-1 group-hover:translate-x-0" />
|
||||
</Link>
|
||||
<ul className="flex flex-col gap-2">
|
||||
{CustomersData.slice(0, isTablet ? 2 : 2).map((customer) => (
|
||||
{CustomersData.slice(0, isTablet ? 2 : 1).map((customer) => (
|
||||
<li key={customer.organization}>
|
||||
<Link
|
||||
href={customer.url}
|
||||
className="group flex items-center gap-3 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded"
|
||||
>
|
||||
<div className="relative rounded-md bg-background border group-hover:border-foreground-muted/50 h-14 w-28 xl:h-16 xl:w-32 flex-shrink-0 overflow-auto">
|
||||
<div className="relative rounded-md bg-background border group-hover:border-foreground-muted/50 h-14 w-28 xl:h-14 xl:w-24 flex-shrink-0 overflow-auto">
|
||||
<Image
|
||||
src={`${basePath}/${customer.imgUrl}`}
|
||||
alt={customer.title}
|
||||
fill
|
||||
className="!p-4 object-contain brightness-70 contrast-[.35] filter"
|
||||
className="!p-3 object-contain brightness-70 contrast-[.35] filter"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
@@ -100,7 +161,7 @@ const ProductDropdown = () => {
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-2 grid grid-cols-1 xl:grid-cols-2 gap-6 xl:gap-2">
|
||||
<div className="col-span-2 grid grid-cols-1 gap-6 xl:gap-2">
|
||||
<div>
|
||||
<p className="text-foreground-lighter text-xs uppercase tracking-widest font-mono mb-3">
|
||||
{ComparisonsData.label}
|
||||
|
||||
@@ -8,7 +8,7 @@ import { pricing } from 'shared-data/pricing'
|
||||
import { Button, Select, cn } from 'ui'
|
||||
import { PricingTableRowDesktop, PricingTableRowMobile } from '~/components/Pricing/PricingTableRow'
|
||||
import { Organization } from '~/data/organizations'
|
||||
import Solutions from '~/data/Solutions'
|
||||
import Solutions from '~/data/MainProducts'
|
||||
import gaEvents from '~/lib/gaEvents'
|
||||
import Telemetry, { TelemetryEvent } from '~/lib/telemetry'
|
||||
import UpgradePlan from './UpgradePlan'
|
||||
|
||||
@@ -16,10 +16,10 @@ import { PRODUCT_SHORTNAMES } from 'shared-data/products'
|
||||
import gaEvents from '~/lib/gaEvents'
|
||||
import Telemetry from '~/lib/telemetry'
|
||||
|
||||
import type { SolutionsType } from '~/data/Solutions'
|
||||
import type { ProductType } from '~/data/MainProducts'
|
||||
|
||||
interface Props {
|
||||
products: SolutionsType
|
||||
products: ProductType
|
||||
}
|
||||
|
||||
const Products: React.FC<Props> = (props) => {
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import {
|
||||
PRODUCT_INTEGRATION_NAMES,
|
||||
PRODUCT_INTEGRATIONS,
|
||||
PRODUCT_SHORTNAMES,
|
||||
} from 'shared-data/products'
|
||||
import { ProductType } from './MainProducts'
|
||||
|
||||
const IntegrationsProducts: ProductType = {
|
||||
[PRODUCT_SHORTNAMES.VECTOR]: {
|
||||
name: PRODUCT_INTEGRATION_NAMES.VECTOR,
|
||||
icon: PRODUCT_INTEGRATIONS.vector.icon[24],
|
||||
description: (
|
||||
<>
|
||||
Integrate your favorite ML-models to{' '}
|
||||
<strong>store, index and search vector embeddings</strong>.
|
||||
</>
|
||||
),
|
||||
description_short: 'AI toolkit to manage embeddings',
|
||||
label: '',
|
||||
url: '/product/integrations/vector',
|
||||
},
|
||||
cron_jobs: {
|
||||
name: PRODUCT_INTEGRATION_NAMES.CRON_JOBS,
|
||||
icon: PRODUCT_INTEGRATIONS['cron-jobs'].icon[24],
|
||||
description: (
|
||||
<>
|
||||
Integrate your favorite ML-models to{' '}
|
||||
<strong>store, index and search vector embeddings</strong>.
|
||||
</>
|
||||
),
|
||||
description_short: 'Schedule, manage and monitor jobs',
|
||||
label: '',
|
||||
url: '/product/integrations/cron-jobs',
|
||||
},
|
||||
queues: {
|
||||
name: PRODUCT_INTEGRATION_NAMES.QUEUES,
|
||||
icon: PRODUCT_INTEGRATIONS.queues.icon[24],
|
||||
description: (
|
||||
<>
|
||||
Native Postgres queuing solution for dedicated message queues with the simplicity of SQL and
|
||||
zero additional infrastructure
|
||||
</>
|
||||
),
|
||||
description_short: 'Native pull queues without headache',
|
||||
label: '',
|
||||
url: '/product/integrations/queues',
|
||||
},
|
||||
}
|
||||
|
||||
export default IntegrationsProducts
|
||||
@@ -1,7 +1,7 @@
|
||||
import { products } from 'shared-data'
|
||||
import { PRODUCT_NAMES, PRODUCT_SHORTNAMES } from 'shared-data/products'
|
||||
|
||||
export type SolutionsType = {
|
||||
export type ProductType = {
|
||||
[key: string]: {
|
||||
name: string
|
||||
icon: string
|
||||
@@ -12,7 +12,7 @@ export type SolutionsType = {
|
||||
}
|
||||
}
|
||||
|
||||
const solutions: SolutionsType = {
|
||||
const MainProducts: ProductType = {
|
||||
[PRODUCT_SHORTNAMES.DATABASE]: {
|
||||
name: PRODUCT_NAMES.DATABASE,
|
||||
icon: products.database.icon[24],
|
||||
@@ -89,4 +89,4 @@ const solutions: SolutionsType = {
|
||||
},
|
||||
}
|
||||
|
||||
export default solutions
|
||||
export default MainProducts
|
||||
@@ -1,4 +1,4 @@
|
||||
import solutions from '~/data/Solutions'
|
||||
import MainProducts from '~/data/MainProducts'
|
||||
import VideoWithHighlights from '~/components/VideoWithHighlights'
|
||||
|
||||
export default {
|
||||
@@ -32,7 +32,7 @@ export default {
|
||||
},
|
||||
productsSection: {
|
||||
products: {
|
||||
...solutions,
|
||||
...MainProducts,
|
||||
'data-api': {
|
||||
name: 'Data APIs',
|
||||
icon: 'M4.13477 12.8129C4.13477 14.1481 4.43245 15.4138 4.96506 16.5471M12.925 4.02271C11.5644 4.02271 10.276 4.33184 9.12614 4.88371M21.7152 12.8129C21.7152 11.4644 21.4115 10.1867 20.8688 9.0447M12.925 21.6032C14.2829 21.6032 15.5689 21.2952 16.717 20.7454M16.717 20.7454C17.2587 21.5257 18.1612 22.0366 19.1831 22.0366C20.84 22.0366 22.1831 20.6935 22.1831 19.0366C22.1831 17.3798 20.84 16.0366 19.1831 16.0366C17.5263 16.0366 16.1831 17.3798 16.1831 19.0366C16.1831 19.6716 16.3804 20.2605 16.717 20.7454ZM4.96506 16.5471C4.16552 17.086 3.63965 17.9999 3.63965 19.0366C3.63965 20.6935 4.98279 22.0366 6.63965 22.0366C8.2965 22.0366 9.63965 20.6935 9.63965 19.0366C9.63965 17.3798 8.2965 16.0366 6.63965 16.0366C6.01951 16.0366 5.44333 16.2248 4.96506 16.5471ZM9.12614 4.88371C8.58687 4.08666 7.67444 3.56274 6.63965 3.56274C4.98279 3.56274 3.63965 4.90589 3.63965 6.56274C3.63965 8.2196 4.98279 9.56274 6.63965 9.56274C8.2965 9.56274 9.63965 8.2196 9.63965 6.56274C9.63965 5.94069 9.45032 5.36285 9.12614 4.88371ZM20.8688 9.0447C21.6621 8.50486 22.1831 7.59464 22.1831 6.56274C22.1831 4.90589 20.84 3.56274 19.1831 3.56274C17.5263 3.56274 16.1831 4.90589 16.1831 6.56274C16.1831 8.2196 17.5263 9.56274 19.1831 9.56274C19.8081 9.56274 20.3884 9.37165 20.8688 9.0447Z',
|
||||
|
||||
@@ -2,7 +2,7 @@ import DevelopersDropdown from '~/components/Nav/DevelopersDropdown'
|
||||
import ProductDropdown from '~/components/Nav/ProductDropdown'
|
||||
|
||||
import { data as DevelopersData } from 'data/Developers'
|
||||
import SolutionsData from 'data/Solutions'
|
||||
import MainProductsData from '~/data/MainProducts'
|
||||
|
||||
export const getMenu = () => ({
|
||||
primaryNav: [
|
||||
@@ -11,7 +11,7 @@ export const getMenu = () => ({
|
||||
hasDropdown: true,
|
||||
dropdown: <ProductDropdown />,
|
||||
dropdownContainerClassName: 'rounded-xl',
|
||||
subMenu: SolutionsData,
|
||||
subMenu: MainProductsData,
|
||||
},
|
||||
{
|
||||
title: 'Developers',
|
||||
|
||||
@@ -4,7 +4,7 @@ import Link from 'next/link'
|
||||
|
||||
import { PRODUCT_NAMES } from 'shared-data/products'
|
||||
import Examples from '~/data/Examples'
|
||||
import solutions from '~/data/Solutions'
|
||||
import solutions from '~/data/MainProducts'
|
||||
|
||||
const FunctionsHero = dynamic(() => import('~/components/Products/Functions/FunctionsHero'))
|
||||
const RealtimeLogs = dynamic(() => import('~/components/Products/Functions/RealtimeLogs'))
|
||||
|
||||
@@ -15,7 +15,7 @@ import ProductsNav from '~/components/Products/ProductsNav'
|
||||
import ProductHeader from '~/components/Sections/ProductHeader'
|
||||
import EventCallout from '~/components/EventCallout'
|
||||
|
||||
import Solutions from 'data/Solutions'
|
||||
import MainProducts from '~/data/MainProducts'
|
||||
import { PRODUCT_NAMES } from 'shared-data/products'
|
||||
import AuthProviders from '~/data/auth.json'
|
||||
|
||||
@@ -60,8 +60,8 @@ function AuthPage() {
|
||||
className="mb-4 lg:mb-8 -mt-8 lg:-mt-10"
|
||||
/>
|
||||
}
|
||||
icon={Solutions['authentication'].icon}
|
||||
title={Solutions['authentication'].name}
|
||||
icon={MainProducts['authentication'].icon}
|
||||
title={MainProducts['authentication'].name}
|
||||
h1={[
|
||||
<span key={'authentication-h1'}>
|
||||
Open Source Auth
|
||||
|
||||
@@ -11,7 +11,7 @@ import { Swiper, SwiperSlide } from 'swiper/react'
|
||||
import { Badge, Button, Image, Tabs } from 'ui'
|
||||
|
||||
// data
|
||||
import Solutions from 'data/Solutions'
|
||||
import MainProducts from '~/data/MainProducts'
|
||||
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'
|
||||
@@ -72,8 +72,8 @@ function Database() {
|
||||
<DefaultLayout>
|
||||
<ProductsNav activePage={PRODUCT_NAMES.DATABASE} />
|
||||
<ProductHeader
|
||||
icon={Solutions['database'].icon}
|
||||
title={Solutions['database'].name}
|
||||
icon={MainProducts['database'].icon}
|
||||
title={MainProducts['database'].name}
|
||||
h1={[
|
||||
<span key={'database-h1'}>
|
||||
Open Source SQL Database
|
||||
@@ -103,7 +103,7 @@ function Database() {
|
||||
<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} />
|
||||
<ProductIcon icon={MainProducts['database'].icon} />
|
||||
<X />
|
||||
<div className="flex w-fit items-center">
|
||||
<NextImage
|
||||
@@ -122,9 +122,9 @@ function Database() {
|
||||
</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} />
|
||||
<ProductIcon icon={MainProducts['database'].icon} />
|
||||
<X />
|
||||
<ProductIcon icon={Solutions['authentication'].icon} />
|
||||
<ProductIcon icon={MainProducts['authentication'].icon} />
|
||||
</div>
|
||||
|
||||
<h4 className="h4">Built-in Auth</h4>
|
||||
@@ -136,7 +136,7 @@ function Database() {
|
||||
</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} />
|
||||
<ProductIcon icon={MainProducts['database'].icon} />
|
||||
<X />
|
||||
<ProductIcon icon={'M13 10V3L4 14h7v7l9-11h-7z'} />
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import ApiExamples from 'data/products/realtime/api-examples'
|
||||
import AppExamples from 'data/products/realtime/app-examples'
|
||||
import Solutions from 'data/Solutions'
|
||||
import MainProducts from '~/data/MainProducts'
|
||||
import { NextSeo } from 'next-seo'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
@@ -62,8 +62,8 @@ function RealtimePage() {
|
||||
<DefaultLayout>
|
||||
<ProductsNav activePage={PRODUCT_NAMES.REALTIME} />
|
||||
<ProductHeader
|
||||
icon={Solutions['realtime']?.icon}
|
||||
title={Solutions['realtime']?.name}
|
||||
icon={MainProducts['realtime']?.icon}
|
||||
title={MainProducts['realtime']?.name}
|
||||
h1={[<span key={'authentication-h1'}>Build modern web and mobile applications</span>]}
|
||||
subheader={['Sync client state globally over WebSockets in Realtime']}
|
||||
image={[
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import ApiExamples from 'data/products/storage/api-examples'
|
||||
import DashboardViewData from 'data/products/storage/dashboard-carousel.json'
|
||||
import StoragePermissionsData from 'data/products/storage/permissions-examples'
|
||||
import Solutions from 'data/Solutions'
|
||||
import Solutions from '~/data/MainProducts'
|
||||
import { ArrowUpRight, Shuffle, Wifi, X } from 'lucide-react'
|
||||
import { NextSeo } from 'next-seo'
|
||||
import Link from 'next/link'
|
||||
|
||||
@@ -24,6 +24,24 @@ export enum PRODUCT_SHORTNAMES {
|
||||
VECTOR = 'vector',
|
||||
}
|
||||
|
||||
export type PRODUCT_INTEGRATION =
|
||||
| PRODUCT_INTEGRATIONS_SHORTNAMES.CRON_JOBS
|
||||
| PRODUCT_INTEGRATIONS_SHORTNAMES.QUEUES
|
||||
| PRODUCT_INTEGRATIONS_SHORTNAMES.VECTOR
|
||||
|
||||
// Product Integrations
|
||||
export enum PRODUCT_INTEGRATION_NAMES {
|
||||
CRON_JOBS = 'Cron Jobs',
|
||||
QUEUES = 'Queues',
|
||||
VECTOR = 'Vector',
|
||||
}
|
||||
|
||||
export enum PRODUCT_INTEGRATIONS_SHORTNAMES {
|
||||
CRON_JOBS = 'cron-jobs',
|
||||
QUEUES = 'queues',
|
||||
VECTOR = 'vector',
|
||||
}
|
||||
|
||||
// icon can be 16px, 18px or 24px
|
||||
interface Icon {
|
||||
'16': string
|
||||
@@ -32,7 +50,7 @@ interface Icon {
|
||||
}
|
||||
|
||||
export interface ProductProps {
|
||||
name: PRODUCT_NAMES
|
||||
name: PRODUCT_NAMES | PRODUCT_INTEGRATION_NAMES
|
||||
icon: Icon
|
||||
}
|
||||
|
||||
@@ -40,6 +58,10 @@ export type Products = {
|
||||
[product in PRODUCT]: ProductProps
|
||||
}
|
||||
|
||||
export type ProductIntegrations = {
|
||||
[product in PRODUCT_INTEGRATION]: ProductProps
|
||||
}
|
||||
|
||||
export const products: Products = {
|
||||
database: {
|
||||
name: PRODUCT_NAMES.DATABASE,
|
||||
@@ -90,3 +112,30 @@ export const products: Products = {
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const PRODUCT_INTEGRATIONS: ProductIntegrations = {
|
||||
'cron-jobs': {
|
||||
name: PRODUCT_INTEGRATION_NAMES.CRON_JOBS,
|
||||
icon: {
|
||||
'16': 'M8.02637 4.34082V8.09082H10.8389M14.2764 8.09082C14.2764 11.5426 11.4781 14.3408 8.02637 14.3408C4.57459 14.3408 1.77637 11.5426 1.77637 8.09082C1.77637 4.63904 4.57459 1.84082 8.02637 1.84082C11.4781 1.84082 14.2764 4.63904 14.2764 8.09082Z',
|
||||
'18': 'M8.02637 4.34082V8.09082H10.8389M14.2764 8.09082C14.2764 11.5426 11.4781 14.3408 8.02637 14.3408C4.57459 14.3408 1.77637 11.5426 1.77637 8.09082C1.77637 4.63904 4.57459 1.84082 8.02637 1.84082C11.4781 1.84082 14.2764 4.63904 14.2764 8.09082Z',
|
||||
'24': 'M12 6.375V12H16.2188M21.375 12C21.375 17.1777 17.1777 21.375 12 21.375C6.82233 21.375 2.625 17.1777 2.625 12C2.625 6.82233 6.82233 2.625 12 2.625C17.1777 2.625 21.375 6.82233 21.375 12Z',
|
||||
},
|
||||
},
|
||||
queues: {
|
||||
name: PRODUCT_INTEGRATION_NAMES.QUEUES,
|
||||
icon: {
|
||||
'16': 'M9.27637 1.84082H12.7764C13.6048 1.84082 14.2764 2.51239 14.2764 3.34082V6.84082C14.2764 7.66925 13.6048 8.34082 12.7764 8.34082H9.27637C8.44794 8.34082 7.77637 7.66925 7.77637 6.84082V3.34082C7.77637 2.51239 8.44794 1.84082 9.27637 1.84082Z',
|
||||
'18': 'M9.27637 1.84082H12.7764C13.6048 1.84082 14.2764 2.51239 14.2764 3.34082V6.84082C14.2764 7.66925 13.6048 8.34082 12.7764 8.34082H9.27637C8.44794 8.34082 7.77637 7.66925 7.77637 6.84082V3.34082C7.77637 2.51239 8.44794 1.84082 9.27637 1.84082Z',
|
||||
'24': 'M17.625 16.2902C17.625 17.0274 17.0274 17.625 16.2902 17.625H9.375C7.71815 17.625 6.375 16.2819 6.375 14.625V8.14725C6.375 7.16846 7.16846 6.375 8.14725 6.375M13.125 20.7902C13.125 21.5274 12.5274 22.125 11.7902 22.125H4.875C3.21815 22.125 1.875 20.7819 1.875 19.125V12.6472C1.875 11.6685 2.66846 10.875 3.64725 10.875M13.875 13.125H19.125C20.7819 13.125 22.125 11.7819 22.125 10.125V4.875C22.125 3.21815 20.7819 1.875 19.125 1.875H13.875C12.2181 1.875 10.875 3.21815 10.875 4.875V10.125C10.875 11.7819 12.2181 13.125 13.875 13.125Z',
|
||||
},
|
||||
},
|
||||
vector: {
|
||||
name: PRODUCT_INTEGRATION_NAMES.VECTOR,
|
||||
icon: {
|
||||
'16': 'M7.99886 7.63216V14.4892M7.99886 7.63216L14.0488 4.11804M7.99886 7.63216L1.94922 4.11819M1.94922 4.11819V8.32332M1.94922 4.11819V4.08217L5.57319 1.97717M14.049 8.36007V4.08217L10.4251 1.97717M11.8165 12.4072L7.99913 14.6245L4.18177 12.4072',
|
||||
'18': 'M8.61033 8.15404V16.8287M8.61033 8.15404L16.264 3.70838M8.61033 8.15404L0.957031 3.70858M0.957031 3.70858V9.02842M0.957031 3.70858V3.66301L5.54166 1M16.2643 9.07491V3.66301L11.6797 1M13.44 14.1949L8.61068 17L3.7814 14.1949',
|
||||
'24': 'M11.9983 11.4482V21.7337M11.9983 11.4482L21.0732 6.17699M11.9983 11.4482L2.92383 6.17723M2.92383 6.17723V12.4849M2.92383 6.17723V6.1232L8.35978 2.9657M21.0736 12.54V6.1232L15.6376 2.9657M17.7247 18.6107L11.9987 21.9367L6.27265 18.6107',
|
||||
},
|
||||
},
|
||||
}
|
||||
Reference in new issue
Block a user