42 lines
1.7 KiB
TypeScript
42 lines
1.7 KiB
TypeScript
import { useRef, useState } from 'react'
|
||
import { useDatePreferences } from '../presentation/DatePreferences'
|
||
|
||
export function DisplayPreferences() {
|
||
const { dateFormat, pending, error, save } = useDatePreferences()
|
||
const [open, setOpen] = useState(false)
|
||
const trigger = useRef<HTMLButtonElement>(null)
|
||
|
||
const close = () => {
|
||
setOpen(false)
|
||
requestAnimationFrame(() => trigger.current?.focus())
|
||
}
|
||
const persist = (format: 'fr' | 'iso') => {
|
||
void save(format).catch(() => undefined)
|
||
}
|
||
|
||
return <div className="display-preferences">
|
||
<button ref={trigger} type="button" className="preferences-trigger"
|
||
aria-haspopup="dialog" aria-expanded={open} onClick={() => setOpen(true)}>
|
||
Paramètres d’affichage
|
||
</button>
|
||
{open && <div className="preferences-dialog" role="dialog" aria-modal="true"
|
||
aria-labelledby="preferences-title">
|
||
<div className="preferences-heading">
|
||
<h2 id="preferences-title">Paramètres d’affichage</h2>
|
||
<button type="button" className="quiet-action" onClick={close}>Fermer</button>
|
||
</div>
|
||
<fieldset disabled={pending}>
|
||
<legend>Format des dates</legend>
|
||
<label><input type="radio" name="date-format" value="fr"
|
||
checked={dateFormat === 'fr'} onChange={() => persist('fr')} />
|
||
Français — 17/09/2026</label>
|
||
<label><input type="radio" name="date-format" value="iso"
|
||
checked={dateFormat === 'iso'} onChange={() => persist('iso')} />
|
||
ISO — 2026-09-17</label>
|
||
</fieldset>
|
||
<p className="preference-example">Exemple déterministe : {dateFormat === 'fr'
|
||
? '18/09/2026 à 10:19' : '2026-09-18 10:19'}</p>
|
||
{error && <p className="form-error" role="alert">{error}</p>}
|
||
</div>}
|
||
</div>
|
||
}
|