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 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 | 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { useState, SyntheticEvent } from "react";
import { useParams } from "react-router-dom";
import {
Row,
Col,
CheckboxInput,
Notification,
} from "@canonical/react-components";
type Props = {
trending: boolean;
};
function PubliciseBadges({ trending }: Props): React.JSX.Element {
const { snapId } = useParams();
const [showStableChannelBadge, setShowStableChannelBadge] =
useState<boolean>(true);
const [showTrendingStatusBadge, setShowTrendingStatusBadge] =
useState<boolean>(false);
const showPreview: boolean =
showStableChannelBadge || showTrendingStatusBadge;
const htmlSnippetStable = `<a href="https://snapcraft.io/${snapId}">
<img alt="${snapId}" src="https://snapcraft.io/${snapId}/badge.svg" />
</a>`;
const htmlSnippetTrending = `<a href="https://snapcraft.io/${snapId}">
<img alt="${snapId}" src="https://snapcraft.io/${snapId}/trending.svg?name=0" />
</a>`;
const markdownSnippetStable = `[](https://snapcraft.io/${snapId})`;
const markdownSnippetTrending = `[](https://snapcraft.io/${snapId})`;
return (
<>
<Row>
<Col size={2}>
<p>Display:</p>
</Col>
<Col size={10}>
<CheckboxInput
label="Stable channel from default track"
checked={showStableChannelBadge}
onChange={(
e: SyntheticEvent<HTMLInputElement> & {
target: HTMLInputElement;
},
) => {
setShowStableChannelBadge(e.target.checked);
}}
/>
<CheckboxInput
label="Trending status"
labelClassName="u-no-margin--bottom"
checked={showTrendingStatusBadge}
onChange={(
e: SyntheticEvent<HTMLInputElement> & {
target: HTMLInputElement;
},
) => {
setShowTrendingStatusBadge(e.target.checked);
}}
/>
<p style={{ paddingLeft: "2rem" }}>
<small className="u-text-muted">
Badge will only display when your snap is flagged as trending
</small>
</p>
{!showStableChannelBadge && !showTrendingStatusBadge && (
<p>
<em>
Please select at least one badge to display from the list above
</em>
</p>
)}
</Col>
</Row>
{showPreview && (
<>
<Row>
<Col size={2}>
<p>Preview:</p>
</Col>
<Col size={10}>
<p>
{showStableChannelBadge && (
<a href={`/${snapId}`}>
<img src={`/${snapId}/badge.svg`} alt={snapId} />
</a>
)}{" "}
{showTrendingStatusBadge && (
<a href={`/${snapId}`}>
<img
src={`/${snapId}/trending.svg?name=0&preview=1`}
alt={snapId}
/>
</a>
)}
</p>
{!trending && showTrendingStatusBadge && (
<Notification severity="information" title="Trending badge">
Your snap is not currently flagged as trending. Only when your
snap becomes trending will the trending badge appear on
external sites.
</Notification>
)}
</Col>
</Row>
<Row>
<Col size={2}>
<p>HTML:</p>
</Col>
<Col size={10}>
<div className="p-code-snippet">
<pre className="p-code-snippet__block">
{showStableChannelBadge && htmlSnippetStable}
<br />
{showTrendingStatusBadge && htmlSnippetTrending}
</pre>
</div>
</Col>
</Row>
<Row>
<Col size={2}>
<p>Markdown:</p>
</Col>
<Col size={10}>
<div className="p-code-snippet">
<pre className="p-code-snippet__block is-wrapped">
{showStableChannelBadge && markdownSnippetStable}
<br />
{showTrendingStatusBadge && markdownSnippetTrending}
</pre>
</div>
</Col>
</Row>
</>
)}
</>
);
}
export default PubliciseBadges;
|