MagicBuild/preview-button.jsx at main · MinorityProgrammers/MagicBuild · 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
const cep = "magicbuild.near";
return (
  <>
    <label></label>
    <button
      data-bs-toggle="modal"
      data-bs-target={`#preview-${Date.now()}`}
      class="btn btn-primary form-control "
    >
      👀 Preview
    </button>
    <div
      class="modal fade"
      id={`preview-${Date.now()}`}
      tabindex="-1"
      aria-labelledby="previewLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="previewLabel">
              Preview Front-End
            </h1>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            {props && <Widget src={`${cep}/widget/preview`} props={props} />}
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  </>
);