mirror of
https://github.com/supabase/supabase.git
synced 2026-06-15 08:05:21 +08:00
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>
53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import { ComponentProps, forwardRef, ReactNode } from 'react'
|
|
import { Button, cn } from 'ui'
|
|
|
|
export const NavigationIconButton = forwardRef<
|
|
HTMLButtonElement,
|
|
Omit<
|
|
ComponentProps<typeof Button>,
|
|
// omit other icon props to avoid confusion
|
|
// using `icon` instead as there is only 1 use case for this component
|
|
'iconRight' | 'iconLeft'
|
|
> & {
|
|
rightText?: ReactNode
|
|
}
|
|
>(({ icon, rightText, ...props }, ref) => {
|
|
return (
|
|
<Button
|
|
ref={ref}
|
|
type="text"
|
|
size="tiny"
|
|
{...props}
|
|
className={cn(
|
|
'h-10 [&>span]:relative [&>span]:items-center [&>span]:gap-3 [&>span]:flex [&>span]:w-full [&>span]:h-full p-0',
|
|
props.className
|
|
)}
|
|
>
|
|
<div className="absolute left-2 text-foreground-lighter">{icon}</div>
|
|
<span
|
|
className={cn(
|
|
'absolute left-10 md:left-7 md:group-data-[state=expanded]:left-10',
|
|
'opacity-100 md:opacity-0 md:group-data-[state=expanded]:opacity-100',
|
|
'w-40 text-sm flex flex-col items-center',
|
|
'transition-all'
|
|
)}
|
|
>
|
|
<span className="w-full text-left text-foreground-light truncate">{props.children}</span>
|
|
</span>
|
|
{rightText && (
|
|
<div
|
|
className={cn(
|
|
'absolute right-2 flex items-center',
|
|
'opacity-100 md:opacity-0 transition-all',
|
|
'md:group-data-[state=expanded]:opacity-100 '
|
|
)}
|
|
>
|
|
{rightText}
|
|
</div>
|
|
)}
|
|
</Button>
|
|
)
|
|
})
|
|
|
|
NavigationIconButton.displayName = 'NavigationIconButton'
|