mancala/apps/frontend/src/components/home/HomeSection.tsx

import * as React from "react";
import { FunctionComponent } from "react";

// A titled block of the home page; children are laid out as a grid of cards.
const HomeSection: FunctionComponent<{ title: string, subtitle: string, emptyText?: string }> = (props) => {
    const isEmpty = React.Children.count(props.children) === 0;
    return (
        <>
            <div className="sec"><h2>{props.title}</h2><span className="secmeta">{props.subtitle}</span></div>
            {isEmpty && props.emptyText ? <p className="empty">{props.emptyText}</p> : <div className="grid">{props.children}</div>}
        </>
    );
};

export default HomeSection;