1"use client";
2
3
10import { Boxes } from "lucide-react";
11import type { OrgWorkspaceRow } from "@/lib/org-admin";
12
13interface WorkspacePickerProps {
14 orgId: string;
15 workspaces: OrgWorkspaceRow[];
16 value: string | null;
17 onChange: (id: string) => void;
18}
19
20export function WorkspacePicker({ workspaces, value, onChange }: WorkspacePickerProps) {
21 if (workspaces.length === 0) {
22 return (
23 <div className="flex items-center gap-2 rounded-lg border border-border p-4 text-sm text-muted-foreground">
24 <Boxes className="size-4" />
25 This organization has no (non-personal) workspaces yet.
26 </div>
27 );
28 }
29 return (
30 <div className="flex items-center gap-2 rounded-lg border border-border p-3">
31 <Boxes className="size-4 text-muted-foreground" aria-hidden />
32 <span className="text-xs font-medium text-muted-foreground">Workspace</span>
33 <select
34 aria-label="Select workspace"
35 className="rounded-md border border-input bg-background px-2.5 py-1.5 text-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
36 value={value ?? ""}
37 onChange={(e) => onChange(e.target.value)}
38 >
39 {workspaces.map((w) => (
40 <option key={w.id} value={w.id}>
41 {w.name}
42 </option>
43 ))}
44 </select>
45 </div>
46 );
47}
48