Stats Scene

1import { AbsoluteFill } from "remotion";
2import { StatCard } from "../components/StatCard";
3
4interface Stat {
5  label: string;
6  value: number;
7  color: string;
8}
9
10interface Props {
11  stats: Stat[];
12}
13
14export const StatsScene: React.FC<Props> = ({ stats }) => (
15  <AbsoluteFill
16    style={{
17      justifyContent: "center",
18      alignItems: "center",
19      gap: 48,
20      flexDirection: "row",
21      fontFamily: "Helvetica, Arial, sans-serif",
22    }}
23  >
24    {stats.map((stat, i) => (
25      <StatCard
26        key={stat.label}
27        label={stat.label}
28        value={stat.value}
29        color={stat.color}
30        delayInFrames={i * 12}
31      />
32    ))}
33  </AbsoluteFill>
34);