📊

Git Diff Visualizer

Advanced Git diff analysis with visual representation, code quality assessment, security insights, and comprehensive change impact analysis

Git Diff Content

1426 characters

Upload

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 1234567..abcdefg 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,8 +1,15 @@
 import React from 'react';
 
 interface ButtonProps {
   children: React.ReactNode;
+  variant?: 'primary' | 'secondary' | 'danger';
+  size?: 'small' | 'medium' | 'large';
+  disabled?: boolean;
   onClick?: () => void;
 }
 
-export function Button({ children, onClick }: ButtonProps) {
-  return <button onClick={onClick}>{children}</button>;
+export function Button({ children, variant = 'primary', size = 'medium', disabled = false, onClick }: ButtonProps) {
+  const baseClasses = 'font-semibold rounded transition-colors focus:outline-none focus:ring-2';
+  const variantClasses = variant === 'primary' ? 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500' : 
+                        variant === 'danger' ? 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500' :
+                        'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500';
+  const sizeClasses = size === 'small' ? 'px-2 py-1 text-sm' : size === 'large' ? 'px-6 py-3 text-lg' : 'px-4 py-2';
+  
+  return (
+    <button 
+      className={`${baseClasses} ${variantClasses} ${sizeClasses} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
 }

Syntax: diff

Format Info

Standard unified diff format

Context lines: 3 | Theme: github

Output

Output will appear here

How It Works

Input Your Data

Paste, type, or upload your data directly into the git diff visualizer. All processing happens locally in your browser for complete privacy and security.

Configure Options

Customize the tool settings to match your specific needs. Real-time processing with instant validation and error detection.

Export Results

Copy results to clipboard, download as files, or share with others. Multiple export formats available for maximum compatibility.

Related Tools

GitCompare

Text Diff & Compare

Compare two pieces of text and highlight differences with line-by-line, word-by-word, or character-by-character comparison.

📄

Diff Checker

Compare two texts or code files to identify differences. Generate professional diff outputs in multiple formats with detailed statistics and analysis.

⚙️

Configuration File Validator

Comprehensive validation for configuration files including JSON, YAML, TOML, XML, Dockerfile, Nginx, Apache configs with syntax, security, and best practices checking

📊

Log Analysis Tool

Comprehensive log file analysis with security, performance, and traffic insights for Apache, Nginx, and other web server logs

📊

Advanced Text Analytics

Comprehensive text analysis providing sentiment analysis, readability scores, keyword extraction, entity recognition, language detection, tone analysis, and detailed content statistics.

🔍

Regular Expression Tester

Debug regular expressions with real-time execution, capture group analysis, replacer previews, split testing, and pattern breakdowns across all JavaScript regex features.