kandev/apps/web/components/task/workspace-switcher.tsx

"use client";

import { IconCheck, IconChevronDown } from "@tabler/icons-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@kandev/ui/dropdown-menu";
import { cn } from "@/lib/utils";
import { useTranslation } from "react-i18next";

type Workspace = {
  id: string;
  name: string;
};

type WorkspaceSwitcherProps = {
  workspaces: Workspace[];
  activeWorkspaceId: string | null;
  onSelect: (workspaceId: string) => void;
};

export function WorkspaceSwitcher({
  workspaces,
  activeWorkspaceId,
  onSelect,
}: WorkspaceSwitcherProps) {
  const { t } = useTranslation();
  const selectedWorkspace = workspaces.find((w) => w.id === activeWorkspaceId);

  // If only one workspace, show just the name without dropdown
  if (workspaces.length <= 1) {
    return (
      <span className="text-sm font-medium text-muted-foreground truncate">
        {selectedWorkspace?.name || t("common:workspace")}
      </span>
    );
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button
          type="button"
          title={t("task:switchWorkspace")}
          className={cn(
            "group flex h-8 min-w-0 items-center gap-1.5 rounded-md border bg-background px-2.5 text-sm font-medium cursor-pointer",
            "text-muted-foreground hover:text-foreground transition-colors duration-150",
            "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
          )}
        >
          <span className="truncate">{selectedWorkspace?.name || t("common:workspace")}</span>
          <IconChevronDown
            className={cn(
              "h-3.5 w-3.5 shrink-0 opacity-60 group-hover:opacity-80 transition-opacity duration-150",
            )}
          />
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-56">
        {workspaces.map((workspace) => (
          <DropdownMenuItem
            key={workspace.id}
            onClick={() => onSelect(workspace.id)}
            className={cn(
              "justify-between",
              activeWorkspaceId === workspace.id && "bg-foreground/10",
            )}
          >
            <span className="truncate">{workspace.name}</span>
            {activeWorkspaceId === workspace.id && <IconCheck className="h-4 w-4 shrink-0" />}
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}