Add header section

sfbrigade · Oct 22, 2024 · f18079f · f18079f
1 parent 19355a1
commit f18079f
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 5 deletions.
diff --git a/client/src/pages/patients/Patients.jsx b/client/src/pages/patients/Patients.jsx
@@ -1,8 +1,20 @@
-import { Table, Container, LoadingOverlay, Paper, Menu, ActionIcon, rem } from '@mantine/core';
+import {
+  Table,
+  Container,
+  LoadingOverlay,
+  Paper,
+  Menu,
+  ActionIcon,
+  rem,
+  Button,
+  Group,
+  TextInput,
+  Divider,
+} from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
 import { StatusCodes } from 'http-status-codes';
-import {IconDotsVertical} from '@tabler/icons-react';
+import { IconDotsVertical, IconSearch } from '@tabler/icons-react';
 
 import classes from './Patients.module.css';
 import LifelineAPI from './LifelineAPI';
@@ -29,8 +41,19 @@ export default function Patients() {
 
   return (
     <Container>
-      <h1>Patients</h1>
-
+      <div className={classes.header}>
+        <p className={classes.title}>Patients</p>
+        <Group>
+          <TextInput
+            leftSectionPointerEvents="none"
+            leftSection={<IconSearch stroke={2} />}
+            placeholder="Search"
+          />
+          <Button variant="default">Renewal Required</Button>
+          <Button variant="filled">Create Profile</Button>
+        </Group>
+      </div>
+      <Divider mb="xl" />
       <LoadingOverlay
         visible={isFetching}
         zIndex={1000}
@@ -93,7 +116,9 @@ export default function Patients() {
                   <Menu>
                     <Menu.Target>
                       <ActionIcon variant="subtle" color="gray">
-                        <IconDotsVertical style={{ width: rem(14), height: rem(14) }} />
+                        <IconDotsVertical
+                          style={{ width: rem(18), height: rem(18) }}
+                        />
                       </ActionIcon>
                     </Menu.Target>
                     <Menu.Dropdown>

diff --git a/client/src/pages/patients/Patients.module.css b/client/src/pages/patients/Patients.module.css
@@ -2,3 +2,15 @@
   border-radius: 12px;
   overflow: hidden;
 }
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  margin: 1rem 1rem;
+}
+
+.title {
+  font-weight: 600;
+  font-size: 1.25rem;
+  margin: 0 0.5rem 0 0;
+}