Passo 19

Instruções

O componente PlayerCard funciona, mas usa valores fixos. Para torná-lo flexível, você precisa descrever a forma dos dados de um jogador usando uma interface TypeScript. Antes da função PlayerCard, crie uma interface chamada PlayerData com um name do tipo string, overallRating do tipo number, position do tipo string e club do tipo string.

O que fazer:

Testes:

Você deve criar uma interface chamada `PlayerData`.
Sua interface `PlayerData` deve ter um `name` do tipo `string`.
Sua interface `PlayerData` deve ter um `overallRating` do tipo `number`.
Sua interface `PlayerData` deve ter um `position` do tipo `string`.
Sua interface `playerData` deve ter um `club` do tipo `string`.

<!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