From be601c58b1c8716b66b6a63bd05ba2ccb488fbb3 Mon Sep 17 00:00:00 2001
From: Anders Borch <anders@cyborch.com>
Date: Fri, 21 Apr 2023 16:03:29 +0200
Subject: [PATCH 1/2] Add pipe chip

---
 front/src/components/chips/PipeChip.tsx | 32 +++++++++++++++++++++++++
 front/src/pages/people/people-table.tsx |  6 ++++-
 2 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 front/src/components/chips/PipeChip.tsx

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 (
+    <StyledContainer data-testid="company-chip">
+      {picture && <span>{picture}</span>}
+      <span>{name}</span>
+    </StyledContainer>
+  );
+}
+
+export default PipeChip;
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<Person>();
 export const peopleColumns = [
@@ -86,7 +87,10 @@ export const peopleColumns = [
   columnHelper.accessor('pipe', {
     header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleHistory} />,
     cell: (props) => (
-      <ClickableCell href="#">{props.row.original.pipe.name}</ClickableCell>
+      <PipeChip
+        name={props.row.original.pipe.name}
+        picture={props.row.original.pipe.icon}
+      />
     ),
   }),
   columnHelper.accessor('city', {

From 06aa78bc00c1a2ee94ad125567cd69567d23d425 Mon Sep 17 00:00:00 2001
From: Anders Borch <anders@cyborch.com>
Date: Fri, 21 Apr 2023 16:28:25 +0200
Subject: [PATCH 2/2] Set default pipe icon

---
 front/src/interfaces/person.interface.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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,