Refactor Row to use styled components

Author: devklick

src/components/Row/Row.scss

@@ -1,4 +1,4 @@
-import "./Row.scss";
+import { StyledRow } from "./styles";
 
 interface RowProps {
   gap?: number;
@@ -11,18 +11,9 @@ function Row({
   children,
 }: React.PropsWithChildren<RowProps>) {
   return (
-    <div
-      className="row"
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "space-between",
-        width,
-        gap,
-      }}
-    >
+    <StyledRow width={width} gap={gap}>
       {children}
-    </div>
+    </StyledRow>
   );
 }
 

src/components/Row/Row.tsx

@@ -0,0 +1,15 @@
+import styled from "@emotion/styled";
+
+interface StyledRowProps {
+  width?: string | number;
+  gap?: number;
+}
+export const StyledRow = styled.div<StyledRowProps>`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: ${(props) =>
+    typeof props.width === "number" ? `${props.width}px` : props.width};
+  gap: ${(props) =>
+    typeof props.gap === "number" ? `${props.gap}px` : props.gap};
+`;