Converted to tsx

src/app.tsx

@@ -1,6 +1,5 @@
-import './app.css'
-import ButtonGroup from "./buttonGroup.jsx";
-import Button from "./button.jsx";
+import './app.css';
+import ButtonGroup from "./buttonGroup.tsx";
 
 function App() {
   return (

src/button.tsx

@@ -1,9 +1,23 @@
 import { useState } from 'react';
-import styles from './button.module.css';
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; // Import the CSS file
+import styles from './Button.module.css';
+import * as React from "react";
 
-// eslint-disable-next-line react/prop-types
-const Button = ({ note, onClick, faIcon, clicked = false, title, shortCut, right = false , text = ''}) => {
+interface ButtonProps {
+  note: string;
+  onClick: () => void;
+  clicked?: boolean;
+  title: string;
+  right?: boolean;
+  text?: string;
+}
+
+const Button: React.FC<ButtonProps> = ({
+  note,
+  onClick,
+  title,
+  right = false,
+  text = '',
+}) => {
     const [isHovered, setIsHovered] = useState(false);
     const controlButtonNote = right ? styles.controlButtonNoteRight : styles.controlButtonNote;
 
@@ -16,14 +30,14 @@ const Button = ({ note, onClick, faIcon, clicked = false, title, shortCut, right
                 onMouseLeave={() => setIsHovered(false)}
                 onClick={onClick}
             >
-                <FontAwesomeIcon icon={faIcon} style={{color: clicked ? '#c084fc' : '#ffffff'}}/>
+                {/*<FontAwesomeIcon icon={faIcon} style={{color: clicked ? '#c084fc' : '#ffffff'}}/>*/}
                 {text}
             </button>
             {isHovered &&
                 <span className={controlButtonNote}>
                     <div className={styles.tooltipHeader}>
                         <span className={styles.tooltipTitle}>{title}</span>
-                        <span className={styles.tooltipShortcut}>{shortCut}</span>
+                        <span className={styles.tooltipShortcut}>{''}</span>
                     </div>
                     <p className={styles.tooltipNote}>{note}</p>
                 </span>

src/buttonGroup.tsx

@@ -1,7 +1,7 @@
 import Button from "./button.jsx";
 
-// eslint-disable-next-line react/prop-types
-const ButtonGroup = ({ buttons }) => {
+const ButtonGroup = ({ buttons }: { buttons: string[][] }) => {
+    // @ts-ignore
     const openInNewTab = url => {
         window.open(url, '_blank', 'noopener,noreferrer');
     };
@@ -9,7 +9,8 @@ const ButtonGroup = ({ buttons }) => {
         <>
             {/* eslint-disable-next-line react/prop-types */}
             {buttons.map((buttonLabel, i) => (
-                <Button key={i} text={buttonLabel[0]} onClick={() => openInNewTab(buttonLabel[1])} note={buttonLabel[2]} title={buttonLabel[1]}/>
+                <Button key={i} text={buttonLabel[0]} onClick={() => openInNewTab(buttonLabel[1])} note={buttonLabel[2]}
+                        title={buttonLabel[1]}/>
             ))}
         </>
     );

src/main.tsx

@@ -1,9 +1,9 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import App from './app.jsx'
+import App from './app.tsx'
 import './main.css'
 
-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />
   </StrictMode>,

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />