mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 02:15:05 +03:00
Jonathan Summers-MuirandFrancesco Sansalvadore
6d760a1a99
* chore: move to deeper dark * tidy up boxes on www * update deep-dark colors * fix homepage product cards * toned down pricing page a little * update * lots of color changes * Update grid.scss * Update EntityListItem.tsx * Update EntityListItem.tsx * fix partners page icon * fix partners page colors * update theme * Update global.css * combined dark theme so classic-dark does not break on other sites * Update package-lock.json * updated color tokens pipeline to support combined dark theme * smol updates * Update FeaturedThumb.tsx * Update BlogFilters.tsx * Update BlogListItem.tsx * Update BlogListItem.tsx * Update UserSettingsDropdown.tsx * Update NavigationBar.tsx --------- Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import { ComponentProps, ReactNode, forwardRef } 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-muted">{icon}</div>
|
|
<span
|
|
className={cn(
|
|
'absolute left-7 group-data-[state=expanded]:left-10',
|
|
'opacity-0 group-data-[state=expanded]:opacity-100',
|
|
'w-[10rem] 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-0 transition-all',
|
|
'group-data-[state=expanded]:opacity-100 '
|
|
)}
|
|
>
|
|
{rightText}
|
|
</div>
|
|
)}
|
|
</Button>
|
|
)
|
|
})
|
|
|
|
NavigationIconButton.displayName = 'NavigationIconButton'
|