CodeBlockWithCopy

Client component wrapper that adds copy-to-clipboard functionality to code blocks.

Props

Prop	Type	Required	Default	Description
`code`	`string`	Yes	-	The code content to display
`language`	`string`	No	`'text'`	Programming language for syntax highlighting
`className`	`string`	No	-	Additional CSS classes
`highlightLines`	`number[]`	No	-	Array of line numbers to highlight

Usage

1import { CodeBlockWithCopy } from '@/components/atoms/CodeBlockWithCopy';
2
3<CodeBlockWithCopy 
4  code={codeSnippet} 
5  language="typescript"
6  highlightLines={[2, 4]}
7/>

import { CodeBlockWithCopy } from '@/components/atoms/CodeBlockWithCopy';

<CodeBlockWithCopy 
  code={codeSnippet} 
  language="typescript"
  highlightLines={[2, 4]}
/>

Features

Copy button: Adds a copy-to-clipboard button in the top-right corner
All CodeBlock features: Inherits all features from CodeBlock
Client-side interactivity: Uses React hooks for copy functionality
Accessible: Button includes proper ARIA labels

Architecture

This component is a composition of:

CodeBlock: SSR-safe syntax highlighting component
CopyButton: Client-side copy-to-clipboard button

Notes

This is a client component ("use client") due to the copy button functionality
The copy button appears in the top-right corner with a subtle dark background
Shows "Copied!" feedback for 2 seconds after copying
Falls back to document.execCommand for older browsers