1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@repo/ui/components/select"
import { Plus } from "lucide-react"
interface Project {
id?: string
containerTag: string
name: string
}
interface ProjectSelectionProps {
projects: Project[]
selectedProject: string
onProjectChange: (value: string) => void
onCreateProject: () => void
disabled?: boolean
isLoading?: boolean
className?: string
id?: string
}
export function ProjectSelection({
projects,
selectedProject,
onProjectChange,
onCreateProject,
disabled = false,
isLoading = false,
className = "",
id = "project-select",
}: ProjectSelectionProps) {
const handleValueChange = (value: string) => {
if (value === "create-new-project") {
onCreateProject()
} else {
onProjectChange(value)
}
}
return (
<Select
key={`${id}-${selectedProject}`}
disabled={isLoading || disabled}
onValueChange={handleValueChange}
value={selectedProject}
>
<SelectTrigger
className={`bg-foreground/5 border-foreground/10 cursor-pointer ${className}`}
id={id}
>
<SelectValue placeholder="Select a project" />
</SelectTrigger>
<SelectContent position="popper" sideOffset={5} className="z-[90]">
<SelectItem
className="hover:bg-foreground/10"
key="default"
value="sm_project_default"
>
Default Project
</SelectItem>
{projects
.filter((p) => p.containerTag !== "sm_project_default" && p.id)
.map((project) => (
<SelectItem
className="hover:bg-foreground/10"
key={project.id || project.containerTag}
value={project.containerTag}
>
{project.name}
</SelectItem>
))}
<SelectItem
className="hover:bg-foreground/10 border-t border-foreground/10 mt-1"
key="create-new"
value="create-new-project"
>
<div className="flex items-center gap-2">
<Plus className="h-4 w-4" />
<span>Create new project</span>
</div>
</SelectItem>
</SelectContent>
</Select>
)
}
|