diff --git a/front/src/components/chips/PersonChip.tsx b/front/src/components/chips/PersonChip.tsx
new file mode 100644
index 000000000..2c3be2e93
--- /dev/null
+++ b/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 (
+
+
+ {name}
+
+ );
+}
+
+export default PersonChip;
diff --git a/front/src/pages/people/placeholder.png b/front/src/components/chips/placeholder.png
similarity index 100%
rename from front/src/pages/people/placeholder.png
rename to front/src/components/chips/placeholder.png
diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx
index b62b2008e..edd55f15f 100644
--- a/front/src/pages/people/People.tsx
+++ b/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 = [
{
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 = [
},
{
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 = [
},
{
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 = [
},
{
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 = [
},
{
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}`}
/>
-