mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 20:05:06 +03:00
Ivan VasilovandJordi Enric
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>
86 lines
3.3 KiB
TypeScript
86 lines
3.3 KiB
TypeScript
import styles from './features-grid.module.css'
|
|
import React from 'react'
|
|
import { cn } from 'ui'
|
|
import Panel from '~/components/Panel'
|
|
import SectionContainer from '../Layouts/SectionContainer'
|
|
|
|
export default function FeaturesGrid(props: any) {
|
|
const hasExtendedCards = props.features.some(
|
|
(f: any) => f.id === 'claim-flow' || f.id === 'platform-kit' || f.id === 'pico-instances'
|
|
)
|
|
|
|
return (
|
|
<SectionContainer id={props.id} className="flex flex-col gap-4 xl:pt-20 scroll-mt-20">
|
|
<div className="flex flex-col gap-2 max-w-xl">
|
|
<h2 className="h2 text-foreground-lighter m-0!">{props.heading}</h2>
|
|
<p className="p text-foreground-lighter! max-w-md">{props.subheading}</p>
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
'h-auto flex flex-col md:grid grid-cols-2 xl:grid-cols-3 gap-5 xl:flex-row',
|
|
hasExtendedCards ? styles['features-grid-extended'] : styles['features-grid']
|
|
)}
|
|
>
|
|
<Content
|
|
card={props.features.find((f: any) => f.id === 'postgres')}
|
|
innerClassName="[&_.image-container]:xl:pt-4 [&_.image-container]:xl:pl-8"
|
|
/>
|
|
<Content card={props.features.find((f: any) => f.id === 'pricing')} />
|
|
<Content
|
|
card={props.features.find((f: any) => f.id === 'mgmt-api')}
|
|
innerClassName="
|
|
xl:flex-row
|
|
[&_.image-container]:border-b
|
|
[&_.image-container]:pb-0
|
|
[&_.image-container]:xl:border-none
|
|
[&_.image-container]:xl:items-end
|
|
[&_.image-container]:xl:order-last
|
|
[&_.image-container]:xl:w-[calc(50%+1rem)]
|
|
[&_.next-image--dynamic-fill]:rounded-none"
|
|
/>
|
|
<Content card={props.features.find((f: any) => f.id === 'branching')} />
|
|
<Content card={props.features.find((f: any) => f.id === 'claim-flow')} />
|
|
<Content card={props.features.find((f: any) => f.id === 'platform-kit')} />
|
|
<Content
|
|
card={props.features.find((f: any) => f.id === 'pico-instances')}
|
|
innerClassName="
|
|
xl:flex-row
|
|
[&_.image-container]:border-b
|
|
[&_.image-container]:pb-0
|
|
[&_.image-container]:xl:border-none
|
|
[&_.image-container]:xl:items-end
|
|
[&_.image-container]:xl:order-last
|
|
[&_.image-container]:xl:w-[calc(50%+1rem)]
|
|
[&_.next-image--dynamic-fill]:rounded-none"
|
|
/>
|
|
</div>
|
|
</SectionContainer>
|
|
)
|
|
}
|
|
|
|
const Content = ({ card, innerClassName }: { card: any; innerClassName?: string }) => {
|
|
if (!card) return null
|
|
|
|
return (
|
|
<Panel
|
|
key={card.heading}
|
|
hasActiveOnHover={false}
|
|
outerClassName="w-full group hover:shadow-none"
|
|
innerClassName={cn('relative flex flex-col justify-between xl:min-h-[250px]', innerClassName)}
|
|
style={{ gridArea: card.id }}
|
|
>
|
|
{card.img && (
|
|
<div className="image-container relative h-full w-full inline-flex items-start p-6">
|
|
{card.img}
|
|
</div>
|
|
)}
|
|
<div className="content-container flex flex-col justify-between gap-3 p-6 flex-1">
|
|
<h3 className="text-foreground-lighter flex items-center gap-2">{card.heading}</h3>
|
|
<div className="flex flex-col justify-between gap-2">
|
|
<p className="text-sm text-foreground-lighter">{card.subheading}</p>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
)
|
|
}
|