"use client"; import React from "react"; import { motion, Variants } from "framer-motion"; import { ArrowUpRight, ArrowDownRight, Users, DollarSign, Activity } from "lucide-react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface StatItem { id: string; label: string; value: string; trend?: { value: string; isPositive: boolean; }; icon?: React.ElementType; } export interface HorizontalStatsBarProps { stats: StatItem[]; className?: string; } const containerVariants: Variants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, }; const itemVariants: Variants = { hidden: { opacity: 0, y: 10 }, visible: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 100, damping: 15, }, }, }; export function HorizontalStatsBar({ stats, className, }: HorizontalStatsBarProps) { return (

{stats.map((stat) => (

{stat.label}

{stat.value} {stat.trend && ( {stat.trend.isPositive ? ( ) : ( )} {stat.trend.value} )}

{stat.icon && (

)}

))}

); } export default function HorizontalStatsBarDemo() { const dummyStats: StatItem[] = [ { id: "revenue", label: "Total Revenue", value: "$128.5k", trend: { value: "14.5%", isPositive: true, }, icon: DollarSign, }, { id: "users", label: "Active Users", value: "12,450", trend: { value: "5.2%", isPositive: true, }, icon: Users, }, { id: "bounce", label: "Bounce Rate", value: "24.3%", trend: { value: "2.1%", isPositive: false, }, icon: Activity, }, ]; return (

Overview

Your current metrics and performance indicators.

); }