mirror of
https://github.com/supabase/supabase.git
synced 2026-10-15 14:19:11 +03:00
Joshen Lim
09a1f431bc
## Context This is largely just a mechanical change here: Opting to use lucide icons with the `Icon` suffix across all icon imports within `studio` - so that it’s clearer which components are icons + reduces the possibility of name collision with our own components - e.g <User /> vs <UserIcon /> Also added a eslint rule for this: <img width="1069" height="167" alt="image" src="https://github.com/user-attachments/assets/7f36f443-5ca2-4bf6-8d22-86e774513bfc" /> And updated `AGENTS.md` as such: ``` Icons come from `lucide-react`, always imported with the `Icon` suffix (`import { CheckIcon, Trash2Icon } from 'lucide-react'`) — never the bare names (`Check`) or `Check as CheckIcon` aliases (lint-enforced). ```
50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
import { CheckIcon, LinkIcon } 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 ? <CheckIcon size={14} /> : <LinkIcon 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>
|
|
)
|
|
}
|