Files
openpylon/src/components/board/LabelDots.tsx

38 lines
934 B
TypeScript

import {
Tooltip,
TooltipTrigger,
TooltipContent,
} from "@/components/ui/tooltip";
import type { Label } from "@/types/board";
interface LabelDotsProps {
labelIds: string[];
boardLabels: Label[];
}
export function LabelDots({ labelIds, boardLabels }: LabelDotsProps) {
if (labelIds.length === 0) return null;
const labels = labelIds
.map((id) => boardLabels.find((l) => l.id === id))
.filter((l): l is Label => l != null);
if (labels.length === 0) return null;
return (
<div className="flex items-center gap-1">
{labels.map((label) => (
<Tooltip key={label.id}>
<TooltipTrigger asChild>
<span
className="inline-block size-2 shrink-0 rounded-full"
style={{ backgroundColor: label.color }}
/>
</TooltipTrigger>
<TooltipContent>{label.name}</TooltipContent>
</Tooltip>
))}
</div>
);
}