mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-20 05:56:53 +00:00
Maurice
4346d7f2c1
A help icon on every screen opens a panel with the screen's overview, its sub-screens, task guides with a framed picture per step, search across guides and the wiki, and a switch to any other screen's help. Guides exist for the dashboard, Vacay, Atlas, Collections, Journey (list, journal, studio), Settings (all tabs), Admin (all tabs) and the trip frame; the trip's own screens are in progress. Pictures are produced by Playwright (client/e2e/help), texts in all 23 languages.
36 lines
1.6 KiB
TypeScript
36 lines
1.6 KiB
TypeScript
import React from 'react'
|
|
import { X } from 'lucide-react'
|
|
import { useTranslation } from '../../i18n'
|
|
import { useHelpStore } from '../../store/helpStore'
|
|
|
|
/** A step picture enlarged over the help dialog; click anywhere or Escape to close. */
|
|
export default function HelpLightbox(): React.ReactElement | null {
|
|
const { t } = useTranslation()
|
|
const lightbox = useHelpStore(s => s.lightbox)
|
|
const close = useHelpStore(s => s.openLightbox)
|
|
if (!lightbox) return null
|
|
|
|
return (
|
|
<div
|
|
className="trek-help-lightbox fixed inset-0 z-[var(--z-overlay)] flex items-center justify-center p-4 sm:p-8 bg-[var(--overlay)] backdrop-blur-sm"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label={lightbox.alt}
|
|
onClick={() => close(null)}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => close(null)}
|
|
aria-label={t('help.center.close')}
|
|
className="absolute top-4 right-4 w-10 h-10 rounded-full bg-inverse text-inverse-text flex items-center justify-center shadow-elevated hover:scale-105 transition-transform"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
<figure className="trek-help-lightbox-card max-w-[min(1400px,94vw)] max-h-[90vh] flex flex-col gap-3" onClick={e => e.stopPropagation()}>
|
|
<img src={lightbox.src} alt={lightbox.alt} className="max-h-[84vh] w-auto object-contain rounded-xl border border-edge shadow-modal bg-surface-card" />
|
|
{lightbox.alt && <figcaption className="text-caption text-center text-inverse-text opacity-80">{lightbox.alt}</figcaption>}
|
|
</figure>
|
|
</div>
|
|
)
|
|
}
|