iod/page-assist
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update version to 1.4.6 and enhance code block component with download and copy sticky support

Browse Source
This commit is contained in:
n4ze3m
2025-02-08 12:48:49 +05:30
parent a46156847d
commit 40698e02d7
9 changed files with 324 additions and 553 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/Common/CodeBlock.tsx
View File

@@ -42,10 +42,36 @@ export const CodeBlock: FC<Props> = ({ language, value }) => {
return (
<>
<div className="code relative text-base font-sans codeblock bg-zinc-950 rounded-md overflow-hidden">
<div className="flex bg-gray-800 items-center justify-between py-1.5 px-4">
<span className="text-xs lowercase text-gray-200">{language}</span>
<div className="not-prose">
<div className=" [&_div+div]:!mt-0 my-4 bg-zinc-950 rounded-xl">
<div className="flex flex-row px-4 py-2 rounded-t-xl bg-gray-800 ">
<span className="font-mono text-xs">{language || "text"}</span>
</div>
<div className="sticky top-9 md:top-[5.75rem]">
<div className="absolute bottom-0 right-2 flex h-9 items-center">
<Tooltip title={t("downloadCode")}>
<button
onClick={handleDownload}
className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-200 hover:bg-gray-700 hover:text-gray-100 focus:outline-none">
<DownloadIcon className="size-4" />
</button>
</Tooltip>
<Tooltip title={t("copyToClipboard")}>
<button
onClick={handleCopy}
className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-200 hover:bg-gray-700 hover:text-gray-100 focus:outline-none">
{!isBtnPressed ? (
<ClipboardIcon className="size-4" />
) : (
<CheckIcon className="size-4 text-green-400" />
)}
</button>
</Tooltip>
</div>
</div>
{/* <div className="flex sticky bg-gray-800 items-center justify-between py-1.5 px-4">
<span className="text-xs lowercase text-gray-200">{language}</span>
<div className="flex items-center gap-2">
<Tooltip title={t("downloadCode")}>
<button
@@ -66,28 +92,29 @@ export const CodeBlock: FC<Props> = ({ language, value }) => {
</button>
</Tooltip>
</div>
</div> */}
<SyntaxHighlighter
language={language}
style={coldarkDark}
PreTag="div"
customStyle={{
margin: 0,
width: "100%",
background: "transparent",
padding: "1.5rem 1rem"
}}
lineNumberStyle={{
userSelect: "none"
}}
codeTagProps={{
style: {
fontSize: "0.9rem",
fontFamily: "var(--font-mono)"
}
}}>
{value}
</SyntaxHighlighter>
</div>
<SyntaxHighlighter
language={language}
style={coldarkDark}
PreTag="div"
customStyle={{
margin: 0,
width: "100%",
background: "transparent",
padding: "1.5rem 1rem"
}}
lineNumberStyle={{
userSelect: "none"
}}
codeTagProps={{
style: {
fontSize: "0.9rem",
fontFamily: "var(--font-mono)"
}
}}>
{value}
</SyntaxHighlighter>
</div>
{previewVisible && (
<Modal