Add guided onboarding tour for first toolbox creation
All checks were successful
Deploy Sokko G / deploy (push) Successful in 14s
All checks were successful
Deploy Sokko G / deploy (push) Successful in 14s
This commit is contained in:
parent
3007aa1389
commit
4f73e0068b
20 changed files with 470 additions and 20 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue