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

import * as React from "react";
import { FunctionComponent } from "react";
import { getColorByBrightness } from "@mancala/core";
import { Context } from "../../context/context";

// A titled block of the home page; children are laid out as wrapping cards.
const HomeSection: FunctionComponent<{ context: Context, title: string, emptyText?: string }> = (props) => {
    const theme = props.context.themeManager.theme;
    const textColor = getColorByBrightness(theme.background, theme.textColor, theme.textLightColor);
    const isEmpty = React.Children.count(props.children) === 0;
    return (
        <section style={{ color: textColor }}>
            <h3>{props.title}</h3>
            {isEmpty && props.emptyText ? <p className="empty">{props.emptyText}</p> : <div className="cards">{props.children}</div>}
            <style jsx>{`
                section {
                    width: 100%;
                    max-width: 900px;
                    padding: 0 16px;
                    box-sizing: border-box;
                }
                h3 {
                    margin: 24px 0 12px;
                }
                .cards {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 16px;
                    justify-content: flex-start;
                }
                .empty {
                    opacity: 0.7;
                    margin: 0;
                }
                @media (max-width: 600px) {
                    .cards {
                        justify-content: center;
                    }
                }
            `}</style>
        </section>
    );
};

export default HomeSection;