support multi role on create user and invites

src/components/UserRoleBadges.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useState } from "react";
+import { Badge, badgeVariants } from "@app/components/ui/badge";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "@app/components/ui/popover";
+import { cn } from "@app/lib/cn";
+
+const MAX_ROLE_BADGES = 3;
+
+export default function UserRoleBadges({
+    roleLabels
+}: {
+    roleLabels: string[];
+}) {
+    const visible = roleLabels.slice(0, MAX_ROLE_BADGES);
+    const overflow = roleLabels.slice(MAX_ROLE_BADGES);
+
+    return (
+        <div className="flex flex-wrap items-center gap-1">
+            {visible.map((label, i) => (
+                <Badge key={`${label}-${i}`} variant="secondary">
+                    {label}
+                </Badge>
+            ))}
+            {overflow.length > 0 && (
+                <OverflowRolesPopover labels={overflow} />
+            )}
+        </div>
+    );
+}
+
+function OverflowRolesPopover({ labels }: { labels: string[] }) {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <button
+                    type="button"
+                    className={cn(
+                        badgeVariants({ variant: "secondary" }),
+                        "border-dashed"
+                    )}
+                    onMouseEnter={() => setOpen(true)}
+                    onMouseLeave={() => setOpen(false)}
+                >
+                    +{labels.length}
+                </button>
+            </PopoverTrigger>
+            <PopoverContent
+                align="start"
+                side="top"
+                className="w-auto max-w-xs p-2"
+                onMouseEnter={() => setOpen(true)}
+                onMouseLeave={() => setOpen(false)}
+            >
+                <ul className="space-y-1 text-sm">
+                    {labels.map((label, i) => (
+                        <li key={`${label}-${i}`}>{label}</li>
+                    ))}
+                </ul>
+            </PopoverContent>
+        </Popover>
+    );
+}