WordCloud index.tsx

0% Statements 0/0
0% Branches 0/0
0% Functions 0/0
0% Lines 0/0
Press n or j to go to the next uncovered block, b, p or k for the previous block.

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, { useState } from "react";
 
import * as style from "./index.module.scss";
 
const placeHolder =
  "data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7";
 
const LARGE_IMAGE_URL =
  "https://raw.githubusercontent.com/tubone24/auto_tweet_wordcloud/master/word_cloud_blog_large.png";
 
const WordCloud = () => {
  const [open, setOpen] = useState(false);
 
  return (
    <div className={style.wordcloud}>
      <p>
        <span className="icon-cloud" />
        &nbsp;WordCloud
      </p>
      <a
        href="#"
        role="button"
        onClick={(e) => {
          e.preventDefault();
          setOpen(true);
        }}
      >
        <picture>
          <source
            className="lozad"
            media="(min-width: 992px)"
            srcSet={placeHolder}
            data-srcset="https://raw.githubusercontent.com/tubone24/auto_tweet_wordcloud/master/word_cloud_blog.webp"
            type="image/webp"
          />
          <source
            className="lozad"
            media="(max-width: 991px)"
            srcSet={placeHolder}
            type="image/gif"
          />
          <img
            className="lozad"
            src={placeHolder}
            data-src="https://raw.githubusercontent.com/tubone24/auto_tweet_wordcloud/master/word_cloud_blog.png"
            alt="wordCloud"
            title="wordCloud"
          />
        </picture>
      </a>
      {open && (
        <div className={style.lightbox} onClick={() => setOpen(false)}>
          <div
            className={style.lightboxContent}
            onClick={(e) => e.stopPropagation()}
          >
            <button
              className={style.lightboxClose}
              onClick={() => setOpen(false)}
              aria-label="Close"
            >
              &times;
            </button>
            <img src={LARGE_IMAGE_URL} alt="WordCloud" />
          </div>
        </div>
      )}
    </div>
  );
};
 
export default WordCloud;