69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
// File: components/layout/project-switcher.tsx
|
|
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { useProjects } from '@/hooks/use-projects';
|
|
import { useProjectStore } from '@/lib/stores/project-store';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import { Building2 } from 'lucide-react';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
|
|
export function ProjectSwitcher() {
|
|
const { data: projects, isLoading } = useProjects({ isActive: true });
|
|
const { selectedProjectId, setSelectedProjectId } = useProjectStore();
|
|
|
|
React.useEffect(() => {
|
|
// Auto-select if there's only one project
|
|
if (projects && projects.length === 1 && selectedProjectId !== projects[0].publicId) {
|
|
setSelectedProjectId(projects[0].publicId);
|
|
}
|
|
}, [projects, selectedProjectId, setSelectedProjectId]);
|
|
|
|
if (isLoading) {
|
|
return <Skeleton className="h-9 w-[200px] lg:w-[250px]" />;
|
|
}
|
|
|
|
// If user has no projects, don't show the switcher
|
|
if (!projects || projects.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
// If user has exactly one project, show it as text (no dropdown needed)
|
|
if (projects.length === 1) {
|
|
return (
|
|
<div className="flex h-9 items-center px-3 py-2 text-sm border rounded-md bg-muted/50 w-[200px] lg:w-[250px]">
|
|
<Building2 className="h-4 w-4 mr-2 opacity-50 flex-shrink-0" />
|
|
<span className="truncate font-medium">{projects[0].projectName}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Select
|
|
value={selectedProjectId || 'global'}
|
|
onValueChange={(value) => setSelectedProjectId(value === 'global' ? null : value)}
|
|
>
|
|
<SelectTrigger className="w-[200px] lg:w-[250px] h-9">
|
|
<div className="flex items-center gap-2 truncate">
|
|
<Building2 className="h-4 w-4 opacity-50 flex-shrink-0" />
|
|
<SelectValue placeholder="Select Project..." className="truncate" />
|
|
</div>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="global">All Projects (Global)</SelectItem>
|
|
{projects.map((project) => (
|
|
<SelectItem key={project.publicId} value={project.publicId}>
|
|
{project.projectName}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
}
|