46 lines
1.1 KiB
TypeScript

import { TempstreamJSX } from "tempstream";
import type {
ComponentToHTMLArgs,
ExtractStructuredComponentArgumentsParsed,
JDDContext,
} from "@sealcode/jdd";
import { Component, ComponentArguments } from "@sealcode/jdd";
import { v4 as uuid } from "uuid";
const component_arguments = {
custom_css: new ComponentArguments.ShortText(),
content: new ComponentArguments.NestedComponent(),
} as const;
export class CustomCssWrapper extends Component<typeof component_arguments> {
getArguments() {
return component_arguments;
}
getCSSClumps(
jdd_context: JDDContext,
args: ExtractStructuredComponentArgumentsParsed<typeof component_arguments>
) {
const result = args?.content?.getCSSClumps(jdd_context) || [];
return result;
}
async toHTML({
args: { custom_css, content },
classes,
jdd_context,
}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
const unique_class = `css-wrapper--${uuid()}`;
return (
<div class={["custom-css-wrapper", unique_class, ...classes]}>
{
/* HTML */ `<style>
.${unique_class}{ ${custom_css} }
</style>`
}
{content.render(jdd_context)}
</div>
);
}
}