{"size": 1039, "ext": "js", "max_stars_repo_path": "lib/components/editors/section/partials/SectionLayoutPreview.js", "max_stars_repo_name": "kartik-rao/lib-forms", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "lib/components/editors/section/partials/SectionLayoutPreview.js", "max_issues_repo_name": "kartik-rao/lib-forms", "max_issues_repo_issues_event_min_datetime": "2022-02-19T05:44:10.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T09:08:49.000Z", "max_forks_repo_path": "lib/components/editors/section/partials/SectionLayoutPreview.js", "max_forks_repo_name": "kartik-rao/lib-forms", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 2, "max_forks_count": null, "avg_line_length": 54.6842105263, "max_line_length": 153, "alphanum_fraction": 0.5149181906}
import * as React from "react";
import { Card, Row, Col } from "antd";
import { useObserver } from 'mobx-react';
const colors = ['rgba(0,160,233,0.6)', 'rgba(0,120,200,0.8)'];
export const SectionLayoutPreview = (props) => {
    return useObserver(() => {
        return React.createElement(Card, { title: "Preview", size: "small", bordered: false },
            React.createElement(Row, { className: "fl-layout-demo-row", gutter: props.gutter }, Object.keys(props.colspans).map((key, index) => {
                return React.createElement(Col, { key: key, span: props.colspans[key] },
                    React.createElement("div", { style: { minHeight: '50px', padding: '5px 10px', background: index % 2 == 0 ? colors[0] : colors[1] } },
                        React.createElement("strong", { style: { color: 'white' } },
                            index + 1,
                            " - ",
                            (100 * (props.colspans[key]) / 24).toFixed(2),
                            "%")));
            })));
    });
};
