SplitTestWidget

splittestwidget-1779388706068.tsx

'use client';
import { useState, useEffect } from 'react';

export default function SplitTestWidget() {
  const [animating, setAnimating] = useState(false);
  const tests = [
    { name: 'CTA Button Color', varA: { label: 'Blue', value: 3.2, users: 4820 }, varB: { label: 'Gold', value: 5.8, users: 4793 }, winner: 'B' },
    { name: 'Headline Copy', varA: { label: 'Control', value: 8.1, users: 2310 }, varB: { label: 'Variant', value: 11.4, users: 2287 }, winner: 'B' },
  ];
  const [selected, setSelected] = useState(0);
  const t = tests[selected];

  useEffect(() => { setAnimating(true); setTimeout(() => setAnimating(false), 100); }, [selected]);

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: '440px' }}>
      <div style={{ display: 'flex', gap: '8px', marginBottom: '20px' }}>
        {tests.map((test, i) => (
          <button key={i} onClick={() => setSelected(i)} style={{
            background: selected === i ? 'rgba(201,168,76,0.12)' : 'rgba(255,255,255,0.04)',
            border: `1px solid ${selected === i ? 'rgba(201,168,76,0.3)' : 'rgba(255,255,255,0.08)'}`,
            borderRadius: '8px', padding: '6px 12px',
            color: selected === i ? '#C9A84C' : 'rgba(245,245,240,0.5)',
            fontSize: '12px', cursor: 'pointer',
          }}>{test.name}</button>
        ))}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px', marginBottom: '16px' }}>
        {(['A', 'B']).map(v => {
          const variant = v === 'A' ? t.varA : t.varB;
          const isWinner = t.winner === v;
          return (
            <div key={v} style={{
              background: isWinner ? 'rgba(74,222,128,0.05)' : 'rgba(255,255,255,0.03)',
              border: `1px solid ${isWinner ? 'rgba(74,222,128,0.2)' : 'rgba(255,255,255,0.07)'}`,
              borderRadius: '12px', padding: '16px',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px' }}>
                <span style={{ color: 'rgba(245,245,240,0.5)', fontSize: '12px' }}>Variant {v}</span>
                {isWinner && <span style={{ color: '#4ade80', fontSize: '11px', fontWeight: 600 }}>Winner ✓</span>}
              </div>
              <p style={{ color: '#F5F5F0', fontSize: '13px', fontWeight: 600, margin: '0 0 8px 0' }}>{variant.label}</p>
              <p style={{ color: isWinner ? '#4ade80' : '#C9A84C', fontSize: '28px', fontWeight: 900, margin: '0 0 4px 0' }}>
                {animating ? '...' : variant.value}%
              </p>
              <p style={{ color: 'rgba(245,245,240,0.35)', fontSize: '12px', margin: 0 }}>CVR · {variant.users.toLocaleString()} users</p>
            </div>
          );
        })}
      </div>
      <div style={{ background: 'rgba(255,255,255,0.03)', borderRadius: '8px', height: '8px', overflow: 'hidden', display: 'flex' }}>
        <div style={{ width: `${t.varA.value / (t.varA.value + t.varB.value) * 100}%`, background: '#6366f1', transition: 'width 0.8s ease' }} />
        <div style={{ flex: 1, background: '#4ade80' }} />
      </div>
      <p style={{ color: 'rgba(245,245,240,0.35)', fontSize: '11px', margin: '6px 0 0 0', textAlign: 'center' }}>
        Confidence: 96.3% · Statistical significance achieved
      </p>
    </div>
  );
}

Component info

CategoryData Visualization

Frameworkreact

TierFREE

Copies0

About

A/B test results comparison widget

More from Data Visualization

'use client'
import { useState } from 'react'

const SEGMENTS = [
  { label: 'Buttons', value: 12, color: '#C9A84C' },
  { label: 'Forms', value: 10, color: '#6366f1' },
  { label: 'Navigation', value: 8, color: '#22c55e' },
  { label: 'Dashboard', v

DonutChart

Data Visualization

'use client'
import { useEffect, useState } from 'react'

interface Metric {
  label: string
  value: number
  max: number
  color: string
  unit: string
}

const metrics: Metric[] = [
  { label: 'CPU Usage', value: 72, max: 100, color: '#C9A84C', un

RadialProgress

Data Visualization

'use client';
import { useState, useEffect } from 'react';

export default function MetricGauge({ value = 73, max = 100, label = "Performance Score", unit = "%" }) {
  const [animated, setAnimated] = useState(0);

  useEffect(() => {
    const timer

MetricGauge

Data Visualization

'use client';
import { useState, useEffect, useRef } from 'react';

export default function NetworkGraph() {
  const svgRef = useRef(null);
  const [nodes] = useState([
    { id: 0, x: 150, y: 80, label: 'Core API', type: 'primary' },
    { id: 1, x:

NetworkGraph

Data Visualization