trilium/apps/client/src/widgets/react/Card.tsx

import "./Card.css";
import { ComponentChildren, createContext } from "preact";
import { JSX } from "preact";
import { useContext } from "preact/hooks";
import clsx from "clsx";

interface CardProps {
    className?: string;
}

export function Card(props: {children: ComponentChildren} & CardProps) {
    return <div className={clsx(["tn-card", props.className])}>
        {props.children}
    </div>;
}

interface CardSectionProps {
    className?: string;
    subSections?: JSX.Element | JSX.Element[];
    childrenVisible?: boolean;
    hasAction: boolean;
    onAction?: () => void;
}

export function CardSection(props: {children: ComponentChildren} & CardSectionProps) {
    const parentContext = useContext(CardSectionContext);
    const nestingLevel = (parentContext && parentContext.nestingLevel + 1) ?? 0;

    return <>
        <section className={clsx(["tn-card-section", {
                    "tn-card-section-nested": nestingLevel > 0,
                    "tn-action": props?.hasAction}
                 ], props.className)}
                 style={"--tn-card-section-nesting-level: " + nestingLevel}
                 onClick={() => {props.onAction?.()}}>
            {props.children}
        </section>

        {props?.childrenVisible &&
            <CardSectionContext.Provider value={{nestingLevel}}>
                {props.subSections}
            </CardSectionContext.Provider>
        }
    </>;
}

interface CardSectionContextType {
    nestingLevel: number;
}

export const CardSectionContext = createContext<CardSectionContextType | undefined>(undefined);