import{r,j as e}from"./react-D_B_5QVd.js";import{Z as u}from"./index-CPYWJ7h_.js";import"./jszip-C9ownNzX.js";import"./react-dom-EAO2-NBm.js";import"./scheduler-DYLXRpC5.js";import"./@google-4tyssLU_.js";import"./marked-CesSW9Du.js";import"./idb-Dob3nYDb.js";const x=`function UserProfile({ user }) {
  return (
    <div className="profile">
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}`,h=`function UserProfile({ user }) {
  const { name, email, avatar } = user;
  return (
    <div className="profile-card">
      <img src={avatar} alt={name} />
      <h2>{name}</h2>
      <a href={\`mailto:\${email}\`}>{email}</a>
    </div>
  );
}`,y=()=>{const[c,d]=r.useState(x),[a,m]=r.useState(h),[n,i]=r.useState(""),[l,o]=r.useState(!1),s=r.useRef(null),f=()=>{s.current&&clearInterval(s.current),o(!0),i(""),s.current=window.setInterval(()=>{i(t=>t.length<a.length?a.substring(0,t.length+1):(s.current&&clearInterval(s.current),o(!1),a))},15)};return r.useEffect(()=>()=>{s.current&&clearInterval(s.current)},[]),e.jsxs("div",{className:"h-full flex flex-col p-4 sm:p-6 lg:p-8 text-text-primary",children:[e.jsxs("header",{className:"mb-6",children:[e.jsxs("h1",{className:"text-3xl flex items-center",children:[e.jsx(u,{}),e.jsx("span",{className:"ml-3",children:"Code Diff Ghost"})]}),e.jsx("p",{className:"text-text-secondary mt-1",children:'Visualize code changes with a "ghost typing" effect.'})]}),e.jsx("div",{className:"flex justify-center mb-4",children:e.jsx("button",{onClick:f,disabled:l,className:"btn-primary px-6 py-2",children:l?"Visualizing...":"Show Changes"})}),e.jsxs("div",{className:"flex-grow grid grid-cols-1 lg:grid-cols-2 gap-6 h-full overflow-hidden font-mono text-sm",children:[e.jsxs("div",{className:"flex flex-col h-full",children:[e.jsx("label",{htmlFor:"before-code",className:"text-sm font-medium text-text-secondary mb-2",children:"Before"}),e.jsx("textarea",{id:"before-code",value:c,onChange:t=>d(t.target.value),className:"flex-grow p-4 bg-surface border border-border rounded-md text-red-600 whitespace-pre-wrap resize-none",spellCheck:"false"})]}),e.jsxs("div",{className:"flex flex-col h-full",children:[e.jsx("label",{htmlFor:"after-code",className:"text-sm font-medium text-text-secondary mb-2",children:"After"}),e.jsxs("div",{className:"relative flex-grow",children:[e.jsx("textarea",{id:"after-code",value:a,onChange:t=>m(t.target.value),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",spellCheck:"false"}),(l||n)&&e.jsxs("pre",{className:"absolute inset-0 w-full h-full p-4 bg-surface pointer-events-none text-emerald-700 whitespace-pre-wrap z-10",children:[n,l&&e.jsx("span",{className:"animate-pulse",children:"|"})]})]})]})]})]})};export{y as CodeDiffGhost};
//# sourceMappingURL=CodeDiffGhost-Ci-r2GaB.js.map