From b7e43de6709c96573de9dc471b6a99e632bc5c93 Mon Sep 17 00:00:00 2001
From: Anders Borch <anders@cyborch.com>
Date: Wed, 12 Apr 2023 13:30:13 +0200
Subject: [PATCH] Add icon property to table.

---
 front/src/components/table/Table.tsx       |  6 ++++--
 front/src/components/table/TableHeader.tsx | 16 ++++++++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/front/src/components/table/Table.tsx b/front/src/components/table/Table.tsx
index 325b399cc..28b1d6462 100644
--- a/front/src/components/table/Table.tsx
+++ b/front/src/components/table/Table.tsx
@@ -7,14 +7,16 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import TableHeader from './TableHeader';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 type OwnProps = {
   data: Array<any>;
   columns: Array<ColumnDef<any, any>>;
   viewName: string;
+  viewIcon?: IconProp;
 };
 
-function Table({ data, columns, viewName }: OwnProps) {
+function Table({ data, columns, viewName, viewIcon }: OwnProps) {
   const table = useReactTable({
     data,
     columns,
@@ -23,7 +25,7 @@ function Table({ data, columns, viewName }: OwnProps) {
 
   return (
     <div>
-      <TableHeader viewName={viewName} />
+      <TableHeader viewName={viewName} viewIcon={viewIcon} />
       <table>
         <thead>
           {table.getHeaderGroups().map((headerGroup) => (
diff --git a/front/src/components/table/TableHeader.tsx b/front/src/components/table/TableHeader.tsx
index 170ba573a..4a3ec93fd 100644
--- a/front/src/components/table/TableHeader.tsx
+++ b/front/src/components/table/TableHeader.tsx
@@ -1,15 +1,27 @@
 import styled from '@emotion/styled';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 type OwnProps = {
   viewName: string;
+  viewIcon?: IconProp;
 };
 
 const StyledTitle = styled.div`
   display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+  color: ${(props) => props.theme.text60};
 `;
 
-function TableHeader({ viewName }: OwnProps) {
-  return <StyledTitle>{viewName}</StyledTitle>;
+function TableHeader({ viewName, viewIcon }: OwnProps) {
+  return (
+    <StyledTitle>
+      {viewIcon && <FontAwesomeIcon icon={viewIcon} />}
+      {viewName}
+    </StyledTitle>
+  );
 }
 
 export default TableHeader;