mirror of
https://github.com/supabase/supabase.git
synced 2026-06-18 21:54:18 +08:00
96d43099bb
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
import { MoreHorizontal } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { type MouseEventHandler } from 'react'
|
|
import { Button, cn, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from 'ui'
|
|
|
|
type Props = {
|
|
label: string
|
|
icon?: React.ReactNode
|
|
dropdownItems?: React.ReactNode
|
|
href: string
|
|
isActive: boolean
|
|
onClick?: MouseEventHandler<HTMLAnchorElement>
|
|
}
|
|
export function LogsSidebarItem({ label, icon, dropdownItems, href, isActive, onClick }: Props) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
{
|
|
'bg-foreground-lighter/10': isActive,
|
|
},
|
|
'relative flex [&:has([data-state=open])]:bg-foreground-lighter/10 [&:has([data-state=open])]:text-foreground hover:text-foreground hover:bg-foreground-lighter/10 transition-all text-foreground-light group'
|
|
)}
|
|
>
|
|
<Link
|
|
onClick={onClick}
|
|
href={href}
|
|
className={'h-7 flex-1 text-sm px-4 flex items-center gap-2 truncate'}
|
|
>
|
|
{icon && <span>{icon}</span>}
|
|
<span className="truncate">{label}</span>
|
|
</Link>
|
|
{dropdownItems && (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
asChild
|
|
onClick={(e) => {
|
|
// Prevents clicking the dropdown from also clicking the parent link and navigating to it
|
|
e.preventDefault()
|
|
}}
|
|
>
|
|
<Button
|
|
variant="text"
|
|
title="Actions"
|
|
className="space-x-0 h-7 px-1.5 opacity-0 group-hover:opacity-100 bg-transparent! data-open:opacity-100"
|
|
icon={<MoreHorizontal size={14} />}
|
|
>
|
|
<div className="sr-only">Actions</div>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-48" align="end">
|
|
{dropdownItems}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|