Use tsx for jsx files

.prettierrc

@@ -1,6 +1,7 @@
 {
-  "semi": true,
-  "trailingComma": "es5",
-  "singleQuote": false,
-  "useTabs": true
+	"semi": true,
+	"trailingComma": "all",
+	"singleQuote": false,
+	"useTabs": true,
+	"printWidth": 150
 }

package.json

@@ -60,6 +60,7 @@
 		"@types/mercadopago": "^1.5.11",
 		"@types/node-cron": "^3.0.11",
 		"@types/react": "^18.3.12",
+		"@types/sanitize-html": "^2.13.0",
 		"@types/speakeasy": "^2.0.10",
 		"@types/yup": "^0.29.14",
 		"autoprefixer": "^10.4.20",

src/components/Button.tsx

@@ -13,9 +13,9 @@ export interface ButtonProps {
 	type?: ButtonType;
 	href?: string;
 	btnColorType?: ButtonColorType;
-	isLoading: boolean;
-	isActive: boolean;
-	loadingText: string;
+	isLoading?: boolean;
+	isActive?: boolean;
+	loadingText?: string;
 }
 
 const Button = ({
@@ -24,8 +24,8 @@ const Button = ({
 	btnColorType = "primary",
 	size = "md",
 	href,
-	isLoading,
-	isActive,
+	isLoading = false,
+	isActive = false,
 	loadingText,
 }: ButtonProps) => {
 	const btn = (

src/components/DropdownButton.tsx

@@ -5,22 +5,15 @@ import { IoChevronDown } from "react-icons/io5";
 import { Menu, MenuButton, MenuList, MenuItem, Button } from "@chakra-ui/react";
 
 export interface DropdownButtonProps {
-	hasMenu: boolean;
+	hasMenu?: boolean;
 	text: string;
 	href?: string;
 	list?: { text: string; url: string; isActive?: boolean }[];
 }
 
-const DropdownButton = ({
-	hasMenu = false,
-	text,
-	href,
-	list,
-}: DropdownButtonProps) => {
+const DropdownButton = ({ hasMenu = false, text, href, list }: DropdownButtonProps) => {
 	const router = useRouter();
-	const isActive = hasMenu
-		? list?.some((item) => router.asPath.startsWith(item.url))
-		: router.asPath === href;
+	const isActive = hasMenu ? list?.some((item) => router.asPath.startsWith(item.url)) : router.asPath === href;
 
 	if (hasMenu) {
 		return (

src/components/FormWrapper.tsx

@@ -19,7 +19,7 @@ export interface FormField {
 	name: string;
 	label: { text: string };
 	placeholder?: string;
-	as?: JSX.Element;
+	as?: any;
 	options?: { value: string; text: string }[];
 }
 

src/components/Link.jsx → src/components/Link.tsx

@@ -2,10 +2,15 @@ import React from "react";
 import { Link as ChakraLink } from "@chakra-ui/react";
 import NextLink from "next/link";
 
-const Link = ({ href, text }) => {
+export interface LinkProps {
+	href: string;
+	text?: string;
+}
+
+const Link = ({ href, text }: LinkProps) => {
 	return (
 		<NextLink href={href} passHref>
-			<ChakraLink color="violet.500">{text ? text : href}</ChakraLink>
+			<ChakraLink color="violet.500">{text ?? href}</ChakraLink>
 		</NextLink>
 	);
 };

src/layout/Footer.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Box } from "@chakra-ui/react";
+
+const Footer = () => {
+	return (
+		<Box bgColor="#f5f5f5" border="1px" borderRadius="md" padding="10px" textAlign="center">
+			Copyright © 2021-2023 Shibaac
+		</Box>
+	);
+};
+
+export default Footer;

src/layout/Head.tsx

@@ -3,24 +3,17 @@ import React from "react";
 import NextHead from "next/head";
 import { NextSeo } from "next-seo";
 
-type HeadProps = {
-	title: string;
+export interface HeadProps {
+	title?: string;
 	description?: string;
-};
+}
 
-const Head = ({
-	title = "shibaac",
-	description = "Automatic Account Creator",
-}: HeadProps) => {
+const Head = ({ title = "shibaac", description = "Automatic Account Creator" }: HeadProps) => {
 	return (
 		<>
 			<NextHead>
 				<meta charSet="UTF-8" key="charset" />
-				<meta
-					name="viewport"
-					content="width=device-width,initial-scale=1"
-					key="viewport"
-				/>
+				<meta name="viewport" content="width=device-width,initial-scale=1" key="viewport" />
 				<link rel="icon" href={`/favicon.ico`} key="favicon" />
 			</NextHead>
 			<NextSeo

src/layout/NavBar.jsx → src/layout/NavBar.tsx

@@ -1,19 +1,7 @@
 import React from "react";
 import { useRouter } from "next/router";
 import { useUser } from "../hooks/useUser";
-import {
-	Flex,
-	Spacer,
-	Box,
-	Menu,
-	MenuButton,
-	MenuList,
-	MenuItem,
-	MenuGroup,
-	IconButton,
-	Link,
-	useBreakpointValue,
-} from "@chakra-ui/react";
+import { Flex, Spacer, Box, Menu, MenuButton, MenuList, MenuItem, MenuGroup, IconButton, Link, useBreakpointValue } from "@chakra-ui/react";
 import DropdownButton from "../components/DropdownButton";
 import TextInput from "../components/TextInput";
 import { RxHamburgerMenu } from "react-icons/rx";
@@ -43,13 +31,7 @@ const navigationItems = [
 
 const MobileNavigation = ({ user }) => {
 	return (
-		<Flex
-			bgColor="violet.400"
-			height="fit-content"
-			marginBottom="1.5em"
-			flexDir="row"
-			borderRadius="md"
-		>
+		<Flex bgColor="violet.400" height="fit-content" marginBottom="1.5em" flexDir="row" borderRadius="md">
 			<Menu>
 				<MenuButton
 					as={IconButton}
@@ -103,21 +85,9 @@ const DesktopNavigation = ({ user }) => {
 	const router = useRouter();
 
 	return (
-		<Flex
-			bgColor="violet.400"
-			height="fit-content"
-			marginBottom="1.5em"
-			flexDir="row"
-			borderRadius="md"
-		>
+		<Flex bgColor="violet.400" height="fit-content" marginBottom="1.5em" flexDir="row" borderRadius="md">
 			{navigationItems.map((item) => (
-				<DropdownButton
-					key={item.text}
-					text={item.text}
-					hasMenu={item.hasMenu}
-					list={item.menuItems}
-					href={item.href}
-				/>
+				<DropdownButton key={item.text} text={item.text} hasMenu={item.hasMenu} list={item.menuItems} href={item.href} />
 			))}
 
 			<Box alignSelf="center">
@@ -164,7 +134,7 @@ const NavBar = () => {
 		},
 		{
 			fallback: "md",
-		}
+		},
 	);
 
 	return <NavComponent user={user} />;

src/layout/SideBar.tsx

@@ -18,7 +18,7 @@ const SideBar = (props: LayoutProps) => {
 			setIsLoading(true);
 
 			const [players, status] = await Promise.all([
-				fetchApi<{ players: player[] }>("GET", `/api/player/top5`),
+				fetchApi<{ players: any[] }>("GET", `/api/player/top5`),
 				fetchApi<{ status: ProtocolStatusCache }>("GET", `/api/status`),
 			]);
 
@@ -38,23 +38,10 @@ const SideBar = (props: LayoutProps) => {
 				<table className="table table-condensed table-content table-striped">
 					<tbody>
 						<tr>
-							<td>
-								{serverStatus?.online ? (
-									<Label colorScheme="green">ONLINE</Label>
-								) : (
-									<Label colorScheme="red">OFFLINE</Label>
-								)}
-							</td>
+							<td>{serverStatus?.online ? <Label colorScheme="green">ONLINE</Label> : <Label colorScheme="red">OFFLINE</Label>}</td>
 						</tr>
 						<tr>
-							<td>
-								{serverStatus && (
-									<Link
-										href="/online"
-										text={`${serverStatus.onlineCount} players online`}
-									/>
-								)}
-							</td>
+							<td>{serverStatus && <Link href="/online" text={`${serverStatus.onlineCount} players online`} />}</td>
 						</tr>
 					</tbody>
 				</table>
@@ -73,15 +60,15 @@ const SideBar = (props: LayoutProps) => {
 									{
 										text: player.level,
 									},
-							  ])
+								])
 							: [
 									[
 										{
 											text: "There is no data to show",
 											colspan: 2,
 										},
 									],
-							  ]
+								]
 					}
 				/>
 			</Panel>

src/layout/index.jsx → src/layout/index.tsx

@@ -3,33 +3,16 @@ import Head from "./Head";
 import NavBar from "./NavBar";
 import SideBar from "./SideBar";
 import Footer from "./Footer";
-
 import { Box, Image, Flex } from "@chakra-ui/react";
 
 const Layout = ({ children }) => {
 	return (
-		<Box
-			w={{ base: "95%", md: "70%" }}
-			marginX={"auto"}
-			marginY={{ base: "1em", md: 0 }}
-		>
-			<Head />
-			<Image
-				width="15%"
-				marginLeft="auto"
-				marginRight="auto"
-				marginBottom="15px"
-				marginTop="15px"
-				src="/images/header.png"
-				alt="shibaac"
-			/>
+		<Box w={{ base: "95%", md: "70%" }} marginX={"auto"} marginY={{ base: "1em", md: 0 }}>
+			<Head title="layout" />
+			<Image width="15%" marginLeft="auto" marginRight="auto" marginBottom="15px" marginTop="15px" src="/images/header.png" alt="shibaac" />
 			<NavBar />
 			<Flex flexDirection={{ base: "column", md: "row" }}>
-				<Box
-					flexGrow="1"
-					marginRight={{ base: 0, md: "3em" }}
-					order={{ base: 2, md: 1 }}
-				>
+				<Box flexGrow="1" marginRight={{ base: 0, md: "3em" }} order={{ base: 2, md: 1 }}>
 					{children}
 					<Footer />
 				</Box>

src/lib/request.ts

@@ -19,7 +19,7 @@ export type ResponseData = {
 	args?: any;
 };
 
-export const fetchApi = async <T = void>(
+export const fetchApi = async <T = any>(
 	method: FetchMethods,
 	url: string,
 	options?: FetchOptions

src/pages/_app.jsx → src/pages/_app.tsx

@@ -1,7 +1,8 @@
-import Layout from "src/layout";
-import { UserContextWrapper } from "src/hooks/useUser";
+import Layout from "../layout";
+import { UserContextWrapper } from "../hooks/useUser";
 import { ChakraProvider } from "@chakra-ui/react";
-import { Theme, Fonts } from "src/layout/theme";
+import { Theme, Fonts } from "../layout/theme";
+import React from "react";
 
 // @ts-ignore
 BigInt.prototype.toJSON = function () {