72 lines
3.0 KiB
TypeScript
72 lines
3.0 KiB
TypeScript
import React from 'react';
|
|
|
|
interface ProgressStepProps {
|
|
number: number;
|
|
title: string;
|
|
isActive?: boolean;
|
|
isCompleted?: boolean;
|
|
}
|
|
|
|
interface FigmaProgressProps {
|
|
steps: ProgressStepProps[];
|
|
currentStep?: number;
|
|
className?: string;
|
|
}
|
|
|
|
const ProgressStep: React.FC<ProgressStepProps> = ({ number, title, isActive = false, isCompleted = false }) => {
|
|
const stepClasses = isActive
|
|
? "p-2 bg-[--Neutrals-NeutralSlate50] rounded-[10px] shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]"
|
|
: "p-2 bg-white rounded-[10px]";
|
|
|
|
const numberClasses = isActive || isCompleted
|
|
? "h-5 p-0.5 bg-[--Brand-Orange] rounded-[999px]"
|
|
: "h-5 p-0.5 bg-[--Neutrals-NeutralSlate0] rounded-[999px] outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200]";
|
|
|
|
const numberTextClasses = isActive || isCompleted
|
|
? "w-4 text-center justify-start text-[--Neutrals-NeutralSlate0] text-xs font-medium font-['Inter'] leading-none"
|
|
: "w-4 text-center justify-start text-[--Neutrals-NeutralSlate600] text-xs font-medium font-['Inter'] leading-none";
|
|
|
|
const titleClasses = isActive
|
|
? "flex-1 justify-start text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight"
|
|
: "flex-1 justify-start text-[--Neutrals-NeutralSlate600] text-sm font-normal font-['Inter'] leading-tight";
|
|
|
|
return (
|
|
<div className={`self-stretch inline-flex justify-start items-center gap-2.5 overflow-hidden ${stepClasses}`}>
|
|
<div className={`inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden ${numberClasses}`}>
|
|
<div className={numberTextClasses}>{number}</div>
|
|
</div>
|
|
<div className={titleClasses}>{title}</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const FigmaProgress: React.FC<FigmaProgressProps> = ({ steps, currentStep = 1, className = '' }) => {
|
|
return (
|
|
<div className={`self-stretch inline-flex flex-col justify-start items-start gap-2 ${className}`}>
|
|
{steps.map((step, index) => (
|
|
<ProgressStep
|
|
key={index}
|
|
number={step.number}
|
|
title={step.title}
|
|
isActive={step.number === currentStep}
|
|
isCompleted={step.number < currentStep}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Default onboarding steps as shown in Figma
|
|
export const defaultOnboardingSteps: ProgressStepProps[] = [
|
|
{ number: 1, title: "Company Overview & Vision" },
|
|
{ number: 2, title: "Leadership & Organizational Structure" },
|
|
{ number: 3, title: "Operations & Execution" },
|
|
{ number: 4, title: "Culture & Team Health" },
|
|
{ number: 5, title: "Sales, Marketing & Growth" },
|
|
{ number: 6, title: "Financial Health & Metrics" },
|
|
{ number: 7, title: "Innovation & Product/Service Strategy" },
|
|
{ number: 8, title: "Personal Leadership & Risk" }
|
|
];
|
|
|
|
export default FigmaProgress;
|