86:I[903690,["/chat-static/_next/static/immutable/chunks/196gtrnm34jez.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/3l8fzjkdgt0wd.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/2lo4wuedhi-j3.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/0ocytjp9zxitf.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/39x5wlubw1qy9.js","/chat-static/_next/static/immutable/chunks/43-jsj0fq5lhp.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1w6qqgfpk6ysv.js","/chat-static/_next/static/immutable/chunks/0wekn8517kmiz.js","/chat-static/_next/static/immutable/chunks/3db-uyiz6we29.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3eajo0i8vj831.js"],"ExplicitChatIdProvider"] 87:I[838238,["/chat-static/_next/static/immutable/chunks/196gtrnm34jez.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/3l8fzjkdgt0wd.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/2lo4wuedhi-j3.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/0ocytjp9zxitf.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/39x5wlubw1qy9.js","/chat-static/_next/static/immutable/chunks/43-jsj0fq5lhp.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1w6qqgfpk6ysv.js","/chat-static/_next/static/immutable/chunks/0wekn8517kmiz.js","/chat-static/_next/static/immutable/chunks/3db-uyiz6we29.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3eajo0i8vj831.js"],"SWRDataProvider"] 88:T8545,[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "@komplai/db": "latest" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/diff-preview.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { ChevronDown, Copy, MoreHorizontal, ChevronUp } from "lucide-react" import { useState } from "react" interface DiffLine { type: "unchanged" | "added" | "removed" oldLine: number | null newLine: number | null content: string } interface DiffChunk { type: "context" | "expand" oldStart: number newStart: number lines?: DiffLine[] expandDirection?: "up" | "down" hiddenLines?: number expandedLines?: DiffLine[] } interface DiffData { filePath: string changes: DiffChunk[] } interface DiffPreviewProps { diff: DiffData className?: string onExpandUp?: (chunkIndex: number) => void onExpandDown?: (chunkIndex: number) => void } export function DiffPreview({ diff, className, onExpandUp, onExpandDown }: DiffPreviewProps) { const getLineNumberWidth = () => { const maxLineNumber = Math.max( ...diff.changes.flatMap( (chunk) => chunk.lines?.map((line) => Math.max(line.oldLine || 0, line.newLine || 0)) || [0], ), ...diff.changes.flatMap( (chunk) => chunk.expandedLines?.map((line) => Math.max(line.oldLine || 0, line.newLine || 0)) || [0], ), ) return Math.max(2, maxLineNumber.toString().length) } const lineNumberWidth = getLineNumberWidth() const containerStyle: React.CSSProperties = { border: "1px solid #30363d", borderRadius: "8px", overflow: "hidden", backgroundColor: "#0d1117", color: "#ffffff", fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace', } const headerStyle: React.CSSProperties = { display: "flex", alignItems: "center", justifyContent: "space-between", backgroundColor: "#161b22", padding: "8px 16px", borderBottom: "1px solid #30363d", color: "#ffffff", } const diffContentStyle: React.CSSProperties = { backgroundColor: "#0d1117", color: "#ffffff", fontSize: "14px", fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace', } const [expandedChunks, setExpandedChunks] = useState>(new Set()) const handleExpand = (chunkIndex: number, direction: "up" | "down") => { setExpandedChunks((prev) => { const newSet = new Set(prev) newSet.add(chunkIndex) return newSet }) if (direction === "up") { onExpandUp?.(chunkIndex) } else { onExpandDown?.(chunkIndex) } } return (

{/* File Header */}

{diff.filePath}

{diff.changes.map((chunk, chunkIndex) => (

{chunk.type === "expand" ? (

{expandedChunks.has(chunkIndex) && chunk.expandedLines && (

{chunk.expandedLines.map((line, lineIndex) => { const lineStyle: React.CSSProperties = { display: "flex", backgroundColor: "#0d1117", } const lineNumberStyle: React.CSSProperties = { padding: "2px 8px", textAlign: "right", color: "#8b949e", userSelect: "none", width: `${lineNumberWidth * 0.6 + 1}rem`, backgroundColor: "#161b22", } const contentStyle: React.CSSProperties = { flex: 1, padding: "2px 8px", whiteSpace: "pre", overflowX: "auto", color: "#ffffff", backgroundColor: "#0d1117", } return (

{line.oldLine || ""}

{line.newLine || ""}

) })}

)} {!expandedChunks.has(chunkIndex) && (

...

)}

) : ( <> {/* Chunk Header */}

@@ -{chunk.oldStart},{chunk.lines?.length || 0} +{chunk.newStart}, {chunk.lines?.filter((l) => l.type !== "removed").length || 0} @@

{/* Lines */} {chunk.lines?.map((line, lineIndex) => { const lineStyle: React.CSSProperties = { display: "flex", backgroundColor: line.type === "added" ? "#0d4429" : line.type === "removed" ? "#67060c" : "#0d1117", } const lineNumberStyle: React.CSSProperties = { padding: "2px 8px", textAlign: "right", color: "#8b949e", userSelect: "none", width: `${lineNumberWidth * 0.6 + 1}rem`, backgroundColor: line.type === "added" ? "#0d4429" : line.type === "removed" ? "#67060c" : "#161b22", } const indicatorStyle: React.CSSProperties = { width: "24px", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "12px", fontWeight: "bold", backgroundColor: line.type === "added" ? "#0d4429" : line.type === "removed" ? "#67060c" : "#0d1117", color: line.type === "added" ? "#3fb950" : line.type === "removed" ? "#f85149" : "transparent", } const contentStyle: React.CSSProperties = { flex: 1, padding: "2px 8px", whiteSpace: "pre", overflowX: "auto", color: "#ffffff", backgroundColor: line.type === "added" ? "#0d4429" : line.type === "removed" ? "#67060c" : "#0d1117", } return (

{/* Line Numbers */}

{line.oldLine || ""}

{line.newLine || ""}

{/* Change Indicator */}

{line.type === "added" && "+"} {line.type === "removed" && "-"}

{/* Code Content */}

) })} )}

))}

) } function SyntaxHighlightedCode({ content }: { content: string }) { const highlightedContent = content .replace( /\b(import|export|const|let|var|function|async|await|if|else|return|new|from)\b/g, '$1', ) .replace(/\b(Date|NextResponse|Prisma|TaskStatus|parse)\b/g, '$1') .replace(/'([^']*)'/g, "'$1'") .replace(/"([^"]*)"/g, '"$1"') .replace(/\/\/.*$/gm, '$&') .replace(/\{|\}/g, '$&') .replace(/\[|\]/g, '$&') return } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import App from "@/components/improved-diff-preview" export default function Home() { return } [V0_FILE]typescriptreact:file="components/improved-diff-preview.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { ChevronDown, ChevronUp } from "lucide-react" interface DiffLine { type: "unchanged" | "added" | "removed" oldLine: number | null newLine: number | null content: string } interface DiffChunk { type: "context" | "expand" oldStart: number newStart: number oldEnd?: number newEnd?: number lines?: DiffLine[] expandDirection?: "up" | "down" hiddenLines?: number // Instead of storing expanded lines, we'll generate them on demand } interface DiffData { filePath: string chunks: DiffChunk[] // Store all file lines for proper expansion fullOldFile?: string[] fullNewFile?: string[] } // Generate proper line numbers for expanded sections function generateExpandedLines(chunk: DiffChunk, fullOldFile?: string[], fullNewFile?: string[]): DiffLine[] { if (!fullOldFile || !fullNewFile) { // Fallback to showing placeholder lines if full file not available const lines: DiffLine[] = [] const lineCount = chunk.hiddenLines || 10 if (chunk.expandDirection === "up") { // Lines before the chunk for (let i = lineCount; i > 0; i--) { lines.push({ type: "unchanged", oldLine: chunk.oldStart - i, newLine: chunk.newStart - i, content: ` // ... line ${chunk.oldStart - i} ...`, }) } } else { // Lines after the chunk const startOld = (chunk.oldEnd || chunk.oldStart) + 1 const startNew = (chunk.newEnd || chunk.newStart) + 1 for (let i = 0; i < lineCount; i++) { lines.push({ type: "unchanged", oldLine: startOld + i, newLine: startNew + i, content: ` // ... line ${startOld + i} ...`, }) } } return lines } // If we have the full file content, show actual lines const lines: DiffLine[] = [] if (chunk.expandDirection === "up") { const startLine = Math.max(0, chunk.oldStart - (chunk.hiddenLines || 10) - 1) const endLine = chunk.oldStart - 1 for (let i = startLine; i < endLine; i++) { lines.push({ type: "unchanged", oldLine: i + 1, newLine: i + 1, // Assuming unchanged lines have same numbers content: fullOldFile[i] || ` // line ${i + 1}`, }) } } else { const startOld = chunk.oldEnd || chunk.oldStart const startNew = chunk.newEnd || chunk.newStart const lineCount = chunk.hiddenLines || 10 for (let i = 0; i < lineCount; i++) { lines.push({ type: "unchanged", oldLine: startOld + i + 1, newLine: startNew + i + 1, content: fullOldFile[startOld + i] || ` // line ${startOld + i + 1}`, }) } } return lines } function DiffPreview({ diff }: { diff: DiffData }) { const [expandedChunks, setExpandedChunks] = useState>(new Set()) const getLineNumberWidth = () => { let maxLineNumber = 0 diff.chunks.forEach((chunk) => { if (chunk.lines) { chunk.lines.forEach((line) => { maxLineNumber = Math.max(maxLineNumber, line.oldLine || 0, line.newLine || 0) }) } // Also consider the potential expanded lines if (chunk.type === "expand") { if (chunk.expandDirection === "up") { maxLineNumber = Math.max(maxLineNumber, chunk.oldStart, chunk.newStart) } else { const endOld = (chunk.oldEnd || chunk.oldStart) + (chunk.hiddenLines || 10) const endNew = (chunk.newEnd || chunk.newStart) + (chunk.hiddenLines || 10) maxLineNumber = Math.max(maxLineNumber, endOld, endNew) } } }) return Math.max(3, maxLineNumber.toString().length) } const lineNumberWidth = getLineNumberWidth() const handleExpand = (chunkIndex: number) => { setExpandedChunks((prev) => { const newSet = new Set(prev) if (newSet.has(chunkIndex)) { newSet.delete(chunkIndex) } else { newSet.add(chunkIndex) } return newSet }) } return (

{/* File Header */}

{diff.chunks.map((chunk, chunkIndex) => (

{chunk.type === "expand" ? (

{expandedChunks.has(chunkIndex) ? ( <> {/* Expanded lines */} {generateExpandedLines(chunk, diff.fullOldFile, diff.fullNewFile).map((line, lineIndex) => (

{line.oldLine || ""}

{line.newLine || ""}

{line.content}

))} {/* Collapse button */} ) : ( /* Expand button */ )}

) : ( <> {/* Chunk Header */}

@@ -{chunk.oldStart},{chunk.lines?.filter((l) => l.type !== "added").length || 0} +{chunk.newStart}, {chunk.lines?.filter((l) => l.type !== "removed").length || 0} @@

{/* Lines */} {chunk.lines?.map((line, lineIndex) => (

{/* Line Numbers */}

{line.oldLine || ""}

{line.newLine || ""}

{/* Change Indicator */}

{line.type === "added" && "+"} {line.type === "removed" && "-"}

{/* Code Content */}

{line.content}

))} )}

))}

) } // Example usage with corrected data structure export default function App() { const sampleDiff: DiffData = { filePath: "src/components/UserProfile.tsx", chunks: [ { type: "context", oldStart: 1, newStart: 1, lines: [ { type: "unchanged", oldLine: 1, newLine: 1, content: "import React, { useState } from 'react';" }, { type: "unchanged", oldLine: 2, newLine: 2, content: "import { User } from '../types';" }, { type: "removed", oldLine: 3, newLine: null, content: "import { formatDate } from '../utils';" }, { type: "added", oldLine: null, newLine: 3, content: "import { formatDate, validateEmail } from '../utils';", }, { type: "unchanged", oldLine: 4, newLine: 4, content: "" }, { type: "unchanged", oldLine: 5, newLine: 5, content: "interface UserProfileProps {" }, { type: "unchanged", oldLine: 6, newLine: 6, content: " user: User;" }, { type: "added", oldLine: null, newLine: 7, content: " onUpdate?: (user: User) => void;" }, { type: "unchanged", oldLine: 7, newLine: 8, content: "}" }, ], }, { type: "expand", oldStart: 8, newStart: 9, oldEnd: 7, newEnd: 8, expandDirection: "down", hiddenLines: 12, }, { type: "context", oldStart: 20, newStart: 21, lines: [ { type: "unchanged", oldLine: 20, newLine: 21, content: " const [isEditing, setIsEditing] = useState(false);", }, { type: "added", oldLine: null, newLine: 22, content: " const [email, setEmail] = useState(user.email);" }, { type: "added", oldLine: null, newLine: 23, content: " const [emailError, setEmailError] = useState('');" }, { type: "unchanged", oldLine: 21, newLine: 24, content: "" }, { type: "removed", oldLine: 22, newLine: null, content: " const handleSave = () => {" }, { type: "removed", oldLine: 23, newLine: null, content: " setIsEditing(false);" }, { type: "removed", oldLine: 24, newLine: null, content: " };" }, { type: "added", oldLine: null, newLine: 25, content: " const handleSave = () => {" }, { type: "added", oldLine: null, newLine: 26, content: " if (!validateEmail(email)) {" }, { type: "added", oldLine: null, newLine: 27, content: " setEmailError('Please enter a valid email address');", }, { type: "added", oldLine: null, newLine: 28, content: " return;" }, { type: "added", oldLine: null, newLine: 29, content: " }" }, { type: "added", oldLine: null, newLine: 30, content: " " }, { type: "added", oldLine: null, newLine: 31, content: " const updatedUser = { ...user, email };" }, { type: "added", oldLine: null, newLine: 32, content: " onUpdate?.(updatedUser);" }, { type: "added", oldLine: null, newLine: 33, content: " setIsEditing(false);" }, { type: "added", oldLine: null, newLine: 34, content: " setEmailError('');" }, { type: "added", oldLine: null, newLine: 35, content: " };" }, ], }, { type: "expand", oldStart: 25, newStart: 36, oldEnd: 24, newEnd: 35, expandDirection: "down", hiddenLines: 8, }, { type: "context", oldStart: 33, newStart: 44, lines: [ { type: "unchanged", oldLine: 33, newLine: 44, content: '

