ui: converted

src/app/components/UI/Button/Button.tsx

@@ -2,13 +2,27 @@ import React, { memo } from "react";
 import cls from "./Button.module.scss";
 import { classNames } from "../../../utils/classNames";
 
-export const ButtonThemes = {
+interface ButtonProps {
+  className?: string;
+  children: React.ReactNode;
+  theme?: ThemeProps;
+  href?: string;
+  fullWidth?: boolean;
+}
+
+interface ThemeProps {
+  Primary: "primary";
+  Outline: "outline";
+  Clear: "clear";
+}
+
+export const ButtonThemes: ThemeProps = {
   Primary: "primary",
   Outline: "outline",
   Clear: "clear",
 };
 
-export const Button = memo((props) => {
+export const Button = memo((props: ButtonProps) => {
   const {
     className,
     children,
@@ -22,7 +36,7 @@ export const Button = memo((props) => {
     return (
       <a
         href={href}
-        className={classNames(cls.Button, {}, [className, cls[theme]])}
+        className={classNames(cls.Button, {}, [className, cls[theme as string]])}
         {...otherProps}
       >
         {children}
@@ -32,7 +46,7 @@ export const Button = memo((props) => {
 
   return (
     <button
-      className={classNames(cls.Button, {}, [className, cls[theme]])}
+      className={classNames(cls.Button, {}, [className, cls[theme as string]])}
       type="button"
       {...otherProps}
     >

src/app/components/UI/NavLink/NavLink.tsx

@@ -2,7 +2,13 @@ import React from "react";
 import { Link } from "react-chrome-extension-router";
 import { classNames } from "../../../utils/classNames";
 
-const NavLink = ({ component, children, className, ...props }) => {
+interface NavLinkProps {
+  component: React.ComponentType<any>;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const NavLink = ({ component, children, className, ...props }: NavLinkProps) => {
   const scrollHandler = () => {
     document.body.scrollTop = 0;
   };

src/app/components/UI/RoutersNav/RoutersNav.tsx

@@ -3,9 +3,14 @@ import { goBack } from "react-chrome-extension-router";
 import backIcon from "../../../assets/svg/arrow-back.svg";
 import s from "./RoutersNav.module.scss";
 
-const RoutersNav = ({ title, onClick }) => {
+interface RoutersNavProps {
+  title: string;
+  onClick?: "none" | (() => void | undefined);
+}
+
+const RoutersNav = ({ title, onClick }: RoutersNavProps) => {
   const clickHandler = () => {
-    if (onClick) {
+    if (typeof onClick === "function") {
       onClick();
     } else {
       goBack();