LukeParke/better-auth
1
0
Fork 0
mirror of https://github.com/LukeHagar/better-auth.git synced 2025-12-09 12:27:43 +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>
);
}

34
docs/components/builder/code-tabs/code-tabs.tsx
View File

File diff suppressed because one or more lines are too long

8
docs/components/builder/code-tabs/index.tsx
View File

@@ -37,8 +37,8 @@ ${
return {
...acc,
[provider]: {
clientId: `process.env.${provider.toUpperCase()}_CLIENT_ID`,
clientSecret: `process.env.${provider.toUpperCase()}_CLIENT_SECRET`,
clientId: `process.env.${provider.toUpperCase()}_CLIENT_ID!`,
clientSecret: `process.env.${provider.toUpperCase()}_CLIENT_SECRET!`,
},
};
}, {}),
@@ -123,14 +123,14 @@ ${
const activeFile = files.find((file) => file.id === activeFileId);
return (
<div className="w-full mr-auto max-w-3xl mt-8 border border-border rounded-md overflow-hidden">
<div className="w-full mr-auto max-w-[45rem] mt-8 border border-border rounded-md overflow-hidden">
<TabBar
files={files}
activeFileId={activeFileId}
onTabClick={handleTabClick}
onTabClose={handleTabClose}
/>
<div className="bg-back">
<div className="">
{activeFile && (
<CodeEditor
language="typescript"