@medusajs/ui 2.2.2 → 2.2.3-next-20231124092248
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -41,22 +41,62 @@ const Body = ({ className, ...props }) => {
|
|
|
41
41
|
...prism_react_renderer_1.themes.palenight,
|
|
42
42
|
plain: {
|
|
43
43
|
color: "rgba(249, 250, 251, 1)",
|
|
44
|
-
backgroundColor: "
|
|
44
|
+
backgroundColor: "rgb(17,24,39)",
|
|
45
45
|
},
|
|
46
46
|
styles: [
|
|
47
|
+
...prism_react_renderer_1.themes.palenight.styles,
|
|
47
48
|
{
|
|
48
49
|
types: ["keyword"],
|
|
49
50
|
style: {
|
|
50
|
-
|
|
51
|
+
fontStyle: "normal",
|
|
52
|
+
color: "rgb(187,160,255)",
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
types: ["punctuation", "operator"],
|
|
57
|
+
style: {
|
|
58
|
+
fontStyle: "normal",
|
|
59
|
+
color: "rgb(255,255,255)",
|
|
60
|
+
},
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
types: ["constant", "boolean"],
|
|
64
|
+
style: {
|
|
65
|
+
fontStyle: "normal",
|
|
66
|
+
color: "rgb(187,77,96)",
|
|
67
|
+
},
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
types: ["function"],
|
|
71
|
+
style: {
|
|
72
|
+
fontStyle: "normal",
|
|
73
|
+
color: "rgb(27,198,242)",
|
|
74
|
+
},
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
types: ["number"],
|
|
78
|
+
style: {
|
|
79
|
+
color: "rgb(247,208,25)",
|
|
51
80
|
},
|
|
52
81
|
},
|
|
53
82
|
{
|
|
54
83
|
types: ["maybe-class-name"],
|
|
55
84
|
style: {
|
|
56
|
-
color: "rgb(255,
|
|
85
|
+
color: "rgb(255,203,107)",
|
|
86
|
+
},
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
types: ["string"],
|
|
90
|
+
style: {
|
|
91
|
+
color: "rgb(73,209,110)",
|
|
92
|
+
},
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
types: ["comment"],
|
|
96
|
+
style: {
|
|
97
|
+
color: "rgb(52,211,153)",
|
|
57
98
|
},
|
|
58
99
|
},
|
|
59
|
-
...prism_react_renderer_1.themes.palenight.styles,
|
|
60
100
|
],
|
|
61
101
|
}, code: active.code, language: active.language }, ({ style, tokens, getLineProps, getTokenProps }) => (React.createElement("pre", { className: (0, clx_1.clx)("txt-compact-small whitespace-pre-wrap bg-transparent font-mono", {
|
|
62
102
|
"grid grid-cols-[auto,1fr] gap-x-4": !active.hideLineNumbers,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\nimport { Highlight, themes } from \"prism-react-renderer\"\nimport * as React from \"react\"\n\nimport { Copy } from \"@/components/copy\"\nimport { clx } from \"@/utils/clx\"\n\nexport type CodeSnippet = {\n label: string\n language: string\n code: string\n hideLineNumbers?: boolean\n hideCopy?: boolean\n}\n\ntype CodeBlockState = {\n snippets: CodeSnippet[]\n active: CodeSnippet\n setActive: (active: CodeSnippet) => void\n} | null\n\nconst CodeBlockContext = React.createContext<CodeBlockState>(null)\n\nconst useCodeBlockContext = () => {\n const context = React.useContext(CodeBlockContext)\n\n if (context === null)\n throw new Error(\n \"useCodeBlockContext can only be used within a CodeBlockContext\"\n )\n\n return context\n}\n\ntype RootProps = {\n snippets: CodeSnippet[]\n}\n\nconst Root = ({\n snippets,\n className,\n children,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & RootProps) => {\n const [active, setActive] = React.useState(snippets[0])\n\n return (\n <CodeBlockContext.Provider value={{ snippets, active, setActive }}>\n <div\n className={clx(\n \"border-ui-code-border flex flex-col overflow-hidden rounded-lg border\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n </CodeBlockContext.Provider>\n )\n}\n\ntype HeaderProps = {\n hideLabels?: boolean\n}\n\nconst HeaderComponent = ({\n children,\n className,\n hideLabels = false,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & HeaderProps) => {\n const { snippets, active, setActive } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"border-b-ui-code-border bg-ui-code-bg-header flex items-center gap-2 border-b px-4 py-3\",\n className\n )}\n {...props}\n >\n {!hideLabels &&\n snippets.map((snippet) => (\n <div\n className={clx(\n \"text-ui-code-text-subtle txt-compact-small-plus cursor-pointer rounded-full border border-transparent px-3 py-2 transition-all\",\n {\n \"text-ui-code-text-base border-ui-code-border bg-ui-code-bg-base cursor-default\":\n active.label === snippet.label,\n }\n )}\n key={snippet.label}\n onClick={() => setActive(snippet)}\n >\n {snippet.label}\n </div>\n ))}\n {children}\n </div>\n )\n}\n\nconst Meta = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n return (\n <div\n className={clx(\"text-ui-code-text-subtle ml-auto\", className)}\n {...props}\n />\n )\n}\n\nconst Header = Object.assign(HeaderComponent, { Meta })\n\nconst Body = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n const { active } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"bg-ui-code-bg-base relative h-full overflow-y-auto p-4\",\n className\n )}\n {...props}\n >\n {!active.hideCopy && (\n <Copy\n content={active.code}\n className=\"text-ui-code-icon absolute right-4 top-4\"\n />\n )}\n <div className=\"max-w-[90%]\">\n <Highlight\n theme={{\n ...themes.palenight,\n plain: {\n color: \"rgba(249, 250, 251, 1)\",\n backgroundColor: \"#111827\",\n },\n styles: [\n {\n types: [\"keyword\"],\n style: {\n color: \"var(--fg-on-color)\",\n },\n },\n {\n types: [\"maybe-class-name\"],\n style: {\n color: \"rgb(255, 203, 107)\",\n },\n },\n ...themes.palenight.styles,\n ],\n }}\n code={active.code}\n language={active.language}\n >\n {({ style, tokens, getLineProps, getTokenProps }) => (\n <pre\n className={clx(\n \"txt-compact-small whitespace-pre-wrap bg-transparent font-mono\",\n {\n \"grid grid-cols-[auto,1fr] gap-x-4\": !active.hideLineNumbers,\n }\n )}\n style={{\n ...style,\n background: \"transparent\",\n }}\n >\n {!active.hideLineNumbers && (\n <div role=\"presentation\" className=\"flex flex-col text-right\">\n {tokens.map((_, i) => (\n <span\n key={i}\n className=\"text-ui-code-text-subtle tabular-nums\"\n >\n {i + 1}\n </span>\n ))}\n </div>\n )}\n <div>\n {tokens.map((line, i) => (\n <div key={i} {...getLineProps({ line })}>\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </div>\n </pre>\n )}\n </Highlight>\n </div>\n </div>\n )\n}\n\nconst CodeBlock = Object.assign(Root, { Body, Header, Meta })\n\nexport { CodeBlock }\n"]}
|
|
1
|
+
{"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\nimport { Highlight, themes } from \"prism-react-renderer\"\nimport * as React from \"react\"\n\nimport { Copy } from \"@/components/copy\"\nimport { clx } from \"@/utils/clx\"\n\nexport type CodeSnippet = {\n label: string\n language: string\n code: string\n hideLineNumbers?: boolean\n hideCopy?: boolean\n}\n\ntype CodeBlockState = {\n snippets: CodeSnippet[]\n active: CodeSnippet\n setActive: (active: CodeSnippet) => void\n} | null\n\nconst CodeBlockContext = React.createContext<CodeBlockState>(null)\n\nconst useCodeBlockContext = () => {\n const context = React.useContext(CodeBlockContext)\n\n if (context === null)\n throw new Error(\n \"useCodeBlockContext can only be used within a CodeBlockContext\"\n )\n\n return context\n}\n\ntype RootProps = {\n snippets: CodeSnippet[]\n}\n\nconst Root = ({\n snippets,\n className,\n children,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & RootProps) => {\n const [active, setActive] = React.useState(snippets[0])\n\n return (\n <CodeBlockContext.Provider value={{ snippets, active, setActive }}>\n <div\n className={clx(\n \"border-ui-code-border flex flex-col overflow-hidden rounded-lg border\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n </CodeBlockContext.Provider>\n )\n}\n\ntype HeaderProps = {\n hideLabels?: boolean\n}\n\nconst HeaderComponent = ({\n children,\n className,\n hideLabels = false,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & HeaderProps) => {\n const { snippets, active, setActive } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"border-b-ui-code-border bg-ui-code-bg-header flex items-center gap-2 border-b px-4 py-3\",\n className\n )}\n {...props}\n >\n {!hideLabels &&\n snippets.map((snippet) => (\n <div\n className={clx(\n \"text-ui-code-text-subtle txt-compact-small-plus cursor-pointer rounded-full border border-transparent px-3 py-2 transition-all\",\n {\n \"text-ui-code-text-base border-ui-code-border bg-ui-code-bg-base cursor-default\":\n active.label === snippet.label,\n }\n )}\n key={snippet.label}\n onClick={() => setActive(snippet)}\n >\n {snippet.label}\n </div>\n ))}\n {children}\n </div>\n )\n}\n\nconst Meta = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n return (\n <div\n className={clx(\"text-ui-code-text-subtle ml-auto\", className)}\n {...props}\n />\n )\n}\n\nconst Header = Object.assign(HeaderComponent, { Meta })\n\nconst Body = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n const { active } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"bg-ui-code-bg-base relative h-full overflow-y-auto p-4\",\n className\n )}\n {...props}\n >\n {!active.hideCopy && (\n <Copy\n content={active.code}\n className=\"text-ui-code-icon absolute right-4 top-4\"\n />\n )}\n <div className=\"max-w-[90%]\">\n <Highlight\n theme={{\n ...themes.palenight,\n plain: {\n color: \"rgba(249, 250, 251, 1)\",\n backgroundColor: \"rgb(17,24,39)\",\n },\n styles: [\n ...themes.palenight.styles,\n {\n types: [\"keyword\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(187,160,255)\",\n },\n },\n {\n types: [\"punctuation\", \"operator\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(255,255,255)\",\n },\n },\n {\n types: [\"constant\", \"boolean\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(187,77,96)\",\n },\n },\n {\n types: [\"function\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(27,198,242)\",\n },\n },\n {\n types: [\"number\"],\n style: {\n color: \"rgb(247,208,25)\",\n },\n },\n {\n types: [\"maybe-class-name\"],\n style: {\n color: \"rgb(255,203,107)\",\n },\n },\n {\n types: [\"string\"],\n style: {\n color: \"rgb(73,209,110)\",\n },\n },\n {\n types: [\"comment\"],\n style: {\n color: \"rgb(52,211,153)\",\n },\n },\n ],\n }}\n code={active.code}\n language={active.language}\n >\n {({ style, tokens, getLineProps, getTokenProps }) => (\n <pre\n className={clx(\n \"txt-compact-small whitespace-pre-wrap bg-transparent font-mono\",\n {\n \"grid grid-cols-[auto,1fr] gap-x-4\": !active.hideLineNumbers,\n }\n )}\n style={{\n ...style,\n background: \"transparent\",\n }}\n >\n {!active.hideLineNumbers && (\n <div role=\"presentation\" className=\"flex flex-col text-right\">\n {tokens.map((_, i) => (\n <span\n key={i}\n className=\"text-ui-code-text-subtle tabular-nums\"\n >\n {i + 1}\n </span>\n ))}\n </div>\n )}\n <div>\n {tokens.map((line, i) => (\n <div key={i} {...getLineProps({ line })}>\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </div>\n </pre>\n )}\n </Highlight>\n </div>\n </div>\n )\n}\n\nconst CodeBlock = Object.assign(Root, { Body, Header, Meta })\n\nexport { CodeBlock }\n"]}
|
|
@@ -37,22 +37,62 @@ const Body = ({ className, ...props }) => {
|
|
|
37
37
|
...themes.palenight,
|
|
38
38
|
plain: {
|
|
39
39
|
color: "rgba(249, 250, 251, 1)",
|
|
40
|
-
backgroundColor: "
|
|
40
|
+
backgroundColor: "rgb(17,24,39)",
|
|
41
41
|
},
|
|
42
42
|
styles: [
|
|
43
|
+
...themes.palenight.styles,
|
|
43
44
|
{
|
|
44
45
|
types: ["keyword"],
|
|
45
46
|
style: {
|
|
46
|
-
|
|
47
|
+
fontStyle: "normal",
|
|
48
|
+
color: "rgb(187,160,255)",
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
types: ["punctuation", "operator"],
|
|
53
|
+
style: {
|
|
54
|
+
fontStyle: "normal",
|
|
55
|
+
color: "rgb(255,255,255)",
|
|
56
|
+
},
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
types: ["constant", "boolean"],
|
|
60
|
+
style: {
|
|
61
|
+
fontStyle: "normal",
|
|
62
|
+
color: "rgb(187,77,96)",
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
types: ["function"],
|
|
67
|
+
style: {
|
|
68
|
+
fontStyle: "normal",
|
|
69
|
+
color: "rgb(27,198,242)",
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
types: ["number"],
|
|
74
|
+
style: {
|
|
75
|
+
color: "rgb(247,208,25)",
|
|
47
76
|
},
|
|
48
77
|
},
|
|
49
78
|
{
|
|
50
79
|
types: ["maybe-class-name"],
|
|
51
80
|
style: {
|
|
52
|
-
color: "rgb(255,
|
|
81
|
+
color: "rgb(255,203,107)",
|
|
82
|
+
},
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
types: ["string"],
|
|
86
|
+
style: {
|
|
87
|
+
color: "rgb(73,209,110)",
|
|
88
|
+
},
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
types: ["comment"],
|
|
92
|
+
style: {
|
|
93
|
+
color: "rgb(52,211,153)",
|
|
53
94
|
},
|
|
54
95
|
},
|
|
55
|
-
...themes.palenight.styles,
|
|
56
96
|
],
|
|
57
97
|
}, code: active.code, language: active.language }, ({ style, tokens, getLineProps, getTokenProps }) => (React.createElement("pre", { className: clx("txt-compact-small whitespace-pre-wrap bg-transparent font-mono", {
|
|
58
98
|
"grid grid-cols-[auto,1fr] gap-x-4": !active.hideLineNumbers,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\nimport { Highlight, themes } from \"prism-react-renderer\"\nimport * as React from \"react\"\n\nimport { Copy } from \"@/components/copy\"\nimport { clx } from \"@/utils/clx\"\n\nexport type CodeSnippet = {\n label: string\n language: string\n code: string\n hideLineNumbers?: boolean\n hideCopy?: boolean\n}\n\ntype CodeBlockState = {\n snippets: CodeSnippet[]\n active: CodeSnippet\n setActive: (active: CodeSnippet) => void\n} | null\n\nconst CodeBlockContext = React.createContext<CodeBlockState>(null)\n\nconst useCodeBlockContext = () => {\n const context = React.useContext(CodeBlockContext)\n\n if (context === null)\n throw new Error(\n \"useCodeBlockContext can only be used within a CodeBlockContext\"\n )\n\n return context\n}\n\ntype RootProps = {\n snippets: CodeSnippet[]\n}\n\nconst Root = ({\n snippets,\n className,\n children,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & RootProps) => {\n const [active, setActive] = React.useState(snippets[0])\n\n return (\n <CodeBlockContext.Provider value={{ snippets, active, setActive }}>\n <div\n className={clx(\n \"border-ui-code-border flex flex-col overflow-hidden rounded-lg border\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n </CodeBlockContext.Provider>\n )\n}\n\ntype HeaderProps = {\n hideLabels?: boolean\n}\n\nconst HeaderComponent = ({\n children,\n className,\n hideLabels = false,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & HeaderProps) => {\n const { snippets, active, setActive } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"border-b-ui-code-border bg-ui-code-bg-header flex items-center gap-2 border-b px-4 py-3\",\n className\n )}\n {...props}\n >\n {!hideLabels &&\n snippets.map((snippet) => (\n <div\n className={clx(\n \"text-ui-code-text-subtle txt-compact-small-plus cursor-pointer rounded-full border border-transparent px-3 py-2 transition-all\",\n {\n \"text-ui-code-text-base border-ui-code-border bg-ui-code-bg-base cursor-default\":\n active.label === snippet.label,\n }\n )}\n key={snippet.label}\n onClick={() => setActive(snippet)}\n >\n {snippet.label}\n </div>\n ))}\n {children}\n </div>\n )\n}\n\nconst Meta = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n return (\n <div\n className={clx(\"text-ui-code-text-subtle ml-auto\", className)}\n {...props}\n />\n )\n}\n\nconst Header = Object.assign(HeaderComponent, { Meta })\n\nconst Body = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n const { active } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"bg-ui-code-bg-base relative h-full overflow-y-auto p-4\",\n className\n )}\n {...props}\n >\n {!active.hideCopy && (\n <Copy\n content={active.code}\n className=\"text-ui-code-icon absolute right-4 top-4\"\n />\n )}\n <div className=\"max-w-[90%]\">\n <Highlight\n theme={{\n ...themes.palenight,\n plain: {\n color: \"rgba(249, 250, 251, 1)\",\n backgroundColor: \"#111827\",\n },\n styles: [\n {\n types: [\"keyword\"],\n style: {\n color: \"var(--fg-on-color)\",\n },\n },\n {\n types: [\"maybe-class-name\"],\n style: {\n color: \"rgb(255, 203, 107)\",\n },\n },\n ...themes.palenight.styles,\n ],\n }}\n code={active.code}\n language={active.language}\n >\n {({ style, tokens, getLineProps, getTokenProps }) => (\n <pre\n className={clx(\n \"txt-compact-small whitespace-pre-wrap bg-transparent font-mono\",\n {\n \"grid grid-cols-[auto,1fr] gap-x-4\": !active.hideLineNumbers,\n }\n )}\n style={{\n ...style,\n background: \"transparent\",\n }}\n >\n {!active.hideLineNumbers && (\n <div role=\"presentation\" className=\"flex flex-col text-right\">\n {tokens.map((_, i) => (\n <span\n key={i}\n className=\"text-ui-code-text-subtle tabular-nums\"\n >\n {i + 1}\n </span>\n ))}\n </div>\n )}\n <div>\n {tokens.map((line, i) => (\n <div key={i} {...getLineProps({ line })}>\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </div>\n </pre>\n )}\n </Highlight>\n </div>\n </div>\n )\n}\n\nconst CodeBlock = Object.assign(Root, { Body, Header, Meta })\n\nexport { CodeBlock }\n"]}
|
|
1
|
+
{"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\nimport { Highlight, themes } from \"prism-react-renderer\"\nimport * as React from \"react\"\n\nimport { Copy } from \"@/components/copy\"\nimport { clx } from \"@/utils/clx\"\n\nexport type CodeSnippet = {\n label: string\n language: string\n code: string\n hideLineNumbers?: boolean\n hideCopy?: boolean\n}\n\ntype CodeBlockState = {\n snippets: CodeSnippet[]\n active: CodeSnippet\n setActive: (active: CodeSnippet) => void\n} | null\n\nconst CodeBlockContext = React.createContext<CodeBlockState>(null)\n\nconst useCodeBlockContext = () => {\n const context = React.useContext(CodeBlockContext)\n\n if (context === null)\n throw new Error(\n \"useCodeBlockContext can only be used within a CodeBlockContext\"\n )\n\n return context\n}\n\ntype RootProps = {\n snippets: CodeSnippet[]\n}\n\nconst Root = ({\n snippets,\n className,\n children,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & RootProps) => {\n const [active, setActive] = React.useState(snippets[0])\n\n return (\n <CodeBlockContext.Provider value={{ snippets, active, setActive }}>\n <div\n className={clx(\n \"border-ui-code-border flex flex-col overflow-hidden rounded-lg border\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n </CodeBlockContext.Provider>\n )\n}\n\ntype HeaderProps = {\n hideLabels?: boolean\n}\n\nconst HeaderComponent = ({\n children,\n className,\n hideLabels = false,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & HeaderProps) => {\n const { snippets, active, setActive } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"border-b-ui-code-border bg-ui-code-bg-header flex items-center gap-2 border-b px-4 py-3\",\n className\n )}\n {...props}\n >\n {!hideLabels &&\n snippets.map((snippet) => (\n <div\n className={clx(\n \"text-ui-code-text-subtle txt-compact-small-plus cursor-pointer rounded-full border border-transparent px-3 py-2 transition-all\",\n {\n \"text-ui-code-text-base border-ui-code-border bg-ui-code-bg-base cursor-default\":\n active.label === snippet.label,\n }\n )}\n key={snippet.label}\n onClick={() => setActive(snippet)}\n >\n {snippet.label}\n </div>\n ))}\n {children}\n </div>\n )\n}\n\nconst Meta = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n return (\n <div\n className={clx(\"text-ui-code-text-subtle ml-auto\", className)}\n {...props}\n />\n )\n}\n\nconst Header = Object.assign(HeaderComponent, { Meta })\n\nconst Body = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n const { active } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"bg-ui-code-bg-base relative h-full overflow-y-auto p-4\",\n className\n )}\n {...props}\n >\n {!active.hideCopy && (\n <Copy\n content={active.code}\n className=\"text-ui-code-icon absolute right-4 top-4\"\n />\n )}\n <div className=\"max-w-[90%]\">\n <Highlight\n theme={{\n ...themes.palenight,\n plain: {\n color: \"rgba(249, 250, 251, 1)\",\n backgroundColor: \"rgb(17,24,39)\",\n },\n styles: [\n ...themes.palenight.styles,\n {\n types: [\"keyword\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(187,160,255)\",\n },\n },\n {\n types: [\"punctuation\", \"operator\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(255,255,255)\",\n },\n },\n {\n types: [\"constant\", \"boolean\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(187,77,96)\",\n },\n },\n {\n types: [\"function\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(27,198,242)\",\n },\n },\n {\n types: [\"number\"],\n style: {\n color: \"rgb(247,208,25)\",\n },\n },\n {\n types: [\"maybe-class-name\"],\n style: {\n color: \"rgb(255,203,107)\",\n },\n },\n {\n types: [\"string\"],\n style: {\n color: \"rgb(73,209,110)\",\n },\n },\n {\n types: [\"comment\"],\n style: {\n color: \"rgb(52,211,153)\",\n },\n },\n ],\n }}\n code={active.code}\n language={active.language}\n >\n {({ style, tokens, getLineProps, getTokenProps }) => (\n <pre\n className={clx(\n \"txt-compact-small whitespace-pre-wrap bg-transparent font-mono\",\n {\n \"grid grid-cols-[auto,1fr] gap-x-4\": !active.hideLineNumbers,\n }\n )}\n style={{\n ...style,\n background: \"transparent\",\n }}\n >\n {!active.hideLineNumbers && (\n <div role=\"presentation\" className=\"flex flex-col text-right\">\n {tokens.map((_, i) => (\n <span\n key={i}\n className=\"text-ui-code-text-subtle tabular-nums\"\n >\n {i + 1}\n </span>\n ))}\n </div>\n )}\n <div>\n {tokens.map((line, i) => (\n <div key={i} {...getLineProps({ line })}>\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </div>\n </pre>\n )}\n </Highlight>\n </div>\n </div>\n )\n}\n\nconst CodeBlock = Object.assign(Root, { Body, Header, Meta })\n\nexport { CodeBlock }\n"]}
|