laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
139 lines (138 loc) • 4.61 kB
JavaScript
"use client";
import { jsx as t, jsxs as p, Fragment as y } from "react/jsx-runtime";
import g, { Suspense as x } from "react";
import { CopyButton as k } from "./copy-button.js";
import { cn as m } from "../../lib/utils.js";
import { Markdown as w } from "../../node_modules/react-markdown/lib/index.js";
import N from "../../node_modules/rehype-raw/lib/index.js";
import v from "../../node_modules/remark-gfm/lib/index.js";
function B({ children: e }) {
return /* @__PURE__ */ t("div", { className: "space-y-3", children: /* @__PURE__ */ t(
w,
{
remarkPlugins: [v],
rehypePlugins: [N],
components: S,
children: e
}
) });
}
const u = g.memo(
async ({ children: e, language: o, ...n }) => {
const { codeToTokens: i, bundledLanguages: d } = await import("../../node_modules/shiki/dist/index.js");
if (!(o in d))
return /* @__PURE__ */ t("pre", { ...n, children: e });
const { tokens: l } = await i(e, {
lang: o,
defaultColor: !1,
themes: {
light: "github-light",
dark: "github-dark"
}
});
return /* @__PURE__ */ t("pre", { ...n, children: /* @__PURE__ */ t("code", { children: l.map((h, c) => /* @__PURE__ */ p(y, { children: [
/* @__PURE__ */ t("span", { children: h.map((a, b) => {
const f = typeof a.htmlStyle == "string" ? void 0 : a.htmlStyle;
return /* @__PURE__ */ t(
"span",
{
className: "text-shiki-light bg-shiki-light-bg dark:text-shiki-dark dark:bg-shiki-dark-bg",
style: f,
children: a.content
},
b
);
}) }, c),
c !== l.length - 1 && `
`
] })) }) });
}
);
u.displayName = "HighlightedCode";
const C = ({
children: e,
className: o,
language: n,
...i
}) => {
const d = typeof e == "string" ? e : s(e), l = m(
"overflow-x-scroll rounded-md border border-d-border bg-d-background/50 p-4 font-mono text-sm [scrollbar-width:none]",
o
);
return /* @__PURE__ */ p("div", { className: "group/code relative mb-4", children: [
/* @__PURE__ */ t(
x,
{
fallback: /* @__PURE__ */ t("pre", { className: l, ...i, children: e }),
children: /* @__PURE__ */ t(u, { language: n, className: l, children: d })
}
),
/* @__PURE__ */ t("div", { className: "invisible absolute top-2 right-2 flex space-x-1 rounded-lg p-1 opacity-0 transition-all duration-200 group-hover/code:visible group-hover/code:opacity-100", children: /* @__PURE__ */ t(k, { content: d, copyMessage: "Copied code to clipboard" }) })
] });
};
function s(e) {
if (typeof e == "string")
return e;
if (g.isValidElement(e) && e.props && typeof e.props == "object" && "children" in e.props) {
const o = e.props.children;
return o && typeof o == "object" && Array.isArray(o) ? o.map((n) => s(n)).join("") : s(o);
}
return "";
}
const S = {
h1: r("h1", "text-2xl font-semibold"),
h2: r("h2", "font-semibold text-xl"),
h3: r("h3", "font-semibold text-lg"),
h4: r("h4", "font-semibold text-base"),
h5: r("h5", "font-medium"),
strong: r("strong", "font-semibold"),
u: r("u", "underline"),
a: r("a", "text-d-primary underline underline-offset-2"),
blockquote: r("blockquote", "border-l-2 border-d-primary pl-4"),
code: ({
children: e,
className: o,
...n
}) => {
const i = /language-(\w+)/.exec(o || "");
return i ? /* @__PURE__ */ t(C, { className: o, language: i[1], ...n, children: e }) : /* @__PURE__ */ t(
"code",
{
className: m(
"[:not(pre)>&]:bg-d-background/50 font-mono [:not(pre)>&]:rounded-md [:not(pre)>&]:px-1 [:not(pre)>&]:py-0.5"
),
...n,
children: e
}
);
},
pre: ({ children: e }) => e,
ol: r("ol", "list-decimal space-y-2 pl-6"),
ul: r("ul", "list-disc space-y-2 pl-6"),
li: r("li", "my-1.5"),
table: r(
"table",
"w-full border-collapse overflow-y-auto rounded-md border border-foreground/20"
),
th: r(
"th",
"border border-foreground/20 px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
),
td: r(
"td",
"border border-foreground/20 px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
),
tr: r("tr", "m-0 border-t p-0 even:bg-d-secondary"),
p: r("p", "whitespace-pre-wrap"),
hr: r("hr", "border-foreground/20")
};
function r(e, o) {
const n = ({
...i
}) => /* @__PURE__ */ t(e, { className: o, ...i });
return n.displayName = String(e), n;
}
export {
B as MarkdownRenderer,
B as default
};