Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull Request Overview
This PR adds a new side-by-side code diff split component alongside renaming the existing unified diff component for better clarity. The changes provide users with two distinct diff viewing options: unified (single column) and split (side-by-side).
- Renamed existing CodeDiff component to CodeDiffUnified for clarity
- Added new CodeDiffSplit component for side-by-side diff viewing
- Updated registry and example configurations to support both components
Reviewed Changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| registry/new-york/marketing/code-diff-unified.tsx | Renamed CodeDiff to CodeDiffUnified for clarity |
| registry/new-york/marketing/code-diff-split.tsx | New split diff component with side-by-side layout |
| registry-source.json | Updated registry entries for both diff components |
| examples/ui/code-diff-unified/CodeDiffUnifiedExample.tsx | Updated example to use renamed component |
| examples/ui/code-diff-split/CodeDiffSplitExample.tsx | New example showcasing split diff functionality |
| data/ui.ts | Updated navigation to include both diff components |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| const Icon = copied ? CheckIcon : CopyIcon; | ||
| return ( | ||
| <Button | ||
| variant="ghost" | ||
| size="auto" | ||
| onClick={async () => { | ||
| await navigator.clipboard.writeText(value); | ||
| setCopied(true); | ||
| setTimeout(() => setCopied(false), 2000); | ||
| }} | ||
| className={cn("p-1.5", className)} | ||
| aria-label={copied ? "Copied" : "Copy to clipboard"} | ||
| > | ||
| <Icon className="size-3.5" /> | ||
| <span className="sr-only">{copied ? "Copied" : "Copy"}</span> |
There was a problem hiding this comment.
The clipboard API usage lacks error handling. If clipboard access fails (e.g., in non-secure contexts or when permissions are denied), this will throw an unhandled promise rejection. Consider wrapping in a try-catch block and providing user feedback on failure.
| const Icon = copied ? CheckIcon : CopyIcon; | |
| return ( | |
| <Button | |
| variant="ghost" | |
| size="auto" | |
| onClick={async () => { | |
| await navigator.clipboard.writeText(value); | |
| setCopied(true); | |
| setTimeout(() => setCopied(false), 2000); | |
| }} | |
| className={cn("p-1.5", className)} | |
| aria-label={copied ? "Copied" : "Copy to clipboard"} | |
| > | |
| <Icon className="size-3.5" /> | |
| <span className="sr-only">{copied ? "Copied" : "Copy"}</span> | |
| const [copyError, setCopyError] = useState(false); | |
| const Icon = copied ? CheckIcon : CopyIcon; | |
| return ( | |
| <Button | |
| variant="ghost" | |
| size="auto" | |
| onClick={async () => { | |
| try { | |
| await navigator.clipboard.writeText(value); | |
| setCopied(true); | |
| setCopyError(false); | |
| setTimeout(() => setCopied(false), 2000); | |
| } catch (err) { | |
| setCopyError(true); | |
| setCopied(false); | |
| setTimeout(() => setCopyError(false), 2000); | |
| } | |
| }} | |
| className={cn("p-1.5", className)} | |
| aria-label={ | |
| copied ? "Copied" : copyError ? "Copy failed" : "Copy to clipboard" | |
| } | |
| > | |
| <Icon className="size-3.5" /> | |
| <span className="sr-only"> | |
| {copied ? "Copied" : copyError ? "Copy failed" : "Copy"} | |
| </span> |
| const dividerLeft = hideLineNumbers | ||
| ? "calc(50% - 0.5px)" |
There was a problem hiding this comment.
Incorrect ternary operator syntax. Line 193 should use a colon (:) instead of a question mark (?) to provide the alternative value for when hideLineNumbers is false.
No description provided.