admin08077/Githubgemini
0
1{"version":3,"file":"CodeDiffGhost-DMdEVRoq.js","sources":["../../components/features/CodeDiffGhost.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport { EyeIcon } from '../icons.tsx';\n\nconst initialOldCode = `function UserProfile({ user }) {\n return (\n <div className=\"profile\">\n <h1>{user.name}</h1>\n <p>{user.email}</p>\n </div>\n );\n}`;\n\nconst initialNewCode = `function UserProfile({ user }) {\n const { name, email, avatar } = user;\n return (\n <div className=\"profile-card\">\n <img src={avatar} alt={name} />\n <h2>{name}</h2>\n <a href={\\`mailto:\\${email}\\`}>{email}</a>\n </div>\n );\n}`;\n\nexport const CodeDiffGhost: React.FC = () => {\n const [oldCode, setOldCode] = useState(initialOldCode);\n const [newCode, setNewCode] = useState(initialNewCode);\n const [typedCode, setTypedCode] = useState('');\n const [isRunning, setIsRunning] = useState(false);\n const intervalRef = useRef<number | null>(null);\n\n const startAnimation = () => {\n if (intervalRef.current) clearInterval(intervalRef.current);\n setIsRunning(true);\n setTypedCode('');\n \n intervalRef.current = window.setInterval(() => {\n setTypedCode(prev => {\n if (prev.length < newCode.length) {\n return newCode.substring(0, prev.length + 1);\n }\n if (intervalRef.current) clearInterval(intervalRef.current);\n setIsRunning(false);\n return newCode;\n });\n }, 15);\n };\n\n useEffect(() => {\n return () => {\n if (intervalRef.current) clearInterval(intervalRef.current);\n };\n }, []);\n\n return (\n <div className=\"h-full flex flex-col p-4 sm:p-6 lg:p-8 text-text-primary\">\n <header className=\"mb-6\">\n <h1 className=\"text-3xl flex items-center\">\n <EyeIcon />\n <span className=\"ml-3\">Code Diff Ghost</span>\n </h1>\n <p className=\"text-text-secondary mt-1\">Visualize code changes with a \"ghost typing\" effect.</p>\n </header>\n <div className=\"flex justify-center mb-4\">\n <button\n onClick={startAnimation}\n disabled={isRunning}\n className=\"btn-primary px-6 py-2\"\n >\n {isRunning ? 'Visualizing...' : 'Show Changes'}\n </button>\n </div>\n <div className=\"flex-grow grid grid-cols-1 lg:grid-cols-2 gap-6 h-full overflow-hidden font-mono text-sm\">\n <div className=\"flex flex-col h-full\">\n <label htmlFor=\"before-code\" className=\"text-sm font-medium text-text-secondary mb-2\">Before</label>\n <textarea\n id=\"before-code\"\n value={oldCode}\n onChange={e => setOldCode(e.target.value)}\n className=\"flex-grow p-4 bg-surface border border-border rounded-md text-red-600 whitespace-pre-wrap resize-none\"\n spellCheck=\"false\"\n />\n </div>\n <div className=\"flex flex-col h-full\">\n <label htmlFor=\"after-code\" className=\"text-sm font-medium text-text-secondary mb-2\">After</label>\n <div className=\"relative flex-grow\">\n <textarea\n id=\"after-code\"\n value={newCode}\n onChange={e => setNewCode(e.target.value)}\n className=\"absolute inset-0 w-full h-full p-4 bg-surface border border-border rounded-md text-emerald-700 whitespace-pre-wrap resize-none z-0\"\n spellCheck=\"false\"\n />\n {(isRunning || typedCode) && (\n <pre className=\"absolute inset-0 w-full h-full p-4 bg-surface pointer-events-none text-emerald-700 whitespace-pre-wrap z-10\">\n {typedCode}{isRunning && <span className=\"animate-pulse\">|</span>}\n </pre>\n )}\n </div>\n </div>\n </div>\n </div>\n );\n};"],"names":["initialOldCode","initialNewCode","CodeDiffGhost","oldCode","setOldCode","useState","newCode","setNewCode","typedCode","setTypedCode","isRunning","setIsRunning","intervalRef","useRef","startAnimation","prev","useEffect","jsxs","jsx","EyeIcon","e"],"mappings":"oSAGA,MAAMA,EAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASjBC,EAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWVC,EAA0B,IAAM,CACzC,KAAM,CAACC,EAASC,CAAU,EAAIC,EAAAA,SAASL,CAAc,EAC/C,CAACM,EAASC,CAAU,EAAIF,EAAAA,SAASJ,CAAc,EAC/C,CAACO,EAAWC,CAAY,EAAIJ,EAAAA,SAAS,EAAE,EACvC,CAACK,EAAWC,CAAY,EAAIN,EAAAA,SAAS,EAAK,EAC1CO,EAAcC,EAAAA,OAAsB,IAAI,EAExCC,EAAiB,IAAM,CACrBF,EAAY,SAAS,cAAcA,EAAY,OAAO,EAC1DD,EAAa,EAAI,EACjBF,EAAa,EAAE,EAEfG,EAAY,QAAU,OAAO,YAAY,IAAM,CAC3CH,EAAaM,GACLA,EAAK,OAAST,EAAQ,OACfA,EAAQ,UAAU,EAAGS,EAAK,OAAS,CAAC,GAE3CH,EAAY,SAAS,cAAcA,EAAY,OAAO,EAC1DD,EAAa,EAAK,EACXL,EACV,CACL,EAAG,EAAE,CACT,EAEAU,OAAAA,EAAAA,UAAU,IACC,IAAM,CACLJ,EAAY,SAAS,cAAcA,EAAY,OAAO,CAC9D,EACD,CAAA,CAAE,EAGDK,EAAAA,KAAC,MAAA,CAAI,UAAU,2DACX,SAAA,CAAAA,EAAAA,KAAC,SAAA,CAAO,UAAU,OACd,SAAA,CAAAA,EAAAA,KAAC,KAAA,CAAG,UAAU,6BACV,SAAA,CAAAC,EAAAA,IAACC,EAAA,EAAQ,EACTD,EAAAA,IAAC,OAAA,CAAK,UAAU,OAAO,SAAA,iBAAA,CAAe,CAAA,EAC1C,EACAA,EAAAA,IAAC,IAAA,CAAE,UAAU,2BAA2B,SAAA,sDAAA,CAAoD,CAAA,EAChG,EACAA,EAAAA,IAAC,MAAA,CAAI,UAAU,2BACX,SAAAA,EAAAA,IAAC,SAAA,CACG,QAASJ,EACT,SAAUJ,EACV,UAAU,wBAET,WAAY,iBAAmB,cAAA,CAAA,EAExC,EACAO,EAAAA,KAAC,MAAA,CAAI,UAAU,2FACX,SAAA,CAAAA,EAAAA,KAAC,MAAA,CAAI,UAAU,uBACX,SAAA,CAAAC,MAAC,QAAA,CAAM,QAAQ,cAAc,UAAU,+CAA+C,SAAA,SAAM,EAC5FA,EAAAA,IAAC,WAAA,CACG,GAAG,cACH,MAAOf,EACP,SAAUiB,GAAKhB,EAAWgB,EAAE,OAAO,KAAK,EACxC,UAAU,wGACV,WAAW,OAAA,CAAA,CACf,EACJ,EACCH,EAAAA,KAAC,MAAA,CAAI,UAAU,uBACZ,SAAA,CAAAC,MAAC,QAAA,CAAM,QAAQ,aAAa,UAAU,+CAA+C,SAAA,QAAK,EACzFD,EAAAA,KAAC,MAAA,CAAI,UAAU,qBACZ,SAAA,CAAAC,EAAAA,IAAC,WAAA,CACG,GAAG,aACH,MAAOZ,EACP,SAAUc,GAAKb,EAAWa,EAAE,OAAO,KAAK,EACxC,UAAU,qIACV,WAAW,OAAA,CAAA,GAEbV,GAAaF,IACXS,EAAAA,KAAC,MAAA,CAAI,UAAU,8GACV,SAAA,CAAAT,EAAWE,GAAaQ,EAAAA,IAAC,OAAA,CAAK,UAAU,gBAAgB,SAAA,GAAA,CAAC,CAAA,CAAA,CAC9D,CAAA,CAAA,CAER,CAAA,CAAA,CACJ,CAAA,CAAA,CACJ,CAAA,EACJ,CAER"}