import React from "react";
import GridLayout from "react-grid-layout";
import { Card } from "antd";

//Combination of the following:
// /node_modules/react-grid-layout/css/styles.css
// /node_modules/react-resizable/css/styles.css
import "./dashboard-grid.styles.css";

export default function DashboardGridComponent() {
  const layout = [
    { i: "a", x: 0, y: 0, w: 1, h: 2, static: true },
    { i: "b", x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 },
    { i: "c", x: 4, y: 0, w: 1, h: 2 }
  ];
  return (
    <div>
      The Grid.
      <GridLayout
        className="layout"
        layout={layout}
        cols={12}
        rowHeight={30}
        width={1200}
        onLayoutChange={layout => {
          console.log(layout);
        }}
      >
        <Card key="a">a</Card>
        <Card key="b">b</Card>
        <Card key="c">c</Card>
      </GridLayout>
    </div>
  );
}
