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</>})} </>
826000cookie-checkReact CSS-Grid Layout helpers