59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { Button } from '../Button';
|
|
import { Icons } from '../Icons/Icons';
|
|
import { DropdownMenu, DropdownMenuTrigger } from '../DropdownMenu';
|
|
import { Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip';
|
|
import { useSegmentationExpanded, useSegmentationTableContext } from './contexts';
|
|
|
|
// Then use it in your component:
|
|
export const SegmentationHeader: React.FC<{
|
|
children?: React.ReactNode;
|
|
}> = ({ children }) => {
|
|
// Always call both hooks unconditionally at the top level
|
|
const expandedContext = useSegmentationExpanded('SegmentationHeader');
|
|
const tableContext = useSegmentationTableContext('SegmentationHeader');
|
|
|
|
// Determine which segmentation to use
|
|
const segmentation = expandedContext?.segmentation || tableContext.activeSegmentation;
|
|
|
|
if (!segmentation) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="text-foreground flex h-8 w-full items-center justify-between">
|
|
<div className="flex items-center space-x-1">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="ml-1"
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
<Icons.More />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
{children}
|
|
</DropdownMenu>
|
|
<div className="pl-1.5">{segmentation.label}</div>
|
|
</div>
|
|
<div className="mr-1 flex items-center">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
>
|
|
<Icons.Info className="h-6 w-6" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>{segmentation.cachedStats?.info}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|