ben.carrasco/prowler
1
0
Fork 0
mirror of https://github.com/prowler-cloud/prowler.git synced 2026-10-09 21:14:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): improve layouts and styles (#9807)

Browse Source
This commit is contained in:
Alejandro Bailo
2026-01-16 12:00:01 +01:00
committed by GitHub
parent 76a8610121
commit ec4eb70539
14 changed files with 151 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/components/graphs/shared/chart-legend.tsx
+36 -24
View File
@@ -1,3 +1,9 @@
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/shadcn/tooltip";
export interface ChartLegendItem {
label: string;
color: string;
@@ -18,36 +24,42 @@ export function ChartLegend({
const isInteractive = !!onItemClick;
return (
<div className="border-border-neutral-tertiary bg-bg-neutral-tertiary inline-flex items-center gap-2 rounded-full border">
<div className="border-border-neutral-tertiary bg-bg-neutral-tertiary inline-flex max-w-full items-center overflow-hidden rounded-full border sm:gap-2">
{items.map((item, index) => {
const dataKey = item.dataKey ?? item.label.toLowerCase();
const isSelected = selectedItem === dataKey;
const isFaded = selectedItem !== null && !isSelected;
return (
<button
key={`legend-${index}`}
type="button"
className={`flex items-center gap-2 px-4 py-3 transition-opacity duration-200 ${
isInteractive
? "cursor-pointer hover:opacity-80"
: "cursor-default"
} ${isFaded ? "opacity-30" : "opacity-100"}`}
onClick={() => onItemClick?.(dataKey)}
disabled={!isInteractive}
>
<div
className={`h-3 w-3 rounded ${isSelected ? "ring-2 ring-offset-1" : ""}`}
style={{
backgroundColor: item.color,
// @ts-expect-error ring-color is a valid Tailwind CSS variable
"--tw-ring-color": item.color,
}}
/>
<span className="text-text-neutral-secondary text-sm font-medium">
{item.label}
</span>
</button>
<Tooltip key={`legend-${index}`}>
<TooltipTrigger asChild>
<button
type="button"
className={`flex min-w-0 items-center gap-1 px-2 py-3 transition-opacity duration-200 sm:gap-2 sm:px-4 ${
isInteractive
? "cursor-pointer hover:opacity-80"
: "cursor-default"
} ${isFaded ? "opacity-30" : "opacity-100"}`}
onClick={() => onItemClick?.(dataKey)}
disabled={!isInteractive}
>
<div
className={`h-3 w-3 shrink-0 rounded ${isSelected ? "ring-2 ring-offset-1" : ""}`}
style={{
backgroundColor: item.color,
// @ts-expect-error ring-color is a valid Tailwind CSS variable
"--tw-ring-color": item.color,
}}
/>
<span className="text-text-neutral-secondary max-w-[120px] truncate text-sm font-medium sm:max-w-[200px]">
{item.label}
</span>
</button>
</TooltipTrigger>
<TooltipContent>
<p>{item.label}</p>
</TooltipContent>
</Tooltip>
);
})}
</div>