81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
import styled from '@emotion/styled';
|
|
|
|
import { PeopleCard } from '@/people/components/PeopleCard';
|
|
import { Company, useGetPeopleQuery } from '~/generated/graphql';
|
|
|
|
import { AddPersonToCompany } from './AddPersonToCompany';
|
|
|
|
export type CompanyTeamPropsType = {
|
|
company: Pick<Company, 'id'>;
|
|
};
|
|
|
|
const StyledContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: ${({ theme }) => theme.spacing(2)};
|
|
margin-bottom: ${({ theme }) => theme.spacing(2)};
|
|
`;
|
|
|
|
const StyledTitleContainer = styled.div`
|
|
align-items: center;
|
|
color: ${({ theme }) => theme.font.color.primary};
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-bottom: ${({ theme }) => theme.spacing(0)};
|
|
padding-top: ${({ theme }) => theme.spacing(3)};
|
|
`;
|
|
|
|
const StyledListContainer = styled.div`
|
|
align-items: flex-start;
|
|
border: 1px solid ${({ theme }) => theme.border.color.medium};
|
|
border-radius: ${({ theme }) => theme.spacing(1)};
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
width: 100%;
|
|
`;
|
|
|
|
const StyledTitle = styled.div`
|
|
color: ${({ theme }) => theme.font.color.primary};
|
|
font-weight: ${({ theme }) => theme.font.weight.medium};
|
|
line-height: ${({ theme }) => theme.text.lineHeight.lg};
|
|
`;
|
|
|
|
export function CompanyTeam({ company }: CompanyTeamPropsType) {
|
|
const { data } = useGetPeopleQuery({
|
|
variables: {
|
|
orderBy: [],
|
|
where: {
|
|
companyId: {
|
|
equals: company.id,
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
const peopleIds = data?.people?.map(({ id }) => id);
|
|
|
|
return (
|
|
<>
|
|
{Boolean(data?.people?.length) && (
|
|
<StyledContainer>
|
|
<StyledTitleContainer>
|
|
<StyledTitle>Team</StyledTitle>
|
|
<AddPersonToCompany companyId={company.id} peopleIds={peopleIds} />
|
|
</StyledTitleContainer>
|
|
<StyledListContainer>
|
|
{data?.people?.map((person, id) => (
|
|
<PeopleCard
|
|
key={person.id}
|
|
person={person}
|
|
hasBottomBorder={id !== data.people.length - 1}
|
|
/>
|
|
))}
|
|
</StyledListContainer>
|
|
</StyledContainer>
|
|
)}
|
|
</>
|
|
);
|
|
}
|