61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
import { TempstreamJSX } from "tempstream";
|
|
import type {
|
|
ComponentToHTMLArgs,
|
|
ExtractStructuredComponentArgumentsParsed,
|
|
JDDContext,
|
|
} from "@sealcode/jdd";
|
|
import { Component, ComponentArguments } from "@sealcode/jdd";
|
|
import { button, button_variants } from "src/back/elements/button.js";
|
|
|
|
const component_arguments = {
|
|
color: new ComponentArguments.Enum([
|
|
"text-fg-on-text-bg",
|
|
"text-accent-on-text-bg",
|
|
"text-accent2-on-text-bg",
|
|
"text-on-accent-on-accent",
|
|
"text-on-accent2-on-accent2",
|
|
]),
|
|
title: new ComponentArguments.ShortText(),
|
|
title_color: new ComponentArguments.Enum(["normal", "accent1", "accent2"] as const),
|
|
subtitle: new ComponentArguments.ShortText(),
|
|
content: new ComponentArguments.Markdown(),
|
|
buttons: new ComponentArguments.List(
|
|
new ComponentArguments.Structured({
|
|
text: new ComponentArguments.ShortText(),
|
|
href: new ComponentArguments.ShortText(),
|
|
variant: new ComponentArguments.Enum(button_variants),
|
|
})
|
|
),
|
|
} as const;
|
|
|
|
export class Hero extends Component<typeof component_arguments> {
|
|
getArguments() {
|
|
return component_arguments;
|
|
}
|
|
|
|
getTitle(
|
|
_: JDDContext,
|
|
args: ExtractStructuredComponentArgumentsParsed<typeof component_arguments>
|
|
) {
|
|
return args.title || null;
|
|
}
|
|
|
|
async toHTML({
|
|
args: { title, title_color, subtitle, content, color, buttons },
|
|
classes,
|
|
jdd_context: { render_markdown, language },
|
|
}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
|
|
classes.push(`hero--color-${color}`);
|
|
return (
|
|
<div class={["hero", ...classes]}>
|
|
<h1 class={[`hero__title--color-${title_color}`]}>{title}</h1>
|
|
<span class={["hero__subtitle"]}>{subtitle}</span>
|
|
<div class={["hero__content"]}>{render_markdown(language, content)}</div>
|
|
<div class={["hero__buttons"]}>
|
|
{buttons.map((button_data) => button(button_data))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|