Initial Commit

src/components/table-screen-header/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+export {default as TableScreenHeader} from './table-screen-header';

src/components/table-screen-header/style.tsx

@@ -0,0 +1,37 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import * as styled from 'styled-components';
+import Theme from 'theme';
+
+const {colors} = Theme;
+
+export const ScreenHeader = styled.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  flex-wrap: wrap;
+  width: 100%;
+  margin: 0 0 .5rem;
+`;
+
+export const ScreenHeaderControls = styled.default.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const HeaderControlWrapper = styled.default.div`
+  margin-left: 12px;
+`;
+
+export const HeaderTitle = styled.default.div`
+  display: flex;
+  align-items: baseline;
+  h2 {
+    color: ${colors.white};
+    margin: 0 .5rem 0 0;
+  }
+  p {
+    color: ${colors.gray200};
+  }
+`;

src/components/table-screen-header/table-screen-header.tsx

@@ -0,0 +1,35 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import {JSX} from 'react';
+import {ITableWithLoadMoreHeader, ITableWithPaginationHeader, TableHeaderKey} from 'interfaces/tableProps';
+import {ScreenHeader, ScreenHeaderControls, HeaderControlWrapper, HeaderTitle} from './style';
+
+type ScreenHeaderProps = ITableWithLoadMoreHeader | ITableWithPaginationHeader;
+
+export interface ITableScreenHeader {
+  title: string;
+  subtitle?: string;
+  screenHeader: ScreenHeaderProps;
+  renderControl: (screenHeader: ScreenHeaderProps, key: TableHeaderKey) => JSX.Element | null;
+}
+
+export const TableScreenHeader = ({title, subtitle = '', screenHeader, renderControl}: ITableScreenHeader): JSX.Element => {
+  return (
+    <ScreenHeader className="table-header">
+      <HeaderTitle>
+        <h2>{title}</h2>
+        {subtitle && <p>{subtitle}</p>}
+      </HeaderTitle>
+      <ScreenHeaderControls>
+        {Object.keys(screenHeader).map(key => {
+          const headerControl = screenHeader[key].render ? screenHeader[key].render(key) : renderControl(screenHeader, key as TableHeaderKey);
+
+          return headerControl ? <HeaderControlWrapper key={key}>{headerControl}</HeaderControlWrapper> : null;
+        })}
+      </ScreenHeaderControls>
+    </ScreenHeader>
+  );
+};
+
+export default TableScreenHeader;