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>
50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
import { Check, Link } from 'lucide-react'
|
|
import { useState } from 'react'
|
|
import { copyToClipboard } from 'ui'
|
|
|
|
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
|
|
|
|
interface ReportSectionHeaderProps {
|
|
id: string
|
|
title: string
|
|
description: string
|
|
}
|
|
|
|
export const ReportSectionHeader = ({ id, title, description }: ReportSectionHeaderProps) => {
|
|
const [copiedLink, setCopiedLink] = useState<string | null>(null)
|
|
|
|
const copyLinkToClipboard = async () => {
|
|
// [jordi] We want to keep the existing query params (filters)
|
|
// But if the user has an anchor in the URL,
|
|
// we remove it and add the one for this section
|
|
// This is so the shared URL shows the exact same report as the one the user is on
|
|
const url = `${window.location.href.split('#')[0]}#${id}`
|
|
await copyToClipboard(url)
|
|
setCopiedLink(id)
|
|
setTimeout(() => setCopiedLink(null), 2000)
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-1 mb-4 group">
|
|
<div
|
|
className="flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity"
|
|
onClick={copyLinkToClipboard}
|
|
>
|
|
<h3 className="text-foreground text-lg font-medium">{title}</h3>
|
|
<ButtonTooltip
|
|
variant="text"
|
|
icon={copiedLink === id ? <Check size={14} /> : <Link size={14} />}
|
|
className="w-7 h-7 opacity-0 group-hover:opacity-100 transition-opacity"
|
|
tooltip={{
|
|
content: {
|
|
side: 'bottom',
|
|
text: copiedLink === id ? 'Link copied!' : 'Copy link to section',
|
|
},
|
|
}}
|
|
/>
|
|
</div>
|
|
<p className="text-foreground-light text-sm">{description}</p>
|
|
</div>
|
|
)
|
|
}
|