mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 19:05:06 +03:00
Gildas GarciaandIvan Vasilov
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>
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import { X } from 'lucide-react'
|
|
import { Button, Card, CardContent, cn } from 'ui'
|
|
|
|
import { BASE_PATH } from '@/lib/constants'
|
|
|
|
interface BannerCardProps {
|
|
onDismiss?: () => void
|
|
children: React.ReactNode
|
|
className?: string
|
|
}
|
|
|
|
export const BannerCard = ({ onDismiss, children, className }: BannerCardProps) => {
|
|
return (
|
|
<Card className={cn('relative overflow-hidden shadow-lg rounded-2xl', className)}>
|
|
<div className="absolute -inset-16 z-0 opacity-100 pointer-events-none">
|
|
<img
|
|
src={`${BASE_PATH}/img/reports/bg-grafana-dark.svg`}
|
|
alt="Background pattern"
|
|
className="w-full h-full object-cover object-right hidden dark:block"
|
|
/>
|
|
<img
|
|
src={`${BASE_PATH}/img/reports/bg-grafana-light.svg`}
|
|
alt="Background pattern"
|
|
className="w-full h-full object-cover object-right dark:hidden"
|
|
/>
|
|
<div className="absolute inset-0 bg-linear-to-r from-background-alternative to-transparent" />
|
|
</div>
|
|
|
|
<CardContent className="relative z-10 p-6">
|
|
{onDismiss && (
|
|
<div className="absolute top-4 right-4 z-20">
|
|
<Button
|
|
variant="text"
|
|
size="tiny"
|
|
type="button"
|
|
icon={<X size={16} strokeWidth={1.5} />}
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
onDismiss()
|
|
}}
|
|
className="opacity-75 hover:opacity-100 px-1"
|
|
aria-label="Close banner"
|
|
/>
|
|
</div>
|
|
)}
|
|
{children}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|