konnosReportSectionHeader.tsx49 lines · main
| 1 | import { Check, Link } from 'lucide-react' |
| 2 | import { useState } from 'react' |
| 3 | import { copyToClipboard } from 'ui' |
| 4 | |
| 5 | import { ButtonTooltip } from '@/components/ui/ButtonTooltip' |
| 6 | |
| 7 | interface ReportSectionHeaderProps { |
| 8 | id: string |
| 9 | title: string |
| 10 | description: string |
| 11 | } |
| 12 | |
| 13 | export const ReportSectionHeader = ({ id, title, description }: ReportSectionHeaderProps) => { |
| 14 | const [copiedLink, setCopiedLink] = useState<string | null>(null) |
| 15 | |
| 16 | const copyLinkToClipboard = async () => { |
| 17 | // [jordi] We want to keep the existing query params (filters) |
| 18 | // But if the user has an anchor in the URL, |
| 19 | // we remove it and add the one for this section |
| 20 | // This is so the shared URL shows the exact same report as the one the user is on |
| 21 | const url = `${window.location.href.split('#')[0]}#${id}` |
| 22 | await copyToClipboard(url) |
| 23 | setCopiedLink(id) |
| 24 | setTimeout(() => setCopiedLink(null), 2000) |
| 25 | } |
| 26 | |
| 27 | return ( |
| 28 | <div className="flex flex-col gap-1 mb-4 group"> |
| 29 | <div |
| 30 | className="flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity" |
| 31 | onClick={copyLinkToClipboard} |
| 32 | > |
| 33 | <h3 className="text-foreground text-lg font-medium">{title}</h3> |
| 34 | <ButtonTooltip |
| 35 | type="text" |
| 36 | icon={copiedLink === id ? <Check size={14} /> : <Link size={14} />} |
| 37 | className="w-7 h-7 opacity-0 group-hover:opacity-100 transition-opacity" |
| 38 | tooltip={{ |
| 39 | content: { |
| 40 | side: 'bottom', |
| 41 | text: copiedLink === id ? 'Link copied!' : 'Copy link to section', |
| 42 | }, |
| 43 | }} |
| 44 | /> |
| 45 | </div> |
| 46 | <p className="text-foreground-light text-sm">{description}</p> |
| 47 | </div> |
| 48 | ) |
| 49 | } |