Update common file

hotel-management/src/components/Form/styled.ts

@@ -1,4 +1,11 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+
+// Types
+import { TDirection } from '@type/common';
+
+interface IStyledFormRow {
+  direction?: TDirection;
+}
 
 // Styled
 import Button from '@commonStyle/Button';
@@ -16,11 +23,20 @@ const StyledActionBtn = styled.div`
   gap: 100px;
 `;
 
-const StyledFormRow = styled.div`
+const StyledFormRow = styled.div<IStyledFormRow>`
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  gap: 100px;
+
+  ${(props) =>
+    props.direction === 'horizontal'
+      ? css`
+          align-items: center;
+          gap: 100px;
+        `
+      : css`
+          flex-direction: column;
+          gap: 15px;
+        `}
 `;
 
 const Label = styled.label`
@@ -45,4 +61,8 @@ const FormBtn = styled(Button)`
   }
 `;
 
+StyledFormRow.defaultProps = {
+  direction: 'horizontal',
+};
+
 export { StyledForm, StyledActionBtn, StyledFormRow, Label, Error, FormBtn };