63 lines
2.3 KiB
TypeScript
63 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-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>
|
||
)
|
||
} |