RESTfulMC/Frontend/src/app/components/counter.tsx

54 lines
1.2 KiB
TypeScript
Raw Normal View History

2024-04-17 14:34:07 -07:00
"use client";
import { minecrafter } from "@/font/fonts";
import { cn } from "@/lib/utils";
import CountUp from "react-countup";
2024-04-17 16:04:15 -07:00
import { ReactElement } from "react";
2024-04-17 14:34:07 -07:00
/**
* Props for the counter.
*/
type CounterProps = {
2024-04-17 16:04:15 -07:00
/**
* The name of the counter.
*/
name: string;
2024-04-17 14:34:07 -07:00
2024-04-17 16:04:15 -07:00
/**
* The amount to count up to.
*/
amount: number;
2024-04-17 14:34:07 -07:00
2024-04-17 16:04:15 -07:00
/**
* The optional duration of the count up.
* <p>
* Uses the default duration if not provided.
* </p>
*/
duration?: number | undefined;
2024-04-17 14:34:07 -07:00
};
/**
* A counter component.
*
* @param amount the amount to count up to
* @param duration the optional duration of the count up
* @returns the counter jsx
*/
2024-04-17 16:04:15 -07:00
const Counter = ({ name, amount, duration }: CounterProps): ReactElement => (
<div className="flex flex-col items-center gap-4">
<h1
className={cn(
"text-6xl text-minecraft-green-3",
minecrafter.className
)}
>
{name}
</h1>
<h2 className="text-4xl font-semibold uppercase">
<CountUp start={0} end={amount} duration={duration} />
</h2>
</div>
2024-04-17 14:34:07 -07:00
);
export default Counter;