Update src/components/sections/about/AboutMetric.tsx
This commit is contained in:
@@ -1,106 +1,116 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import TextAnimation from "@/components/text/TextAnimation";
|
||||
import { cls, shouldUseInvertedText } from "@/lib/utils";
|
||||
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type { ButtonAnimationType } from "@/types/button";
|
||||
import React, { useState } from 'react';
|
||||
import { LucideIcon } from 'lucide-react';
|
||||
|
||||
interface Metric {
|
||||
icon: LucideIcon;
|
||||
label: string;
|
||||
value: string;
|
||||
icon: LucideIcon;
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
interface AboutMetricProps {
|
||||
title: string;
|
||||
metrics: Metric[];
|
||||
metricsAnimation: ButtonAnimationType;
|
||||
useInvertedBackground: boolean;
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
titleClassName?: string;
|
||||
metricsContainerClassName?: string;
|
||||
metricCardClassName?: string;
|
||||
metricIconClassName?: string;
|
||||
metricLabelClassName?: string;
|
||||
metricValueClassName?: string;
|
||||
title: string;
|
||||
metrics: Metric[];
|
||||
metricsAnimation?: string;
|
||||
useInvertedBackground?: boolean;
|
||||
}
|
||||
|
||||
const AboutMetric = ({
|
||||
title,
|
||||
metrics,
|
||||
metricsAnimation,
|
||||
useInvertedBackground,
|
||||
ariaLabel = "About metrics section",
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
titleClassName = "",
|
||||
metricsContainerClassName = "",
|
||||
metricCardClassName = "",
|
||||
metricIconClassName = "",
|
||||
metricLabelClassName = "",
|
||||
metricValueClassName = "",
|
||||
}: AboutMetricProps) => {
|
||||
const theme = useTheme();
|
||||
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
|
||||
const { containerRef: metricsContainerRef } = useButtonAnimation({ animationType: metricsAnimation });
|
||||
export default function AboutMetric({
|
||||
title,
|
||||
metrics,
|
||||
metricsAnimation = 'slide-up',
|
||||
useInvertedBackground = false,
|
||||
}: AboutMetricProps) {
|
||||
const [flipped, setFlipped] = useState<{ [key: number]: boolean }>({});
|
||||
|
||||
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";
|
||||
const toggleFlip = (index: number) => {
|
||||
setFlipped((prev) => ({
|
||||
...prev,
|
||||
[index]: !prev[index],
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
aria-label={ariaLabel}
|
||||
className={cls("relative py-20 w-full", useInvertedBackground && "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 && "text-background", titleClassName)}
|
||||
/>
|
||||
const bgClass = useInvertedBackground ? 'bg-slate-900' : 'bg-white';
|
||||
const textClass = useInvertedBackground ? 'text-white' : 'text-slate-900';
|
||||
|
||||
<div ref={metricsContainerRef} 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-primary-cta-text" 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>
|
||||
);
|
||||
})}
|
||||
const getAnimationDelay = (index: number) => {
|
||||
if (metricsAnimation === 'slide-up') {
|
||||
return {
|
||||
transitionDelay: `${index * 100}ms`,
|
||||
};
|
||||
}
|
||||
return {};
|
||||
};
|
||||
|
||||
return (
|
||||
<section className={`${bgClass} py-16 px-4 sm:px-6 lg:px-8`}>
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="mb-12">
|
||||
<h2 className={`text-3xl sm:text-4xl font-bold ${textClass} text-center`}>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{metrics.map((metric, index) => {
|
||||
const Icon = metric.icon;
|
||||
const isFlipped = flipped[index] || false;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="h-64 cursor-pointer perspective"
|
||||
onClick={() => toggleFlip(index)}
|
||||
style={getAnimationDelay(index)}
|
||||
>
|
||||
<div
|
||||
className="relative w-full h-full transition-transform duration-500 transform-gpu"
|
||||
style={{
|
||||
transformStyle: 'preserve-3d',
|
||||
transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
|
||||
}}
|
||||
>
|
||||
{/* Front Side */}
|
||||
<div
|
||||
className={`absolute w-full h-full ${bgClass} rounded-lg shadow-lg p-6 flex flex-col items-center justify-center border border-slate-200`}
|
||||
style={{
|
||||
backfaceVisibility: 'hidden',
|
||||
}}
|
||||
>
|
||||
<Icon className={`w-12 h-12 ${useInvertedBackground ? 'text-blue-400' : 'text-blue-600'} mb-4`} />
|
||||
<p className={`text-sm font-semibold ${textClass} text-center mb-2`}>
|
||||
{metric.label}
|
||||
</p>
|
||||
<p className={`text-3xl font-bold ${useInvertedBackground ? 'text-blue-400' : 'text-blue-600'}`}>
|
||||
{metric.value}
|
||||
</p>
|
||||
<p className={`text-xs ${useInvertedBackground ? 'text-slate-400' : 'text-slate-500'} mt-4 text-center`}>
|
||||
Click to learn more
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Back Side */}
|
||||
<div
|
||||
className={`absolute w-full h-full ${useInvertedBackground ? 'bg-slate-800' : 'bg-slate-100'} rounded-lg shadow-lg p-6 flex flex-col items-center justify-center border border-slate-200`}
|
||||
style={{
|
||||
backfaceVisibility: 'hidden',
|
||||
transform: 'rotateY(180deg)',
|
||||
}}
|
||||
>
|
||||
<p className={`text-sm ${textClass} text-center leading-relaxed`}>
|
||||
{metric.label}: {metric.value} represents our commitment to excellence and continuous growth in this area.
|
||||
</p>
|
||||
<p className={`text-xs ${useInvertedBackground ? 'text-slate-400' : 'text-slate-500'} mt-4 text-center`}>
|
||||
Click to flip back
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
AboutMetric.displayName = "AboutMetric";
|
||||
|
||||
export default AboutMetric;
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user