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 | 3x 4x 4x | import { Strip, Row, Col } from "@canonical/react-components";
import type { InterfaceData } from "../../types";
type Props = {
interfaceData: InterfaceData;
isCommunity: boolean;
};
function RequiringCharms({ interfaceData, isCommunity }: Props) {
return (
<Strip shallow>
<h3 className="p-heading--4">Requiring {interfaceData?.name}</h3>
{!!interfaceData?.charms?.requirers?.length && (
<>
<h4 className="p-muted-heading">Featured charms</h4>
<Row className="u-no-padding--left u-no-padding--right">
{interfaceData?.charms?.requirers.map((requirer) => (
<Col size={3} key={requirer.name}>
<div className="p-card--highlighted">
<iframe
className="u-no-margin--bottom"
height={170}
style={{ width: "100%" }}
src={`/${requirer.name}/embedded/interface`}
title={`Interface for ${requirer.name}`}
/>
</div>
</Col>
))}
</Row>
</>
)}
{interfaceData?.other_charms?.requirers &&
interfaceData?.other_charms?.requirers.length > 0 && (
<>
{!!interfaceData?.charms?.requirers?.length && (
<h4 className="p-muted-heading">Other charms</h4>
)}
<ul className="p-list u-split--3">
{interfaceData?.other_charms?.requirers.map((charm) => (
<li key={charm.id}>
<a href={`/${charm?.name}`}>{charm?.name}</a>
</li>
))}
</ul>
</>
)}
{!isCommunity && (
<p>
<a href="https://discourse.charmhub.io/t/getting-started-with-charm-testing/6894">
How to test a charm
</a>
</p>
)}
</Strip>
);
}
export default RequiringCharms;
|