feat: Add team section on company show (#1119)

* Add team section on company show

Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Add requested changes

Co-authored-by: RubensRafael <rubensrafael2@live.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* Fix padding

Co-authored-by: RubensRafael <rubensrafael2@live.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>

---------

Co-authored-by: RubensRafael <rubensrafael2@live.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>

front/src/modules/companies/components/CompanyTeam.tsx

@@ -0,0 +1,74 @@
+import styled from '@emotion/styled';
+
+import { PeopleCard } from '@/people/components/PeopleCard';
+import { Company, useGetPeopleQuery } from '~/generated/graphql';
+
+export type CompanyTeamPropsType = {
+  company: Pick<Company, 'id'>;
+};
+
+const StyledContainer = styled.div`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledTitleContainer = styled.div`
+  align-items: center;
+  backdrop-filter: blur(5px);
+  color: ${({ theme }) => theme.font.color.primary};
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: ${({ theme }) => theme.spacing(0)};
+  padding-left: ${({ theme }) => theme.spacing(3)};
+  padding-right: ${({ theme }) => theme.spacing(3)};
+  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)};
+  display: flex;
+  flex-direction: column;
+  max-height: ${({ theme }) => theme.spacing(35)};
+  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,
+        },
+      },
+    },
+  });
+
+  return (
+    <>
+      {Boolean(data?.people?.length) && (
+        <StyledContainer>
+          <StyledTitleContainer>
+            <StyledTitle>Team</StyledTitle>
+          </StyledTitleContainer>
+          <StyledListContainer>
+            {data?.people?.map((person) => (
+              <PeopleCard key={person.id} person={person} />
+            ))}
+          </StyledListContainer>
+        </StyledContainer>
+      )}
+    </>
+  );
+}

front/src/modules/people/components/PeopleCard.tsx

@@ -0,0 +1,68 @@
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { Avatar } from '@/users/components/Avatar';
+import { Person } from '~/generated/graphql';
+
+export type PeopleCardPropsType = {
+  person: Pick<Person, 'id' | 'avatarUrl' | 'displayName' | 'jobTitle'>;
+};
+
+const StyledCard = styled.div`
+  align-items: center;
+  align-self: stretch;
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: ${({ theme }) => theme.spacing(8)};
+  padding: ${({ theme }) => theme.spacing(3)};
+
+  &:hover {
+    background: ${({ theme }) => theme.background.tertiary};
+    cursor: pointer;
+  }
+`;
+
+const StyledCardInfo = styled.div`
+  align-items: flex-start;
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+`;
+
+const StyledTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  line-height: ${({ theme }) => theme.text.lineHeight.lg};
+`;
+
+const StyledJobTitle = styled.div`
+  border-radius: ${({ theme }) => theme.spacing(1)};
+  color: ${({ theme }) => theme.font.color.secondary};
+  padding-bottom: ${({ theme }) => theme.spacing(0.5)};
+  padding-left: ${({ theme }) => theme.spacing(0)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
+  padding-top: ${({ theme }) => theme.spacing(0.5)};
+
+  &:hover {
+    background: ${({ theme }) => theme.background.tertiary};
+  }
+`;
+
+export function PeopleCard({ person }: PeopleCardPropsType) {
+  const navigate = useNavigate();
+  return (
+    <StyledCard onClick={() => navigate(`/person/${person.id}`)}>
+      <Avatar
+        size="lg"
+        type="rounded"
+        placeholder={person.displayName}
+        avatarUrl={person.avatarUrl}
+      />
+      <StyledCardInfo>
+        <StyledTitle>{person.displayName}</StyledTitle>
+        <StyledJobTitle> {person.jobTitle ?? 'Add job title'}</StyledJobTitle>
+      </StyledCardInfo>
+    </StyledCard>
+  );
+}

front/src/pages/companies/CompanyShow.tsx

@@ -2,6 +2,7 @@ import { useParams } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 
 import { Timeline } from '@/activities/timeline/components/Timeline';
+import { CompanyTeam } from '@/companies/components/CompanyTeam';
 import { CompanyAccountOwnerEditableField } from '@/companies/editable-field/components/CompanyAccountOwnerEditableField';
 import { CompanyAddressEditableField } from '@/companies/editable-field/components/CompanyAddressEditableField';
 import { CompanyCreatedAtEditableField } from '@/companies/editable-field/components/CompanyCreatedAtEditableField';
@@ -54,6 +55,7 @@ export function CompanyShow() {
             <CompanyAddressEditableField company={company} />
             <CompanyCreatedAtEditableField company={company} />
           </PropertyBox>
+          <CompanyTeam company={company}></CompanyTeam>
         </ShowPageLeftContainer>
         <ShowPageRightContainer>
           <Timeline