Report card v2

import { Badge, Card } from '@hey-mike/tungsten';

export default function ReportCardV2Recipe() {
  return (
    <div className="border-stroke bg-surface rounded-[20px] border p-6">
      <div className="grid gap-6 lg:grid-cols-[380px_1fr]">
        <Card padding="md" className="flex aspect-square items-center justify-center">
          <div className="space-y-3 text-center">
            <svg viewBox="0 0 200 200" className="mx-auto h-40 w-40" aria-hidden="true">
              <circle
                cx="100"
                cy="100"
                r="92"
                fill="none"
                stroke="var(--color-border)"
                strokeWidth="1"
              />
              <circle
                cx="100"
                cy="100"
                r="60"
                fill="none"
                stroke="var(--color-border)"
                strokeWidth="1"
              />
              <circle
                cx="100"
                cy="100"
                r="28"
                fill="none"
                stroke="var(--color-border)"
                strokeWidth="1"
              />
              <polygon
                points="100,30 158,70 152,140 100,170 48,140 42,70"
                fill="var(--color-brand-overlay-15)"
                stroke="var(--color-brand)"
                strokeWidth="1.5"
              />
            </svg>
            <p className="tracking-label text-ink-3 text-2xs font-mono font-bold uppercase">
              Radar · 8 axes · sticky hero
            </p>
          </div>
        </Card>
        <ul>
          {[
            {
              label: 'Requirements clarity',
              score: 4.0,
              verdict: 'Pass',
              tone: 'success' as const,
            },
            {
              label: 'Scale estimation',
              score: 2.2,
              verdict: 'Below',
              tone: 'warning' as const,
            },
            { label: 'API design', score: 3.1, verdict: 'Close', tone: 'info' as const },
            {
              label: 'High-level design',
              score: 4.0,
              verdict: 'Pass',
              tone: 'success' as const,
            },
            { label: 'Bottlenecks', score: 2.8, verdict: 'Close', tone: 'info' as const },
          ].map(({ label, score, verdict, tone }) => (
            <li
              key={label}
              className="border-stroke grid grid-cols-[180px_1fr_64px_36px] items-center gap-3 border-b py-3 last:border-0"
            >
              <span className="text-ink-1 text-sm font-medium">{label}</span>
              <svg
                viewBox="0 0 100 20"
                className="h-5 w-full"
                aria-hidden="true"
                preserveAspectRatio="none"
              >
                <path
                  d="M0 15 L20 12 L40 14 L60 8 L80 10 L100 4"
                  stroke={
                    tone === 'success'
                      ? 'var(--color-success)'
                      : tone === 'warning'
                        ? 'var(--color-warning)'
                        : 'var(--color-info)'
                  }
                  strokeWidth="1.5"
                  fill="none"
                />
              </svg>
              <span className="text-ink-1 text-right font-mono text-base font-semibold tabular-nums">
                {score.toFixed(1)}
              </span>
              <Badge variant={tone} emphasis="subtle">
                {verdict}
              </Badge>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}