mirror of
https://github.com/supabase/supabase.git
synced 2026-05-06 08:56:46 -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>
68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
import { Card, CardContent, Checkbox } from 'ui'
|
|
import {
|
|
Field,
|
|
FieldDescription,
|
|
FieldGroup,
|
|
FieldLabel,
|
|
FieldLegend,
|
|
FieldSet,
|
|
FieldTitle,
|
|
} from 'ui/src/components/shadcn/ui/field'
|
|
|
|
const options = [
|
|
{
|
|
label: 'Social Media',
|
|
value: 'social-media',
|
|
},
|
|
|
|
{
|
|
label: 'Search Engine',
|
|
value: 'search-engine',
|
|
},
|
|
{
|
|
label: 'Referral',
|
|
value: 'referral',
|
|
},
|
|
{
|
|
label: 'Other',
|
|
value: 'other',
|
|
},
|
|
]
|
|
|
|
export function FieldHear() {
|
|
return (
|
|
<Card className="py-4 shadow-none">
|
|
<CardContent className="px-4">
|
|
<form>
|
|
<FieldGroup>
|
|
<FieldSet className="gap-4">
|
|
<FieldLegend>How did you hear about us?</FieldLegend>
|
|
<FieldDescription className="line-clamp-1">
|
|
Select the option that best describes how you heard about us.
|
|
</FieldDescription>
|
|
<FieldGroup className="flex flex-row flex-wrap gap-2 [--radius:9999rem]">
|
|
{options.map((option) => (
|
|
<FieldLabel htmlFor={option.value} key={option.value} className="w-fit!">
|
|
<Field
|
|
orientation="horizontal"
|
|
className="gap-1.5 overflow-hidden px-3! py-1.5! transition-all duration-100 ease-linear group-has-data-checked/field-label:px-2!"
|
|
>
|
|
<Checkbox
|
|
value={option.value}
|
|
id={option.value}
|
|
defaultChecked={option.value === 'social-media'}
|
|
className="-ml-6 -translate-x-1 rounded-full transition-all duration-100 ease-linear data-checked:ml-0 data-checked:translate-x-0"
|
|
/>
|
|
<FieldTitle>{option.label}</FieldTitle>
|
|
</Field>
|
|
</FieldLabel>
|
|
))}
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|