Stats Card

1"use client";
2 
3import React from "react";
4import { cn } from "@/lib/utils";
5import Image from "next/image";
6import { HiTrendingUp } from "react-icons/hi";
7 
8type StatsCardProps = {
9  gradientColor?: string;
10  statsType?: string;
11  firstPerson?: string;
12  secondPerson?: string;
13  firstData?: number;
14  secondData?: number;
15  firstImage?: string;
16  secondImage?: string;
17};
18 
19const StatsCard = ({
20  gradientColor = "#60A5FA",
21  statsType = "PRs Merged",
22  firstPerson = "Toji Fushiguro",
23  secondPerson = "Gojo Satoru",
24  firstData = 23,
25  secondData = 18,
26  firstImage = "/assets/toji.png",
27  secondImage = "/assets/gojo.png",
28}: StatsCardProps) => {
29  return (
30    <div
31      className={cn(
32        "group bg-background w-full max-w-87.5 rounded-xl p-8 shadow-sm ring-1 shadow-black/10 ring-black/10 dark:ring-neutral-800/60",
33      )}
34    >
35      <div
36        className={cn(
37          "bg-background z-40 h-80 rounded-xl",
38          "mask-[radial-gradient(50%_90%_at_50%_50%,white_30%,transparent_100%)]",
39        )}
40      >
41        <div className="relative flex h-full items-start justify-center overflow-hidden p-8">
42          <div className="absolute inset-0 flex flex-col items-center justify-center transition duration-200 group-hover:-translate-y-80">
43            <div className="flex h-20 w-20 items-center justify-center rounded-2xl border border-neutral-200/50 bg-linear-to-br from-neutral-50 to-neutral-100 shadow-[0px_0px_12px_0px_rgba(0,0,0,0.15)_inset,0px_4px_8px_-2px_rgba(0,0,0,0.1)] dark:border-neutral-700/50 dark:from-neutral-800 dark:to-neutral-900">
44              <Image
45                alt="avatar"
46                width={100}
47                height={100}
48                unoptimized
49                className="h-16 w-16 rounded-xl object-cover"
50                src={firstImage}
51              />
52            </div>
53            <div className="mt-4 flex items-center gap-2">
54              <p className="text-foreground text-sm font-bold">{firstPerson}</p>
55            </div>
56            <div className="mt-3 flex items-center gap-2 rounded-full bg-neutral-100/40 px-3 py-1 text-xs dark:bg-neutral-800/40">
57              <HiTrendingUp className="h-3 w-3 text-green-500" />
58              <span className="text-muted-foreground">{statsType}</span>
59              <div className="bg-muted-foreground h-1 w-1 rounded-full" />
60              <span className="text-foreground font-semibold">{firstData}</span>
61            </div>
62            <Graph gradientColor={gradientColor} />
63// … truncated