CodeSandBox/judge4c_backup_new
2
0
Fork 0
mirror of https://gitlab.massbug.com/massbug/judge4c.git synced 2025-07-04 09:51:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ngc2207 2025-02-06 09:21:38 +08:00
parent bdd852ccc6
commit 94f49eefd9
1 changed files with 48 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/team-switcher.tsx → src/components/workspace-switcher.tsx
View File

@ -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 {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
useSidebar,
} from "@/components/ui/sidebar";
import { Skeleton } from "./ui/skeleton";
import { ChevronsUpDown, Plus } from "lucide-react";
import { useGetWorkspaces } from "@/features/workspaces/api/use-get-workspaces";
import { WorkspaceAvatar } from "@/features/workspaces/components/workspace-avatar";
export function TeamSwitcher({
teams,
}: {
teams: {
name: string;
logo: React.ElementType;
plan: string;
}[];
}) {
export function WorkspaceSwitcher() {
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">
<activeTeam.logo className="size-4" />
<div className="flex aspect-square size-8 items-center justify-center rounded-lg border bg-background text-sidebar-primary-foreground">
<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}
onClick={() => setActiveTeam(team)}
key={workspace.$id}
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>