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 | 6x 6x 6x 6x 6x 6x | import { NavLink, useParams, useLocation } from "react-router-dom";
import { Row, Col } from "@canonical/react-components";
import PubliciseBadges from "./PubliciseBadges";
import PubliciseButtons from "./PubliciseButtons";
import PubliciseCards from "./PubliciseCards";
function Publicise() {
const { packageName } = useParams();
const location = useLocation();
const showButtons = location.pathname === `/${packageName}/publicise`;
const showBadges = location.pathname === `/${packageName}/publicise/badges`;
const showCards = location.pathname === `/${packageName}/publicise/cards`;
return (
<Row>
<Col size={3}>
<div className="p-side-navigation " id="drawer">
<a
href="#drawer"
className="p-side-navigation__toggle"
aria-controls="drawer"
>
Toggle side navigation
</a>
<div
className="p-side-navigation__overlay"
aria-controls="drawer"
></div>
<nav className="p-side-navigation__drawer">
<div className="p-side-navigation__drawer-header" id="drawer">
<a
href="#drawer"
className="p-side-navigation__toggle--in-drawer"
aria-controls="drawer"
>
Toggle side navigation
</a>
</div>
<ul className="p-side-navigation__list">
<li className="p-side-navigation__item">
<NavLink
end
to={`/${packageName}/publicise`}
className="p-side-navigation__link"
>
Charmhub buttons
</NavLink>
</li>
<li className="p-side-navigation__item">
<NavLink
end
to={`/${packageName}/publicise/badges`}
className="p-side-navigation__link"
>
GitHub badges
</NavLink>
</li>
<li className="p-side-navigation__item">
<NavLink
end
to={`/${packageName}/publicise/cards`}
className="p-side-navigation__link"
>
Embeddable cards
</NavLink>
</li>
</ul>
</nav>
</div>
</Col>
<Col size={9}>
{showButtons && <PubliciseButtons />}
{showBadges && <PubliciseBadges />}
{showCards && <PubliciseCards />}
</Col>
</Row>
);
}
export default Publicise;
|