Erros em Cronometro e Formulario:
TS2786: 'Botao' cannot be used as a JSX component. Its return type 'void' is not a valid JSX element.
Solução do ChatGPT:
import React from "react";
import style from "./Botao.module.scss";
interface Props extends React.ButtonHTMLAttributes {
children: React.ReactNode;
}
const Botao: React.FC = ({ children, ...rest }) => {
return (
<button {...rest} className={style.botao}>{children}
...
export default Botao;
Não esqueça de fechar tag button
O TS reclama porque “vê” que Botao não retorna JSX (retorna void). Isso costuma acontecer por 1) tipagem errada do componente, 2) arquivo não estar em .tsx, 3) falta dos tipos do React, ou 4) retorno/fechamento de tag incorreto.
Tenta:
import React from "react";
import style from "./Botao.module.scss";
type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
children?: React.ReactNode;
};
export default function Botao({
children,
className,
...rest
}: Props): React.JSX.Element {
return (
<button
{...rest}
className={[style.botao, className].filter(Boolean).join(" ")}
>
{children}
</button>
);
}