components#Card JavaScript Examples

The following examples show how to use components#Card. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: summary-box.jsx    From apps with GNU Affero General Public License v3.0 6 votes vote down vote up 
SummaryBox = ({ open, booked, active }) => (
    <Card className="kip-is-fullheight kip-is-fullwidth kip-summary-box" flex>
        <CardHeader>
            <h2>
                <T t={t} k="summary" />
            </h2>
        </CardHeader>
        <CardContent>
            <p className="kip-summary-box-number">
                <span>{formatNumbers(open)}</span>
                <T t={t} k="open" />
            </p>
            <p className="kip-summary-box-number">
                <span>{formatNumbers(booked)}</span>
                <T t={t} k="booked" />
            </p>
            <p className="kip-summary-box-number">
                <span>{formatNumbers(active)}</span>
                <T t={t} k="active" />
            </p>
        </CardContent>
    </Card>
)
Example #2
Source File: stats.jsx    From apps with GNU Affero General Public License v3.0 4 votes vote down vote up 
Stats = () => {
    const mediator = useMediator();
    useEffectOnce(() => {
        const params = {
            filter: { zipCode: null },
            id: 'queues',
            type: 'hour',
            from: todayPlusN(-1).toISOString(),
            to: todayPlusN(1).toISOString(),
        };
        mediator.stats().get(params);
    });

    const renderLoaded = () => {
        const stats = mediator.stats().result();
        const summary = prepareOverallStats(stats);
        let content;
        if (summary.show === 0) {
            content = (
                <div className="bulma-column bulma-is-fullwidth-desktop">
                    <Card size="fullwidth">
                        <Message type="warning">
                            <T t={t} k="noData" />
                        </Message>
                    </Card>
                </div>
            );
        } else {
            content = (
                <React.Fragment>
                    <div className="bulma-column bulma-is-full-desktop">
                        <Card size="fullwidth" flex>
                            <CardContent>
                                <T
                                    key="span"
                                    t={t}
                                    k="dateSpan"
                                    from={
                                        <strong key="s1">
                                            {new Date(
                                                summary.from
                                            ).toLocaleString('en-US', opts)}
                                        </strong>
                                    }
                                    to={
                                        <strong key="s2">
                                            {new Date(
                                                summary.to
                                            ).toLocaleString('en-US', opts)}
                                        </strong>
                                    }
                                />
                            </CardContent>
                        </Card>
                    </div>
                    <div className="bulma-column bulma-is-one-quarter-desktop">
                        <SummaryBox
                            open={summary.open}
                            booked={summary.booked}
                            active={summary.active}
                        />
                    </div>
                    <div className="bulma-column bulma-is-three-quarters-desktop bulma-is-flex">
                        <Card size="fullwidth" flex>
                            <CardHeader>
                                <h2>
                                    <T t={t} k="bookingRate" />
                                </h2>
                            </CardHeader>
                            <CardContent className="kip-cm-overview">
                                <BarChart
                                    hash={stats.hash}
                                    data={prepareHourlyStats(stats)}
                                />
                            </CardContent>
                        </Card>
                    </div>
                </React.Fragment>
            );
        }
        return (
            <CardContent>
                <div className="bulma-columns bulma-is-multiline bulma-is-desktop">
                    {content}
                </div>
            </CardContent>
        );
    };

    return (
        <WithLoader
            resources={[mediator.stats().result()]}
            renderLoaded={renderLoaded}
        />
    );
}