react-responsive-starter/src/components/PromoGrid.js at master · adyngom/react-responsive-starter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import React, { Fragment, useState } from "react";
import { useBreakpoint } from "../Breakpoint/BreakpointState";
import "./PromoGrid.scss";

const PromoGrid = () => {
  const breakpoints = useBreakpoint();
  const initialState = [
    {
      position: 1,
      url: "images/ld-nobadchoice.jpg",
      orientation: "ld"
    },
    {
      position: 2,
      url: "images/2-greenstreet.jpg",
      orientation: "ld",
      desc: ""
    },
    {
      position: 3,
      url: "images/ld-panoramic.jpg",
      orientation: "ld",
      desc: ""
    },
    {
      position: 4,
      url: "images/pt-whitetemple.jpg",
      orientation: "pt",
      desc: ""
    },
    {
      position: 5,
      url: "images/pt-lakebridge.jpg",
      orientation: "pt",
      desc: ""
    },
    {
      position: 6,
      url: "images/ld-roundabout.jpg",
      orientation: "ld",
      desc: ""
    },
    {
      position: 7,
      url: "images/1-boat.jpg",
      orientation: "ld",
      desc: ""
    },
    {
      position: 8,
      url: "images/pt-lifebalance.jpg",
      orientation: "pt",
      desc: ""
    },
    {
      position: 9,
      url: "images/ld-endofroad.jpg",
      orientation: "ld",
      desc: ""
    },
    {
      position: 10,
      url: "images/ld-spiralout.jpg",
      orientation: "ld",
      desc: ""
    },
    {
      position: 11,
      url: "images/ld-camelride.jpg",
      orientation: "ld",
      desc: ""
    }
  ];

  const [gridImages, setGridImages] = useState(initialState);
  return (
    <Fragment>
      <div className={`promo-grid ${breakpoints}`}>
        {gridImages.map(Image => (
          <article
            key={Image.position}
            className={`fig-${Image.position}`}
            style={{
              background: `url(${Image.url})`,
              backgroundSize: "cover"
            }}
          ></article>
        ))}
      </div>
    </Fragment>
  );
};

export default PromoGrid;