UserSelect component

packages/frontend/src/components/user-select.tsx

@@ -0,0 +1,59 @@
+import type { UserRecord } from "@issue/shared";
+import { useState } from "react";
+import SmallUserDisplay from "@/components/small-user-display";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+export function UserSelect({
+    users,
+    value,
+    onChange,
+    fallbackUser,
+    placeholder = "Select user",
+}: {
+    users: UserRecord[];
+    value: string;
+    onChange: (value: string) => void;
+    fallbackUser?: UserRecord | null;
+    placeholder?: string;
+}) {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const renderSelectedValue = () => {
+        if (value === "unassigned") {
+            return "Unassigned";
+        }
+
+        const user = users.find((u) => u.id.toString() === value);
+        const className = "p-0 py-2 text-sm";
+
+        if (user) {
+            return <SmallUserDisplay user={user} className={className} />;
+        }
+
+        if (fallbackUser) {
+            return <SmallUserDisplay user={fallbackUser} className={className} />;
+        }
+
+        return null;
+    };
+
+    return (
+        <Select value={value} onValueChange={onChange} onOpenChange={setIsOpen}>
+            <SelectTrigger className="w-fit p-0 px-2 py-2" isOpen={isOpen}>
+                <SelectValue placeholder={placeholder}>{renderSelectedValue()}</SelectValue>
+            </SelectTrigger>
+            <SelectContent
+                side="bottom"
+                position="popper"
+                className="data-[side=bottom]:translate-y-1 data-[side=bottom]:translate-x-0.25"
+            >
+                <SelectItem value="unassigned">Unassigned</SelectItem>
+                {users.map((user) => (
+                    <SelectItem key={user.id} value={user.id.toString()}>
+                        <SmallUserDisplay user={user} className="p-0" />
+                    </SelectItem>
+                ))}
+            </SelectContent>
+        </Select>
+    );
+}