export function GridColumns(props: { children?: React.ReactNode, className?: string, style?: React.CSSProperties, columns: string, gap?: string, alignItems?: React.CSSProperties["alignItems"] }) {
    return <div className={props.className} style={{ display: "grid", gridTemplateColumns: props.columns, columnGap: props.gap, width: "100%", alignItems: props.alignItems ?? "stretch", ...props.style }}>
        {props.children}
    </div>;
}


export function GridAutoColumns(props: { children?: React.ReactNode, className?: string, justify?: React.CSSProperties["justifyContent"] }) {
    return <div className={props.className} style={{ display: "grid", gridAutoFlow: "column", gridAutoColumns: "max-content", columnGap: "1rem", justifyContent: props.justify ?? "start" }}>
        {props.children}
    </div>;
}

export function GridRows(props: { children?: React.ReactNode, className?: string, style?: React.CSSProperties, rows: string, gap?: string, alignItems?: React.CSSProperties["alignItems"] }) {
    return <div className={props.className} style={{ display: "grid", gridTemplateRows: props.rows, rowGap: props.gap, width: "100%", alignItems: props.alignItems ?? "stretch", ...props.style }}>
        {props.children}
    </div>;
}

import type { Property } from "csstype";
import type { ReactNode } from "react";

type AlignProps = {
    h?: Property.JustifyItems;
    v?: Property.AlignItems;
    children: ReactNode;
} & React.HTMLAttributes<HTMLDivElement>; // 👈 alle standaard div-props

export function Align({ h, v, children, ...restOfProps }: AlignProps) {
    let style: React.CSSProperties = {};

    if (h || v)
        style = { ...style, display: "grid" };

    if (h) {
        style = { ...style, width: "100%", justifyItems: h };
    }

    if (v) {
        style = { ...style, height: "100%", alignItems: v };
    }
    return <div style={ style } {...restOfProps }>
        { 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</>})}
</>