:react-js:Conteúdo produzido por Profº Vinicius Martins

<aside> <img src="notion://custom_emoji/eec5802d-aa68-469e-bd8d-a6acbfcb3167/219b1288-c377-8040-879a-007afa980f7c" alt="notion://custom_emoji/eec5802d-aa68-469e-bd8d-a6acbfcb3167/219b1288-c377-8040-879a-007afa980f7c" width="40px" />

O React é uma biblioteca para interfaces de usuário nativas e da web. O React permite que você crie interfaces de usuário a partir de partes individuais chamadas componentes

</aside>

ARQUIVOS DA CORREÇÃO

Input.tsx

import type { CSSProperties } from "react";

type InputProps = {
  label: string;
  placeholder: string;
  inputStyle?: CSSProperties;
};

function Input({ label, placeholder }: InputProps) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <label>{label}</label>
      <input placeholder={placeholder} style={{ padding: 8 }} />
    </div>
  );
}

export default Input;

Button.tsx

type ButtonProps = {
  textoBtn: string;
};

function Button(props: ButtonProps) {
  return <button type="submit">{props.textoBtn}</button>;
}

export default Button;

Textarea

type TextareaProps = {
  label: string;
  placeholder: string;
  ehExpandivel: boolean;
};

function Textarea({ label, placeholder, ehExpandivel }: TextareaProps) {
  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <label>{label}</label>
      <textarea
        placeholder={placeholder}
        style={{ resize: ehExpandivel ? "both" : "none" }}
        rows={8}
      />
    </div>
  );
}

export default Textarea;

App.tsx

import Box from "./components/Box";
import Button from "./components/Button";
import Divider from "./components/Divider";
import Input from "./components/Input";
import Steps from "./components/Steps";
import Textarea from "./components/Textarea";

function App() {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: "100vh",
      }}
    >
      <Box>
        <Steps
          steps={[
            { nome: "Contato", ordem: 1 },
            { nome: "Empresa", ordem: 2 },
            { nome: "Projeto", ordem: 3 },
          ]}
        />
        <Divider />

        <form
          style={{
            display: "flex",
            flexDirection: "column",
            gap: 24,
            marginTop: 24,
          }}
        >
          {/* <Input label="Nome" placeholder="Digite seu nome" />
          <Input label="Telefone" placeholder="Digite seu telefone" />
          <Input label="Email" placeholder="Email" /> */}

          <Input
            label="Nome da Empresa"
            placeholder="Informe o nome da empresa"
          />
          <Input
            label="Nº de Funcionários"
            placeholder="Informe o número de funcionários"
          />

          <Textarea
            label="Sobre o negócio"
            placeholder="Fale um pouco sobre o negócio"
            ehExpandivel={false}
          />

          <div
            style={{
              display: "flex",
              // justifyContent: "space-between",
              width: "100%",
            }}
          >
            {/* <Button textoBtn={"Voltar"} /> */}
            <div style={{ alignSelf: "flex-end" }}>
              <Button textoBtn={"Continuar"} />
            </div>
          </div>
        </form>
      </Box>
    </div>
  );
}

export default App;