' }, { type: "removed", oldLine: 34, newLine: null, content: " {user.email}" }, { type: "added", oldLine: null, newLine: 45, content: " {isEditing ? (" }, { type: "added", oldLine: null, newLine: 46, content: "

" }, { type: "added", oldLine: null, newLine: 47, content: " setEmail(e.target.value)}", }, { type: "added", oldLine: null, newLine: 51, content: " className={emailError ? 'error' : ''}", }, { type: "added", oldLine: null, newLine: 52, content: " />" }, { type: "added", oldLine: null, newLine: 53, content: ' {emailError && {emailError}}', }, { type: "added", oldLine: null, newLine: 54, content: "

" }, { type: "added", oldLine: null, newLine: 55, content: " ) : (" }, { type: "added", oldLine: null, newLine: 56, content: " {user.email}" }, { type: "added", oldLine: null, newLine: 57, content: " )}" }, { type: "unchanged", oldLine: 35, newLine: 58, content: "

" }, ], }, ], fullOldFile: [ "import React, { useState } from 'react';", "import { User } from '../types';", "import { formatDate } from '../utils';", "", "interface UserProfileProps {", " user: User;", "}", "", "export default function UserProfile({ user }: UserProfileProps) {", " const [isEditing, setIsEditing] = useState(false);", "", " const handleEdit = () => {", " setIsEditing(true);", " };", "", " const handleCancel = () => {", " setIsEditing(false);", " };", "", " const [isEditing, setIsEditing] = useState(false);", "", " const handleSave = () => {", " setIsEditing(false);", " };", "", " return (", '

', '

', "

{user.name}

", " ", "

", '

', " {user.email}", "

", '

', " Joined: {formatDate(user.createdAt)}", "

", "

", " ", " );", "}", ], fullNewFile: [ "import React, { useState } from 'react';", "import { User } from '../types';", "import { formatDate, validateEmail } from '../utils';", "", "interface UserProfileProps {", " user: User;", " onUpdate?: (user: User) => void;", "}", "", "export default function UserProfile({ user, onUpdate }: UserProfileProps) {", " const [isEditing, setIsEditing] = useState(false);", " const [email, setEmail] = useState(user.email);", " const [emailError, setEmailError] = useState('');", "", " const handleEdit = () => {", " setIsEditing(true);", " };", "", " const handleCancel = () => {", " setIsEditing(false);", " };", "", " const handleSave = () => {", " if (!validateEmail(email)) {", " setEmailError('Please enter a valid email address');", " return;", " }", "", " const updatedUser = { ...user, email };", " onUpdate?.(updatedUser);", " setIsEditing(false);", " setEmailError('');", " };", "", " return (", '

', '

', "

{user.name}

", " ", "

", '

', " {isEditing ? (", "

", " setEmail(e.target.value)}", " className={emailError ? 'error' : ''}", " />", ' {emailError && {emailError}}', "

", " ) : (", " {user.email}", " )}", "

", '

', " Joined: {formatDate(user.createdAt)}", "

", "

", " ", " );", "}", ], } return (

Improved Diff Preview

) }7c:["$","$L86",null,{"chatId":"jNwENhv7hjS","children":["$","$L87",null,{"data":{"@\"active-block\",\"jNwENhv7hjS\",":{"id":"b_NC8MSlElrYm","messageId":"vkq5EhTi4V9JEdl6fwos5vnO5JMs8fwB","source":"$88","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"diff-preview","type":"code-project","project":"diff-preview","taskNameActive":"Removing diff header","taskNameComplete":"Removed diff header"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"jNwENhv7hjS\",":false,"":null},"children":"$L89"}]}]

About

Tags

Share

About

Tags

Share

More from deepakchandwani

More Templates Like This