diff options
| author | 2025-01-26 23:29:23 +0800 | |
|---|---|---|
| committer | 2025-01-26 23:29:23 +0800 | |
| commit | a97b7a38f4a652e7b24e101ef34e4f37b8c3094e (patch) | |
| tree | c387ca55aa6977499b03346ab46e63a0f7c09b36 /src/app/components/StatsCard.tsx | |
| parent | d4d7fac39528b978b742420a3cb4e91cea6f5834 (diff) | |
| parent | cd8aab3a511091ce378ff7ebcaa42bf979f00882 (diff) | |
| download | HydroRollSite-a97b7a38f4a652e7b24e101ef34e4f37b8c3094e.tar.gz HydroRollSite-a97b7a38f4a652e7b24e101ef34e4f37b8c3094e.zip | |
Refactor: Rewrite Site
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> + ); +}; |
