110 lines
4.2 KiB
JavaScript
110 lines
4.2 KiB
JavaScript
// Rôle : affiche la section de prise en main de la home avec étapes, slider et accès rapides.
|
|
import { useEffect, useMemo, useState } from "react";
|
|
|
|
const SLIDE_INTERVAL_MS = 4500;
|
|
|
|
function prefersReducedMotion() {
|
|
return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
|
|
}
|
|
|
|
export function HomeOnboardingSection({ content, className = "", onCreateToolbox }) {
|
|
const slides = useMemo(() => content?.slides || [], [content]);
|
|
const [activeSlide, setActiveSlide] = useState(0);
|
|
const [isPaused, setIsPaused] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (slides.length <= 1 || isPaused || prefersReducedMotion()) return undefined;
|
|
const intervalId = window.setInterval(() => {
|
|
setActiveSlide((current) => (current + 1) % slides.length);
|
|
}, SLIDE_INTERVAL_MS);
|
|
return () => window.clearInterval(intervalId);
|
|
}, [isPaused, slides.length]);
|
|
|
|
if (!content) return null;
|
|
|
|
const currentSlide = slides[activeSlide] || slides[0];
|
|
|
|
return (
|
|
<section className={["home-onboarding nds-panel", className].filter(Boolean).join(" ")} aria-labelledby="home-onboarding-title">
|
|
<div className="home-section-heading home-onboarding-heading">
|
|
<p className="eyebrow">{content.eyebrow}</p>
|
|
<h2 id="home-onboarding-title">{content.title}</h2>
|
|
<p>{content.description}</p>
|
|
</div>
|
|
<div className="home-onboarding-layout">
|
|
<div className="home-onboarding-steps">
|
|
<h3>{content.stepsTitle}</h3>
|
|
<ol>
|
|
{content.steps.map((step, index) => (
|
|
<li key={step.title}>
|
|
<span>{index + 1}</span>
|
|
<div>
|
|
<strong>{step.title}</strong>
|
|
<p>{step.text}</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
{onCreateToolbox && content.primaryAction && (
|
|
<div className="home-onboarding-steps-action">
|
|
<button className="home-onboarding-create-button nds-button" data-size="md" data-variant="primary" type="button" onClick={onCreateToolbox}>
|
|
{content.primaryAction}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="home-onboarding-preview">
|
|
<h3>{content.sliderTitle}</h3>
|
|
<div
|
|
className="home-onboarding-slider"
|
|
onMouseEnter={() => setIsPaused(true)}
|
|
onMouseLeave={() => setIsPaused(false)}
|
|
onFocus={() => setIsPaused(true)}
|
|
onBlur={() => setIsPaused(false)}
|
|
>
|
|
{currentSlide && (
|
|
<figure>
|
|
<img src={currentSlide.src} alt={currentSlide.alt} />
|
|
<figcaption>
|
|
<strong>{currentSlide.title}</strong>
|
|
<span>{currentSlide.text}</span>
|
|
</figcaption>
|
|
</figure>
|
|
)}
|
|
{slides.length > 1 && (
|
|
<div className="home-onboarding-dots" aria-label={content.sliderLabel}>
|
|
{slides.map((slide, index) => (
|
|
<button
|
|
className={index === activeSlide ? "active" : ""}
|
|
key={slide.src}
|
|
type="button"
|
|
onClick={() => setActiveSlide(index)}
|
|
aria-label={`${content.slideButtonLabel} ${index + 1}`}
|
|
aria-pressed={index === activeSlide}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="home-onboarding-cards">
|
|
{content.cards.map((card) => (
|
|
<a className="home-onboarding-card" href={card.href} key={card.href}>
|
|
<span className="home-onboarding-card-visual">
|
|
<img src={card.image} alt="" aria-hidden="true" />
|
|
</span>
|
|
<span className="home-onboarding-card-body">
|
|
<span className="home-onboarding-card-title">
|
|
<span className={`module-icon-svg module-icon-${card.icon}`} aria-hidden="true" />
|
|
<strong>{card.title}</strong>
|
|
</span>
|
|
<span className="home-onboarding-card-text">{card.text}</span>
|
|
<em>{card.action}</em>
|
|
</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|