Skip to content

[pull] master from supabase:master #256

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 13, 2025
Merged

[pull] master from supabase:master #256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 2 additions & 62 deletions apps/www/components/Enterprise/Performance.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { FC } from 'react'
import { cn, Badge } from 'ui'

import SectionContainer from '~/components/Layouts/SectionContainer'
import UsersGrowthChart from '~/components/UsersGrowthChart'

interface Props {
id: string
Expand Down Expand Up @@ -30,71 +30,11 @@ const Performance: FC<Props> = (props) => {
))}
</div>
</div>
<div className="relative xl:absolute z-0 inset-0 mt-4 -mb-8 sm:mt-0 sm:-mb-20 md:-mt-20 md:-mb-36 xl:mt-0 xl:top-10 w-full aspect-[2.15/1]">
<GraphLabel className="" />
<svg
width="100%"
height="100%"
viewBox="0 0 1403 599"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="absolute inset-0 w-full h-full"
>
<path
d="M1402.27 0.744141C896.689 410.854 286.329 492.876 0.476562 492.876V598.744H1402.27V0.744141Z"
fill="url(#paint0_linear_585_9420)"
/>
<path
d="M11.4209 492.744C295.041 492.744 900.636 410.744 1402.27 0.744141"
stroke="hsl(var(--foreground-lighter))"
/>
<defs>
<linearGradient
id="paint0_linear_585_9420"
x1="701.374"
y1="170.846"
x2="701.374"
y2="561.839"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--border-overlay))" />
<stop offset="1" stopColor="hsl(var(--border-overlay))" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
<div className="absolute inset-0 w-full h-full bg-[radial-gradient(50%_50%_at_50%_50%,_transparent_0%,_hsl(var(--background-default))_100%)]" />
</div>
<UsersGrowthChart />
</SectionContainer>
)
}

const GraphLabel: FC<{ className?: string }> = ({ className }) => (
<div
className={cn(
'absolute z-10 inset-0 left-auto right-[20%] -top-8 md:top-0 xl:top-[15%] w-fit h-[200px] lg:h-[400px]',
'flex flex-col items-center gap-1',
className
)}
>
<div className="w-fit text-foreground bg-alternative p-4 rounded-lg border flex flex-col gap-1">
<span className="label !text-[10px] !leading-3">Users</span>
<div className="flex items-center gap-2">
<span className="text-foreground-light text-2xl">930,550</span>
<Badge variant="success" size="small" className="h-[24px] px-2">
+13.4%
</Badge>
</div>
</div>
<div
className={cn(
'relative w-2 h-2 min-w-2 min-h-2 rounded-full border-2 border-stronger',
'after:absolute after:inset-0 after:top-full after:mx-auto after:w-[2px] after:h-[150px] after:lg:h-[250px]',
'after:bg-gradient-to-b after:from-border-stronger after:to-transparent'
)}
/>
</div>
)

interface HighlightItemProps {
highlight: Highlight
}
Expand Down
123 changes: 3 additions & 120 deletions apps/www/components/Solutions/ResultsSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React, { FC } from 'react'
import { cn, Badge, AnimatedCounter } from 'ui'

import SectionContainer from '~/components/Layouts/SectionContainer'
import { motion } from 'framer-motion'
import { useMedia } from 'react-use'
import UsersGrowthChart from '~/components/UsersGrowthChart'

export interface ResultsSectionProps {
id: string
Expand Down Expand Up @@ -31,127 +30,11 @@ const ResultsSection: FC<ResultsSectionProps> = (props) => {
))}
</div>
</div>
<div className="relative xl:absolute z-0 inset-0 mt-4 -mb-8 sm:mt-0 sm:-mb-20 md:-mt-20 md:-mb-36 xl:mt-0 xl:top-10 w-full aspect-[2.15/1]">
<GraphLabel className="" />
<GraphPath className="absolute inset-0 w-full h-full" />

<svg
width="100%"
height="100%"
viewBox="0 0 1403 599"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="absolute inset-0 w-full h-full"
>
<path
d="M1402.27 0.744141C896.689 410.854 286.329 492.876 0.476562 492.876V598.744H1402.27V0.744141Z"
fill="url(#paint0_linear_585_9420)"
/>
<path
d="M11.4209 492.744C295.041 492.744 900.636 410.744 1402.27 0.744141"
stroke="hsl(var(--foreground-lighter))"
/>
<defs>
<linearGradient
id="paint0_linear_585_9420"
x1="701.374"
y1="170.846"
x2="701.374"
y2="561.839"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--border-overlay))" />
<stop offset="1" stopColor="hsl(var(--border-overlay))" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
<div className="absolute inset-0 w-full h-full bg-[radial-gradient(50%_50%_at_50%_50%,_transparent_0%,_hsl(var(--background-default))_100%)]" />
</div>
<UsersGrowthChart />
</SectionContainer>
)
}

