AdvisorPanelHeader.tsx69 lines · main

1	import { ChevronLeft, X } from 'lucide-react'
2	import { Badge } from 'ui'
3
4	import type { AdvisorItem } from './AdvisorPanel.types'
5	import {
6	formatItemDate,
7	getAdvisorItemSecondaryText,
8	getAdvisorPanelItemDisplayTitle,
9	severityBadgeVariants,
10	severityLabels,
11	} from './AdvisorPanel.utils'
12	import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
13
14	interface AdvisorPanelHeaderProps {
15	selectedItem: AdvisorItem | undefined
16	onBack: () => void
17	onClose: () => void
18	}
19
20	export const AdvisorPanelHeader = ({ selectedItem, onBack, onClose }: AdvisorPanelHeaderProps) => {
21	const displayTitle = selectedItem ? getAdvisorPanelItemDisplayTitle(selectedItem) : undefined
22	const secondaryText = selectedItem ? getAdvisorItemSecondaryText(selectedItem) : undefined
23	const metadataText = selectedItem
24	? (secondaryText ??
25	(selectedItem.createdAt ? formatItemDate(selectedItem.createdAt) : undefined))
26	: undefined
27	// Only capitalize date strings (e.g. "a few seconds ago"); entity strings
28	// like "public.users" must not be case-altered.
29	const metadataCapitalize =
30	selectedItem !== undefined &&
31	secondaryText === undefined &&
32	selectedItem.createdAt !== undefined
33
34	return (
35	<div className="border-b px-4 py-3 flex items-center gap-3">
36	<ButtonTooltip
37	type="text"
38	className="w-7 h-7 p-0 flex justify-center items-center"
39	icon={<ChevronLeft size={16} strokeWidth={1.5} aria-hidden={true} />}
40	onClick={onBack}
41	tooltip={{ content: { side: 'bottom', text: 'Back to list' } }}
42	/>
43	<div className="flex items-center gap-2 overflow-hidden flex-1">
44	<div className="flex-1 flex flex-col">
45	<span className="heading-default">{displayTitle}</span>
46	{metadataText && (
47	<span
48	className={`text-xs text-foreground-light${metadataCapitalize ? ' capitalize-sentence' : ''}`}
49	>
50	{metadataText}
51	</span>
52	)}
53	</div>
54	{selectedItem && (
55	<Badge variant={severityBadgeVariants[selectedItem.severity]}>
56	{severityLabels[selectedItem.severity]}
57	</Badge>
58	)}
59	</div>
60	<ButtonTooltip
61	type="text"
62	className="w-7 h-7 p-0"
63	icon={<X strokeWidth={1.5} />}
64	onClick={onClose}
65	tooltip={{ content: { side: 'bottom', text: 'Close Advisor Center' } }}
66	/>
67	</div>
68	)
69	}