mirror of
https://github.com/supabase/supabase.git
synced 2026-06-21 21:12:49 +08:00
be9590c890
* set up multiple themes in studio * set up multiple themes in studio * set up multiple themes in docs and www * update all resolvedTheme to also include deep-dark * update all resolvedTheme checks to also include deep-dark * update tailwind.config.js tokens * update tailwind.config.js tokens * update leftover scale12 token * update if resolvedTheme _doesn't_ include 'dark' * update more styling tokens * add dynamic themes to CmdK * fix nav and footer for multi theme * add data-theme selector output to transformTokens.js * update code-hike.css to target data-theme css * update tailwindcss to ^3.3.5 * ThemeImage with light and dark src for www and docs * add brand-button styling token * update old dark theme boolean * update old dark theme boolean * make homepage product visuals themeable * update product page themed images * update badge green with brand * fix roles list appearance * fix auth widget in auth page * update more dark logic * update more dark logic * add button default bg and border * update pricing page theme styling * clean up Themeimage * remove forceDark in homepage * update dark:border-dark occurrences * update dark:border-dark occurrences * fix dark mode base colors * remove foreground-strong * fix notification badge bg * remove some dark: selectors * update dark: selectors * update code-hike deep dark bg color * fix comment typo * update border-button-hover token * fix customer story logo * remove some more dark: selectors * restore forceDark in www homepage * fix auth react icon * fix homepage product visuals * remove theme * add brand-link token * fix checkbox bg * npm install * more visible EntityListItem active bg * fix --background-alternative-default css vars --------- Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import clsx from 'clsx'
|
|
|
|
interface TwoOptionToggleProps {
|
|
options: any
|
|
width?: number
|
|
activeOption: any
|
|
onClickOption: any
|
|
borderOverride: string
|
|
}
|
|
|
|
const TwoOptionToggle = ({
|
|
options,
|
|
width = 50,
|
|
activeOption,
|
|
onClickOption,
|
|
borderOverride = 'border-stronger',
|
|
}: TwoOptionToggleProps) => {
|
|
const buttonStyle = (
|
|
isActive: boolean
|
|
) => `absolute top-0 z-1 text-xs inline-flex h-full items-center justify-center font-medium
|
|
${
|
|
isActive ? 'hover:text-foreground-light hover:text-foreground' : 'hover:text-foreground'
|
|
} hover:text-foreground focus:z-10 focus:outline-none focus:border-blue-300 focus:ring-blue
|
|
transition ease-in-out duration-150`
|
|
|
|
return (
|
|
<div
|
|
className={`relative border ${borderOverride} rounded-md h-7`}
|
|
style={{ padding: 1, width: (width + 1) * 2 }}
|
|
>
|
|
<span
|
|
style={{ width, translate: activeOption === options[1] ? '0px' : `${width - 2}px` }}
|
|
aria-hidden="true"
|
|
className={clsx(
|
|
'z-0 inline-block rounded h-full bg-overlay-hover shadow transform',
|
|
'transition-all ease-in-out border border-strong'
|
|
)}
|
|
></span>
|
|
{options.map((option: any, index: number) => (
|
|
<span
|
|
key={`toggle_${index}`}
|
|
style={{ width: width + 1 }}
|
|
className={`
|
|
${activeOption === option ? 'text-foreground' : 'text-foreground-light'}
|
|
${index === 0 ? 'right-0' : 'left-0'}
|
|
${buttonStyle(activeOption === option)}
|
|
cursor-pointer
|
|
`}
|
|
onClick={() => onClickOption(option)}
|
|
>
|
|
<span
|
|
className={clsx(
|
|
'capitalize hover:text-foreground',
|
|
activeOption === option ? 'text-foreground' : 'text-foreground-light'
|
|
)}
|
|
>
|
|
{option}
|
|
</span>
|
|
</span>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TwoOptionToggle
|