https://www.memebuilder.ai/assets/TextEditor-6d0fd2d3.js

1import{j as e,d as n,B as g,ab as y}from"./index-3be42721.js";import"./vendor-91d88cb5.js";import{m}from"./animation-4d604355.js";import{P as h}from"./plus-d363b210.js";import{T as N}from"./trash-2-cb2b23dd.js";import"./firebase-be9e5ae4.js";import"./utils-072b33af.js";const v=["Impact","Arial Black","Helvetica","Arial","Comic Sans MS","Times New Roman","Courier New"],b=["#ffffff","#000000","#ff0000","#00ff00","#0000ff","#ffff00","#ff00ff","#00ffff","#ffa500","#800080"],F=({textElements:r,activeTextId:d,onTextUpdate:u,onTextSelect:f,onAddText:c,onTextRemove:j,inline:i=!1,isPrimary:o=!1,compact:t=!1})=>{const a=r.find(s=>s.id===d),l=(s,x)=>{a&&u(d,{[s]:x})};return e.jsxs(m.div,{initial:{opacity:0,x:i?0:-20},animate:{opacity:1,x:0},transition:{duration:.5},className:i?"":"bg-white rounded-3xl shadow-xl border border-slate-200/50 p-6",children:[!i&&e.jsxs("div",{className:"flex items-center justify-between mb-6",children:[e.jsxs("h3",{className:"text-xl font-display font-medium text-slate-800 flex items-center gap-2",children:[e.jsx(n,{size:24}),"Text Editor"]}),e.jsxs("button",{onClick:c,className:"flex items-center gap-2 text-sm px-4 py-2 rounded-lg bg-ink text-white hover:bg-[#2a2a2a] transition-colors",children:[e.jsx(h,{size:16}),"Add Text"]})]}),i&&o&&e.jsxs("div",{className:t?"mb-3":"mb-6",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("h3",{className:`font-display font-medium text-slate-800 ${t?"text-base":"text-lg"}`,children:"Text Editor"}),e.jsxs(g,{onClick:c,size:"sm",children:[e.jsx(h,{size:14,className:"mr-1"}),t?"Add":"Add Text"]})]}),!t&&e.jsxs("p",{className:"text-sm text-slate-500 mt-1",children:["Select text on canvas or manage elements below",e.jsx("br",{}),e.jsxs("span",{className:"text-xs inline-flex items-center gap-1",children:[e.jsx(y,{className:"w-3 h-3","aria-hidden":"true"}),"Double-click text on canvas to edit directly"]})]})]}),i&&!o&&e.jsx("div",{className:"mb-6",children:e.jsx("h3",{className:"text-lg font-display font-medium text-slate-800 mb-4",children:"Text Properties"})}),e.jsxs("div",{className:t?"mb-3":"mb-6",children:[e.jsxs("div",{className:"flex items-center justify-between mb-2",children:[e.jsxs("h4",{className:`font-medium text-slate-700 ${t?"text-xs":"text-sm"}`,children:["Text Elements (",r.length,")"]}),o&&r.length===0&&!t&&e.jsx("span",{className:"text-xs text-slate-500",children:'Click "Add" to start'})]}),r.length===0?e.jsxs("div",{className:`text-center text-slate-500 ${t?"py-4":"py-8"}`,children:[e.jsx(n,{className:`mx-auto mb-2 opacity-50 ${t?"w-6 h-6":"w-8 h-8"}`}),e.jsx("p",{className:t?"text-xs":"text-sm",children:"No text elements yet"}),!t&&e.jsx("p",{className:"text-xs mt-1",children:"Add text to start editing your meme"})]}):e.jsx("div",{className:t?"space-y-1":"space-y-2",children:r.map((s,x)=>e.jsx("div",{className:`${t?"p-2":"p-3"} rounded-lg border-2 cursor-pointer transition-all duration-200 ${d===s.id?"border-ink bg-black/[0.04] shadow-sm":"border-slate-200 hover:border-slate-300 hover:bg-slate-50"}`,onClick:()=>f(s.id),children:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsxs("div",{className:`flex items-center gap-2 ${t?"mb-0":"mb-1"}`,children:[e.jsxs("span",{className:"font-medium text-slate-500 bg-slate-100 px-2 py-1 rounded text-xs",children:["#",x+1]}),e.jsx("div",{className:`font-medium text-slate-900 truncate ${t?"text-sm":"text-base"}`,children:s.text||"Empty Text"})]}),!t&&e.jsxs("div",{className:"text-xs text-slate-500 flex items-center gap-2",children:[e.jsx("span",{children:s.fontFamily}),e.jsx("span",{children:"•"}),e.jsxs("span",{children:[s.fontSize,"px"]}),e.jsx("span",{children:"•"}),e.jsx("div",{className:"w-3 h-3 rounded border border-slate-300",style:{backgroundColor:s.color},title:`Color: ${s.color}`})]})]}),e.jsx("button",{onClick:p=>{p.stopPropagation(),j(s.id)},className:`ml-2 text-red-500 hover:text-red-700 hover:bg-red-50 rounded transition-colors ${t?"p-1":"p-1.5"}`,title:"Delete text element",children:e.jsx(N,{size:t?12:14})})]})},s.id))})]}),a&&e.jsx(m.div,{initial:{opacity:0,y:10}

1,animate:{opacity:1,y:0},transition:{duration:.3},className:t?"space-y-2":"space-y-4",children:e.jsxs("div",{className:`bg-gray-50 rounded-lg ${t?"p-3":"p-4"}`,children:[e.jsxs("h4",{className:`font-medium text-gray-700 ${t?"text-xs mb-2":"text-sm mb-3"}`,children:["Editing: ",a.id.toUpperCase()]}),e.jsxs("div",{className:t?"mb-2":"mb-4",children:[e.jsx("label",{className:`block font-medium text-gray-600 ${t?"text-xs mb-1":"text-sm mb-2"}`,children:"Text Content"}),e.jsx("textarea",{value:a.text,onChange:s=>l("text",s.target.value),onFocus:s=>s.target.select(),placeholder:"Enter your meme text...",className:"w-full rounded-lg border border-gray-300 px-3 py-2 text-base resize-none h-20 focus:outline-none focus:ring-2 focus:ring-black/10 focus:border-black/30"})]}),e.jsxs("div",{className:"mb-4",children:[e.jsx("label",{className:"block text-sm font-medium text-gray-600 mb-2",children:"Font Family"}),e.jsx("select",{value:a.fontFamily,onChange:s=>l("fontFamily",s.target.value),className:"w-full rounded-lg border border-gray-300 px-3 py-2 text-base bg-white focus:outline-none focus:ring-2 focus:ring-black/10 focus:border-black/30",children:v.map(s=>e.jsx("option",{value:s,style:{fontFamily:s},children:s},s))})]}),e.jsxs("div",{className:"mb-4",children:[e.jsxs("label",{className:"block text-sm font-medium text-gray-600 mb-2",children:["Font Size: ",a.fontSize,"px"]}),e.jsx("input",{type:"range",min:"16",max:"72",value:a.fontSize,onChange:s=>l("fontSize",parseInt(s.target.value)),className:"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"}),e.jsxs("div",{className:"flex justify-between text-xs text-gray-500 mt-1",children:[e.jsx("span",{children:"16px"}),e.jsx("span",{children:"72px"})]})]}),e.jsxs("div",{className:"mb-4",children:[e.jsx("label",{className:"block text-sm font-medium text-gray-600 mb-2",children:"Text Color"}),e.jsx("div",{className:"flex flex-wrap gap-2 mb-2",children:b.map(s=>e.jsx("button",{onClick:()=>l("color",s),className:`w-8 h-8 rounded-full border-2 transition-all duration-200 ${a.color===s?"border-gray-800 scale-110":"border-gray-300 hover:scale-105"}`,style:{backgroundColor:s}},s))}),e.jsx("input",{type:"color",value:a.color,onChange:s=>l("color",s.target.value),className:"w-full h-10 rounded-lg border border-gray-300 cursor-pointer"})]}),e.jsxs("div",{className:"mb-4",children:[e.jsx("label",{className:"block text-sm font-medium text-gray-600 mb-2",children:"Outline Color"}),e.jsx("div",{className:"flex flex-wrap gap-2 mb-2",children:b.map(s=>e.jsx("button",{onClick:()=>l("strokeColor",s),className:`w-8 h-8 rounded-full border-2 transition-all duration-200 ${a.strokeColor===s?"border-gray-800 scale-110":"border-gray-300 hover:scale-105"}`,style:{backgroundColor:s}},s))}),e.jsx("input",{type:"color",value:a.strokeColor,onChange:s=>l("strokeColor",s.target.value),className:"w-full h-10 rounded-lg border border-gray-300 cursor-pointer"})]}),e.jsxs("div",{className:"mb-4",children:[e.jsxs("label",{className:"block text-sm font-medium text-gray-600 mb-2",children:["Outline Width: ",a.strokeWidth,"px"]}),e.jsx("input",{type:"range",min:"0",max:"8",value:a.strokeWidth,onChange:s=>l("strokeWidth",parseInt(s.target.value)),className:"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"}),e.jsxs("div",{className:"flex justify-between text-xs text-gray-500 mt-1",children:[e.jsx("span",{children:"0px"}),e.jsx("span",{children:"8px"})]})]})]})}),!a&&r.length>0&&e.jsxs("div",{className:"text-center py-8 text-gray-500",children:[e.jsx(n,{size:48,className:"mx-auto mb-4 opacity-50"}),e.jsx("p",{children:"Select a text element to edit its properties"})]}),r.length===0&&e.jsxs("div",{className:"text-center py-8 text-gray-500",children:[e.jsx(n,{size:48,className:"mx-auto mb-4 opacity-50"}),e.jsx("p",{children:"No text elements yet"}),e.jsx("p",{className:"text-sm",children:'Click "Add Text" to get started'})]})]})};export{F as default};