101 lines
4.0 KiB
TypeScript
101 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import TextAnimation from "@/components/text/TextAnimation";
|
|
import { cls, shouldUseInvertedText } from "@/lib/utils";
|
|
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
|
|
import type { LucideIcon } from "lucide-react";
|
|
|
|
interface Metric {
|
|
icon: LucideIcon;
|
|
label: string;
|
|
value: string;
|
|
}
|
|
|
|
interface AboutMetricProps {
|
|
title: string;
|
|
metrics: Metric[];
|
|
useInvertedBackground: "noInvert" | "invertDefault";
|
|
ariaLabel?: string;
|
|
className?: string;
|
|
containerClassName?: string;
|
|
titleClassName?: string;
|
|
metricsContainerClassName?: string;
|
|
metricCardClassName?: string;
|
|
metricIconClassName?: string;
|
|
metricLabelClassName?: string;
|
|
metricValueClassName?: string;
|
|
}
|
|
|
|
const AboutMetric = ({
|
|
title,
|
|
metrics,
|
|
useInvertedBackground,
|
|
ariaLabel = "About metrics section",
|
|
className = "",
|
|
containerClassName = "",
|
|
titleClassName = "",
|
|
metricsContainerClassName = "",
|
|
metricCardClassName = "",
|
|
metricIconClassName = "",
|
|
metricLabelClassName = "",
|
|
metricValueClassName = "",
|
|
}: AboutMetricProps) => {
|
|
const theme = useTheme();
|
|
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
|
|
|
|
const gridColsMap = {
|
|
2: "md:grid-cols-2",
|
|
3: "md:grid-cols-3",
|
|
4: "md:grid-cols-4",
|
|
};
|
|
const gridCols = gridColsMap[metrics.length as keyof typeof gridColsMap] || "md:grid-cols-4";
|
|
|
|
return (
|
|
<section
|
|
aria-label={ariaLabel}
|
|
className={cls("relative py-20 w-full", useInvertedBackground === "invertDefault" && "bg-foreground", className)}
|
|
>
|
|
<div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
|
|
<TextAnimation
|
|
type={theme.defaultTextAnimation}
|
|
text={title}
|
|
variant="words-trigger"
|
|
className={cls("text-2xl md:text-5xl font-medium leading-[1.175]", useInvertedBackground === "invertDefault" && "text-background", titleClassName)}
|
|
/>
|
|
|
|
<div className={cls("grid grid-cols-1 gap-6", gridCols, metricsContainerClassName)}>
|
|
{metrics.map((metric, index) => {
|
|
const Icon = metric.icon;
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={cls(
|
|
"h-fit card rounded-theme-capped px-6 py-8 md:py-10 flex flex-col items-center justify-center gap-3",
|
|
metricCardClassName
|
|
)}
|
|
>
|
|
<div className="relative z-1 w-full flex items-center justify-center gap-2">
|
|
<div className={cls("h-8 primary-button aspect-square rounded-theme flex items-center justify-center", metricIconClassName)}>
|
|
<Icon className="h-4/10 text-background" strokeWidth={1.5} />
|
|
</div>
|
|
<h3 className={cls("text-xl truncate", shouldUseLightText && "text-background", metricLabelClassName)}>
|
|
{metric.label}
|
|
</h3>
|
|
</div>
|
|
<div className="relative z-1 w-full flex items-center justify-center">
|
|
<h4 className={cls("text-6xl font-medium truncate", shouldUseLightText && "text-background", metricValueClassName)}>
|
|
{metric.value}
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
AboutMetric.displayName = "AboutMetric";
|
|
|
|
export default AboutMetric; |