adilallo
47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import Shapes from "../../asset/Shapes";
|
|
import type { StatViewProps } from "./Stat.types";
|
|
|
|
/**
|
|
* Figma: "Card / Stat" (21598-18215). Full width of grid column at desktop.
|
|
*/
|
|
function StatView({
|
|
value,
|
|
label,
|
|
asOf,
|
|
shapeVariant,
|
|
className = "",
|
|
}: StatViewProps) {
|
|
return (
|
|
<article
|
|
className={`relative flex h-auto min-h-[182px] w-full flex-col items-start justify-between rounded-[var(--radius-measures-radius-xlarge,20px)] bg-[var(--color-surface-invert-primary,white)] px-[var(--spacing-scale-024)] py-[var(--spacing-scale-032)] sm:h-[170px] sm:min-h-0 sm:p-[var(--spacing-scale-024)] ${className}`.trim()}
|
|
>
|
|
<div className="relative flex w-full flex-col items-start">
|
|
<div className="relative flex items-center">
|
|
<Shapes
|
|
variant={shapeVariant}
|
|
className="absolute -left-[11px] -top-[21px] size-[80px] rotate-[15deg] opacity-90"
|
|
/>
|
|
<p className="relative font-bricolage-grotesque text-[40px] font-bold leading-[52px] text-[var(--color-content-invert-primary,black)]">
|
|
{value}
|
|
</p>
|
|
</div>
|
|
<p className="font-inter text-[14px] font-normal leading-5 text-[var(--color-content-invert-primary,black)]">
|
|
{label}
|
|
</p>
|
|
</div>
|
|
{asOf ? (
|
|
<p className="w-full font-inter text-[10px] font-normal leading-[14px] text-[var(--color-content-invert-tertiary,#2d2d2d)]">
|
|
{asOf}
|
|
</p>
|
|
) : null}
|
|
</article>
|
|
);
|
|
}
|
|
|
|
StatView.displayName = "StatView";
|
|
|
|
export default memo(StatView);
|