56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import { TempstreamJSX } from "tempstream";
|
|
import type {
|
|
ComponentToHTMLArgs,
|
|
ExtractStructuredComponentArgumentsParsed,
|
|
JDDContext,
|
|
} from "@sealcode/jdd";
|
|
import { Component, ComponentArguments } from "@sealcode/jdd";
|
|
|
|
const component_arguments = {
|
|
title: new ComponentArguments.ShortText(),
|
|
level: new ComponentArguments.Enum(["1", "2", "3", "4", "5", "6"]).setExampleValues([
|
|
"2",
|
|
]),
|
|
blur_backdrop: new ComponentArguments.Enum(["true", "false"]),
|
|
font_family: new ComponentArguments.Enum([
|
|
"industrial",
|
|
"sans-serif",
|
|
"serif",
|
|
"slab-serif",
|
|
"headings",
|
|
]),
|
|
} as const;
|
|
|
|
export class HeadingWithEcho extends Component<typeof component_arguments> {
|
|
getArguments() {
|
|
return component_arguments;
|
|
}
|
|
|
|
getTitle(
|
|
_: JDDContext,
|
|
args: ExtractStructuredComponentArgumentsParsed<typeof component_arguments>
|
|
) {
|
|
return args.title || null;
|
|
}
|
|
|
|
async toHTML({
|
|
args: { title, level, font_family, blur_backdrop },
|
|
classes,
|
|
}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
|
|
return (
|
|
<div
|
|
class={[
|
|
"heading-with-echo",
|
|
...classes,
|
|
{ "heading-with-echo--blur": blur_backdrop == "true" },
|
|
]}
|
|
style={`font-family: var(--font-${font_family});`}
|
|
>
|
|
{`<h${level} class="fancy-heading__shadow1">${title}</h${level}>`}
|
|
{`<h${level} class="fancy-heading__shadow2">${title}</h${level}>`}
|
|
{`<h${level} class="fancy-heading__main">${title}</h${level}>`}
|
|
</div>
|
|
);
|
|
}
|
|
}
|