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>
59 lines
1.3 KiB
TypeScript
59 lines
1.3 KiB
TypeScript
import React, { FC } from 'react'
|
|
import Image from 'next/legacy/image'
|
|
import Link from 'next/link'
|
|
import { cn } from 'ui'
|
|
|
|
interface Props {
|
|
title: string
|
|
description?: string
|
|
to: string
|
|
icon?: string | any
|
|
children?: any
|
|
layout?: 'vertical' | 'horizontal'
|
|
className?: string
|
|
}
|
|
|
|
const ButtonCard: FC<Props> = ({
|
|
children = undefined,
|
|
icon = undefined,
|
|
title,
|
|
description = '',
|
|
to,
|
|
layout = 'vertical',
|
|
className,
|
|
}) => {
|
|
return (
|
|
<Link
|
|
href={to}
|
|
className={cn(
|
|
'h-full block shadow-none bg-surface-100 rounded-sm transition',
|
|
'border border-transparent hover:border-overlay',
|
|
className
|
|
)}
|
|
>
|
|
{children ? (
|
|
children
|
|
) : (
|
|
<div
|
|
className={[
|
|
'px-6 py-4 gap-x-4 gap-y-2 flex',
|
|
`${layout === 'vertical' ? 'flex-col' : 'items-center'}`,
|
|
].join(' ')}
|
|
>
|
|
{icon && typeof icon == 'string' ? (
|
|
<div className="w-[24px] h-[24px]">
|
|
<Image className="m-0" src={icon} width={24} height={24} alt={title} />
|
|
</div>
|
|
) : (
|
|
icon
|
|
)}
|
|
<h3 className="my-0 text-base text-foreground">{title}</h3>
|
|
<p className="my-0 text-sm">{description}</p>
|
|
</div>
|
|
)}
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
export default ButtonCard
|