Add common component and helpers

hotel-management/src/commons/styles/Button.ts

@@ -1,15 +1,35 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-const Button = styled.button`
+interface IButtonStyle {
+  styled?: 'primary' | 'secondary';
+}
+
+const Button = styled.button<IButtonStyle>`
   padding: 10px 20px;
 
-  background-color: var(--primary-color);
-  color: var(--light-text);
   text-transform: uppercase;
-  font-weight: 500;
+  font-weight: 600;
+
   cursor: pointer;
 
   border-radius: var(--radius-md);
+
+  ${(props) =>
+    props.styled === 'primary' &&
+    css`
+      background-color: var(--primary-color);
+      color: var(--light-text);
+    `}
+
+  ${(props) =>
+    props.styled === 'secondary' &&
+    css`
+      background-color: var(--secondary-btn-color);
+    `}
 `;
 
+Button.defaultProps = {
+  styled: 'primary',
+};
+
 export default Button;

hotel-management/src/commons/styles/CommonInput.ts

@@ -0,0 +1,12 @@
+import { css } from 'styled-components';
+
+const CommonInput = css`
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 10px 20px;
+  font-size: var(--fs-sm-x);
+
+  width: 200px;
+`;
+
+export default CommonInput;

hotel-management/src/commons/styles/Input.ts

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+// Styled
+import CommonInput from './CommonInput';
+
+const Input = styled.input`
+  ${CommonInput}
+`;
+
+export default Input;

hotel-management/src/commons/styles/TextArea.ts

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+// Styled
+import CommonInput from './CommonInput';
+
+const TextArea = styled.textarea`
+  ${CommonInput}
+`;
+
+export default TextArea;