Initial Clima Cuida app

src/components/SemaforoCard.tsx

@@ -0,0 +1,72 @@
+import { ShieldCheck } from 'lucide-react';
+import {
+  compactLocationLabel,
+  formatTemperature,
+  formatWind,
+  riskLevelLabel,
+  weatherCodeLabel,
+} from '../lib/formatters';
+import type { CurrentConditions, LocationOption, RiskResult, UseProfile } from '../types';
+
+interface SemaforoCardProps {
+  current: CurrentConditions;
+  location: LocationOption;
+  profile: UseProfile;
+  risk: RiskResult;
+  fetchedAt: string;
+  source: 'api' | 'mock';
+}
+
+export function SemaforoCard({
+  current,
+  location,
+  profile,
+  risk,
+  fetchedAt,
+  source,
+}: SemaforoCardProps) {
+  return (
+    <section className={`semaforo-panel risk-${risk.level}`} aria-labelledby="semaforo-title">
+      <div className="semaforo-topline">
+        <span>{compactLocationLabel([location.name, location.admin1, location.country])}</span>
+        <span>{source === 'mock' ? 'dados de exemplo' : `atualizado ${new Date(fetchedAt).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })}`}</span>
+      </div>
+
+      <div className="semaforo-content">
+        <div className="risk-orb" aria-hidden="true">
+          <span />
+        </div>
+        <div>
+          <p className="eyebrow">Semáforo do Dia</p>
+          <h1 id="semaforo-title">{risk.title}</h1>
+          <p className="risk-label">{riskLevelLabel(risk.level)} · risco {risk.score}/100</p>
+          <p className="risk-summary">{risk.summary}</p>
+        </div>
+      </div>
+
+      <dl className="current-strip" aria-label="Condições atuais">
+        <div>
+          <dt>Agora</dt>
+          <dd>{formatTemperature(current.temperature)}</dd>
+        </div>
+        <div>
+          <dt>Sensação</dt>
+          <dd>{formatTemperature(current.apparentTemperature)}</dd>
+        </div>
+        <div>
+          <dt>Vento</dt>
+          <dd>{formatWind(current.windSpeed)}</dd>
+        </div>
+        <div>
+          <dt>Tempo</dt>
+          <dd>{weatherCodeLabel(current.weatherCode)}</dd>
+        </div>
+      </dl>
+
+      <div className="profile-note">
+        <ShieldCheck aria-hidden="true" size={17} />
+        <span>{profile.label}: {profile.description}</span>
+      </div>
+    </section>
+  );
+}