openstatus.dev
Openstatus
www.openstatus.dev
1import {
2 Badge,
3 Tooltip,
4 TooltipContent,
5 TooltipProvider,
6 TooltipTrigger,
7} from "@openstatus/ui";
8
9export function DataTableBadges({ names }: { names: string[] }) {
10 const [first, second, ...rest] = names;
11
12 if (names.length === 0) return null;
13
14 return (
15 <div className="flex items-center gap-2">
16 <span className="flex max-w-[150px] gap-2 truncate font-medium sm:max-w-[200px] lg:max-w-[250px] xl:max-w-[350px]">
17 <Badge variant="outline">{first}</Badge>
18 {second ? <Badge variant="outline">{second}</Badge> : null}
19 </span>
20 {rest.length > 0 ? (
21 <TooltipProvider>
22 <Tooltip delayDuration={200}>
23 <TooltipTrigger>
24 <Badge variant="secondary" className="border">
25 +{rest.length}
26 </Badge>
27 </TooltipTrigger>
28 <TooltipContent side="top" className="flex gap-2">
29 {rest.map((name, i) => (
30 <Badge key={i} variant="outline">
31 {name}
32 </Badge>
33 ))}
34 </TooltipContent>
35 </Tooltip>
36 </TooltipProvider>
37 ) : null}
38 </div>
39 );
40}