import { Grid, Cell } from './index.jsx';
import { config } from 'react-spring/renderprops';

let data = [
    {
      name: '红酒',
      description: '红酒🍷: 提到红酒，第一个浮现在脑海里面的国家就是法国了',
      css: 'linear-gradient(to top, #a8edea 0%, #fed6e3 100%)',
      height: 100,
    },
    {
      name: '滑雪🏂',
      description: '挪威🇳🇴一年四季都是雪❄️',
      css: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
      height: 200,
      background: 'https://file.ourfor.top/album/%e8%91%a1%e8%90%84%e6%9f%9a4K%e6%b0%b4%e6%9e%9c%e5%9b%be%e7%89%87_%e5%bd%bc%e5%b2%b8%e5%9b%be%e7%bd%91.jpg'
    },
    {
      name: "空间",
      description: '红酒🍷: 提到红酒，第一个浮现在脑海里面的国家就是法国了',
      css: 'linear-gradient(to top, #a8edea 0%, #fed6e3 100%)',
      height: 200,
    },
    {
      name: '滑雪1🏂',
      description: '挪威🇳🇴一年四季都是雪❄️',
      css: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
      height: 200,
    },
    {
      name: '红酒1',
      description: '红酒🍷: 提到红酒，第一个浮现在脑海里面的国家就是法国了',
      css: 'linear-gradient(to top, #a8edea 0%, #fed6e3 100%)',
      height: 300,
    },
    {
      name: '滑雪2🏂',
      description: '挪威🇳🇴一年四季都是雪❄️',
      css: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
      height: 200,
    },
];

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            data: [...data]
        }
    }
    render() {
        return (
            <Grid
            className="grid"
            data={this.state.data}
            keys={d => d.name}
            heights={d => d.height}
            columns={2}
            margin={30}
            lockScroll={false}
            closeDelay={500}
            config={config.slow}>
            {(data, active, toggle) => (
              <Cell {...data} active={active} toggle={toggle} />
            )}
          </Grid>
        );
    }
}

export default App;