41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import type React from "react"
|
|
|
|
interface StatCardProps {
|
|
title: string
|
|
subtitle: string
|
|
icon: React.ComponentType<{ size?: number; className?: string; color?: string }>
|
|
iconColor: string
|
|
backgroundIconColor: string
|
|
onClick: () => void
|
|
}
|
|
|
|
export const StatCard: React.FC<StatCardProps> = ({
|
|
title,
|
|
subtitle,
|
|
icon: Icon,
|
|
iconColor,
|
|
backgroundIconColor,
|
|
onClick,
|
|
}) => {
|
|
return (
|
|
<div
|
|
onClick={onClick}
|
|
className="glass-morphism rounded-3xl text-left border border-white/50 shadow-lg backdrop-blur-xl p-6 text-white transition-transform transform hover:scale-105 duration-300 overflow-hidden cursor-pointer"
|
|
>
|
|
{/* Фоновая иконка */}
|
|
<Icon size={180} color={backgroundIconColor} className="absolute -right-8 -top-8 -rotate-45" />
|
|
|
|
{/* Основная иконка */}
|
|
<div className="w-20 h-20 bg-white/20 rounded-2xl flex items-center justify-center shadow-xl mb-4 z-20 relative">
|
|
<Icon size={40} color={iconColor} />
|
|
</div>
|
|
|
|
{/* Текст */}
|
|
<div className="text-xl font-bold text-gray-800 mb-1 z-20 relative">{title}</div>
|
|
<div className="text-base text-gray-600 z-20 relative">{subtitle}</div>
|
|
</div>
|
|
)
|
|
}
|