Kuba Orlik
9147982a83
Summary: Ref T2930 Reviewers: #testers Subscribers: kuba-orlik, jenkins-user Maniphest Tasks: T2930 Differential Revision: https://hub.sealcode.org/D1488
53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import type { FlatTemplatable } from "tempstream";
|
|
import { TempstreamJSX } from "tempstream";
|
|
import type { ComponentToHTMLArgs } from "@sealcode/jdd";
|
|
import { Component, ComponentArguments } from "@sealcode/jdd";
|
|
|
|
const component_arguments = {
|
|
title: new ComponentArguments.ShortText(),
|
|
small_title: new ComponentArguments.ShortText(),
|
|
description: new ComponentArguments.Markdown(),
|
|
img_side: new ComponentArguments.Enum(["right", "left"]),
|
|
image_path: new ComponentArguments.Structured({
|
|
image_path: new ComponentArguments.Image(),
|
|
alt: new ComponentArguments.ShortText(),
|
|
}),
|
|
} as const;
|
|
|
|
export class TextImageBlock extends Component<typeof component_arguments> {
|
|
getArguments() {
|
|
return component_arguments;
|
|
}
|
|
|
|
toHTML({
|
|
args: { title, small_title, description, image_path, img_side },
|
|
jdd_context: { render_markdown, render_image, language },
|
|
}: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable {
|
|
return (
|
|
<section class="tib">
|
|
<div class={`tib__body tib__body--image-on-${img_side}`}>
|
|
<article class="tib__body-left">
|
|
<h2>{title}</h2>
|
|
<h3>{small_title}</h3>
|
|
<p>{render_markdown(language, description)}</p>
|
|
</article>
|
|
<div class="tib__body-right">
|
|
{render_image(image_path.image_path, {
|
|
container: {
|
|
width: 640,
|
|
height: 360,
|
|
objectFit: "cover",
|
|
},
|
|
crop: {
|
|
width: 640,
|
|
height: 360,
|
|
},
|
|
alt: image_path.alt,
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
}
|