const GraphLabel: FC<{ className?: string }> = ({ className }) => {
const isMobileOrTablet = useMedia('(max-width: 1280px)')

const motionProps = !isMobileOrTablet
? {
initial: { offsetDistance: '0%', rotate: '0deg', opacity: 0 },
whileInView: { offsetDistance: '80%', rotate: '30deg', opacity: 1 },
viewport: { once: true },
transition: { type: 'spring', duration: 2.68, bounce: 0, delay: 0.25 },
style: {
offsetPath: 'path("M0 493.132C285.852 493.132 896.213 411.11 1401.8 1")',
},
}
: undefined

const Component = isMobileOrTablet ? 'div' : motion.div

return (
<Component
className={cn(
'absolute z-10 -top-10 2xl:top-[20%] left-[38%] md:top-[10%] md:left-[50%] lg:top-0 xl:left-0 w-fit h-[200px] lg:h-[400px]',
'flex flex-col items-center gap-1',
className
)}
{...motionProps}
>
<div className="w-fit text-foreground bg-alternative p-4 rounded-lg border flex flex-col gap-1">
<span className="label !text-[10px] !leading-3">Users</span>
<div className="flex items-center gap-2">
<span className="text-foreground-light text-2xl">
{isMobileOrTablet ? (
'5,230,550'
) : (
<AnimatedCounter value={5230550} duration={2.68} delay={0.5} />
)}
</span>
<Badge variant="success" size="small" className="h-[24px] px-2">
{isMobileOrTablet ? (
'+28.3%'
) : (
<AnimatedCounter
value={28.3}
duration={2.68}
delay={0.5}
isPercentage={true}
prefix="+"
/>
)}
</Badge>
</div>
</div>
<div
className={cn(
'relative w-2 h-2 min-w-2 min-h-2 rounded-full border-2 border-stronger',
'after:absolute after:inset-0 after:top-full after:mx-auto after:w-[2px] after:h-[150px] after:lg:h-[250px]',
'after:bg-gradient-to-b after:from-border-stronger after:to-transparent'
)}
/>
</Component>
)
}

const GraphPath: FC<{ className?: string }> = ({ className }) => (
<svg
width="100%"
height="100%"
viewBox="0 0 1403 494"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<motion.path
transition={{ duration: 0.5, delay: 0.5 }}
initial={{ pathLength: 0.001 }}
whileInView={{ pathLength: 1 }}
viewport={{ once: true }}
d="M0 493.132C285.852 493.132 896.213 411.11 1401.8 1"
/>
</svg>
)

interface HighlightItemProps {
highlight: Highlight
}
Expand Down
66 changes: 3 additions & 63 deletions apps/www/components/Supasquad/PerfectTiming.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { FC } from 'react'
import { cn, Badge } from 'ui'

import SectionContainer from '~/components/Layouts/SectionContainer'
import { companyStats } from '~/data/company-stats'
import UsersGrowthChart from '~/components/UsersGrowthChart'

export interface PerfectTimingProps {
id: string
Expand Down Expand Up @@ -30,71 +30,11 @@ const PerfectTiming = (props: PerfectTimingProps) => {
))}
</div>
</div>
<div className="relative xl:absolute z-0 inset-0 mt-4 -mb-8 sm:mt-0 sm:-mb-20 md:-mt-20 md:-mb-36 xl:mt-0 xl:top-10 w-full aspect-[2.15/1]">
<GraphLabel className="" />
<svg
width="100%"
height="100%"
viewBox="0 0 1403 599"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="absolute inset-0 w-full h-full"
>
<path
d="M1402.27 0.744141C896.689 410.854 286.329 492.876 0.476562 492.876V598.744H1402.27V0.744141Z"
fill="url(#paint0_linear_585_9420)"
/>
<path
d="M11.4209 492.744C295.041 492.744 900.636 410.744 1402.27 0.744141"
stroke="hsl(var(--foreground-lighter))"
/>
<defs>
<linearGradient
id="paint0_linear_585_9420"
x1="701.374"
y1="170.846"
x2="701.374"
y2="561.839"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="hsl(var(--border-overlay))" />
<stop offset="1" stopColor="hsl(var(--border-overlay))" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
<div className="absolute inset-0 w-full h-full bg-[radial-gradient(50%_50%_at_50%_50%,_transparent_0%,_hsl(var(--background-default))_100%)]" />
</div>
<UsersGrowthChart />
</SectionContainer>
)
}

const GraphLabel: FC<{ className?: string }> = ({ className }) => (
<div
className={cn(
'absolute z-10 inset-0 left-auto right-[20%] -top-8 md:top-0 xl:top-[15%] w-fit h-[200px] lg:h-[400px]',
'flex flex-col items-center gap-1',
className
)}
>
<div className="w-fit text-foreground bg-alternative p-4 rounded-lg border flex flex-col gap-1">
<span className="label !text-[10px] !leading-3">Developers</span>
<div className="flex items-center gap-2">
<span className="text-foreground-light text-2xl">{companyStats.developersRegistered}</span>
<Badge variant="success" size="small" className="h-[24px] px-2">
{companyStats.developersRegisteredChange}
</Badge>
</div>
</div>
<div
className={cn(
'relative w-2 h-2 min-w-2 min-h-2 rounded-full border-2 border-stronger',
'after:absolute after:inset-0 after:top-full after:mx-auto after:w-[2px] after:h-[150px] after:lg:h-[250px]',
'after:bg-gradient-to-b after:from-border-stronger after:to-transparent'
)}
/>
</div>
)

interface HighlightItemProps {
highlight: Highlight
}
Expand Down
Loading
Loading