Function ProjectSelector

apps/start/src/components/project-selector.tsx:31–167

({
  projects,
  organizations,
  align = 'start',
}: ProjectSelectorProps)

}

export default function ProjectSelector({
  projects,
  organizations,
  align = 'start',
}: ProjectSelectorProps) {
  const router = useRouter();
  const { organizationId, projectId } = useAppParams();
  const { isAdmin } = useOrganizationAccess(organizationId);
  const [open, setOpen] = useState(false);

  const changeProject = (newProjectId: string) => {
    if (organizationId && projectId) {
      // Navigate to the new project keeping the current path structure
      router.navigate({
        to: '/$organizationId/$projectId',
        params: {
          organizationId,
          projectId: newProjectId,
        },
      });
    } else {
      router.navigate({
        to: '/$organizationId/$projectId',
        params: {
          organizationId: organizationId!,
          projectId: newProjectId,
        },
      });
    }
  };

  const changeOrganization = (newOrganizationId: string) => {
    router.navigate({
      to: '/$organizationId',
      params: {
        organizationId: newOrganizationId,
      },
    });
  };

  return (
    <DropdownMenu onOpenChange={setOpen} open={open}>
      <DropdownMenuTrigger asChild>
        <Button
          aria-expanded={open}
          className="flex min-w-0 flex-1 items-center justify-start"
          role="combobox"
          size={'sm'}
          variant="outline"
        >
          <Building2Icon className="shrink-0" size={16} />
          <span className="mx-2 truncate">
            {projectId
              ? projects.find((p) => p.id === projectId)?.name
              : organizationId
                ? organizations?.find((o) => o.id === organizationId)?.name
                : 'Select project'}
          </span>