refactor: add typescript support to project

src/common/component/styled/Button.tsx

@@ -1,10 +1,11 @@
 import styled from "styled-components";
+
 const StyledButton = styled.button`
   cursor: pointer;
   padding: 10px 14px;
   border: none;
   box-sizing: border-box;
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
   border-radius: var(--br, 4px);
   font-weight: 500;
   font-size: 14px;

src/common/component/styled/Checkbox.tsx

@@ -1,5 +1,5 @@
-// import React from 'react'
 import styled from "styled-components";
+
 const Styled = styled.input`
   -webkit-appearance: none;
   /* Remove most all native input styles */
@@ -33,6 +33,7 @@ const Styled = styled.input`
     opacity: 0.4;
   }
 `;
+
 export default function StyledCheckbox(props) {
   return <Styled readOnly {...props} type="checkbox" />;
 }

src/common/component/styled/Input.tsx

@@ -35,6 +35,7 @@ const StyledWrapper = styled.div`
   }
 `;
 
+// todo: check ime problem
 const StyledInput = styled.input`
   width: 100%;
   background: #ffffff;

src/common/component/styled/Label.tsx

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+
 const StyledLabel = styled.label`
   font-weight: 500;
   font-size: 14px;

src/common/component/styled/Menu.tsx

@@ -1,11 +1,12 @@
 import styled from "styled-components";
+
 const StyledMenu = styled.ul`
   display: flex;
   flex-direction: column;
   gap: 2px;
   padding: 4px;
   background-color: #fff;
-  box-shadow: 0px 20px 25px 20px rgba(31, 41, 55, 0.1), 0px 10px 10px rgba(31, 41, 55, 0.04);
+  box-shadow: 0 20px 25px 20px rgba(31, 41, 55, 0.1), 0 10px 10px rgba(31, 41, 55, 0.04);
   border-radius: 12px;
   min-width: 200px;
   .item {

src/common/component/styled/Modal.tsx

@@ -1,5 +1,6 @@
-// import React from 'react'
+import { FC, ReactElement } from "react";
 import styled from "styled-components";
+
 const Styled = styled.div`
   padding: 32px;
   filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
@@ -38,13 +39,22 @@ const Styled = styled.div`
     align-items: center;
   }
 `;
-export default function StyledModal({
+
+interface Props {
+  title?: string;
+  description?: string;
+  buttons: ReactElement[] | ReactElement;
+  children?: ReactElement;
+  className?: string;
+}
+
+const StyledModal: FC<Props> = ({
   title = "",
   description = "",
   buttons = null,
   children,
   ...props
-}) {
+}) => {
   return (
     <Styled {...props}>
       {title && <h3 className="title">{title}</h3>}
@@ -53,4 +63,6 @@ export default function StyledModal({
       {buttons && <div className="btns">{buttons}</div>}
     </Styled>
   );
-}
+};
+
+export default StyledModal;

src/common/component/styled/Select.tsx

@@ -4,6 +4,7 @@ import Tippy from "@tippyjs/react";
 import IconSelect from "../../../assets/icons/check.sign.svg";
 import IconArrow from "../../../assets/icons/arrow.down.svg";
 import Menu from "./Menu";
+
 const Styled = styled.div`
   user-select: none;
   border: 1px solid #e5e7eb;

src/common/component/styled/Textarea.tsx

@@ -1,10 +1,11 @@
 import styled from "styled-components";
+
 const StyledTextarea = styled.textarea`
   font-family: inherit;
   width: 100%;
   background: #ffffff;
   border: 1px solid #e5e7eb;
-  box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);
+  box-shadow: 0 1px 2px rgba(31, 41, 55, 0.08);
   border-radius: 4px;
   font-weight: normal;
   font-size: 14px;

src/common/component/styled/Toggle.tsx

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+
 const StyledToggle = styled.div`
   cursor: pointer;
   position: relative;