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 | 3x 3x 9x | import { Row, Col } from "@canonical/react-components";
import { SlicesData } from "../../types";
type Props = {
isLoading: boolean;
slice: SlicesData;
gradient: "blueGreen" | "purplePink";
};
function EditorialSection({ isLoading, slice, gradient }: Props): JSX.Element {
const gradients: Record<string, string> = {
blueGreen: "linear-gradient(45deg, #251755 20%, #69e07c)",
purplePink: "linear-gradient(45deg, #19224d 20%, #c481d1)",
};
return (
<div className="u-fixed-width">
<div
style={{
background: gradient ? gradients[gradient] : gradients["purplePink"],
color: "#fff",
}}
>
{!isLoading && (
<div className="slice-banner">
<Row>
<Col size={6} className="u-vertically-center">
<div>
<h2 className="p-heading--3">{slice.slice.name}</h2>
<p className="p-heading--4">{slice.slice.description}</p>
</div>
</Col>
<Col size={6} className="slice-icons">
{slice.snaps.slice(0, 3).map((snap) => (
<div className="slice-icon" key={snap.name}>
<a href={`/${snap.name}`}>
<img
src={snap.icon}
width={70}
height={70}
alt={snap.title}
title={snap.title}
/>
</a>
</div>
))}
</Col>
</Row>
</div>
)}
</div>
</div>
);
}
export default EditorialSection;
|