From 994c7007c83eae62fc2bc8a577b3bb50a55dceeb Mon Sep 17 00:00:00 2001
From: AzizbekFayziyev <fayziyev.dev@gmail.com>
Date: Thu, 28 Nov 2024 14:42:20 +0500
Subject: [PATCH] ui: converted

---
 .../UI/Button/{Button.jsx => Button.tsx}      | 22 +++++++++++++++----
 .../UI/NavLink/{NavLink.jsx => NavLink.tsx}   |  8 ++++++-
 .../{RoutersNav.jsx => RoutersNav.tsx}        |  9 ++++++--
 3 files changed, 32 insertions(+), 7 deletions(-)
 rename src/app/components/UI/Button/{Button.jsx => Button.tsx} (66%)
 rename src/app/components/UI/NavLink/{NavLink.jsx => NavLink.tsx} (67%)
 rename src/app/components/UI/RoutersNav/{RoutersNav.jsx => RoutersNav.tsx} (75%)

diff --git a/src/app/components/UI/Button/Button.jsx b/src/app/components/UI/Button/Button.tsx
similarity index 66%
rename from src/app/components/UI/Button/Button.jsx
rename to src/app/components/UI/Button/Button.tsx
index 70620b9..665e963 100644
--- a/src/app/components/UI/Button/Button.jsx
+++ b/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}
     >
diff --git a/src/app/components/UI/NavLink/NavLink.jsx b/src/app/components/UI/NavLink/NavLink.tsx
similarity index 67%
rename from src/app/components/UI/NavLink/NavLink.jsx
rename to src/app/components/UI/NavLink/NavLink.tsx
index ba5eddf..896c5f8 100644
--- a/src/app/components/UI/NavLink/NavLink.jsx
+++ b/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;
   };
diff --git a/src/app/components/UI/RoutersNav/RoutersNav.jsx b/src/app/components/UI/RoutersNav/RoutersNav.tsx
similarity index 75%
rename from src/app/components/UI/RoutersNav/RoutersNav.jsx
rename to src/app/components/UI/RoutersNav/RoutersNav.tsx
index 93e8087..8051017 100644
--- a/src/app/components/UI/RoutersNav/RoutersNav.jsx
+++ b/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();