"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
Object.defineProperty(exports, "__esModule", { value: true });
const path_1 = require("path");
const tempseal_1 = require("@sealcode/tempseal");
let ConfigDemo;
ConfigDemo = (add_effect, config) => __awaiter(void 0, void 0, void 0, function* () {
    const fonts_html = `<ul>
	${Object.entries(config.fonts)
        .map(([font_type_name, font_family]) => /* HTML */ `
				<li>
					${font_type_name}:
					<span class="font-${font_type_name}">${font_family}</span>
				</li>
			`)
        .join("\n")}
	</ul>`;
    let colors_html = "";
    for (let color_name in config.colors) {
        const color_value = config.colors[color_name];
        colors_html += /* HTML */ `
			<div
				class="color-tile"
				style="background-color: ${color_value}"
				title="${color_name}"
			></div>
		`;
    }
    const html = /* HTML */ `
		<div>
			<h2>Config demo</h2>
			<h3>Fonts</h3>
			${fonts_html}
			<h3>Colors</h3>
			<div class="color-grid">
				${colors_html}
			</div>
		</div>
	`;
    yield Promise.all([
        tempseal_1.SideEffects.Scss.addFromPath(add_effect, config, path_1.resolve(__dirname, "config-demo.scss")),
        add_effect(new tempseal_1.SideEffects.HtmlChunk(html)),
    ]);
});
ConfigDemo.identifier = "config-demo";
exports.default = ConfigDemo;
//# sourceMappingURL=config-demo.js.map