feat(markets): add sparkline preview

app/(marketing)/_components/markets-widget.tsx

@@ -7,6 +7,7 @@ import { Card } from "@/components/ui/card";
 import { sampleMarkets, winNotifications, type Market } from "@/content/markets.sample";
 import { useState, useEffect } from "react";
 import { useFollowsStore } from "@/app/state/follows";
+import Sparkline from "@/components/Sparkline";
 
 interface MarketsWidgetProps {
   className?: string;
@@ -148,6 +149,12 @@ function MarketCard({ market, IconComponent, colors, index, reducedMotion }: Mar
           <div>
             <h3 className="font-semibold text-white">{market.title}</h3>
             <p className="text-sm text-white/70">{market.description}</p>
+            {/* Sparkline preview */}
+            <Sparkline
+              data={market.sparklineData}
+              className="mt-2 text-white/60"
+              data-testid={`sparkline-${market.id}`}
+            />
 
             {/* Following indicator — visible only for followed markets */}
             {isFollowing && (

app/components/Sparkline.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+interface SparklineProps {
+  data: number[];
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * Sparkline – a minimalist line chart rendered as an SVG.
+ * It receives an array of numeric values and draws a thin line that fills the container width.
+ * The component is theme‑aware – it uses stroke-current so the parent can set the colour via Tailwind utilities.
+ */
+export default function Sparkline({ data, className = '', 'data-testid': testId }: SparklineProps) {
+  if (!data || data.length === 0) {
+    return null;
+  }
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const points = data
+    .map((value, i) => {
+      const x = (i / (data.length - 1)) * 100;
+      const y = 100 - ((value - min) / range) * 100;
+      return ${x},;
+    })
+    .join(' ');
+  return (
+    <svg
+      viewBox= 0 0 100 100
+      preserveAspectRatio=none
+      className={h-4 w-full }
+      data-testid={testId}
+    >
+      <polyline
+        fill=none
+        stroke=currentColor
+        strokeWidth=8
+        points={points}
+        strokeLinecap=round
+        strokeLinejoin=round
+      />
+    </svg>
+  );
+}

app/components/__tests__/Sparkline.test.tsx

@@ -0,0 +1,13 @@
+import { render } from '@testing-library/react';
+import Sparkline from '@/components/Sparkline';
+
+test('renders sparkline with data', () => {
+  const data = [10, 20, 15, 30, 25];
+  const { getByTestId } = render(<Sparkline data={data} data-testid='sparkline-test' />);
+  const svg = getByTestId('sparkline-test');
+  expect(svg).toBeInTheDocument();
+  // polyline should have points attribute with commas
+  const polyline = svg.querySelector('polyline');
+  expect(polyline).not.toBeNull();
+  expect(polyline?.getAttribute('points')).toMatch(/,/);
+});