124 lines
3.8 KiB
TypeScript
124 lines
3.8 KiB
TypeScript
import { ArrowRight, Brain, UserCircle, type Icon } from "@phosphor-icons/react";
|
|
import { OnboardingStep } from "./OnboardingStep";
|
|
import { useOnboarding } from "./OnboardingContext";
|
|
|
|
interface ExecutionModeStepProps {
|
|
onContinue: () => void;
|
|
onBack: () => void;
|
|
}
|
|
|
|
export function ExecutionModeStep({ onContinue, onBack }: ExecutionModeStepProps) {
|
|
const { executionMode, setExecutionMode, t } = useOnboarding();
|
|
|
|
return (
|
|
<OnboardingStep
|
|
step="executionmode"
|
|
eyebrow={t("onboarding.stepLabelMode")}
|
|
title={t("onboarding.modeStepTitle")}
|
|
>
|
|
<div className="space-y-3">
|
|
<ModeCard
|
|
selected={executionMode === "ai_ceo"}
|
|
onSelect={() => setExecutionMode("ai_ceo")}
|
|
icon={Brain}
|
|
title={t("onboarding.modeAiCeoTitle")}
|
|
subtitle={t("onboarding.modeAiCeoSubtitle")}
|
|
description={t("onboarding.modeAiCeoDesc")}
|
|
/>
|
|
<ModeCard
|
|
selected={executionMode === "ai_cofounder"}
|
|
onSelect={() => setExecutionMode("ai_cofounder")}
|
|
icon={UserCircle}
|
|
title={t("onboarding.modeCofounderTitle")}
|
|
subtitle={t("onboarding.modeCofounderSubtitle")}
|
|
description={t("onboarding.modeCofounderDesc")}
|
|
/>
|
|
</div>
|
|
|
|
<p className="mt-4 text-[11px] text-muted-foreground">
|
|
{t("onboarding.modeCanChange")}
|
|
</p>
|
|
|
|
<div className="mt-8 flex items-center justify-between">
|
|
<button
|
|
type="button"
|
|
onClick={onBack}
|
|
className="text-[12px] font-medium text-muted-foreground transition hover:text-foreground"
|
|
>
|
|
{t("onboarding.back")}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onContinue}
|
|
className="flex items-center gap-2 rounded-md bg-[color:var(--primary)] px-4 py-2 text-[13px] font-medium text-white transition hover:opacity-90"
|
|
>
|
|
{t("onboarding.continue")}
|
|
<ArrowRight size={14} />
|
|
</button>
|
|
</div>
|
|
</OnboardingStep>
|
|
);
|
|
}
|
|
|
|
function ModeCard({
|
|
selected,
|
|
onSelect,
|
|
icon: Icon,
|
|
title,
|
|
subtitle,
|
|
description,
|
|
}: {
|
|
selected: boolean;
|
|
onSelect: () => void;
|
|
icon: Icon;
|
|
title: string;
|
|
subtitle: string;
|
|
description: string;
|
|
}) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onSelect}
|
|
className={`w-full rounded-lg border px-4 py-4 text-left transition ${
|
|
selected
|
|
? "border-[color:var(--primary)] bg-[color:var(--primary)]/5 ring-1 ring-[color:var(--primary)]"
|
|
: "border-border bg-background hover:border-muted-foreground/40"
|
|
}`}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div
|
|
className={`mt-0.5 rounded-md p-1.5 ${
|
|
selected
|
|
? "bg-[color:var(--primary)]/10 text-[color:var(--primary)]"
|
|
: "bg-muted text-muted-foreground"
|
|
}`}
|
|
>
|
|
<Icon size={16} />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 mb-0.5">
|
|
<span className="text-[14px] font-semibold text-foreground">{title}</span>
|
|
<span
|
|
className={`rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.06em] ${
|
|
selected
|
|
? "bg-[color:var(--primary)]/10 text-[color:var(--primary)]"
|
|
: "bg-muted text-muted-foreground"
|
|
}`}
|
|
>
|
|
{subtitle}
|
|
</span>
|
|
</div>
|
|
<p className="text-[12px] leading-relaxed text-muted-foreground">{description}</p>
|
|
</div>
|
|
<div
|
|
className={`mt-1 h-4 w-4 shrink-0 rounded-full border-2 transition ${
|
|
selected
|
|
? "border-[color:var(--primary)] bg-[color:var(--primary)]"
|
|
: "border-border bg-background"
|
|
}`}
|
|
/>
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|