Refactor HeaderBar to use styled components

Author: devklick

src/components/Box/styles.ts

@@ -6,10 +6,10 @@ interface StyledBoxProps {
 }
 
 export const StyledBox = styled.div<StyledBoxProps>`
-  display: "flex";
-  align-items: "center";
+  display: flex;
+  align-items: center;
   flex-direction: ${(props) => (props.flow == "horizontal" ? "row" : "column")};
   gap: ${(props) => props.gap}px;
   padding: ${(props) => props.gap}px;
-  box-sizing: "border-box";
+  box-sizing: border-box;
 `;

src/components/HeaderBar/HeaderBar.scss

@@ -1,7 +1,7 @@
-import { CSSProperties } from "react";
-import "./HeaderBar.scss";
 import useSystemSettings from "../../stores/systemSettingsStore";
 
+import { StyledHeaderBar } from "./styles";
+
 interface HeaderBarProps {
   header: string;
   position?: "left" | "centre" | "right";
@@ -20,37 +20,18 @@ function HeaderBar({
   borderRadiusBottom = 10,
 }: HeaderBarProps) {
   const settings = useSystemSettings();
-  function getJustifyContent(): CSSProperties["justifyContent"] {
-    switch (position) {
-      case "left":
-        return "flex-start";
-      case "right":
-        return "flex-end";
-      case "centre":
-      default:
-        return "center";
-    }
-  }
+
   return (
-    <div
-      className="header-bar__container"
-      style={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: getJustifyContent(),
-        paddingTop: padVertical,
-        paddingBottom: padVertical,
-        paddingLeft: padHorizontal,
-        paddingRight: padHorizontal,
-        backgroundColor: settings.mainColor,
-        borderTopLeftRadius: borderRadiusTop,
-        borderTopRightRadius: borderRadiusTop,
-        borderBottomLeftRadius: borderRadiusBottom,
-        borderBottomRightRadius: borderRadiusBottom,
-      }}
+    <StyledHeaderBar
+      backgroundColor={settings.mainColor}
+      position={position}
+      padVertical={padVertical}
+      padHorizontal={padHorizontal}
+      borderRadiusTop={borderRadiusTop}
+      borderRadiusBottom={borderRadiusBottom}
     >
       <span className="header-bar__header">{header}</span>
-    </div>
+    </StyledHeaderBar>
   );
 }
 

src/components/HeaderBar/HeaderBar.tsx

@@ -0,0 +1,40 @@
+import styled from "@emotion/styled";
+import { CSSProperties } from "react";
+
+type Position = "left" | "centre" | "right";
+interface StyledHeaderBarProps {
+  backgroundColor: string;
+  position?: Position;
+  padVertical?: number;
+  padHorizontal?: number;
+  borderRadiusTop?: number;
+  borderRadiusBottom?: number;
+}
+function getJustifyContent(
+  position?: Position
+): CSSProperties["justifyContent"] {
+  switch (position) {
+    case "left":
+      return "flex-start";
+    case "right":
+      return "flex-end";
+    case "centre":
+    default:
+      return "center";
+  }
+}
+
+export const StyledHeaderBar = styled.div<StyledHeaderBarProps>`
+  display: flex;
+  align-items: center;
+  justify-content: ${(props) => getJustifyContent(props.position)};
+  padding-top: ${(props) => props.padVertical}px;
+  padding-bottom: ${(props) => props.padVertical}px;
+  padding-left: ${(props) => props.padHorizontal}px;
+  padding-right: ${(props) => props.padHorizontal}px;
+  background-color: ${(props) => props.backgroundColor}px;
+  border-top-left-radius: ${(props) => props.borderRadiusTop}px;
+  border-top-right-radius: ${(props) => props.borderRadiusTop}px;
+  border-bottom-left-radius: ${(props) => props.borderRadiusBottom}px;
+  border-bottom-right-radius: ${(props) => props.borderRadiusBottom}px;
+`;