@brendonovich/kobalte__solidbase/dist/default-theme/mdx-components.jsx

Fully featured, fully customisable static site generation for SolidStart

import { Tabs } from "@kobalte/core";
import { cookieStorage, makePersisted, messageSync, } from "@solid-primitives/storage";
import { A } from "@solidjs/router";
import { For, Show, children, createSignal, splitProps, } from "solid-js";
import styles from "./mdx-components.module.css";
export function h1(props) {
    return <h1 class={styles.h1} {...props}/>;
}
export function h2(props) {
    return <h2 class={styles.h2} {...props}/>;
}
export function h3(props) {
    return <h3 class={styles.h3} {...props}/>;
}
export function h4(props) {
    return <h4 class={styles.h4} {...props}/>;
}
export function h5(props) {
    return <h5 class={styles.h5} {...props}/>;
}
export function h6(props) {
    return <h6 class={styles.h6} {...props}/>;
}
export function a(props) {
    const outbound = () => (props.href ?? "").includes("//");
    const autoHeading = () => props["data-auto-heading"] === "";
    return (<A target={outbound() ? "_blank" : undefined} rel={outbound() ? "noopener noreferrer" : undefined} class={autoHeading() ? styles["a-auto"] : styles.a} href={props.href ?? ""} {...props}/>);
}
export function code(props) {
    return <code class={styles.code} {...props}/>;
}
export function hr(props) {
    return <hr class={styles.hr} {...props}/>;
}
export function table(props) {
    const [local, others] = splitProps(props, ["class"]);
    return (<div class={styles.table}>
			<table {...others}/>
		</div>);
}
export function blockquote(props) {
    return <blockquote class={styles.blockquote} {...props}/>;
}
export function p(props) {
    return <p class={styles.p} {...props}/>;
}
export function li(props) {
    return <li class={styles.li} {...props}/>;
}
export function ul(props) {
    return <ul class={styles.ul} {...props}/>;
}
export function ol(props) {
    return <ol class={styles.ol} {...props}/>;
}
export function DirectiveContainer(props) {
    const _children = children(() => props.children).toArray();
    if (props.type === "tab") {
        return _children;
    }
    if (props.type === "tab-group") {
        const tabNames = props.tabNames?.split("\0");
        const tabs = (value, onChange) => (<Tabs.Root value={value?.()} onChange={onChange} class={styles["tabs-container"]}>
				<Tabs.List class={styles["tabs-list"]}>
					{tabNames?.map((title) => {
                return (<Tabs.Trigger class={styles["tabs-trigger"]} value={title}>
								{title}
							</Tabs.Trigger>);
            })}
				</Tabs.List>

				<For each={tabNames}>
					{(title, i) => (<Tabs.Content value={title} forceMount={true} class={styles["tabs-content"]}>
							<div>{_children[i()]}</div>
						</Tabs.Content>)}
				</For>
			</Tabs.Root>);
        if (!props.title)
            return tabs();
        const [openTab, setOpenTab] = makePersisted(createSignal(tabNames[0]), {
            name: `tab-group:${props.title}`,
            sync: messageSync(new BroadcastChannel("tab-group")),
            storage: cookieStorage.withOptions({
                expires: new Date(+new Date() + 3e10),
            }),
        });
        return tabs(openTab, setOpenTab);
    }
    if (props.type === "details") {
        return (<details class={styles["custom-container"]} data-custom-container="details">
				<summary>{props.title ?? props.type}</summary>
				{_children}
			</details>);
    }
    return (<div class={styles["custom-container"]} data-custom-container={props.type}>
			<Show when={props.title !== " "}>
				<span>{props.title ?? props.type}</span>
			</Show>
			{_children}
		</div>);
}
export function Steps(props) {
    return <div class={styles.steps}>{props.children}</div>;
}
export function Step(props) {
    return <div class={styles.step}>{props.children}</div>;
}
//# sourceMappingURL=mdx-components.jsx.map