Add new line on Table Views (#110)

Add addition on Companies table

front/src/layout/top-bar/TopBar.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { ReactNode } from 'react';
+import { TbPlus } from 'react-icons/tb';
 
 const TopBarContainer = styled.div`
   display: flex;
@@ -17,19 +18,44 @@ const TitleContainer = styled.div`
   font-family: 'Inter';
   margin-left: 4px;
   font-size: 14px;
+  display: flex;
+  width: 100%;
+`;
+
+const AddButtonContainer = styled.div`
+  display: flex;
+  justify-self: flex-end;
+  border: 1px solid ${(props) => props.theme.primaryBorder};
+  width: 32px;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  color: ${(props) => props.theme.text60};
+  cursor: pointer;
+  margin-right: ${(props) => props.theme.spacing(1)};
 `;
 
 type OwnProps = {
   title: string;
   icon: ReactNode;
+  onAddButtonClick?: () => void;
 };
 
-function TopBar({ title, icon }: OwnProps) {
+function TopBar({ title, icon, onAddButtonClick }: OwnProps) {
   return (
     <>
       <TopBarContainer>
         {icon}
         <TitleContainer data-testid="top-bar-title">{title}</TitleContainer>
+        {onAddButtonClick && (
+          <AddButtonContainer
+            data-testid="add-button"
+            onClick={onAddButtonClick}
+          >
+            <TbPlus />
+          </AddButtonContainer>
+        )}
       </TopBarContainer>
     </>
   );