mirror of
https://github.com/supabase/supabase.git
synced 2026-10-18 15:49:09 +03:00
Francesco SansalvadoreandJonathan Summers-Muir
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>
91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
import React from 'react'
|
|
import Link from 'next/link'
|
|
import { IconChevronRight, cn } from 'ui'
|
|
|
|
const MenuItem = React.forwardRef<
|
|
React.ElementRef<'a'>,
|
|
React.ComponentPropsWithoutRef<'a'> & {
|
|
description?: string
|
|
icon?: string
|
|
hasChevron?: boolean
|
|
hoverColor?: 'foreground' | 'brand'
|
|
}
|
|
>(
|
|
(
|
|
{
|
|
className,
|
|
title,
|
|
href = '',
|
|
description,
|
|
icon,
|
|
hasChevron,
|
|
children,
|
|
hoverColor = 'foreground',
|
|
...props
|
|
},
|
|
ref
|
|
) => {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
ref={ref}
|
|
className={cn(
|
|
'group/menu-item flex items-center text-foreground-light text-sm hover:text-foreground select-none gap-3 rounded-md p-2 leading-none no-underline outline-none focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:text-foreground',
|
|
description && 'items-center',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children ?? (
|
|
<>
|
|
{icon && (
|
|
<div className="shrink-0 bg-surface-200 min-w-10 w-10 h-10 flex items-center justify-center rounded-lg">
|
|
<svg
|
|
className="h-5 w-5 group-hover/menu-item:text-foreground group-focus-visible/menu-item:text-foreground"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
d={icon}
|
|
stroke="currentColor"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
)}
|
|
<div className="flex flex-col justify-center">
|
|
<div className="flex items-center gap-1">
|
|
<p
|
|
className={cn(
|
|
'leading-snug text-foreground',
|
|
hoverColor === 'brand' && 'group-hover/menu-item:text-brand-link'
|
|
)}
|
|
>
|
|
{title}
|
|
</p>
|
|
{hasChevron && (
|
|
<IconChevronRight
|
|
strokeWidth={2}
|
|
className="w-3 text-foreground transition-all will-change-transform -translate-x-1 opacity-0 group-hover/menu-item:translate-x-0 group-hover/menu-item:opacity-100"
|
|
/>
|
|
)}
|
|
</div>
|
|
{description && (
|
|
<p className="line-clamp-1 -mb-1 leading-relaxed text-foreground-lighter group-hover/menu-item:text-foreground-light group-focus-visible/menu-item:text-foreground-light">
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</Link>
|
|
)
|
|
}
|
|
)
|
|
|
|
export default MenuItem
|