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 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 | 1x 4x 4x 4x 4x 4x 4x 4x 4x 4x 56x | import { useState } from "react";
import { useParams } from "react-router-dom";
import { Row, Col, Select } from "@canonical/react-components";
const LANGUAGES = {
ar: { title: "العربية", text: "احصل عليه من Snap Store" },
bg: { title: "български", text: "Инсталирайте го от Snap Store" },
bn: { title: "বাংলা", text: "থেকে ইনস্টল করুন" },
de: { title: "Deutsch", text: "Installieren vom Snap Store" },
en: { title: "English", text: "Get it from the Snap Store" },
es: { title: "Español", text: "Instalar desde Snap Store" },
fr: { title: "Français", text: "Installer à partir du Snap Store" },
it: { title: "Italiano", text: "Scarica dallo Snap Store" },
jp: { title: "日本語", text: "Snap Store から入手ください" },
pl: { title: "Polski", text: "Pobierz w Snap Store" },
pt: { title: "Português", text: "Disponível na Snap Store" },
ro: { title: "Română", text: "Instalează din Snap Store" },
ru: { title: "русский язык", text: "Загрузите из Snap Store" },
tw: { title: "中文（台灣）", text: "安裝軟體敬請移駕 Snap Store" },
};
type LanguageKey = keyof typeof LANGUAGES;
function PubliciseButtons(): React.JSX.Element {
const { snapId } = useParams();
const [selectedLanguage, setSelectedLanguage] = useState<LanguageKey>("en");
const darkBadgeSource = `https://snapcraft.io/${selectedLanguage}/dark/install.svg`;
const lightBadgeSource = `https://snapcraft.io/${selectedLanguage}/light/install.svg`;
const htmlSnippetBlack = `<a href="https://snapcraft.io/${snapId}">
<img alt="${LANGUAGES[selectedLanguage].text}" src=${darkBadgeSource} />
</a>`;
const htmlSnippetWhite = `<a href="https://snapcraft.io/${snapId}">
<img alt="${LANGUAGES[selectedLanguage].text}" src=${lightBadgeSource} />
</a>`;
const markdownSnippetBlack = `[![${LANGUAGES[selectedLanguage].text}](${darkBadgeSource})](https://snapcraft.io/${snapId})`;
const markdownSnippetWhite = `[![${LANGUAGES[selectedLanguage].text}](${lightBadgeSource})](https://snapcraft.io/${snapId})`;
return (
<>
<Row>
<Col size={2}>
<p>Language:</p>
</Col>
<Col size={10}>
<Select
defaultValue={selectedLanguage}
options={Object.entries(LANGUAGES).map((lang) => {
return {
label: lang[1].title,
value: lang[0],
};
})}
onChange={(e) => {
setSelectedLanguage(e.target.value as LanguageKey);
}}
style={{ maxWidth: "180px" }}
/>
<p>
You can help translate these buttons{" "}
<a href="https://github.com/snapcore/snap-store-badges">
in this repository
</a>
.
</p>
</Col>
</Row>
<hr />
<Row>
<Col size={10}>
<p>
<img
src={darkBadgeSource}
alt="Get it from the Snap Store"
width="182"
height="56"
/>
</p>
</Col>
</Row>
<Row>
<Col size={2}>
<p>HTML:</p>
</Col>
<Col size={10}>
<div className="p-code-snippet">
<pre className="p-code-snippet__block">{htmlSnippetBlack}</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">
{markdownSnippetBlack}
</pre>
</div>
</Col>
</Row>
<hr />
<Row>
<Col size={10}>
<p>
<img
src={lightBadgeSource}
alt="Get it from the Snap Store"
width="182"
height="56"
/>
</p>
</Col>
</Row>
<Row>
<Col size={2}>
<p>HTML:</p>
</Col>
<Col size={10}>
<div className="p-code-snippet">
<pre className="p-code-snippet__block">{htmlSnippetWhite}</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">
{markdownSnippetWhite}
</pre>
</div>
</Col>
</Row>
<hr />
<Row>
<Col size={2}>
<p>Download all:</p>
</Col>
<Col size={10}>
<a
className="p-button"
href="https://github.com/snapcore/snap-store-badges/archive/v1.4.2.zip"
>
zip
</a>
<a
className="p-button"
href="https://github.com/snapcore/snap-store-badges/archive/v1.4.2.tar.gz"
>
tar.gz
</a>
<a href="https://raw.githubusercontent.com/snapcore/snap-store-badges/master/LICENSE.md">
View image licence
</a>
</Col>
</Row>
</>
);
}
export default PubliciseButtons;
|