39 lines
1.6 KiB
TypeScript
39 lines
1.6 KiB
TypeScript
import type React from "react"
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { ArrowDown, ArrowUp } from "lucide-react"
|
||
|
||
interface StatCardProps {
|
||
title: string
|
||
value: string
|
||
change: string
|
||
icon: React.ReactNode
|
||
trend: "up" | "down" | "neutral"
|
||
}
|
||
|
||
export function StatCard({ title, value, change, icon, trend }: StatCardProps) {
|
||
return (
|
||
<Card className="border-none shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden relative group">
|
||
{/* 修改这里：将overlay的z-index设置为-1，确保它不会覆盖文字内容 */}
|
||
<div className="absolute inset-0 bg-gradient-to-r from-gray-100 to-gray-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 -z-10"></div>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
|
||
<CardTitle className="text-sm font-medium">{title}</CardTitle>
|
||
<div className="p-1.5 rounded-full bg-gray-100 group-hover:scale-110 transition-transform duration-300">
|
||
{icon}
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent className="relative z-10">
|
||
<div className="text-2xl font-bold">{value}</div>
|
||
<div className="flex items-center mt-1">
|
||
{trend === "up" && <ArrowUp className="h-4 w-4 text-green-500 mr-1" />}
|
||
{trend === "down" && <ArrowDown className="h-4 w-4 text-red-500 mr-1" />}
|
||
<p
|
||
className={`text-xs ${trend === "up" ? "text-green-500" : trend === "down" ? "text-red-500" : "text-muted-foreground"}`}
|
||
>
|
||
{change}
|
||
</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|