Publicise PubliciseBadges.tsx

100% Statements 3/3
100% Branches 0/0
100% Functions 1/1
100% Lines 3/3
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  
 
 
 
 
 
 
5x
5x
 
5x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useParams } from "react-router-dom";
import { useRecoilValue } from "recoil";
import { Row, Col } from "@canonical/react-components";
 
import { packageDataState } from "../../state/atoms";
 
function PubliciseBadges() {
  const { packageName } = useParams();
  const packageData = useRecoilValue(packageDataState);
 
  return (
    <>
      <h2 className="p-heading--4">
        Promote your charm using an embeddable GitHub badge
      </h2>
      <Row>
        <Col size={7} className="col-start-large-3">
          <p>
            <a href={`/${packageName}`}>
              <img
                src={`/${packageName}/badge.svg`}
                alt={`${packageName} GitHub badge`}
              />
            </a>
          </p>
        </Col>
      </Row>
      <Row>
        <Col size={2}>
          <p>HTML:</p>
        </Col>
        <Col size={7}>
          <div className="p-code-snippet">
            {/* prettier-ignore */}
            <pre className="p-code-snippet__block is-wrapped"><code>{`<a href="https://charmhub.io/${packageName}">
    <img alt="" src="https://charmhub.io/${packageName}/badge.svg" />
</a>`}</code></pre>
          </div>
        </Col>
      </Row>
      <Row>
        <Col size={2}>
          <p>Markdown:</p>
        </Col>
        <Col size={7}>
          <div className="p-code-snippet">
            {/* prettier-ignore */}
            <pre className="p-code-snippet__block is-wrapped"><code>{`[![${packageData?.title}](https://charmhub.io/${packageName}/badge.svg)](https://charmhub.io/${packageName})`}</code></pre>
          </div>
        </Col>
      </Row>
    </>
  );
}
 
export default PubliciseBadges;