57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import {
|
||
|
|
Select,
|
||
|
|
SelectContent,
|
||
|
|
SelectItem,
|
||
|
|
SelectTrigger,
|
||
|
|
SelectValue,
|
||
|
|
} from '@/components/ui/select';
|
||
|
|
import { cn } from '@/utils/style';
|
||
|
|
import { useUserInfo } from '@/store/user';
|
||
|
|
import { RiRocket2Fill } from 'react-icons/ri';
|
||
|
|
|
||
|
|
interface WorkspaceSwitcherProps {
|
||
|
|
isCollapsed: boolean;
|
||
|
|
}
|
||
|
|
export const WorkspaceSwitcher: React.FC<WorkspaceSwitcherProps> = React.memo(
|
||
|
|
(props) => {
|
||
|
|
const userInfo = useUserInfo();
|
||
|
|
|
||
|
|
if (!userInfo) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Select value={userInfo.currentWorkspace.id}>
|
||
|
|
<SelectTrigger
|
||
|
|
className={cn(
|
||
|
|
'flex items-center gap-2 [&>span]:line-clamp-1 [&>span]:flex [&>span]:w-full [&>span]:items-center [&>span]:gap-1 [&>span]:truncate [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0',
|
||
|
|
props.isCollapsed &&
|
||
|
|
'flex h-9 w-9 shrink-0 items-center justify-center p-0 [&>span]:w-auto [&>svg]:hidden'
|
||
|
|
)}
|
||
|
|
aria-label="Select workspace"
|
||
|
|
>
|
||
|
|
<SelectValue placeholder="Select workspace">
|
||
|
|
<RiRocket2Fill />
|
||
|
|
|
||
|
|
<span className={cn('ml-2', props.isCollapsed && 'hidden')}>
|
||
|
|
{userInfo.currentWorkspace.name}
|
||
|
|
</span>
|
||
|
|
</SelectValue>
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
{userInfo.workspaces.map((w) => (
|
||
|
|
<SelectItem key={w.workspace.id} value={w.workspace.id}>
|
||
|
|
<div className="flex items-center gap-3 [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0 [&_svg]:text-foreground">
|
||
|
|
<RiRocket2Fill />
|
||
|
|
{w.workspace.name}
|
||
|
|
</div>
|
||
|
|
</SelectItem>
|
||
|
|
))}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
WorkspaceSwitcher.displayName = 'WorkspaceSwitcher';
|