Halit Aksoy
9619825605
The game in progress comes first with a large mini board; live, popular and recent games are grids of cards with the score, a mini board and a status pill. Live and popular games are shown together; live games are hidden while nothing is being played.
16 lines
646 B
TypeScript
16 lines
646 B
TypeScript
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;
|