🎬 Add CountryStatsScene component for Top Länder (Scene 5)

Implements the Country Statistics scene which visualizes the geographic reach of the Bitcoin community across German-speaking countries with animated country bars, sparkline charts, and user counts. Features: - 3D perspective entrance animation for smooth scene transition - Sequential country reveals with staggered timing (12 frame delay) - CountryBar components with animated progress bars and user counts - SparklineChart components showing growth trends for each country - Total users badge with globe icon - Audio: success-chime per country, slide-in for section entrance - Countries displayed: Germany, Austria, Switzerland, Luxembourg, Bulgaria, and Spain Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-28 07:43:18 +00:00 · 2026-01-24 13:29:49 +01:00
parent 2058140439
commit e9b55b60aa
2 changed files with 670 additions and 0 deletions
--- a/videos/src/scenes/portal/CountryStatsScene.test.tsx
+++ b/videos/src/scenes/portal/CountryStatsScene.test.tsx
@@ -0,0 +1,276 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { CountryStatsScene } from "./CountryStatsScene";
+
+/* eslint-disable @remotion/warn-native-media-tag */
+// Mock Remotion hooks
+vi.mock("remotion", () => ({
+  useCurrentFrame: vi.fn(() => 60),
+  useVideoConfig: vi.fn(() => ({ fps: 30, width: 1920, height: 1080 })),
+  interpolate: vi.fn((value, inputRange, outputRange, options) => {
+    const [inMin, inMax] = inputRange;
+    const [outMin, outMax] = outputRange;
+    let progress = (value - inMin) / (inMax - inMin);
+    if (options?.extrapolateLeft === "clamp") {
+      progress = Math.max(0, progress);
+    }
+    if (options?.extrapolateRight === "clamp") {
+      progress = Math.min(1, progress);
+    }
+    return outMin + progress * (outMax - outMin);
+  }),
+  spring: vi.fn(() => 1),
+  AbsoluteFill: vi.fn(({ children, className, style }) => (
+    <div data-testid="absolute-fill" className={className} style={style}>
+      {children}
+    </div>
+  )),
+  Img: vi.fn(({ src, className, style }) => (
+    <img data-testid="remotion-img" src={src} className={className} style={style} />
+  )),
+  staticFile: vi.fn((path: string) => `/static/${path}`),
+  Sequence: vi.fn(({ children, from, durationInFrames }) => (
+    <div data-testid="sequence" data-from={from} data-duration={durationInFrames}>
+      {children}
+    </div>
+  )),
+  Easing: {
+    out: vi.fn((fn) => fn),
+    cubic: vi.fn((t: number) => t),
+  },
+}));
+
+// Mock @remotion/media
+vi.mock("@remotion/media", () => ({
+  Audio: vi.fn(({ src, volume }) => (
+    <audio data-testid="audio" src={src} data-volume={volume} />
+  )),
+}));
+/* eslint-enable @remotion/warn-native-media-tag */
+
+// Mock CountryBar component
+vi.mock("../../components/CountryBar", () => ({
+  CountryBar: vi.fn(({ countryName, flagEmoji, userCount, maxCount, width, delay, accentColor, showCount }) => (
+    <div
+      data-testid="country-bar"
+      data-country-name={countryName}
+      data-flag-emoji={flagEmoji}
+      data-user-count={userCount}
+      data-max-count={maxCount}
+      data-width={width}
+      data-delay={delay}
+      data-accent-color={accentColor}
+      data-show-count={showCount}
+    >
+      {countryName}: {userCount}
+    </div>
+  )),
+}));
+
+// Mock SparklineChart component
+vi.mock("../../components/SparklineChart", () => ({
+  SparklineChart: vi.fn(({ data, width, height, delay, color, strokeWidth, showFill, fillOpacity, showGlow }) => (
+    <svg
+      data-testid="sparkline-chart"
+      data-points={data.length}
+      data-width={width}
+      data-height={height}
+      data-delay={delay}
+      data-color={color}
+      data-stroke-width={strokeWidth}
+      data-show-fill={showFill}
+      data-fill-opacity={fillOpacity}
+      data-show-glow={showGlow}
+    />
+  )),
+}));
+
+describe("CountryStatsScene", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.resetAllMocks();
+  });
+
+  it("renders without errors", () => {
+    const { container } = render(<CountryStatsScene />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("renders the AbsoluteFill container with correct classes", () => {
+    const { container } = render(<CountryStatsScene />);
+    const absoluteFill = container.querySelector('[data-testid="absolute-fill"]');
+    expect(absoluteFill).toBeInTheDocument();
+    expect(absoluteFill).toHaveClass("bg-zinc-900");
+    expect(absoluteFill).toHaveClass("overflow-hidden");
+  });
+
+  it("renders the wallpaper background image", () => {
+    const { container } = render(<CountryStatsScene />);
+    const images = container.querySelectorAll('[data-testid="remotion-img"]');
+    const wallpaper = Array.from(images).find((img) =>
+      img.getAttribute("src")?.includes("einundzwanzig-wallpaper.png")
+    );
+    expect(wallpaper).toBeInTheDocument();
+  });
+
+  it("renders the section header with correct text", () => {
+    const { container } = render(<CountryStatsScene />);
+    const header = container.querySelector("h1");
+    expect(header).toBeInTheDocument();
+    expect(header).toHaveTextContent("Community nach Ländern");
+    expect(header).toHaveClass("text-5xl");
+    expect(header).toHaveClass("font-bold");
+    expect(header).toHaveClass("text-white");
+  });
+
+  it("renders the subtitle text", () => {
+    const { container } = render(<CountryStatsScene />);
+    expect(container.textContent).toContain("Die deutschsprachige Bitcoin-Community wächst überall");
+  });
+
+  it("renders all six countries", () => {
+    const { container } = render(<CountryStatsScene />);
+    const countryBars = container.querySelectorAll('[data-testid="country-bar"]');
+    expect(countryBars.length).toBe(6);
+  });
+
+  it("renders Germany with correct data", () => {
+    const { container } = render(<CountryStatsScene />);
+    const germanyBar = container.querySelector('[data-country-name="Germany"]');
+    expect(germanyBar).toBeInTheDocument();
+    expect(germanyBar).toHaveAttribute("data-flag-emoji", "🇩🇪");
+    expect(germanyBar).toHaveAttribute("data-user-count", "458");
+  });
+
+  it("renders Austria with correct data", () => {
+    const { container } = render(<CountryStatsScene />);
+    const austriaBar = container.querySelector('[data-country-name="Austria"]');
+    expect(austriaBar).toBeInTheDocument();
+    expect(austriaBar).toHaveAttribute("data-flag-emoji", "🇦🇹");
+    expect(austriaBar).toHaveAttribute("data-user-count", "59");
+  });
+
+  it("renders Switzerland with correct data", () => {
+    const { container } = render(<CountryStatsScene />);
+    const switzerlandBar = container.querySelector('[data-country-name="Switzerland"]');
+    expect(switzerlandBar).toBeInTheDocument();
+    expect(switzerlandBar).toHaveAttribute("data-flag-emoji", "🇨🇭");
+    expect(switzerlandBar).toHaveAttribute("data-user-count", "34");
+  });
+
+  it("renders Luxembourg with correct data", () => {
+    const { container } = render(<CountryStatsScene />);
+    const luxembourgBar = container.querySelector('[data-country-name="Luxembourg"]');
+    expect(luxembourgBar).toBeInTheDocument();
+    expect(luxembourgBar).toHaveAttribute("data-flag-emoji", "🇱🇺");
+    expect(luxembourgBar).toHaveAttribute("data-user-count", "8");
+  });
+
+  it("renders Bulgaria with correct data", () => {
+    const { container } = render(<CountryStatsScene />);
+    const bulgariaBar = container.querySelector('[data-country-name="Bulgaria"]');
+    expect(bulgariaBar).toBeInTheDocument();
+    expect(bulgariaBar).toHaveAttribute("data-flag-emoji", "🇧🇬");
+    expect(bulgariaBar).toHaveAttribute("data-user-count", "7");
+  });
+
+  it("renders Spain with correct data", () => {
+    const { container } = render(<CountryStatsScene />);
+    const spainBar = container.querySelector('[data-country-name="Spain"]');
+    expect(spainBar).toBeInTheDocument();
+    expect(spainBar).toHaveAttribute("data-flag-emoji", "🇪🇸");
+    expect(spainBar).toHaveAttribute("data-user-count", "3");
+  });
+
+  it("renders sparkline charts for all countries", () => {
+    const { container } = render(<CountryStatsScene />);
+    const sparklineCharts = container.querySelectorAll('[data-testid="sparkline-chart"]');
+    expect(sparklineCharts.length).toBe(6);
+  });
+
+  it("renders sparkline charts with correct styling", () => {
+    const { container } = render(<CountryStatsScene />);
+    const sparklines = container.querySelectorAll('[data-testid="sparkline-chart"]');
+    const firstSparkline = sparklines[0];
+    expect(firstSparkline).toHaveAttribute("data-color", "#f7931a");
+    expect(firstSparkline).toHaveAttribute("data-stroke-width", "2");
+    expect(firstSparkline).toHaveAttribute("data-show-fill", "true");
+    expect(firstSparkline).toHaveAttribute("data-show-glow", "true");
+  });
+
+  it('renders the "Nutzer weltweit" total badge', () => {
+    const { container } = render(<CountryStatsScene />);
+    expect(container.textContent).toContain("Nutzer weltweit");
+  });
+
+  it("renders audio sequences for sound effects", () => {
+    const { container } = render(<CountryStatsScene />);
+    const sequences = container.querySelectorAll('[data-testid="sequence"]');
+    // 6 country chimes + 1 slide-in = 7 sequences
+    expect(sequences.length).toBe(7);
+  });
+
+  it("includes success-chime audio for country entrances", () => {
+    const { container } = render(<CountryStatsScene />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const successChimes = Array.from(audioElements).filter((audio) =>
+      audio.getAttribute("src")?.includes("success-chime.mp3")
+    );
+    expect(successChimes.length).toBe(6);
+  });
+
+  it("includes slide-in audio for section entrance", () => {
+    const { container } = render(<CountryStatsScene />);
+    const audioElements = container.querySelectorAll('[data-testid="audio"]');
+    const slideInAudio = Array.from(audioElements).find((audio) =>
+      audio.getAttribute("src")?.includes("slide-in.mp3")
+    );
+    expect(slideInAudio).toBeInTheDocument();
+  });
+
+  it("renders vignette overlay with pointer-events-none", () => {
+    const { container } = render(<CountryStatsScene />);
+    const vignettes = container.querySelectorAll(".pointer-events-none");
+    expect(vignettes.length).toBeGreaterThan(0);
+  });
+
+  it("applies 3D perspective transform styles", () => {
+    const { container } = render(<CountryStatsScene />);
+    const elements = container.querySelectorAll('[style*="perspective"]');
+    expect(elements.length).toBeGreaterThan(0);
+  });
+
+  it("renders the globe icon SVG", () => {
+    const { container } = render(<CountryStatsScene />);
+    const svgElements = container.querySelectorAll("svg");
+    // Should have globe icon
+    expect(svgElements.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it("renders CountryBar with maxCount set to Germany's count (highest)", () => {
+    const { container } = render(<CountryStatsScene />);
+    const countryBars = container.querySelectorAll('[data-testid="country-bar"]');
+    // All bars should have maxCount = 458 (Germany's count)
+    countryBars.forEach((bar) => {
+      expect(bar).toHaveAttribute("data-max-count", "458");
+    });
+  });
+
+  it("renders CountryBar with Bitcoin orange accent color", () => {
+    const { container } = render(<CountryStatsScene />);
+    const countryBars = container.querySelectorAll('[data-testid="country-bar"]');
+    countryBars.forEach((bar) => {
+      expect(bar).toHaveAttribute("data-accent-color", "#f7931a");
+    });
+  });
+
+  it("renders countries in a 2-column grid layout", () => {
+    const { container } = render(<CountryStatsScene />);
+    const grid = container.querySelector(".grid-cols-2");
+    expect(grid).toBeInTheDocument();
+  });
+});
--- a/videos/src/scenes/portal/CountryStatsScene.tsx
+++ b/videos/src/scenes/portal/CountryStatsScene.tsx
@@ -0,0 +1,394 @@
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Img,
+  staticFile,
+  Sequence,
+} from "remotion";
+import { Audio } from "@remotion/media";
+import { CountryBar } from "../../components/CountryBar";
+import { SparklineChart } from "../../components/SparklineChart";
+
+// Spring configurations
+const SNAPPY = { damping: 15, stiffness: 80 };
+const BOUNCY = { damping: 12 };
+
+// Stagger delay between country items (in frames)
+const COUNTRY_STAGGER_DELAY = 12;
+
+// Country statistics data
+const COUNTRY_DATA = [
+  {
+    name: "Germany",
+    flagEmoji: "🇩🇪",
+    userCount: 458,
+    sparklineData: [80, 120, 180, 220, 280, 320, 350, 390, 420, 445, 455, 458],
+  },
+  {
+    name: "Austria",
+    flagEmoji: "🇦🇹",
+    userCount: 59,
+    sparklineData: [10, 15, 22, 28, 35, 40, 45, 50, 54, 57, 58, 59],
+  },
+  {
+    name: "Switzerland",
+    flagEmoji: "🇨🇭",
+    userCount: 34,
+    sparklineData: [5, 8, 12, 15, 18, 22, 25, 28, 30, 32, 33, 34],
+  },
+  {
+    name: "Luxembourg",
+    flagEmoji: "🇱🇺",
+    userCount: 8,
+    sparklineData: [1, 2, 2, 3, 4, 5, 5, 6, 7, 7, 8, 8],
+  },
+  {
+    name: "Bulgaria",
+    flagEmoji: "🇧🇬",
+    userCount: 7,
+    sparklineData: [1, 1, 2, 2, 3, 4, 4, 5, 5, 6, 7, 7],
+  },
+  {
+    name: "Spain",
+    flagEmoji: "🇪🇸",
+    userCount: 3,
+    sparklineData: [0, 0, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3],
+  },
+];
+
+// Maximum count for calculating relative bar widths
+const MAX_USER_COUNT = Math.max(...COUNTRY_DATA.map((c) => c.userCount));
+
+/**
+ * CountryStatsScene - Scene 5: Top Länder (12 seconds / 360 frames @ 30fps)
+ *
+ * Animation sequence:
+ * 1. Smooth transition from previous scene (3D perspective entrance)
+ * 2. Section header animates in with fade + translateY
+ * 3. Countries appear sequentially with staggered entrance:
+ *    - CountryBar component slides in from left
+ *    - SparklineChart draws in next to each country
+ *    - User counts animate up
+ * 4. Audio: success-chime.mp3 plays per country entrance
+ */
+export const CountryStatsScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // 3D Perspective entrance animation (0-60 frames)
+  const perspectiveSpring = spring({
+    frame,
+    fps,
+    config: { damping: 20, stiffness: 60 },
+  });
+
+  const perspectiveX = interpolate(perspectiveSpring, [0, 1], [20, 0]);
+  const perspectiveScale = interpolate(perspectiveSpring, [0, 1], [0.9, 1]);
+  const perspectiveOpacity = interpolate(perspectiveSpring, [0, 1], [0, 1]);
+
+  // Header entrance animation (delayed)
+  const headerDelay = Math.floor(0.3 * fps);
+  const headerSpring = spring({
+    frame: frame - headerDelay,
+    fps,
+    config: SNAPPY,
+  });
+  const headerOpacity = interpolate(headerSpring, [0, 1], [0, 1]);
+  const headerY = interpolate(headerSpring, [0, 1], [-40, 0]);
+
+  // Subtitle animation (slightly more delayed)
+  const subtitleDelay = Math.floor(0.5 * fps);
+  const subtitleSpring = spring({
+    frame: frame - subtitleDelay,
+    fps,
+    config: SNAPPY,
+  });
+  const subtitleOpacity = interpolate(subtitleSpring, [0, 1], [0, 1]);
+  const subtitleY = interpolate(subtitleSpring, [0, 1], [20, 0]);
+
+  // Base delay for country items
+  const countryBaseDelay = Math.floor(1 * fps);
+
+  // Subtle glow pulse
+  const glowIntensity = interpolate(
+    Math.sin(frame * 0.05),
+    [-1, 1],
+    [0.3, 0.6]
+  );
+
+  // Total users count animation
+  const totalUsers = COUNTRY_DATA.reduce((sum, c) => sum + c.userCount, 0);
+  const totalDelay = Math.floor(0.8 * fps);
+  const totalSpring = spring({
+    frame: frame - totalDelay,
+    fps,
+    config: { damping: 18, stiffness: 70 },
+    durationInFrames: 60,
+  });
+  const displayTotal = Math.round(totalSpring * totalUsers);
+
+  return (
+    <AbsoluteFill className="bg-zinc-900 overflow-hidden">
+      {/* Audio: success-chime for each country entrance */}
+      {COUNTRY_DATA.map((_, index) => (
+        <Sequence
+          key={`audio-${index}`}
+          from={countryBaseDelay + index * COUNTRY_STAGGER_DELAY}
+          durationInFrames={Math.floor(0.5 * fps)}
+        >
+          <Audio src={staticFile("sfx/success-chime.mp3")} volume={0.3} />
+        </Sequence>
+      ))}
+
+      {/* Audio: slide-in for section entrance */}
+      <Sequence from={headerDelay} durationInFrames={Math.floor(1 * fps)}>
+        <Audio src={staticFile("sfx/slide-in.mp3")} volume={0.5} />
+      </Sequence>
+
+      {/* Wallpaper Background */}
+      <div className="absolute inset-0">
+        <Img
+          src={staticFile("einundzwanzig-wallpaper.png")}
+          className="absolute inset-0 w-full h-full object-cover"
+          style={{ opacity: 0.1 }}
+        />
+      </div>
+
+      {/* Dark gradient overlay */}
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            "radial-gradient(circle at 40% 50%, transparent 0%, rgba(24, 24, 27, 0.5) 40%, rgba(24, 24, 27, 0.95) 100%)",
+        }}
+      />
+
+      {/* 3D Perspective Container */}
+      <div
+        className="absolute inset-0"
+        style={{
+          transform: `perspective(1200px) rotateX(${perspectiveX}deg) scale(${perspectiveScale})`,
+          transformOrigin: "center center",
+          opacity: perspectiveOpacity,
+        }}
+      >
+        {/* Main Content */}
+        <div className="absolute inset-0 flex flex-col items-center justify-center px-20">
+          {/* Section Header */}
+          <div
+            className="text-center mb-8"
+            style={{
+              opacity: headerOpacity,
+              transform: `translateY(${headerY}px)`,
+            }}
+          >
+            <h1 className="text-5xl font-bold text-white mb-3">
+              Community nach Ländern
+            </h1>
+            <p
+              className="text-xl text-zinc-400"
+              style={{
+                opacity: subtitleOpacity,
+                transform: `translateY(${subtitleY}px)`,
+              }}
+            >
+              Die deutschsprachige Bitcoin-Community wächst überall
+            </p>
+          </div>
+
+          {/* Total Users Badge */}
+          <TotalUsersBadge
+            totalUsers={displayTotal}
+            delay={totalDelay}
+            glowIntensity={glowIntensity}
+          />
+
+          {/* Countries Grid */}
+          <div className="w-full max-w-5xl mt-8">
+            <div className="grid grid-cols-2 gap-6">
+              {COUNTRY_DATA.map((country, index) => (
+                <CountryRow
+                  key={country.name}
+                  country={country}
+                  maxCount={MAX_USER_COUNT}
+                  delay={countryBaseDelay + index * COUNTRY_STAGGER_DELAY}
+                  glowIntensity={glowIntensity}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Vignette overlay */}
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          boxShadow: "inset 0 0 200px 50px rgba(0, 0, 0, 0.6)",
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+/**
+ * Total users badge component
+ */
+type TotalUsersBadgeProps = {
+  totalUsers: number;
+  delay: number;
+  glowIntensity: number;
+};
+
+const TotalUsersBadge: React.FC<TotalUsersBadgeProps> = ({
+  totalUsers,
+  delay,
+  glowIntensity,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const adjustedFrame = Math.max(0, frame - delay);
+
+  const badgeSpring = spring({
+    frame: adjustedFrame,
+    fps,
+    config: BOUNCY,
+  });
+
+  const badgeScale = interpolate(badgeSpring, [0, 1], [0.8, 1]);
+  const badgeOpacity = interpolate(badgeSpring, [0, 1], [0, 1]);
+
+  return (
+    <div
+      className="flex items-center gap-4 px-8 py-4 rounded-2xl"
+      style={{
+        backgroundColor: "rgba(247, 147, 26, 0.15)",
+        border: "1px solid rgba(247, 147, 26, 0.3)",
+        boxShadow: `0 0 ${30 * glowIntensity}px rgba(247, 147, 26, 0.2)`,
+        transform: `scale(${badgeScale})`,
+        opacity: badgeOpacity,
+      }}
+    >
+      <GlobeIcon />
+      <div className="flex items-baseline gap-3">
+        <span
+          className="text-4xl font-bold tabular-nums"
+          style={{
+            color: "#f7931a",
+            fontFamily: "Inconsolata, monospace",
+            textShadow: `0 0 ${15 * glowIntensity}px rgba(247, 147, 26, 0.5)`,
+          }}
+        >
+          {totalUsers}
+        </span>
+        <span className="text-xl text-zinc-300">Nutzer weltweit</span>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Country row with bar and sparkline
+ */
+type CountryRowProps = {
+  country: {
+    name: string;
+    flagEmoji: string;
+    userCount: number;
+    sparklineData: number[];
+  };
+  maxCount: number;
+  delay: number;
+  glowIntensity: number;
+};
+
+const CountryRow: React.FC<CountryRowProps> = ({
+  country,
+  maxCount,
+  delay,
+  glowIntensity,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const adjustedFrame = Math.max(0, frame - delay);
+
+  const rowSpring = spring({
+    frame: adjustedFrame,
+    fps,
+    config: SNAPPY,
+  });
+
+  const rowOpacity = interpolate(rowSpring, [0, 1], [0, 1]);
+  const rowX = interpolate(rowSpring, [0, 1], [-50, 0]);
+
+  // Sparkline delay (appears slightly after the bar)
+  const sparklineDelay = delay + 20;
+
+  return (
+    <div
+      className="flex items-center gap-4"
+      style={{
+        opacity: rowOpacity,
+        transform: `translateX(${rowX}px)`,
+      }}
+    >
+      {/* Country Bar */}
+      <div className="flex-1">
+        <CountryBar
+          countryName={country.name}
+          flagEmoji={country.flagEmoji}
+          userCount={country.userCount}
+          maxCount={maxCount}
+          width={380}
+          delay={delay}
+          accentColor="#f7931a"
+          showCount={true}
+        />
+      </div>
+
+      {/* Sparkline Chart */}
+      <div
+        className="rounded-lg bg-zinc-800/50 p-3"
+        style={{
+          boxShadow: `0 0 ${15 * glowIntensity}px rgba(247, 147, 26, 0.1)`,
+        }}
+      >
+        <SparklineChart
+          data={country.sparklineData}
+          width={120}
+          height={40}
+          delay={sparklineDelay}
+          color="#f7931a"
+          strokeWidth={2}
+          showFill={true}
+          fillOpacity={0.2}
+          showGlow={true}
+        />
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Globe icon SVG
+ */
+const GlobeIcon: React.FC = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="#f7931a"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    style={{ width: 32, height: 32 }}
+  >
+    <circle cx="12" cy="12" r="10" />
+    <path d="M2 12h20" />
+    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+  </svg>
+);