diff --git a/front/src/components/chips/PipeChip.tsx b/front/src/components/chips/PipeChip.tsx
new file mode 100644
index 000000000..50c2fafed
--- /dev/null
+++ b/front/src/components/chips/PipeChip.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+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%);
+ }
+`;
+
+function PipeChip({ name, picture }: OwnProps) {
+ return (
+
+ {picture && {picture}}
+ {name}
+
+ );
+}
+
+export default PipeChip;
diff --git a/front/src/interfaces/person.interface.ts b/front/src/interfaces/person.interface.ts
index 97be4406a..31802a9cc 100644
--- a/front/src/interfaces/person.interface.ts
+++ b/front/src/interfaces/person.interface.ts
@@ -32,7 +32,7 @@ export type GraphqlPerson = {
export const mapPerson = (person: GraphqlPerson): Person => ({
fullName: `${person.firstname} ${person.lastname}`,
creationDate: new Date(person.created_at),
- pipe: { name: 'coucou', id: 1, icon: 'faUser' },
+ pipe: { name: 'coucou', id: 1, icon: '💰' },
...person,
company: {
id: 1,
diff --git a/front/src/pages/people/people-table.tsx b/front/src/pages/people/people-table.tsx
index 87728bace..f96ef1cbe 100644
--- a/front/src/pages/people/people-table.tsx
+++ b/front/src/pages/people/people-table.tsx
@@ -16,6 +16,7 @@ import HorizontalyAlignedContainer from '../../layout/containers/HorizontalyAlig
import CompanyChip from '../../components/chips/CompanyChip';
import PersonChip from '../../components/chips/PersonChip';
import { Person } from '../../interfaces/person.interface';
+import PipeChip from '../../components/chips/PipeChip';
const columnHelper = createColumnHelper();
export const peopleColumns = [
@@ -86,7 +87,10 @@ export const peopleColumns = [
columnHelper.accessor('pipe', {
header: () => ,
cell: (props) => (
- {props.row.original.pipe.name}
+
),
}),
columnHelper.accessor('city', {