refactor: use PersonChip in people page

front/src/components/chips/PersonChip.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import personPlaceholder from './placeholder.png';
+
+type OwnProps = {
+  name: string;
+  picture?: string;
+};
+
+const StyledContainer = styled.span`
+  background-color: ${(props) => props.theme.tertiaryBackground};
+  border-radius: ${(props) => props.theme.spacing(1)};
+  color: ${(props) => props.theme.text80};
+  display: inline-flex;
+  align-items: center;
+  padding: ${(props) => props.theme.spacing(1)};
+  gap: ${(props) => props.theme.spacing(1)};
+
+  :hover {
+    filter: brightness(95%);
+  }
+
+  img {
+    height: 14px;
+    width: 14px;
+    object-fit: cover;
+  }
+`;
+
+function PersonChip({ name, picture }: OwnProps) {
+  console.log(picture ? picture.toString() : personPlaceholder);
+  return (
+    <StyledContainer data-testid="person-chip">
+      <img
+        data-testid="person-chip-image"
+        src={picture ? picture.toString() : personPlaceholder.toString()}
+        alt="person-picture"
+      />
+      {name}
+    </StyledContainer>
+  );
+}
+
+export default PersonChip;

front/src/pages/people/People.tsx

@@ -14,11 +14,11 @@ import { createColumnHelper } from '@tanstack/react-table';
 import styled from '@emotion/styled';
 import ClickableCell from '../../components/table/ClickableCell';
 import ColumnHead from '../../components/table/ColumnHead';
-import personPlaceholder from './placeholder.png';
 import { parsePhoneNumber, CountryCode } from 'libphonenumber-js';
 import Checkbox from '../../components/form/Checkbox';
 import HorizontalyAlignedContainer from '../../layout/containers/HorizontalyAlignedContainer';
 import CompanyChip from '../../components/chips/CompanyChip';
+import PersonChip from '../../components/chips/PersonChip';
 
 type Person = {
   fullName: string;
@@ -47,7 +47,7 @@ const StyledPeopleContainer = styled.div`
 const defaultData: Array<Person> = [
   {
     fullName: 'Alexandre Prot',
-    picture: personPlaceholder,
+    picture: 'http://placekitten.com/256',
     email: 'alexandre@qonto.com',
     company: { id: 1, name: 'Qonto', domain: 'qonto.com' },
     phone: '06 12 34 56 78',
@@ -58,7 +58,6 @@ const defaultData: Array<Person> = [
   },
   {
     fullName: 'Alexandre Prot',
-    picture: personPlaceholder,
     email: 'alexandre@qonto.com',
     company: { id: 2, name: 'LinkedIn', domain: 'linkedin.com' },
     phone: '06 12 34 56 78',
@@ -69,7 +68,7 @@ const defaultData: Array<Person> = [
   },
   {
     fullName: 'Alexandre Prot',
-    picture: personPlaceholder,
+    picture: 'http://placekitten.com/256',
     email: 'alexandre@qonto.com',
     company: { id: 1, name: 'Qonto', domain: 'qonto.com' },
     phone: '06 12 34 56 78',
@@ -80,7 +79,7 @@ const defaultData: Array<Person> = [
   },
   {
     fullName: 'Alexandre Prot',
-    picture: personPlaceholder,
+    picture: 'https://placekitten.com/g/256',
     email: 'alexandre@qonto.com',
     company: { id: 1, name: 'Slack', domain: 'slack.com' },
     phone: '06 12 34 56 78',
@@ -91,7 +90,6 @@ const defaultData: Array<Person> = [
   },
   {
     fullName: 'Alexandre Prot',
-    picture: personPlaceholder,
     email: 'alexandre@qonto.com',
     company: { id: 2, name: 'Facebook', domain: 'facebook.com' },
     phone: '06 12 34 56 78',
@@ -114,7 +112,7 @@ const columns = [
           name={`person-selected${props.row.original.email}`}
         />
         <ClickableCell href="#">
-          <CompanyChip
+          <PersonChip
             name={props.row.original.fullName}
             picture={props.row.original.picture}
           />