mirror of
https://github.com/supabase/supabase.git
synced 2026-07-22 15:37:14 -04:00
Ivan Vasilov
56de26fe22
This PR migrates the whole monorepo to use Tailwind v4: - Removed `@tailwindcss/container-queries` plugin since it's included by default in v4, - Bump all instances of Tailwind to v4. Made minimal changes to the shared config to remove non-supported features (`alpha` mentions), - Migrate all apps to be compatible with v4 configs, - Fix the `typography.css` import in 3 apps, - Add missing rules which were included by default in v3, - Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot of classes - Rename all misnamed classes according to https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all apps. --------- Co-authored-by: Jordi Enric <jordi.err@gmail.com>
121 lines
3.3 KiB
TypeScript
121 lines
3.3 KiB
TypeScript
import React from 'react'
|
|
import { cn } from 'ui'
|
|
|
|
import SectionContainer from '@/components/Layouts/SectionContainer'
|
|
|
|
interface Feature {
|
|
id?: string
|
|
title: string | React.ReactNode
|
|
subheading: string | React.ReactNode
|
|
highlights?: string | React.ReactNode
|
|
url?: string
|
|
icon?: string
|
|
image?: any
|
|
className?: string
|
|
onClick?: any
|
|
alignLeft?: boolean
|
|
}
|
|
|
|
export interface DXSectionProps {
|
|
id: string
|
|
title: string | React.ReactNode
|
|
subheading: string
|
|
features: Feature[]
|
|
className?: string
|
|
}
|
|
|
|
const DeveloperExperienceSection = ({
|
|
id,
|
|
title,
|
|
subheading,
|
|
features,
|
|
className,
|
|
}: DXSectionProps) => {
|
|
return (
|
|
<SectionContainer id={id} className={cn('flex flex-col gap-12 py-16 md:py-24', className)}>
|
|
<div className="flex flex-col gap-4 max-w-lg">
|
|
<h2 className="text-2xl md:text-3xl font-normal text-foreground-lighter">{title}</h2>
|
|
<p className="text-foreground-light text-base md:text-lg">{subheading}</p>
|
|
</div>
|
|
|
|
<div
|
|
className="
|
|
grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-0
|
|
rounded-md border-default overflow-hidden
|
|
sm:divide-x divide-y border
|
|
[&>div:nth-child(2n+1)]:sm:border-l-0!
|
|
[&>div:nth-child(2)]:sm:border-t-0!
|
|
[&>div:nth-child(3)]:lg:border-t-0!
|
|
[&>div:nth-child(3n)]:lg:border-l!
|
|
[&>div:nth-child(4n)]:lg:border-l-0!
|
|
[&>div:nth-child(3n-1)]:lg:border-l!
|
|
"
|
|
>
|
|
{features.map((feature) => (
|
|
<FeatureCard key={feature.id} feature={feature} />
|
|
))}
|
|
</div>
|
|
</SectionContainer>
|
|
)
|
|
}
|
|
|
|
const FeatureCard = ({ feature }: { feature: Feature }) => {
|
|
const { alignLeft = true } = feature
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'relative overflow-hidden',
|
|
'flex-1 flex flex-col',
|
|
'items-start justify-between',
|
|
'bg-default w-full h-full min-h-[330px] sm:min-h-[360px]',
|
|
'text-foreground-lighter [&_strong]:font-normal! [&_strong]:text-foreground!',
|
|
feature.className
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
'relative z-10',
|
|
'p-4 md:p-6 2xl:p-8',
|
|
'w-full',
|
|
'mx-auto gap-2 sm:gap-4',
|
|
'flex flex-col items-start',
|
|
'text-left',
|
|
alignLeft && 'lg:mx-0 lg:items-start lg:text-left'
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
{feature.icon && (
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 25 25"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d={feature.icon}
|
|
stroke="currentColor"
|
|
strokeMiterlimit="10"
|
|
strokeLinejoin="round"
|
|
strokeLinecap="round"
|
|
strokeWidth="1.5"
|
|
/>
|
|
</svg>
|
|
)}
|
|
<h3 className="">{feature.title}</h3>
|
|
</div>
|
|
<div className="flex-1 flex flex-col justify-between gap-2">
|
|
<p className="text-sm [&_strong]:text-foreground!">{feature.subheading}</p>
|
|
{feature.highlights && (
|
|
<span className="hidden lg:block text-foreground">{feature.highlights}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{feature.image && feature.image}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DeveloperExperienceSection
|