LukeParke/better-auth
1
0
Fork 0
mirror of https://github.com/LukeHagar/better-auth.git synced 2025-12-06 20:37:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: fix ui builder code block (#1999)

Browse Source
This commit is contained in:
KinfeMichael Tariku
2025-03-26 21:38:40 +03:00
committed by GitHub
parent 128cca8151
commit e0835c9d38
5 changed files with 221 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
docs/components/builder/code-tabs/code-editor.tsx
View File

@@ -25,55 +25,59 @@ export function CodeEditor({ code, language }: CodeEditorProps) {
};
return (
<div className="relative w-full">
<Highlight theme={theme} code={code} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<pre
className={`${className} text-sm p-4 w-fit overflow-scroll max-h-[400px] rounded-md`}
style={style}
>
{tokens.map((line, i) => {
const lineProps = getLineProps({ line, key: i });
return (
<div
key={i}
className={lineProps.className}
style={lineProps.style}
>
<span className="inline-block w-4 mr-3 text-gray-500 select-none">
{i + 1}
</span>
{line.map((token, key) => {
const tokenProps = getTokenProps({ token, key });
return (
<span
key={key}
className={tokenProps.className}
style={tokenProps.style}
>
{tokenProps.children}
<div className="relative">
<div className="dark:bg-bg-white rounded-md overflow-hidden">
<Highlight theme={theme} code={code} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div className="overflow-auto max-h-[400px]">
<pre
className={`${className} relative text-sm p-4 w-full min-w-fit rounded-md`}
style={style}
>
{tokens.map((line, i) => {
const lineProps = getLineProps({ line, key: i });
return (
<div
key={i}
className={lineProps.className}
style={lineProps.style}
>
<span className="sticky dark:bg-black top-0 left-0 mr-4 mx-auto pr-2 text-gray-500 select-none">
{i + 1}
</span>
);
})}
</div>
);
})}
</pre>
)}
</Highlight>
<Button
variant="outline"
size="icon"
className="absolute top-2 right-2"
onClick={copyToClipboard}
aria-label="Copy code"
>
{isCopied ? (
<Check className="h-4 w-4" />
) : (
<Copy className="h-4 w-4" />
)}
</Button>
{line.map((token, key) => {
const tokenProps = getTokenProps({ token, key });
return (
<span
key={key}
className={tokenProps.className}
style={tokenProps.style}
>
{tokenProps.children}
</span>
);
})}
</div>
);
})}
</pre>
</div>
)}
</Highlight>
<Button
variant="outline"
size="icon"
className="absolute top-2 right-2"
onClick={copyToClipboard}
aria-label="Copy code"
>
{isCopied ? (
<Check className="h-4 w-4" />
) : (
<Copy className="h-4 w-4" />
)}
</Button>
</div>
</div>
);
}