265ca8ac38
All checks were successful
Container-Image bauen und veröffentlichen / build-and-push (push) Successful in 5m15s
15 lines
893 B
TypeScript
15 lines
893 B
TypeScript
"use client"
|
|
import { useEffect, useRef } from "react"
|
|
|
|
export function FormErrors({ errors }: { errors: string[] }) {
|
|
const ref = useRef<HTMLDivElement>(null)
|
|
useEffect(() => { if (errors.length) ref.current?.focus() }, [errors])
|
|
if (!errors.length) return null
|
|
return <div ref={ref} tabIndex={-1} role="region" aria-label="Fehler beim Speichern"
|
|
className="max-h-40 shrink-0 overflow-auto rounded-lg border border-destructive p-3 text-sm text-destructive outline-none focus:ring-2 focus:ring-ring">
|
|
<p className="font-semibold">Bitte prüfen Sie Ihre Eingaben.</p>
|
|
<button type="button" className="my-2 underline" onClick={() => ref.current?.closest("form")?.querySelector<HTMLElement>('[aria-invalid="true"]')?.focus()}>Zum ersten fehlerhaften Feld</button>
|
|
<ul className="list-disc pl-5">{errors.map((error, index) => <li key={index}>{error}</li>)}</ul>
|
|
</div>
|
|
}
|