Passo 49

Instruções

Agora você vai lidar com a seleção da posição do jogador. Você precisa refatorar a entrada para um select, depois mapear um array de posições de futebol válidas como valor das opções do select. Para começar, crie um array POSITIONS com os valores string GK, CB, LB, RB, CDM, CM, CAM, LW, RW, ST e CF. Adicione as const logo após os colchetes de fechamento para que o Typescript restrinja o tipo de um string[] geral para uma tupla readonly desses valores literais exatos. Isso significa que o TypeScript sabe exatamente quais strings são válidas, em vez de apenas saber que é algum array de strings.

O que fazer:

Testes:

Você deve declarar uma constante `POSITIONS`.
Seu array `POSITIONS` deve conter todas as strings de posições de futebol necessárias use `as const` para restringir seu tipo para literais de string readonly.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Football Player Card Builder</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tektur:wght@400..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.5/babel.min.js"></script>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      src="index.tsx"
    ></script>
  </head>
  <body>
    <div id="root"></div>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      data-presets="react"
      data-type="module"
    >
      import { FootballPlayerCard } from './index.tsx';
      ReactDOM.createRoot(document.getElementById('root')).render(<FootballPlayerCard />);
    </script>
  </body>
</html>

html,
body {
  min-height: 100%;
  font-family: "Lato", system-ui, sans-serif;
  background-color: #0a0a23;
}

.page {
  min-height: 100vh;
  background-color: #0a0a23;
}

.header {
  background-color: #1b1b32;
  border-bottom: 3px solid #f1be32;
}

.header-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 24px;
}

.header-title {
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #f1be32;
}

.header-subtitle {
  font-size: 12px;
  color: #99c9ff;
  margin-top: 2px;
}

.main {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px;
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 1fr 1fr;
  }
}

.form-panel {
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-section-title {
  font-size: 17px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1f2937;
  margin-bottom: 8px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group select {
  padding: 7px 12px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-panel > div {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}

.input {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.25);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.preview-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

@media (min-width: 1024px) {
  .preview-panel {
    position: sticky;
    top: 32px;
  }
}

.tier-elite { 
  --accent: #dbb8ff; 
}

.tier-gold   { 
  --accent: #f1be32; 
}

.tier-silver { 
  --accent: #99c9ff; 
}

.tier-bronze { 
  --accent: #acd157; 
}

.preview-box {
  width: 100%;
  background-color: #1b1b32;
  border-radius: 12px;
  border: 2px solid var(--accent);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.preview-label {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #dfdfe2;
}

.preview-hint {
  font-size: 11px;
  color: #99c9ff;
  margin-top: 2px;
}

.card-wrapper {
  clip-path: polygon(8% 0%, 92% 0%, 100% 5%, 100% 91%, 98% 96%, 93% 99%, 87% 100%, 13% 100%, 7% 99%, 2% 96%, 0% 91%, 0% 5%);
  background-color: var(--accent);
  padding: 3px;
  display: inline-block;
}

.card {
  clip-path: polygon(8% 0%, 92% 0%, 100% 5%, 100% 91%, 98% 96%, 93% 99%, 87% 100%, 13% 100%, 7% 99%, 2% 96%, 0% 91%, 0% 5%);
  width: 260px;
  background-color: #0a0a23;
  font-family: "Lato", sans-serif;
  overflow: hidden;
}

.card-header {
  background-color: #1b1b32;
  padding: 16px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-rating {
  font-size: 48px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
}

.card-position {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-top: 2px;
}

.card-header-right {
  text-align: right;
}

.card-tier-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #0a0a23;
  background-color: var(--accent);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.card-club {
  font-size: 13px;
  font-weight: 700;
  color: #dfdfe2;
}

.card-image-wrap {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background-color: #1b1b32;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.card-name-strip {
  background-color: var(--accent);
  padding: 8px 20px;
  text-align: center;
}

.card-name {
  font-size: 18px;
  font-weight: 900;
  color: #0a0a23;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.card-stats {
  background-color: #dfdfe2;
  padding: 12px 20px 20px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 12px;
}

.stat-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-col:last-child {
  padding-left: 28px;
}

.stat-divider {
  background-color: #d0d0d5;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-value {
  font-size: 15px;
  font-weight: 900;
  color: #0a0a23;
  min-width: 24px;
  text-align: right;
}

.stat-label {
  font-size: 10px;
  font-weight: 700;
  color: #1b1b32;
  letter-spacing: 0.08em;
}

Preview