miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

docs(nxdev): optimize fence copy button (#12588)

Browse Source
This commit is contained in:
Benjamin Cabanes 2022-10-13 17:15:57 -04:00 committed by GitHub
parent d2021bea17
commit b23f62f864
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
nx-dev/ui-markdoc/src/lib/nodes/fence.component.tsx
View File

@ -1,4 +1,7 @@
import { ClipboardDocumentIcon } from '@heroicons/react/24/outline'; import {
ClipboardDocumentCheckIcon,
ClipboardDocumentIcon,
} from '@heroicons/react/24/outline';
import React, { ReactNode, useEffect, useState } from 'react'; import React, { ReactNode, useEffect, useState } from 'react';
// @ts-ignore // @ts-ignore
import { CopyToClipboard } from 'react-copy-to-clipboard'; import { CopyToClipboard } from 'react-copy-to-clipboard';
@ -61,7 +64,7 @@ export function Fence({
}; };
}, [copied]); }, [copied]);
return ( return (
<div className="w-full"> <div className="my-8 w-full">
<div className="code-block group relative inline-flex w-auto min-w-[50%] max-w-full"> <div className="code-block group relative inline-flex w-auto min-w-[50%] max-w-full">
<CopyToClipboard <CopyToClipboard
text={children} text={children}
@ -71,10 +74,13 @@ export function Fence({
> >
<button <button
type="button" type="button"
className="not-prose absolute top-7 right-2 z-10 flex opacity-0 transition-opacity group-hover:opacity-100" className="not-prose absolute top-0 right-0 z-10 flex rounded-tr-lg border border-slate-200 bg-slate-50/50 p-2 opacity-0 transition-opacity group-hover:opacity-100 dark:border-slate-700 dark:bg-slate-800"
> >
<ClipboardDocumentIcon className="h-4 w-4" /> {copied ? (
<span className="ml-1 text-xs">{copied ? 'Copied!' : 'Copy'}</span> <ClipboardDocumentCheckIcon className="h-5 w-5 text-blue-500 dark:text-sky-500" />
) : (
<ClipboardDocumentIcon className="h-5 w-5" />
)}
</button> </button>
</CopyToClipboard> </CopyToClipboard>
<SyntaxHighlighter <SyntaxHighlighter

2
nx-dev/ui-markdoc/src/lib/nodes/fences/codeOutput.component.tsx
View File

@ -8,7 +8,7 @@ export function CodeOutput({
fileName: string; fileName: string;
}): JSX.Element { }): JSX.Element {
return ( return (
<div className="hljs not-prose my-4 w-full overflow-x-auto rounded-lg border border-slate-200 bg-slate-50/50 font-mono text-sm dark:border-slate-700 dark:bg-slate-800/60"> <div className="hljs not-prose w-full overflow-x-auto rounded-lg border border-slate-200 bg-slate-50/50 font-mono text-sm dark:border-slate-700 dark:bg-slate-800/60">
{!!fileName && ( {!!fileName && (
<div className="flex border-b border-slate-200 bg-slate-50 px-4 py-2 italic text-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:text-slate-500"> <div className="flex border-b border-slate-200 bg-slate-50 px-4 py-2 italic text-slate-400 dark:border-slate-700 dark:bg-slate-800/80 dark:text-slate-500">
{fileName} {fileName}