react-vite-themes
Version:
A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.
37 lines (36 loc) • 2.09 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { cn } from '../../../utils';
import { Icon } from '../../atoms/Icon';
export const StatCard = ({ title, value, subtitle, icon, trend, trendValue, variant = '', style = 'elevated', size = 'md', isHoverable = false, className, ...props }) => {
const cardClasses = cn('stat-card', `stat-card--${variant}`, `stat-card--style-${style}`, `stat-card--size-${size}`, isHoverable && 'stat-card--hoverable', className);
const getTrendIcon = () => {
if (!trend)
return null;
switch (trend) {
case 'up':
return '↗';
case 'down':
return '↘';
case 'neutral':
return '→';
default:
return null;
}
};
const getTrendClass = () => {
if (!trend)
return '';
switch (trend) {
case 'up':
return 'stat-card__trend--positive';
case 'down':
return 'stat-card__trend--negative';
case 'neutral':
return 'stat-card__trend--neutral';
default:
return '';
}
};
return (_jsx("div", { className: cardClasses, ...props, children: _jsxs("div", { className: "stat-card__content", children: [icon && (_jsx("div", { className: "stat-card__icon", children: typeof icon === 'string' ? (_jsx(Icon, { name: icon, size: "lg" })) : (icon) })), _jsxs("div", { className: "stat-card__main", children: [_jsx("div", { className: "stat-card__value", children: value }), title && (_jsx("div", { className: "stat-card__title", children: title })), subtitle && (_jsx("div", { className: "stat-card__subtitle", children: subtitle }))] }), trend && (_jsxs("div", { className: cn('stat-card__trend', getTrendClass()), children: [_jsx("span", { className: "stat-card__trend-icon", children: getTrendIcon() }), trendValue && (_jsx("span", { className: "stat-card__trend-value", children: trendValue }))] }))] }) }));
};