Add guided onboarding tour for first toolbox creation
All checks were successful
Deploy Sokko G / deploy (push) Successful in 14s

This commit is contained in:
Shinuwa 2026-08-14 13:20:47 +02:00
parent 3007aa1389
commit 4f73e0068b
20 changed files with 470 additions and 20 deletions

View file

@ -7,7 +7,7 @@ function prefersReducedMotion() {
return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
}
export function HomeOnboardingSection({ content, className = "" }) {
export function HomeOnboardingSection({ content, className = "", onCreateToolbox }) {
const slides = useMemo(() => content?.slides || [], [content]);
const [activeSlide, setActiveSlide] = useState(0);
const [isPaused, setIsPaused] = useState(false);
@ -45,6 +45,13 @@ export function HomeOnboardingSection({ content, className = "" }) {
</li>
))}
</ol>
{onCreateToolbox && content.primaryAction && (
<div className="home-onboarding-steps-action">
<button className="primary home-onboarding-create-button" type="button" onClick={onCreateToolbox}>
{content.primaryAction}
</button>
</div>
)}
</div>
<div className="home-onboarding-preview">
<h3>{content.sliderTitle}</h3>