Page MenuHomeSealhub
Files F7189053

faq-component.jdd.tsx
No OneTemporary
Actions

faq-component.jdd.tsx
View Options

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>
);
}
}

File Metadata

Mime Type
text/x-java
Expires
Tue, Jul 8, 08:43 (2 h, 18 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
810507
Default Alt Text
faq-component.jdd.tsx (2 KB)

Event Timeline