69 lines
2.0 KiB
TypeScript
69 lines
2.0 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(),
|
|
content: new ComponentArguments.Structured({
|
|
text: new ComponentArguments.Markdown(),
|
|
number: new ComponentArguments.ShortText().setExampleValues(["000-000-000"]),
|
|
}),
|
|
faq: new ComponentArguments.List(
|
|
new ComponentArguments.Structured({
|
|
question: new ComponentArguments.ShortText(),
|
|
answer: new ComponentArguments.Markdown(),
|
|
})
|
|
),
|
|
button: new ComponentArguments.Structured({
|
|
buttonText: new ComponentArguments.ShortText().setExampleValues([""]),
|
|
buttonLink: new ComponentArguments.ShortText().setExampleValues([""]),
|
|
}),
|
|
} as const;
|
|
|
|
export class FaqComponent extends Component<typeof component_arguments> {
|
|
getArguments() {
|
|
return component_arguments;
|
|
}
|
|
|
|
toHTML({
|
|
args: { title, content, faq, button },
|
|
jdd_context: { render_markdown, language },
|
|
}: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable {
|
|
const buttonText = button.buttonText.toUpperCase();
|
|
|
|
return (
|
|
<div class="faq-component">
|
|
<div class="container">
|
|
<div class="title-container">
|
|
<div class="title">{title} </div>
|
|
<div class="content">
|
|
{render_markdown(language, content.text)}{" "}
|
|
<strong>{content.number}</strong>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="faq-container">
|
|
{faq.map((element, index) => (
|
|
<details class="question-container" open={index == 0}>
|
|
<summary class="question">{element.question}</summary>
|
|
<div class="answer">
|
|
<p>{render_markdown(language, element.answer)}</p>
|
|
</div>
|
|
</details>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div class="button-container">
|
|
{button.buttonText === "" ? null : (
|
|
<a class="button" href={button.buttonLink}>
|
|
{buttonText}
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|