Spaces:
Sleeping
Sleeping
File size: 2,317 Bytes
15926a2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | import React from 'react';
import { guideRegistry } from './guideRegistry';
import './VisualGuide.css';
/**
* VisualGuide — displays a visual step-by-step guide card for a given task.
*
* @param {string} taskId - Key into guideRegistry (e.g. "copy_paste")
* @param {string} osType - "Windows" or "Mac" (defaults to "Windows")
*/
function VisualGuide({ taskId, osType = 'Windows' }) {
const guide = guideRegistry[taskId];
if (!guide) {
return (
<div className="visual-guide visual-guide--empty">
<p>No visual guide available for this topic.</p>
</div>
);
}
const steps = guide.variants[osType] ?? guide.variants['Windows'] ?? [];
return (
<div className="visual-guide" role="complementary" aria-label={`Visual guide: ${guide.title}`}>
{/* Header */}
<div className="visual-guide__header">
<span className="visual-guide__header-icon" aria-hidden="true">📋</span>
<h3 className="visual-guide__title">{guide.title}</h3>
<span className="visual-guide__os-badge">{osType}</span>
</div>
{/* Steps list */}
<ol className="visual-guide__steps" aria-label="Guide steps">
{steps.map((step) => (
<li key={step.num} className="visual-guide__step">
{/* Circle number */}
<span className="visual-guide__step-num" aria-label={`Step ${step.num}`}>
{step.num}
</span>
{/* Step content */}
<div className="visual-guide__step-content">
<p className="visual-guide__step-text">{step.text}</p>
{/* Keyboard key badges */}
{step.keys && step.keys.length > 0 && (
<div className="visual-guide__keys" aria-label={`Keys: ${step.keys.join(' + ')}`}>
{step.keys.map((key, index) => (
<React.Fragment key={key}>
{index > 0 && (
<span className="visual-guide__key-plus" aria-hidden="true">+</span>
)}
<kbd className="visual-guide__key">{key}</kbd>
</React.Fragment>
))}
</div>
)}
</div>
</li>
))}
</ol>
</div>
);
}
export default VisualGuide;
|