Page MenuHomeSealhub
Files F969914

header-with-image.jdd.tsx
No OneTemporary
Actions

header-with-image.jdd.tsx
View Options

import type { FlatTemplatable } from "tempstream";
import { TempstreamJSX } from "tempstream";
import type {
ExtractStructuredComponentArgumentsParsed,
JDDContext,
} from "@sealcode/jdd";
import { Component, ComponentArguments } from "@sealcode/jdd";
const component_arguments = {
title: new ComponentArguments.ShortText(),
content: new ComponentArguments.Markdown(),
image_with_alt: new ComponentArguments.Structured({
image: new ComponentArguments.Image(),
alt: new ComponentArguments.ShortText(),
}),
button: new ComponentArguments.Structured({
text: new ComponentArguments.ShortText().setExampleValues([""]),
link: new ComponentArguments.ShortText().setExampleValues([""]),
}),
} as const;
export class HeaderWithImage extends Component<typeof component_arguments> {
getArguments() {
return component_arguments;
}
toHTML(
{
title,
content,
image_with_alt,
button,
}: ExtractStructuredComponentArgumentsParsed<typeof component_arguments>,
{ render_markdown, render_image }: JDDContext
): FlatTemplatable {
const buttonText = button.text.toUpperCase();
const titleUpperCase = title.toUpperCase();
return (
<div class="header-with-image">
<div class="container">
<div class="img-container">
{render_image(image_with_alt.image, {
container: { width: 600, height: 450, objectFit: "contain" },
alt: image_with_alt.alt,
// crop: { width: 600, height: 450 },
})}
</div>
<div class="title-wrapper">
<h2 class="title">{titleUpperCase}</h2>
</div>
<div class="content">{render_markdown(content)}</div>
{button.text === "" ? null : (
<div class="button-container">
<a class="button" href={button.link}>
{buttonText}
</a>
</div>
)}
</div>
</div>
);
}
}

File Metadata

Mime Type
text/x-java
Expires
Sun, Nov 24, 02:30 (16 h, 56 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
548106
Default Alt Text
header-with-image.jdd.tsx (1 KB)

Event Timeline