refactor: move data types and table definition out of People component

front/src/pages/people/people-table.tsx

@@ -0,0 +1,98 @@
+import {
+  faBuildings,
+  faCalendar,
+  faEnvelope,
+  faUser,
+  faMapPin,
+  faPhone,
+  faRectangleHistory,
+} from '@fortawesome/pro-regular-svg-icons';
+import { createColumnHelper } from '@tanstack/react-table';
+import ClickableCell from '../../components/table/ClickableCell';
+import ColumnHead from '../../components/table/ColumnHead';
+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';
+import { Person } from './types';
+
+const columnHelper = createColumnHelper<Person>();
+export const peopleColumns = [
+  columnHelper.accessor('fullName', {
+    header: () => <ColumnHead viewName="People" viewIcon={faUser} />,
+    cell: (props) => (
+      <>
+        <HorizontalyAlignedContainer>
+          <Checkbox
+            id={`person-selected-${props.row.original.email}`}
+            name={`person-selected-${props.row.original.email}`}
+          />
+          <PersonChip
+            name={props.row.original.fullName}
+            picture={props.row.original.picture}
+          />
+        </HorizontalyAlignedContainer>
+      </>
+    ),
+  }),
+  columnHelper.accessor('email', {
+    header: () => <ColumnHead viewName="Email" viewIcon={faEnvelope} />,
+    cell: (props) => (
+      <ClickableCell href={`mailto:${props.row.original.email}`}>
+        {props.row.original.email}
+      </ClickableCell>
+    ),
+  }),
+  columnHelper.accessor('company', {
+    header: () => <ColumnHead viewName="Company" viewIcon={faBuildings} />,
+    cell: (props) => (
+      <ClickableCell href="#">
+        <CompanyChip
+          name={props.row.original.company.name}
+          picture={`https://www.google.com/s2/favicons?domain=${props.row.original.company.domain}&sz=256`}
+        />
+      </ClickableCell>
+    ),
+  }),
+  columnHelper.accessor('phone', {
+    header: () => <ColumnHead viewName="Phone" viewIcon={faPhone} />,
+    cell: (props) => (
+      <ClickableCell
+        href={parsePhoneNumber(
+          props.row.original.phone,
+          props.row.original.countryCode as CountryCode,
+        )?.getURI()}
+      >
+        {parsePhoneNumber(
+          props.row.original.phone,
+          props.row.original.countryCode as CountryCode,
+        )?.formatInternational() || props.row.original.phone}
+      </ClickableCell>
+    ),
+  }),
+  columnHelper.accessor('creationDate', {
+    header: () => <ColumnHead viewName="Creation" viewIcon={faCalendar} />,
+    cell: (props) => (
+      <ClickableCell href="#">
+        {new Intl.DateTimeFormat(undefined, {
+          month: 'short',
+          day: 'numeric',
+          year: 'numeric',
+        }).format(props.row.original.creationDate)}
+      </ClickableCell>
+    ),
+  }),
+  columnHelper.accessor('pipe', {
+    header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleHistory} />,
+    cell: (props) => (
+      <ClickableCell href="#">{props.row.original.pipe.name}</ClickableCell>
+    ),
+  }),
+  columnHelper.accessor('city', {
+    header: () => <ColumnHead viewName="City" viewIcon={faMapPin} />,
+    cell: (props) => (
+      <ClickableCell href="#">{props.row.original.city}</ClickableCell>
+    ),
+  }),
+];