| 1 | import { useLayoutEffect, useRef, type ReactNode } from "react"; |
| 2 | import { ArrowLeft } from "lucide-react"; |
| 3 | import { useManagementT } from "../lib/managementLocale"; |
| 4 | import "./ManagementPageShell.css"; |
| 5 | |
| 6 | export function ManagementPageShell({ title, description, actions, navigation, contentRef, children, active = true, onBack, className = "" }: { |
| 7 | title: string; description?: string; actions?: ReactNode; navigation?: ReactNode; children: ReactNode; |
| 8 | contentRef?: React.RefObject<HTMLElement | null>; |
| 9 | active?: boolean; onBack: () => void; className?: string; |
| 10 | }) { |
| 11 | const t = useManagementT(); |
| 12 | const backRef = useRef<HTMLButtonElement>(null); |
| 13 | useLayoutEffect(() => { if (active) backRef.current?.focus({ preventScroll: true }); }, [active]); |
| 14 | const back = <button id="management-back" ref={backRef} className="management-screen__back" type="button" onClick={onBack}><ArrowLeft size={18} />{t("back")}</button>; |
| 15 | return <section className={`management-screen ${className}`} data-app-overlay={active ? "" : undefined} hidden={!active} inert={!active} aria-label={title}> |
| 16 | <header className="management-screen__chrome" aria-hidden="true" /> |
| 17 | {navigation ? <div className="settings-center"><aside className="settings-screen__sidebar">{back}{navigation}</aside><main ref={contentRef} className="settings-center__content">{children}</main></div> : <> |
| 18 | <div className="management-screen__top">{back}<div className="management-screen__heading"><h1>{title}</h1>{description && <p>{description}</p>}</div><div className="management-screen__actions">{actions}</div></div> |
| 19 | <main className="management-screen__content">{children}</main> |
| 20 | </>} |
| 21 | </section>; |
| 22 | } |
| 23 |