Initial commit

src/components/ProHeader/ProHeader.tsx

@@ -0,0 +1,104 @@
+import { Button, Typography } from "antd";
+import BackIcon from "components/Icons/BackIcon";
+import { FunctionComponent, ReactNode } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAppSelector } from "redux/hooks";
+import { ProBlack2 } from "ThemeConstants";
+import ProTitle from "../ProTitle";
+const { Text } = Typography;
+
+interface ProHeaderProps {
+  children?: ReactNode;
+  isReactNode?: boolean;
+  navigateBack?: boolean;
+  customRoute?: string;
+}
+
+const ProHeader: FunctionComponent<ProHeaderProps> = ({
+  children,
+  isReactNode,
+  customRoute,
+  ...other
+}) => {
+  const { themeName } = useAppSelector((state) => state.theme);
+  const { isRTL } = useAppSelector((state) => state.locale);
+  const router = useNavigate();
+
+  const handleBack = () => {
+    if (customRoute) {
+      router(customRoute);
+    } else {
+      router(-1);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: isRTL ? "row-reverse" : "row",
+        justifyContent: "space-between",
+        alignItems: "center", // This centers vertically
+        backgroundColor: themeName === "light" ? "white" : ProBlack2,
+        height: "8vh", // Set a fixed height for the container
+        padding: "4px 16px 0px 16px", // Add some horizontal padding
+      }}
+    >
+      <Button
+        type="text"
+        icon={<BackIcon />}
+        style={{
+          flex: 0, // Don't allow this to grow
+          marginRight: "auto", // Push it to the start
+        }}
+        onClick={handleBack}
+      />
+
+      {!isReactNode ? (
+        <>
+          <div
+            style={{
+              position: "absolute", // Absolute positioning
+              left: "50%", // Center horizontally
+              transform: "translateX(-50%)", // Adjust for exact center
+              marginTop: 10,
+              boxSizing: "border-box", // Explicit box model definition
+            }}
+          >
+            <Text
+              style={{
+                textAlign: "center",
+              }}
+              {...other}
+            >
+              <ProTitle level={5}>{children}</ProTitle>
+            </Text>
+          </div>
+
+          <div
+            style={{
+              position: "absolute", // Absolute positioning
+              left: "50%", // Center horizontally
+              transform: "translateX(-50%)", // Adjust for exact center
+              marginTop: 10,
+              boxSizing: "border-box", // Explicit box model definition
+            }}
+          >
+            <Text
+              style={{
+                textAlign: "center",
+              }}
+              {...other}
+            >
+              <ProTitle level={5}>{children}</ProTitle>
+            </Text>
+          </div>
+        </>
+      ) : (
+        children
+      )}
+    </div>
+  );
+};
+
+export default ProHeader;