mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 02:45:07 +03:00
754ee55cd0
* chore: update themes and add dark-new theme set * chore: update * add deep dark css theme * fix issue with wrong class * chore: add `bg-studio` as a custom remapped color for studio background * updated surface classes to use a surface-75. * update backgrounds and borders * Update CardButton.tsx * Update NavigationIconButton.tsx * chore: add theme selection * Update package.json * Update index.ts * Update package.json * update alias * Update ThemeSettings.tsx * chore: split up theme support * remove old code * Update index.ts * add back in * Update ThemeSettingsOld.tsx * fix issue with system theme leaking through * reset themes * update imports * packagelock updated * Update ThemeSettingsWithPreferredTheme.tsx * Update system.svg * Update NavigationIconButton.tsx * Update NavigationBar.tsx * update * Update light.css * updated some colors * light mode updated * hacked * prettier --------- Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com> Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
import * as Tooltip from '@radix-ui/react-tooltip'
|
|
import Link from 'next/link'
|
|
|
|
import ConditionalWrap from 'components/ui/ConditionalWrap'
|
|
import { Route } from 'components/ui/ui.types'
|
|
|
|
interface NavigationIconButtonProps {
|
|
route: Route
|
|
isActive?: boolean
|
|
}
|
|
|
|
const NavigationIconButton = ({ route, isActive = false }: NavigationIconButtonProps) => {
|
|
return (
|
|
<Tooltip.Root delayDuration={0}>
|
|
<Tooltip.Trigger>
|
|
<ConditionalWrap
|
|
condition={route.link !== undefined}
|
|
wrap={(children) => <Link href={route.link!}>{children}</Link>}
|
|
>
|
|
<span
|
|
className={[
|
|
'transition-colors duration-200',
|
|
'flex items-center justify-center h-10 w-10 rounded', // Layout
|
|
'text-foreground-lighter hover:text-foreground ', // Dark mode
|
|
'bg-studio hover:bg-surface-200', // Light mode
|
|
`${isActive ? '!bg-surface-300 !text-foreground shadow-sm' : ''}`,
|
|
].join(' ')}
|
|
>
|
|
{route.icon}
|
|
</span>
|
|
</ConditionalWrap>
|
|
</Tooltip.Trigger>
|
|
<Tooltip.Portal>
|
|
<Tooltip.Content side="right" sideOffset={5}>
|
|
<Tooltip.Arrow className="radix-tooltip-arrow" />
|
|
<div
|
|
className={[
|
|
'bg-alternative shadow-lg shadow-background-surface-100 py-1.5 px-3 rounded leading-none', // background
|
|
'border border-default', //border
|
|
].join(' ')}
|
|
>
|
|
<span className="text-foreground text-xs">{route.label}</span>
|
|
</div>
|
|
</Tooltip.Content>
|
|
</Tooltip.Portal>
|
|
</Tooltip.Root>
|
|
)
|
|
}
|
|
|
|
export default NavigationIconButton
|