Continue organization

apps/leafcutter/components/PageHeader.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable react/require-default-props */
+import { FC } from "react";
+import { Box } from "@mui/material";
+import { useAppContext } from "./AppProvider";
+
+interface PageHeaderProps {
+  backgroundColor: string;
+  sx?: any;
+}
+
+export const PageHeader: FC<PageHeaderProps> = ({
+  backgroundColor,
+  sx = {},
+  children,
+}) => {
+  const {
+    colors: { white },
+  } = useAppContext();
+
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        backgroundColor,
+        color: white,
+        p: 3,
+        borderRadius: "10px",
+        mb: "22px",
+        minHeight: "100px",
+        zIndex: 1000,
+        position: "relative",
+        ...sx,
+      }}
+    >
+      {children}
+    </Box>
+  );
+};