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 | 20x 20x 20x 20x 20x 20x 20x 19x 20x 19x 20x 19x 20x 19x 20x 20x 1x 1x 1x 1x 1x | import { useState } from "react";
import { useParams } from "react-router-dom";
import { Row, Col } from "@canonical/react-components";
function PubliciseCards() {
const { packageName } = useParams();
const [buttonStyle, setButtonStyle] = useState<string>("black");
const [showChannels, setShowChannels] = useState<boolean>(true);
const [showSummary, setShowSummary] = useState<boolean>(true);
const [showBase, setShowBase] = useState<boolean>(true);
const urlParameters: {
button?: string;
channels?: string;
summary?: string;
base?: string;
} = {};
if (buttonStyle === "black" || buttonStyle === "white") {
urlParameters.button = buttonStyle;
}
if (showChannels) {
urlParameters.channels = "true";
}
if (showSummary) {
urlParameters.summary = "true";
}
if (showBase) {
urlParameters.base = "true";
}
const urlQuery = new URLSearchParams(urlParameters);
return (
<>
<h2 className="p-heading--4">
Promote your charm using embeddable responsive card
</h2>
<Row>
<Col size={2}>
<p className="u-no-margin--bottom">Charmhub button style:</p>
</Col>
<Col size={7}>
<input
type="radio"
name="charmhub-button"
id="charmhub-button-dark"
value="black"
checked={buttonStyle === "black"}
onChange={() => {
setButtonStyle("black");
}}
/>{" "}
<label htmlFor="charmhub-button-dark">Dark</label>{" "}
<input
type="radio"
name="charmhub-button"
id="charmhub-button-light"
value="white"
checked={buttonStyle === "white"}
onChange={() => {
setButtonStyle("white");
}}
/>{" "}
<label htmlFor="charmhub-button-light">Light</label>{" "}
<input
type="radio"
name="charmhub-button"
id="charmhub-button-hide"
value=""
checked={buttonStyle === "hidden"}
onChange={() => {
setButtonStyle("hidden");
}}
/>{" "}
<label htmlFor="charmhub-button-hide">Hide button</label>
</Col>
</Row>
<Row>
<Col size={2}>Options:</Col>
<Col size={7}>
<input
type="checkbox"
name="show-channels"
id="option-show-channels"
checked={showChannels}
onChange={(e) => {
setShowChannels(e.target.checked);
}}
/>{" "}
<label htmlFor="option-show-channels">All channels</label>{" "}
<input
type="checkbox"
name="show-summary"
id="option-show-summary"
checked={showSummary}
onChange={(e) => {
setShowSummary(e.target.checked);
}}
/>{" "}
<label htmlFor="option-show-summary">Show summary</label>{" "}
<input
type="checkbox"
name="show-base"
id="option-show-base"
checked={showBase}
onChange={(e) => {
setShowBase(e.target.checked);
}}
/>{" "}
<label htmlFor="option-show-base">Show runs on</label>
</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 data-js="snippet-card-html"><iframe src="https://charmhub.io/{packageName}/embedded?{urlQuery.toString()}" frameborder="0" width="100%" height="500px" style="border: 1px solid #CCC; border-radius: 2px;"></iframe></code></pre>
</div>
</Col>
</Row>
<Row>
<Col size={2}>
<p>Preview:</p>
</Col>
<Col size={7}>
<iframe
title={`${packageName} embeddable card`}
src={`/${packageName}/embedded?${urlQuery.toString()}`}
width="100%"
height="500px"
style={{ border: "1px solid #ccc", borderRadius: "2px" }}
></iframe>
</Col>
</Row>
</>
);
}
export default PubliciseCards;
|