"use client"; import { useEffect, useRef, useState } from "react"; import { motion, useInView, animate } from "framer-motion"; import { ShieldCheck, FlaskConical, Truck, Users } from "lucide-react"; import { cn } from "@/lib/utils"; interface Stat { icon: React.ComponentType<{ className?: string }>; value: number; suffix?: string; label: string; decimals?: number; } const DEFAULT_STATS: Stat[] = [ { icon: FlaskConical, value: 99.4, suffix: "%", decimals: 1, label: "Purity, verified" }, { icon: ShieldCheck, value: 100, suffix: "%", label: "Third-party tested" }, { icon: Truck, value: 24, suffix: "hr", label: "Average dispatch" }, { icon: Users, value: 12000, suffix: "+", label: "Researchers served" }, ]; function StatItem({ stat, index }: { stat: Stat; index: number }) { const ref = useRef(null); const inView = useInView(ref, { once: true, margin: "-10%" }); const [display, setDisplay] = useState(0); useEffect(() => { if (!inView) return; const controls = animate(0, stat.value, { duration: 1.2, delay: index * 0.1, ease: "easeOut", onUpdate: (v) => setDisplay(v), }); return () => controls.stop(); }, [inView, stat.value, index]); const Icon = stat.icon; return (

{display.toFixed(stat.decimals ?? 0)} {stat.suffix} {stat.label}

); } export function TrustStatsBar({ stats = DEFAULT_STATS, className }: { stats?: Stat[]; className?: string }) { return (

{stats.map((s, i) => ( ))}

); } export default function Demo() { return (

); }

Trust Stats Bar