adilallo
106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import type { StepSizeValue } from "../../../../lib/propNormalization";
|
|
import SectionNumber from "../../sections/SectionNumber";
|
|
|
|
interface StepProps {
|
|
number: number;
|
|
text: string;
|
|
size?: StepSizeValue;
|
|
iconShape?: string;
|
|
iconColor?: string;
|
|
}
|
|
|
|
const Step = memo<StepProps>(({ number, text, size: sizeProp }) => {
|
|
const baseClasses =
|
|
"bg-[var(--color-surface-inverse-primary)] rounded-[12px] shadow-lg";
|
|
|
|
if (sizeProp) {
|
|
const size = sizeProp;
|
|
const sizeClasses = {
|
|
small: "flex flex-col items-end justify-center gap-4 p-5 relative",
|
|
medium: "flex flex-row items-center gap-8 p-8 relative",
|
|
large:
|
|
"flex flex-col items-start justify-end gap-[22px] h-[238px] p-8 relative",
|
|
xlarge:
|
|
"flex flex-col items-start justify-end gap-[22px] h-[238px] p-8 relative",
|
|
};
|
|
|
|
const textClasses = {
|
|
small:
|
|
"font-bricolage-grotesque font-medium text-[24px] leading-[32px] text-[#141414]",
|
|
medium:
|
|
"font-bricolage-grotesque font-medium text-[24px] leading-[24px] text-[#141414]",
|
|
large:
|
|
"font-bricolage-grotesque font-medium text-[24px] leading-[24px] text-[#141414]",
|
|
xlarge:
|
|
"font-bricolage-grotesque font-medium text-[32px] leading-[32px] text-[#141414]",
|
|
};
|
|
|
|
const sectionNumberWrapperClasses = {
|
|
small: "relative shrink-0",
|
|
medium: "flex justify-start flex-shrink-0",
|
|
large: "absolute top-8 right-8",
|
|
xlarge: "absolute top-8 right-8",
|
|
};
|
|
|
|
const contentClasses = {
|
|
small: "min-w-full relative shrink-0",
|
|
medium: "flex-1",
|
|
large: "absolute bottom-8 left-8 right-16",
|
|
xlarge: "absolute bottom-8 left-8 right-16",
|
|
};
|
|
|
|
if (size === "small") {
|
|
return (
|
|
<div className={`${baseClasses} ${sizeClasses[size]}`}>
|
|
{/* Section Number - Direct child for Small */}
|
|
<SectionNumber number={number} />
|
|
|
|
{/* Card Content */}
|
|
<p className={textClasses[size]}>{text}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={`${baseClasses} ${sizeClasses[size]}`}>
|
|
{/* Section Number */}
|
|
<div className={sectionNumberWrapperClasses[size]}>
|
|
<SectionNumber number={number} />
|
|
</div>
|
|
|
|
{/* Card Content */}
|
|
<div className={contentClasses[size]}>
|
|
<p className={textClasses[size]}>{text}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Responsive breakpoints for backward compatibility (matches original behavior)
|
|
// Maps to: Small (mobile) -> Medium (sm) -> Large (lg) -> XLarge (xl)
|
|
return (
|
|
<div
|
|
className={`${baseClasses} flex flex-col gap-4 p-5 sm:flex-row sm:gap-8 sm:p-8 sm:items-center lg:flex-col lg:gap-[22px] lg:items-start lg:justify-end lg:p-8 lg:relative lg:h-[238px]`}
|
|
>
|
|
{/* Section Number - Responsive positioning */}
|
|
<div className="flex justify-end items-end sm:justify-start sm:flex-shrink-0 lg:absolute lg:top-8 lg:right-8">
|
|
<SectionNumber number={number} />
|
|
</div>
|
|
|
|
{/* Card Content - Responsive positioning */}
|
|
<div className="sm:flex-1 lg:absolute lg:bottom-8 lg:left-8 lg:right-16">
|
|
<p className="font-bricolage-grotesque font-medium text-[24px] leading-[32px] sm:leading-[24px] sm:text-[24px] lg:text-[24px] lg:leading-[24px] xl:text-[32px] xl:leading-[32px] text-[#141414]">
|
|
{text}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
Step.displayName = "Step";
|
|
|
|
export default Step;
|