diff --git a/src/routes/experience/$slug.tsx b/src/routes/experience/$slug.tsx index 27b4bcf..0fe18b8 100644 --- a/src/routes/experience/$slug.tsx +++ b/src/routes/experience/$slug.tsx @@ -1,4 +1,5 @@ import { createFileRoute, Link } from '@tanstack/react-router' +import { useState } from 'react' import ReactMarkdown from 'react-markdown' import remarkGfm from 'remark-gfm' import SyntaxHighlighter from 'react-syntax-highlighter' @@ -51,34 +52,67 @@ function CodeBlock({ readonly className?: string readonly children?: React.ReactNode }) { + const [copied, setCopied] = useState(false) const match = /language-(\w+)/.exec(className ?? '') + if (!match) { return {children} } + const handleCopy = () => { + void navigator.clipboard.writeText(String(children).replace(/\n$/, '')) + setCopied(true) + setTimeout(() => setCopied(false), 2000) + } + return ( - - {String(children).replace(/\n$/, '')} - +
+ + + {String(children).replace(/\n$/, '')} + +
) }