feat(workspaces): rename TeamSwitcher to WorkspaceSwitcher and update functionality to manage workspaces

src/components/workspace-switcher.tsx

@@ -1,8 +1,12 @@
 "use client";
 
 import * as React from "react";
-import { ChevronsUpDown, Plus } from "lucide-react";
+import {
-
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -12,24 +16,29 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import {
+import { Skeleton } from "./ui/skeleton";
-  SidebarMenu,
+import { ChevronsUpDown, Plus } from "lucide-react";
-  SidebarMenuButton,
+import { useGetWorkspaces } from "@/features/workspaces/api/use-get-workspaces";
-  SidebarMenuItem,
+import { WorkspaceAvatar } from "@/features/workspaces/components/workspace-avatar";
-  useSidebar,
-} from "@/components/ui/sidebar";
 
-export function TeamSwitcher({
+export function WorkspaceSwitcher() {
-  teams,
-}: {
-  teams: {
-    name: string;
-    logo: React.ElementType;
-    plan: string;
-  }[];
-}) {
   const { isMobile } = useSidebar();
-  const [activeTeam, setActiveTeam] = React.useState(teams[0]);
+  const { data: workspaces } = useGetWorkspaces();
+  const [activeWorkspace, setActiveWorkspace] = React.useState(
+    workspaces?.documents[0]
+  );
+
+  React.useEffect(() => {
+    setActiveWorkspace(workspaces?.documents[0]);
+  }, [workspaces]);
+
+  if (!activeWorkspace)
+    return (
+      <div className="flex p-2">
+        <Skeleton className="h-8 w-8 rounded-lg" />
+        <Skeleton className="flex-1 ml-2" />
+      </div>
+    );
 
   return (
     <SidebarMenu>
@@ -40,14 +49,18 @@ export function TeamSwitcher({
               size="lg"
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
-              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg border bg-background text-sidebar-primary-foreground">
-                <activeTeam.logo className="size-4" />
+                <WorkspaceAvatar
+                  name={activeWorkspace.name}
+                  image={activeWorkspace.imageUrl}
+                  className="size-4"
+                />
               </div>
               <div className="grid flex-1 text-left text-sm leading-tight">
                 <span className="truncate font-semibold">
-                  {activeTeam.name}
+                  {activeWorkspace.name}
                 </span>
-                <span className="truncate text-xs">{activeTeam.plan}</span>
+                {/* <span className="truncate text-xs"></span> */}
               </div>
               <ChevronsUpDown className="ml-auto" />
             </SidebarMenuButton>
@@ -59,18 +72,22 @@ export function TeamSwitcher({
             sideOffset={4}
           >
             <DropdownMenuLabel className="text-xs text-muted-foreground">
-              Teams
+              Workspaces
             </DropdownMenuLabel>
-            {teams.map((team, index) => (
+            {workspaces?.documents.map((workspace, index) => (
               <DropdownMenuItem
-                key={team.name}
+                key={workspace.$id}
-                onClick={() => setActiveTeam(team)}
+                onClick={() => setActiveWorkspace(workspace)}
                 className="gap-2 p-2"
               >
                 <div className="flex size-6 items-center justify-center rounded-sm border">
-                  <team.logo className="size-4 shrink-0" />
+                  <WorkspaceAvatar
+                    name={workspace.name}
+                    image={workspace.imageUrl}
+                    className="size-4 shrink-0"
+                  />
                 </div>
-                {team.name}
+                <span className="truncate">{workspace.name}</span>
                 <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
               </DropdownMenuItem>
             ))}
@@ -79,7 +96,9 @@ export function TeamSwitcher({
               <div className="flex size-6 items-center justify-center rounded-md border bg-background">
                 <Plus className="size-4" />
               </div>
-              <div className="font-medium text-muted-foreground">Add team</div>
+              <div className="font-medium text-muted-foreground">
+                Add workspace
+              </div>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>