48 lines
2.3 KiB
TypeScript
48 lines
2.3 KiB
TypeScript
"use client"
|
||
//Когда нужен "use client"?
|
||
// Если компонент использует React хуки (useState, useEffect, useContext и т.п.).
|
||
// Если он взаимодействует с браузерными API или DOM.
|
||
// Если он содержит обработчики событий или управляет состоянием.
|
||
|
||
import type React from "react"
|
||
|
||
interface StatCardProps {
|
||
title: string
|
||
subtitle: string
|
||
icon: React.ComponentType<{ size?: number; fill?: string; className?: string; style?: React.CSSProperties }>
|
||
fill: string
|
||
onClick: () => void
|
||
}
|
||
|
||
//Это тип компонента React, который принимает определенные пропсы.
|
||
// React.ComponentType<...> — это тип компонента, который можно использовать как JSX <Icon />.
|
||
// Внутри <...> указаны пропсы, которые этот компонент принимает.
|
||
|
||
// Какие пропсы у иконки?
|
||
|
||
// size?: number — необязательный размер иконки (например, в пикселях).
|
||
// fill?: string — необязательный цвет заливки.
|
||
// className?: string — необязственный CSS-класс.
|
||
// style?: React.CSSProperties — необязательные inline-стили.
|
||
|
||
export const StatCardHome: React.FC<StatCardProps> = ({ title, subtitle, icon: Icon, fill, 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} fill={"#E6E5E5"} 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} fill={fill} />
|
||
</div>
|
||
|
||
{/* Текст */}
|
||
<div className="text-base sm:text-xl font-bold text-gray-800 sm:mb-1 z-20 relative">{title}</div>
|
||
<div className="text-sm sm:text-base text-gray-600 z-20 relative">{subtitle}</div>
|
||
</div>
|
||
)
|
||
}
|