diff options
| author | 2025-01-26 22:34:40 +0800 | |
|---|---|---|
| committer | 2025-01-26 22:34:40 +0800 | |
| commit | cd8aab3a511091ce378ff7ebcaa42bf979f00882 (patch) | |
| tree | c387ca55aa6977499b03346ab46e63a0f7c09b36 /src/app/components/StatsCard.tsx | |
| parent | 778f5b627812f6cb487e9236ca5e5261fd2e763c (diff) | |
| download | HydroRollSite-cd8aab3a511091ce378ff7ebcaa42bf979f00882.tar.gz HydroRollSite-cd8aab3a511091ce378ff7ebcaa42bf979f00882.zip | |
refactor: rewrite
Diffstat (limited to 'src/app/components/StatsCard.tsx')
| -rw-r--r-- | src/app/components/StatsCard.tsx | 27 |
1 files changed, 27 insertions, 0 deletions
diff --git a/src/app/components/StatsCard.tsx b/src/app/components/StatsCard.tsx new file mode 100644 index 0000000..d2213d6 --- /dev/null +++ b/src/app/components/StatsCard.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +// import { motion } from 'framer-motion'; +import * as motion from "motion/react-client"; +import { Card } from '@nextui-org/react'; + +interface StatsCardProps { + title: string; + value: string; +} + +export const StatsCard: React.FC<StatsCardProps> = ({ title, value }) => { + return ( + <motion.div + initial={{ opacity: 0, y: 20 }} + whileInView={{ opacity: 1, y: 0 }} + transition={{ duration: 0.5 }} + viewport={{ once: true }} + > + <Card className="p-6 bg-gradient-to-br from-gray-800/50 to-gray-900/50 border border-gray-700"> + <div className="text-center"> + <h3 className="text-2xl font-bold text-white mb-2">{value}</h3> + <p className="text-gray-400">{title}</p> + </div> + </Card> + </motion.div> + ); +}; |
