import { Grid, Typography, styled } from '@mui/material'; import { AvatarGroupFromOwners } from 'component/common/AvatarGroupFromOwners/AvatarGroupFromOwners'; import { UserAvatar } from 'component/common/UserAvatar/UserAvatar'; import type { PersonalDashboardSchemaAdminsItem } from 'openapi/models/personalDashboardSchemaAdminsItem'; import type { PersonalDashboardSchemaProjectOwnersItem } from 'openapi/models/personalDashboardSchemaProjectOwnersItem'; import { Link } from 'react-router-dom'; const ContentGrid = styled(Grid)(({ theme }) => ({ backgroundColor: theme.palette.background.paper, borderRadius: `${theme.shape.borderRadiusLarge}px`, })); const SpacedGridItem = styled(Grid)(({ theme }) => ({ padding: theme.spacing(4), border: `0.5px solid ${theme.palette.divider}`, })); const TitleContainer = styled('div')(({ theme }) => ({ display: 'flex', flexDirection: 'row', gap: theme.spacing(2), alignItems: 'center', fontSize: theme.spacing(1.75), fontWeight: 'bold', })); const NeutralCircleContainer = styled('span')(({ theme }) => ({ width: '28px', height: '28px', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: theme.palette.neutral.border, borderRadius: '50%', })); const GridContent = styled('div')(({ theme }) => ({ flexBasis: '50%', padding: theme.spacing(4, 2), display: 'flex', gap: theme.spacing(3), flexDirection: 'column', })); const BoxMainContent = styled('article')(({ theme }) => ({ display: 'flex', flexFlow: 'column', gap: theme.spacing(2), })); const AdminList = styled('ul')(({ theme }) => ({ padding: 0, 'li + li': { marginTop: theme.spacing(2), }, })); const AdminListItem = styled('li')(({ theme }) => ({ display: 'flex', flexFlow: 'row', gap: theme.spacing(2), })); type Props = { owners: PersonalDashboardSchemaProjectOwnersItem[]; admins: PersonalDashboardSchemaAdminsItem[]; }; export const ContentGridNoProjects: React.FC = ({ owners, admins }) => { return ( My projects Potential next steps You don't currently have access to any projects in the system. To get started, you can{' '} create your own project . Alternatively, you can review the available projects in the system and ask the owner for access. 1 Contact Unleash admin {admins.length ? ( <>

Your Unleash administrator {admins.length > 1 ? 's are' : ' is'}:

{admins.map((admin) => { return ( {admin.name || admin.username || admin.email} ); })} ) : (

You have no Unleash administrators to contact.

)}
2 Ask a project owner to add you to their project {owners.length ? ( <>

Project owners in Unleash:

) : (

There are no project owners in Unleash to ask for access.

)}
); };