laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
123 lines (122 loc) • 4.37 kB
JavaScript
"use client";
import { jsx as t, jsxs as p, Fragment as f } from "react/jsx-runtime";
import y, { Suspense as x } from "react";
import { cn as m } from "../../lib/utils.js";
import { CopyButton as k } from "./copy-button.js";
import { Markdown as N } from "../../node_modules/react-markdown/lib/index.js";
import v from "../../node_modules/remark-gfm/lib/index.js";
function q({ children: e }) {
return /* @__PURE__ */ t("div", { className: "space-y-3", children: /* @__PURE__ */ t(N, { remarkPlugins: [v], components: C, children: e }) });
}
const g = y.memo(
async ({ children: e, language: o, ...n }) => {
const { codeToTokens: d, bundledLanguages: i } = await import("../../node_modules/shiki/dist/index.js");
if (!(o in i))
return /* @__PURE__ */ t("pre", { ...n, children: e });
const { tokens: l } = await d(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(f, { children: [
/* @__PURE__ */ t("span", { children: h.map((a, u) => {
const b = 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: b,
children: a.content
},
u
);
}) }, c),
c !== l.length - 1 && `
`
] })) }) });
}
);
g.displayName = "HighlightedCode";
const w = ({
children: e,
className: o,
language: n,
...d
}) => {
const i = 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, ...d, children: e }),
children: /* @__PURE__ */ t(g, { language: n, className: l, children: i })
}
),
/* @__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: i, copyMessage: "Copied code to clipboard" }) })
] });
};
function s(e) {
if (typeof e == "string")
return e;
if (e?.props?.children) {
let o = e.props.children;
return Array.isArray(o) ? o.map((n) => s(n)).join("") : s(o);
}
return "";
}
const C = {
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"),
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, node: n, ...d }) => {
const i = /language-(\w+)/.exec(o || "");
return i ? /* @__PURE__ */ t(w, { className: o, language: i[1], ...d, 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"
),
...d,
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 = ({ node: d, ...i }) => /* @__PURE__ */ t(e, { className: o, ...i });
return n.displayName = String(e), n;
}
export {
q as MarkdownRenderer,
q as default
};