build ok,

002_source/cms/src/components/dashboard/layout/workspaces-popover.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+
+export const workspaces = [
+  { name: 'Devias', avatar: '/assets/workspace-avatar-1.png' },
+  { name: 'Carpatin', avatar: '/assets/workspace-avatar-2.png' },
+] satisfies Workspaces[];
+
+export interface Workspaces {
+  name: string;
+  avatar: string;
+}
+
+export interface WorkspacesPopoverProps {
+  anchorEl: null | Element;
+  onChange?: (tenant: string) => void;
+  onClose?: () => void;
+  open?: boolean;
+}
+
+export function WorkspacesPopover({
+  anchorEl,
+  onChange,
+  onClose,
+  open = false,
+}: WorkspacesPopoverProps): React.JSX.Element {
+  return (
+    <Menu
+      anchorEl={anchorEl}
+      anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+      onClose={onClose}
+      open={open}
+      slotProps={{ paper: { sx: { width: '250px' } } }}
+      transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+    >
+      {workspaces.map((workspace) => (
+        <MenuItem
+          key={workspace.name}
+          onClick={() => {
+            onChange?.(workspace.name);
+          }}
+        >
+          <ListItemAvatar>
+            <Avatar src={workspace.avatar} sx={{ '--Avatar-size': '32px' }} variant="rounded" />
+          </ListItemAvatar>
+          {workspace.name}
+        </MenuItem>
+      ))}
+    </Menu>
+  );
+}