layer5/src/reusecore/Blockquote/Blockquote-image/index.js at b492e68436eff70d30c45120d0a7c5b90c388a66 · layer5io/layer5 · 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
import React from "react";
import CustomersWrapper from "./blockquote-image.style";

const Customers = (props) => {
  return (
    <CustomersWrapper>

      {props.type === "1" ?

        <section className="bq-section">
          <div className="type-one-wrapper type-one-wrapper-boxed">
            <div className="bq-quote type-one-quote">
              <div className="type-one-quote-userpic"><img src={props.image} alt={props.person} loading="lazy"></img></div>
              <div className="type-one-quote-qmark">
                &#10077;
              </div>
              <div className="type-one-quote-pattern">
              </div>
              <div className="type-one-quote-base">
                <blockquote className="type-one-text">
                  {props.quote}
                </blockquote>
                <div className="type-one-quote-meta">
                  <div className="type-one-meta-info">
                    <div className="type-one-author"><cite>{props.person ? props.person : ""}</cite></div>
                    <div className="type-one-source"><span>{props.title ? props.title : ""}</span></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        :
        props.type === "2" ?
          <section className="bq-section">
            <div className="type-one-wrapper type-one-wrapper-boxed">
              <div className="bq-quote type-two-quote">
                <div className="type-two-quote-pattern">
                  <div className="type-two-quote-qmark">
                    &#10077;
                  </div>
                </div>

                <div className="type-two-quote-userpic"><img src={props.image} alt={props.person} loading="lazy"></img></div>

                <div className="type-two-quote-base">
                  <blockquote className="type-two-quote-text">
                    {props.quote}
                  </blockquote>
                  <div className="type-two-quote-meta">
                    <div className="type-two-quote-meta-info">
                      <div className="type-two-quote-author"><cite>{props.person ? props.person : ""}</cite></div>
                      <div className="type-two-quote-source"><span>{props.title ? props.title : ""}</span></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          :
          <section className="bq-section">
            <div className="type-one-wrapper type-one-wrapper-boxed">
              <div className="bq-quote type-three-quote">

                <div className="type-three-quote-qmark">
                &#10078;
                </div>

                <div className="type-three-quote-base">
                  <blockquote className="type-three-quote-text">
                    {props.quote}
                  </blockquote>
                  <div className="type-three-quote-meta">
                    <div className="type-three-quote-userpic"><img src={props.image} alt={props.person} loading="lazy"></img></div>
                    <div className="type-three-quote-meta-info">
                      <div className="type-three-quote-author"><cite>{props.person ? props.person : ""}</cite></div>
                      <div className="type-three-quote-source"><span>{props.title ? props.title : ""}</span></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
      }

    </CustomersWrapper>
  );
};

export default React.memo(Customers);