57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
'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>
|
|
);
|
|
}
|