export function AutoRowColumns(props: { children?: React.ReactNode }) {
    return <div style={{ display: "grid", gridAutoFlow: "column", gridAutoColumns: "max-content", columnGap: "1rem" }}>
        {props.children}
    </div>;
}


export function HAlign(props: { align: "left" | "center" | "right"; children?: ReactNode; }) {
    return <div style={{ display: "grid", width: "100%", justifyItems: props.align }}>
        {props.children}
    </div>;
}


export const When = (value: boolean, e: React.ReactNode) => value ? e : <></>;
export const OnlyWhen = (value: boolean, fn: () => JSX.Element) => value ? fn() : <></>;




<>
{When(!!importResult, <>I am processed but not visible when false</>)}
{OnlyWhen(!!importResult, () => <>I am not processed when false</>})}
</>