1import { getUserStats } from "@/lib/actions/user.action";
2import { formatNumber } from "@/lib/utils";
3import { BadgeCounts } from "@/types/global";
4import Image from "next/image";
5import React from "react";
6
7interface Props {
8  userId: string;
9}
10
11interface StatsCardProps {
12  imgUrl: string;
13  value: number;
14  title: string;
15}
16
17const StatsCard = ({ imgUrl, value, title }: StatsCardProps) => {
18  return (
19    <div
20      className="light-border background-light900_dark300 rounded-md p-5 flex flex-wrap items-center justify-evenly gap-4 border
21        shadow-light-300 dark:shadow-dark-200"
22    >
23      <Image src={imgUrl} alt={title} width={40} height={50} />
24      <div>
25        <p className="paragraph-semibold text-dark200_light900">{value}</p>
26        <p className="body-medium text-dark300_light700">{title}</p>
27      </div>
28    </div>
29  );
30};
31
32const Stats = async ({ userId }: Props) => {
33  const userStats = await getUserStats({ userId });
34  if (!userStats.success) return <h1>No Data</h1>;
35  const { totalQuestions, totalAnswers, badges } = userStats.data || {};
36
37  return (
38    <div className="mt-4">
39      <h4 className="h3-semibold text-dark200_light900">Stats</h4>
40
41      <div className="mt-5 grid grid-cols-1 gap-5 xs:grid-cols-2 md:grid-cols-4">
42        <div
43          className="light-border background-light900_dark300 rounded-md p-5 flex flex-wrap items-center justify-evenly gap-2 border
44        shadow-light-300 dark:shadow-dark-200"
45        >
46          <div>
47            <p className="paragraph-semibold text-dark200_light900">
48              {formatNumber(totalQuestions || 0)}
49            </p>
50            <p className="body-medium text-dark400_light700">Questions</p>
51          </div>
52          <div>
53            <p className="paragraph-semibold text-dark200_light900">
54              {formatNumber(totalAnswers || 0)}
55            </p>
56            <p className="body-medium text-dark400_light700">Answers</p>
57          </div>
58        </div>
59        <StatsCard
60          imgUrl="/icons/gold-medal.svg"
61          value={badges?.GOLD || 0}
62          title="Gold Badges"
63        />
64        <StatsCard
65          imgUrl="/icons/silver-medal.svg"
66          value={badges?.SILVER || 0}
67          title="Silver Badges"
68        />
69        <StatsCard
70          imgUrl="/icons/bronze-medal.svg"
71          value={badges?.BRONZE || 0}
72          title="Bronze Badges"
73        />
74      </div>
75    </div>
76  );
77};
78
79export default Stats;
80

1import { getUserStats } from "@/lib/actions/user.action";
2import { formatNumber } from "@/lib/utils";
3import { BadgeCounts } from "@/types/global";
4import Image from "next/image";
5import React from "react";
6
7interface Props {
8  userId: string;
9}
10
11interface StatsCardProps {
12  imgUrl: string;
13  value: number;
14  title: string;
15}
16
17const StatsCard = ({ imgUrl, value, title }: StatsCardProps) => {
18  return (
19    <div
20      className="light-border background-light900_dark300 rounded-md p-5 flex flex-wrap items-center justify-evenly gap-4 border
21        shadow-light-300 dark:shadow-dark-200"
22    >
23      <Image src={imgUrl} alt={title} width={40} height={50} />
24      <div>
25        <p className="paragraph-semibold text-dark200_light900">{value}</p>
26        <p className="body-medium text-dark300_light700">{title}</p>
27      </div>
28    </div>
29  );
30};
31
32const Stats = async ({ userId }: Props) => {
33  const userStats = await getUserStats({ userId });
34  if (!userStats.success) return <h1>No Data</h1>;
35  const { totalQuestions, totalAnswers, badges } = userStats.data || {};
36
37  return (
38    <div className="mt-4">
39      <h4 className="h3-semibold text-dark200_light900">Stats</h4>
40
41      <div className="mt-5 grid grid-cols-1 gap-5 xs:grid-cols-2 md:grid-cols-4">
42        <div
43          className="light-border background-light900_dark300 rounded-md p-5 flex flex-wrap items-center justify-evenly gap-2 border
44        shadow-light-300 dark:shadow-dark-200"
45        >
46          <div>
47            <p className="paragraph-semibold text-dark200_light900">
48              {formatNumber(totalQuestions || 0)}
49            </p>
50            <p className="body-medium text-dark400_light700">Questions</p>
51          </div>
52          <div>
53            <p className="paragraph-semibold text-dark200_light900">
54              {formatNumber(totalAnswers || 0)}
55            </p>
56            <p className="body-medium text-dark400_light700">Answers</p>
57          </div>
58        </div>
59        <StatsCard
60          imgUrl="/icons/gold-medal.svg"
61          value={badges?.GOLD || 0}
62          title="Gold Badges"
63        />
64        <StatsCard
65          imgUrl="/icons/silver-medal.svg"
66          value={badges?.SILVER || 0}
67          title="Silver Badges"
68        />
69        <StatsCard
70          imgUrl="/icons/bronze-medal.svg"
71          value={badges?.BRONZE || 0}
72          title="Bronze Badges"
73        />
74      </div>
75    </div>
76  );
77};
78
79export default Stats;
80