43 lines
847 B
TypeScript
43 lines
847 B
TypeScript
import clsx from "clsx";
|
|
|
|
type Props = {
|
|
/**
|
|
* The stat name.
|
|
*/
|
|
name?: string;
|
|
|
|
/**
|
|
* The background color of the stat.
|
|
*/
|
|
color?: string;
|
|
|
|
/**
|
|
* The value of the stat.
|
|
*/
|
|
value: React.ReactNode;
|
|
};
|
|
|
|
export default function StatValue({ name, color, value }: Props) {
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
"flex min-w-16 gap-2 h-[28px] p-1 items-center justify-center rounded-md text-sm",
|
|
color ? color : "bg-accent",
|
|
)}
|
|
style={{
|
|
backgroundColor: (!color?.includes("bg") && color) || undefined,
|
|
}}
|
|
>
|
|
{name && (
|
|
<>
|
|
<p>{name}</p>
|
|
<div className="h-4 w-[1px] bg-primary" />
|
|
</>
|
|
)}
|
|
<div className="flex gap-1 items-center">
|
|
{typeof value === "string" ? <p>{value}</p> : value}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|