src/components/layout/index.tsx

import type {ComponentChildren, JSX} from "preact";
import style from "./style.module.scss"
import {Settings} from "preact-feather"
import {routeCtx, routes} from "@/contexts/route";
import {useContext} from "preact/hooks";

export function Layout(props: {
    breadcrumbs: JSX.Element,
    title: string,
    children: ComponentChildren
}) {
    const [,setRoute] = useContext(routeCtx);

    return(
        <div>
            <nav className={style.breadcrumbs}>
                {props.breadcrumbs}
                <div className={style.actions}>
                    <a href="#" title="Paramètres" onClick={e => {
                        e.preventDefault();
                        setRoute(routes.settings());
                    }}>
                        <Settings size={18}/>
                    </a>
                </div>
            </nav>
            <h2>{props.title}</h2>
            {props.children}
        </div>
    )
}