Refactor Box to use styled components

Author: devklick

src/components/Box/Box.scss

@@ -1,4 +1,4 @@
-import "./Box.scss";
+import { StyledBox } from "./styles";
 
 interface BoxProps {
   flow?: "horizontal" | "vertical";
@@ -11,19 +11,9 @@ function Box({
   children,
 }: React.PropsWithChildren<BoxProps>) {
   return (
-    <div
-      className="box"
-      style={{
-        display: "flex",
-        alignItems: "center",
-        flexDirection: flow == "horizontal" ? "row" : "column",
-        gap,
-        padding: gap,
-        boxSizing: "border-box",
-      }}
-    >
+    <StyledBox flow={flow} gap={gap}>
       {children}
-    </div>
+    </StyledBox>
   );
 }
 

src/components/Box/Box.tsx

@@ -0,0 +1,15 @@
+import styled from "@emotion/styled";
+
+interface StyledBoxProps {
+  flow?: "horizontal" | "vertical";
+  gap?: number;
+}
+
+export const StyledBox = styled.div<StyledBoxProps>`
+  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";
+`;