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 | 6x 30x | import { Row, Col, Strip } from "@canonical/react-components";
import CardsLoader from "./CardsLoader";
import type { RecommendationData } from "../../types";
type Props = {
isLoading: boolean;
snaps: RecommendationData[];
title: string;
};
function ListSection({ isLoading, snaps, title }: Props): JSX.Element {
return (
<>
<div className="u-fixed-width">
<h2>{title}</h2>
</div>
{isLoading && <CardsLoader />}
{!isLoading && (
<Strip shallow className="u-no-padding--bottom">
<Row>
{snaps.map((item: RecommendationData, index: number) => (
<Col
size={3}
key={item.details.snap_id}
style={{ marginBottom: "1.5rem" }}
>
<p
className="p-heading--4"
style={{ float: "left", marginRight: "1rem" }}
>
{index + 1}
</p>
<div className="p-media-object">
<a href={`/${item.details.name}`}>
<img
className="p-media-object__image"
src={item.details.icon}
alt={item.details.title}
/>
</a>
<div
className="p-media-object__details"
style={{ minWidth: "0" }}
>
<h3
className="p-media-object__title u-truncate"
title={item.details.title}
>
<a href={`/${item.details.name}`}>{item.details.title}</a>
</h3>
<p className="u-text--muted">
<em>{item.details.publisher}</em>
{item.details.developer_validation === "verified" ? (
<>
{" "}
<img
src="https://assets.ubuntu.com/v1/ba8a4b7b-Verified.svg"
width="14"
height="14"
alt="Verified account"
title="Verified account"
className="sc-package-publisher-icon"
/>
</>
) : null}
</p>
</div>
</div>
</Col>
))}
</Row>
</Strip>
)}
</>
);
}
export default ListSection;
|