https://yoron.lovable.app/assets/reels-DL8cN8vG.js

1import{j as e,C as O,B as N,bd as Re,h as b,I as $,T as W,c9 as X,ca as Z,cb as J,cc as Q,cd as ee,bb as Ee,l as Ce,ar as Fe,m as Ae,s as Me,k as _e,b as Te,A as Le,Z as ue,L as q,bu as Oe,a0 as $e,be as Pe,t as M}from"./index-tp3ZBVoO.js";import{b as f}from"./recharts-D0niEN4L.js";import{A as ze}from"./arrow-up-DlZ-CFC3.js";import{A as Be}from"./arrow-down-DIq5ARm1.js";import{u as Ve}from"./bestanden-B3Z3ssnP.js";import{u as De}from"./categorieen-CwNwZGJ9.js";import{C as fe}from"./clapperboard-DV2jTsaT.js";import{P as Ie}from"./pause-zAIwSiUh.js";import{P as He}from"./play-D-D_K-wy.js";import"./constants-DwMRmQgW.js";const Ue=[{waarde:"fade",label:"Rustig verschijnen"},{waarde:"omhoog",label:"Van onder omhoog"},{waarde:"inzoomen",label:"Inzoomen"},{waarde:"vanlinks",label:"Van links inschuiven"}],U={naam:"YORON",accent:"#4C91FF"},v=1080,x=1920,P=30,B=2,ae=8,Ke=8;function Ge(){return`s_${Math.random().toString(36).slice(2,10)}`}function qe(a=U){return{id:Ge(),kop:"Nieuwe scene",subtekst:"",kleur_van:a.accent,kleur_naar:"#123B73",animatie:"fade",duur_sec:3}}function Ye(){return{titel:"",onderwerp:"",scenes:[]}}const Y=9;function D(a){const s=Math.min(ae,Math.max(B,a.duur_sec||B));return Math.round(s*P)}function ge(a){return a.scenes.reduce((s,o)=>s+D(o),0)}function be(a){return ge(a)/P}function We(a,s){let o=0;for(let d=0;d<s&&d<a.scenes.length;d+=1)o+=D(a.scenes[d]);return o}function Xe(a,s){let o=0;for(let i=0;i<a.scenes.length;i+=1){const m=a.scenes[i],t=D(m);if(s<o+t)return{index:i,scene:m,lokaalFrame:s-o,frames:t};o+=t}const d=a.scenes[a.scenes.length-1];if(!d)return null;const l=D(d);return{index:a.scenes.length-1,scene:d,lokaalFrame:l-1,frames:l}}function V(a,s=0,o=1){return Math.min(o,Math.max(s,a))}function te(a){const s=V(a);return s<.5?4*s*s*s:1-Math.pow(-2*s+2,3)/2}function he(a,s,o){const d=s.split(/\s+/).filter(Boolean),l=[];let i="";for(const m of d){const t=i?`${i} ${m}`:m;a.measureText(t).width>o&&i?(l.push(i),i=m):i=t}return i&&l.push(i),l}function Ze(a){const s=a.trim().length;return s<=22?116:s<=40?96:s<=70?80:66}function Je(a,s,o){const d=Math.sin(o*Math.PI)*90,l=a.createLinearGradient(0,d,v,x-d);l.addColorStop(0,s.kleur_van),l.addColorStop(1,s.kleur_naar),a.fillStyle=l,a.fillRect(0,0,v,x);const i=v*.75+Math.cos(o*Math.PI*2)*60,m=x*.24+Math.sin(o*Math.PI*2)*50,t=a.createRadialGradient(i,m,0,i,m,v*.7);t.addColorStop(0,"rgba(255,255,255,0.16)"),t.addColorStop(1,"rgba(255,255,255,0)"),a.fillStyle=t,a.fillRect(0,0,v,x)}function Qe(a,s,o,d,l){a.fillStyle="rgba(255,255,255,0.9)",a.fillRect(84,x-214,76,6),a.font="700 40px Arial, Helvetica, sans-serif",a.textAlign="left",a.textBaseline="alphabetic",a.fillStyle="rgba(255,255,255,0.94)",a.fillText(s.naam.toUpperCase(),84,x-150);const i=54,m=12,t=o*i+(o-1)*m;let c=(v-t)/2;const n=x-86;for(let u=0;u<o;u+=1)a.fillStyle="rgba(255,255,255,0.28)",a.fillRect(c,n,i,6),u<d?(a.fillStyle="rgba(255,255,255,0.95)",a.fillRect(c,n,i,6)):u===d&&(a.fillStyle="rgba(255,255,255,0.95)",a.fillRect(c,n,i*V(l),6)),c+=i+m}function pe(a,s,o,d,l,i,m){const t=V(o/Math.max(1,d-1));Je(a,s,t);const c=te(V(o/14)),n=1-te(V((o-(d-8))/8)),u=c*n;let h=0,C=0,S=1;s.animatie==="omhoog"&&(C=(1-c)*90),s.animatie==="vanlinks"&&(h=(1-c)*-140),s.animatie==="inzoomen"&&(S=.9+c*.1);const j=v-96*2;a.save(),a.globalAlpha=a.globalAlpha*u,a.translate(v/2+h,x/2+C),a.scale(S,S),a.textAlign="center",a.textBaseline="middle";const p=Ze(s.kop);a.font=`800 ${p}px Arial, Helvetica, sans-serif`;const k=he(a,s.kop,j),R=k.length*p*1.14,_=46;a.font=`400 ${_}px Arial, Helvetica, sans-serif`;const T=s.subtekst.trim()?he(a,s.subtekst.trim(),j-40):[],z=T.length*_*1.35;let F=-(R+(T.length?56+z:0))/2+p*.57;a.font=`800 ${p}px Arial, Helvetica, sans-serif`,a.fillStyle="#ffffff",a.shadowColor="rgba(0,0,0,0.28)",a.shadowBlur=26,a.shadowOffsetY=8;for(const A of k)a.fillText(A,0,F),F+=p*1.14;if(a.shadowBlur=0,a.shadowOffsetY=0,T.length){F+=56-p*.14,a.font=`400 ${_}px Arial, Helvetica, sans-serif`,a.fillStyle="rgba(255,255,255,0.92)";for(const A of T)a.fillText(A,0,F),F+=_*1.35}a.restore(),a.save(),a.globalAlpha=a.globalAlpha*c,Qe(a,l,i,m,t),a.restore(

1)}function ea(a,s,o,d=U){a.setTransform(1,0,0,1,0,0),a.globalAlpha=1,a.fillStyle="#0B1220",a.fillRect(0,0,v,x);const l=Xe(s,Math.max(0,o));if(!l){a.fillStyle="rgba(255,255,255,0.6)",a.font="500 48px Arial, Helvetica, sans-serif",a.textAlign="center",a.textBaseline="middle",a.fillText("Nog geen scenes",v/2,x/2);return}const i=s.scenes.length;pe(a,l.scene,l.lokaalFrame,l.frames,d,i,l.index);const m=s.scenes[l.index+1],t=l.frames-l.lokaalFrame;if(m&&t<=Y){const c=te(1-t/Y);a.save(),a.globalAlpha=c,pe(a,m,Y-t,D(m),d,i,l.index+1),a.restore()}}const aa=f.forwardRef(function({storyboard:s,frame:o,merk:d=U,className:l},i){const m=f.useRef(null),t=c=>{const n=m.current,u=n?.getContext("2d");!n||!u||ea(u,s,c,d)};return f.useImperativeHandle(i,()=>({canvas:()=>m.current,teken:t})),f.useEffect(()=>{t(o)},[o,s,d]),e.jsx("canvas",{ref:m,width:v,height:x,className:l??"h-auto w-full rounded-lg border bg-slate-900 shadow-sm","aria-label":"Voorbeeld van de reel"})});function ta({scenes:a,actief:s,onActief:o,onChange:d}){const l=(t,c)=>d(a.map(n=>n.id===t?{...n,...c}:n)),i=t=>d(a.filter(c=>c.id!==t)),m=(t,c)=>{const n=t+c;if(n<0||n>=a.length)return;const u=a.slice(),[h]=u.splice(t,1);u.splice(n,0,h),d(u),o(n)};return e.jsxs("div",{className:"space-y-3",children:[a.map((t,c)=>e.jsxs(O,{role:"button",tabIndex:0,onClick:()=>o(c),onKeyDown:n=>{(n.key==="Enter"||n.key===" ")&&o(c)},className:`cursor-pointer p-4 transition-all hover:shadow-md active:scale-[0.995] ${c===s?"border-primary ring-1 ring-primary/30":""}`,children:[e.jsxs("div",{className:"mb-3 flex items-center justify-between gap-2",children:[e.jsxs("span",{className:"text-xs font-semibold uppercase tracking-wider text-muted-foreground",children:["Scene ",c+1]}),e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsx(N,{type:"button",variant:"ghost",size:"sm","aria-label":"Naar boven",disabled:c===0,onClick:n=>{n.stopPropagation(),m(c,-1)},children:e.jsx(ze,{className:"h-4 w-4"})}),e.jsx(N,{type:"button",variant:"ghost",size:"sm","aria-label":"Naar beneden",disabled:c===a.length-1,onClick:n=>{n.stopPropagation(),m(c,1)},children:e.jsx(Be,{className:"h-4 w-4"})}),e.jsx(N,{type:"button",variant:"ghost",size:"sm","aria-label":"Scene verwijderen",onClick:n=>{n.stopPropagation(),i(t.id)},children:e.jsx(Re,{className:"h-4 w-4 text-destructive"})})]})]}),e.jsxs("div",{className:"space-y-3",onClick:n=>n.stopPropagation(),children:[e.jsxs("div",{children:[e.jsx(b,{htmlFor:`kop-${t.id}`,children:"Kop"}),e.jsx($,{id:`kop-${t.id}`,value:t.kop,maxLength:90,onChange:n=>l(t.id,{kop:n.target.value})})]}),e.jsxs("div",{children:[e.jsx(b,{htmlFor:`sub-${t.id}`,children:"Subtekst"}),e.jsx(W,{id:`sub-${t.id}`,rows:2,value:t.subtekst,maxLength:160,onChange:n=>l(t.id,{subtekst:n.target.value})})]}),e.jsxs("div",{className:"grid gap-3 sm:grid-cols-2",children:[e.jsxs("div",{children:[e.jsx(b,{htmlFor:`animatie-${t.id}`,children:"Beweging"}),e.jsxs(X,{value:t.animatie,onValueChange:n=>l(t.id,{animatie:n}),children:[e.jsx(Z,{id:`animatie-${t.id}`,children:e.jsx(J,{})}),e.jsx(Q,{children:Ue.map(n=>e.jsx(ee,{value:n.waarde,children:n.label},n.waarde))})]})]}),e.jsxs("div",{children:[e.jsx(b,{htmlFor:`duur-${t.id}`,children:"Duur in seconden"}),e.jsx($,{id:`duur-${t.id}`,type:"number",min:B,max:ae,value:t.duur_sec,onChange:n=>{const u=Number(n.target.value);l(t.id,{duur_sec:Number.isFinite(u)?Math.min(ae,Math.max(B,Math.round(u))):B})}})]})]}),e.jsxs("div",{className:"grid gap-3 sm:grid-cols-2",children:[e.jsxs("div",{children:[e.jsx(b,{htmlFor:`van-${t.id}`,children:"Kleur boven"}),e.jsx($,{id:`van-${t.id}`,type:"color",className:"h-10 p-1",value:t.kleur_van,onChange:n=>l(t.id,{kleur_van:n.target.value})})]}),e.jsxs("div",{children:[e.jsx(b,{htmlFor:`naar-${t.id}`,children:"Kleur onder"}),e.jsx($,{id:`naar-${t.id}`,type:"color",className:"h-10 p-1",value:t.kleur_naar,onChange:n=>l(t.id,{kleur_naar:n.target.value})})]})]})]})]},t.id)),e.jsxs(N,{type:"button",variant:"outline",className:"w-full",disabled:a.length>=Ke,onClick:()=>{d([...a,qe()]),o(a.length)},children:[e.jsx(Ee,{className:"mr-1.5 h-4 w-4"}),"Scene toevoegen"]})]})}const sa=[{mime:"video/webm;codecs=vp9",extensie:"webm"},{mime:"video/webm;codecs=vp8",extensie:"webm"},{mime:"video/webm",extensie:"webm"},{mime:"video/mp4",extensie:"mp4"}];function ve(){if(typeof window>"u"||typeof MediaRecorder>"u")return null;

1for(const a of sa)if(MediaRecorder.isTypeSupported(a.mime))return a;return null}function na(){return typeof window>"u"?!1:typeof HTMLCanvasElement<"u"&&typeof HTMLCanvasElement.prototype.captureStream=="function"&&ve()!==null}async function ra(a){const{canvas:s,totaalFrames:o,tekenFrame:d,onVoortgang:l}=a,i=ve();if(!i)throw new Error("Deze browser kan geen video opnemen. Gebruik Chrome, Edge of Firefox.");const m=s.captureStream(P),t=new MediaRecorder(m,{mimeType:i.mime,videoBitsPerSecond:6e6}),c=[];t.ondataavailable=h=>{h.data&&h.data.size>0&&c.push(h.data)};const n=new Promise((h,C)=>{t.onstop=()=>h(),t.onerror=()=>C(new Error("Opnemen is onderbroken."))});d(0),t.start(250),await new Promise(h=>{const C=performance.now();let S=-1;const w=()=>{const j=performance.now()-C,p=Math.min(o-1,Math.floor(j/1e3*P));if(p!==S&&(d(p),S=p,l?.(p+1,o)),p>=o-1){window.setTimeout(h,220);return}window.requestAnimationFrame(w)};window.requestAnimationFrame(w)}),t.stop(),m.getTracks().forEach(h=>h.stop()),await n;const u=new Blob(c,{type:i.mime});if(u.size===0)throw new Error("De opname leverde geen video op. Probeer het opnieuw.");return{blob:u,extensie:i.extensie,mime:i.mime}}const oa=Ce({method:"POST"}).middleware([Fe]).handler(Ae("2d1d7f165a814334a9b000e2933b21a4c55bad25d2e5d5cba24e7ef9b479d98d")),ia=[{waarde:"informatief",label:"Informatief en rustig"},{waarde:"urgent",label:"Wakker schudden"},{waarde:"warm",label:"Warm en persoonlijk"},{waarde:"zakelijk",label:"Zakelijk en zakelijk kort"}];function la(a,s){return`reel-${a.normalize("NFKD").replace(/[^\w\s-]+/g,"").trim().replace(/\s+/g,"-").toLowerCase().slice(0,60)||"yoron"}.${s}`}async function da(a){const{blob:s,extensie:o,titel:d,beschrijving:l,categorie:i,storyboard:m}=a,t=new File([s],la(d,o),{type:s.type}),c=await Ve(null,t),n=Math.round(be(m)),{error:u}=await Me.from("hub_items").insert({organisatie_id:null,kantoor_id:null,titel:d.trim(),beschrijving:l.trim()||`Verticale reel van ongeveer ${n} seconden over ${m.onderwerp||d}.`,categorie:i||null,soort:"reel",status:"gepubliceerd",publicatiedatum:new Date().toISOString().slice(0,10),tags:["reel","social"],kanaal:"Social media",bron:"yoron",bestand_url:c.pad,bestand_naam:c.naam,bestand_grootte:c.grootte});if(u)throw new Error(u.message)}function wa(){const a=_e(oa),s=f.useRef(null),[o,d]=f.useState(""),[l,i]=f.useState("informatief"),[m,t]=f.useState(5),[c,n]=f.useState(!1),[u,h]=f.useState(Ye),[C,S]=f.useState(0),[w,j]=f.useState(0),[p,k]=f.useState(!1),[R,_]=f.useState(!1),[T,z]=f.useState(0),[g,F]=f.useState(null),[A,se]=f.useState(""),[ne,xe]=f.useState(""),[I,re]=f.useState(""),[oe,ie]=f.useState(!1),[le,we]=f.useState(!0),{categorieen:H}=De(),E=f.useMemo(()=>ge(u),[u]),de=f.useMemo(()=>be(u),[u]);f.useEffect(()=>{we(na())},[]),f.useEffect(()=>{!I&&H.length>0&&re(H[0].waarde)},[H,I]),f.useEffect(()=>{if(!p||E===0)return;let r=!1;const y=performance.now(),K=w>=E-1?0:w,L=()=>{if(r)return;const G=(performance.now()-y)/1e3,me=K+Math.floor(G*P);if(me>=E-1){j(E-1),k(!1);return}j(me),window.requestAnimationFrame(L)};return window.requestAnimationFrame(L),()=>{r=!0}},[p,E]),f.useEffect(()=>()=>{g&&URL.revokeObjectURL(g.url)},[]);const je=r=>{h(y=>({...y,scenes:r})),k(!1),ce()},ce=()=>{F(r=>(r&&URL.revokeObjectURL(r.url),null)),z(0)},ke=async()=>{if(o.trim().length<3){M.error("Vul eerst een onderwerp in.");return}n(!0);try{const r=await a({data:{onderwerp:o.trim(),toon:l,aantalScenes:m}});h({titel:r.titel,onderwerp:o.trim(),scenes:r.scenes}

1),se(r.titel),S(0),j(0),k(!1),ce(),M.success("Storyboard staat klaar. Pas de scenes aan waar u wilt.")}catch(r){M.error(r instanceof Error?r.message:"Het storyboard kon niet worden gemaakt.")}finally{n(!1)}},ye=async()=>{const r=s.current?.canvas();if(!(!r||E===0)){k(!1),_(!0),z(0);try{const y=await ra({canvas:r,totaalFrames:E,tekenFrame:L=>s.current?.teken(L),onVoortgang:(L,G)=>z(Math.round(L/G*100))}),K=URL.createObjectURL(y.blob);F({blob:y.blob,extensie:y.extensie,url:K}),M.success("De video is klaar.")}catch(y){M.error(y instanceof Error?y.message:"Het renderen is mislukt.")}finally{_(!1),s.current?.teken(w)}}},Ne=()=>{if(!g)return;const r=document.createElement("a");r.href=g.url,r.download=`${(A||"yoron-reel").toLowerCase().replace(/\s+/g,"-")}.${g.extensie}`,r.click()},Se=async()=>{if(g){if(!A.trim()){M.error("Geef de reel eerst een titel.");return}ie(!0);try{await da({blob:g.blob,extensie:g.extensie,titel:A,beschrijving:ne,categorie:I,storyboard:u}),M.success("De reel staat gepubliceerd in YORON Vinden.")}catch(r){M.error(r instanceof Error?r.message:"Publiceren is mislukt.")}finally{ie(!1)}}};return e.jsxs("div",{className:"space-y-6 p-6",children:[e.jsxs("div",{children:[e.jsx(N,{asChild:!0,variant:"ghost",size:"sm",className:"mb-2 -ml-2",children:e.jsxs(Te,{to:"/admin/vinden",children:[e.jsx(Le,{className:"mr-1.5 h-4 w-4"}),"Terug naar Vinden"]})}),e.jsxs("h1",{className:"flex items-center gap-2 text-2xl font-semibold",children:[e.jsx(fe,{className:"h-6 w-6 text-primary"}),"Reels maken"]}),e.jsx("p",{className:"mt-1 max-w-3xl text-sm text-muted-foreground",children:"Geef een onderwerp op, laat de AI een storyboard voorstellen, pas de scenes aan en render de verticale video in de browser. Publiceert u de reel, dan staat die als centrale YORON-content in Vinden en kunnen alle aangesloten kantoren die downloaden."})]}),!le&&e.jsx(O,{className:"border-amber-300 bg-amber-50 p-4 text-sm text-amber-900",children:"Deze browser kan geen video opnemen. Het storyboard en de preview werken wel, maar gebruik Chrome, Edge of Firefox om de video te renderen."}),e.jsxs("div",{className:"grid gap-6 lg:grid-cols-[1fr_420px]",children:[e.jsxs("div",{className:"space-y-6",children:[e.jsxs(O,{className:"space-y-4 p-5",children:[e.jsxs("h2",{className:"flex items-center gap-2 text-base font-semibold",children:[e.jsx(ue,{className:"h-4 w-4 text-primary"}),"1. Onderwerp"]}),e.jsxs("div",{children:[e.jsx(b,{htmlFor:"onderwerp",children:"Waar gaat de reel over?"}),e.jsx(W,{id:"onderwerp",rows:2,placeholder:"Bijvoorbeeld: waarom cyberrisico ook een klein bedrijf raakt",value:o,onChange:r=>d(r.target.value)})]}),e.jsxs("div",{className:"grid gap-3 sm:grid-cols-2",children:[e.jsxs("div",{children:[e.jsx(b,{htmlFor:"toon",children:"Toon"}),e.jsxs(X,{value:l,onValueChange:r=>i(r),children:[e.jsx(Z,{id:"toon",children:e.jsx(J,{})}),e.jsx(Q,{children:ia.map(r=>e.jsx(ee,{value:r.waarde,children:r.label},r.waarde))})]})]}),e.jsxs("div",{children:[e.jsx(b,{htmlFor:"scenes",children:"Aantal scenes"}),e.jsx($,{id:"scenes",type:"number",min:3,max:8,value:m,onChange:r=>t(Math.min(8,Math.max(3,Math.round(Number(r.target.value)||5))))})]})]}),e.jsxs(N,{onClick:ke,disabled:c,children:[c?e.jsx(q,{className:"mr-1.5 h-4 w-4 animate-spin"}):e.jsx(ue,{className:"mr-1.5 h-4 w-4"}),u.scenes.length>0?"Nieuw storyboard voorstellen":"Storyboard voorstellen"]}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"De AI schrijft uitsluitend bewustwordingsteksten. Er komt geen financieel advies in de reel: de afsluiting verwijst altijd naar een gesprek met de adviseur."})]}),u.scenes.length>0&&e.jsxs(O,{className:"space-y-4 p-5",children:[e.jsxs("div",{className:"flex items-center justify-between gap-3",children:[e.jsx("h2",{className:"text-base font-semibold",children:"2. Scenes bijschaven"}),e.jsxs(Oe,{variant:"secondary",children:[u.scenes.length," scenes · ",de.toFixed(0)," sec"]})]}),e.jsx(ta,{scenes:u.scenes,actief:C,onActief:r=>{S(r),k(!1),j(We(u,r))},onChange:je})]})]}),e.jsxs("div",{className:"space-y-4 lg:sticky lg:top-6 lg:self-start",children:[e.jsxs(O,{className:"space-y-3 p-4",children:[e.jsx("div",{className:"mx-auto w-full max-w-[280px]",children:e.jsx(aa,{ref:s,storyboard:u,frame:w,merk:U})}),E>0&&e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(N,{type:"button",variant:"outline",size:"sm",disabled:R,onClick:()=>k(r=>!r),children:p?e.jsx(Ie,{className:"h-4 w-4"}):e.jsx(He,{className:"h-4 w-4"})}),e.jsx("input",{type:"range",min:0,max:Math.max(0,E-1),value:w,disabled:R,onChange:r=>{k(!1),j(Number(r.target.value))},className:"flex-1 accent-primary","aria-label":"Positie in de reel"}),e.jsxs("span",{className:"w-14 text-right text-xs tabular-nums text-muted-foreground",children:[(w/P).toFixed(1),"s"]})]}),e.jsxs(N,{className:"w-full",onClick:ye,disabled:R||!le,children:[R?e.jsx(q,{className:"mr-1.5 h-4 w-4 animate-spin"}):e.jsx(fe,{className:"mr-1.5 h-4 w-4"}),R?`Video maken... ${T}%`:"Video maken"]}),R&&e.jsx("div",{className:"h-1.5 w-full overflow-hidden rounded-full bg-muted",children:e.jsx("div",{className:"h-full bg-primary transition-all",style:{width:`${T}%`}})}),R&&e.jsxs("p",{className:"text-xs text-muted-foreground",children:["De opname loopt op werkelijke snelheid, dus dit duurt ongeveer ",de.toFixed(0)," ","seconden. Laat dit tabblad open staan."]})]})]}),g&&e.jsxs(O,{className:"space-y-3 p-4",children:[e.jsx("h2",{className:"text-base font-semibold",children:"3. Klaar: bewaren"}),e.jsx("video",{src:g.url,controls:!0,className:"w-full rounded-md border bg-black"}),e.jsxs("div",{children:[e.jsx(b,{htmlFor:"titel",children:"Titel"}),e.jsx($,{id:"titel",value:A,onChange:r=>se(r.target.value)})]}),e.jsxs("div",{children:[e.jsx(b,{htmlFor:"cat",children:"Categorie in Vinden"}

1),e.jsxs(X,{value:I,onValueChange:re,children:[e.jsx(Z,{id:"cat",children:e.jsx(J,{placeholder:"Kies een categorie"})}),e.jsx(Q,{children:H.map(r=>e.jsx(ee,{value:r.waarde,children:r.label},r.waarde))})]})]}),e.jsxs("div",{children:[e.jsx(b,{htmlFor:"beschrijving",children:"Beschrijving"}),e.jsx(W,{id:"beschrijving",rows:2,placeholder:"Kort waar de reel over gaat en waarvoor kantoren die kunnen gebruiken.",value:ne,onChange:r=>xe(r.target.value)})]}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsxs(N,{variant:"outline",onClick:Ne,children:[e.jsx($e,{className:"mr-1.5 h-4 w-4"}),"Downloaden"]}),e.jsxs(N,{onClick:Se,disabled:oe,children:[oe?e.jsx(q,{className:"mr-1.5 h-4 w-4 animate-spin"}):e.jsx(Pe,{className:"mr-1.5 h-4 w-4"}),"Publiceren in Vinden"]})]}),e.jsxs("p",{className:"text-xs text-muted-foreground",children:["Bestandsgrootte: ",(g.blob.size/1e6).toFixed(1)," MB. Publiceren zet de reel direct op zichtbaar voor alle aangesloten kantoren."]})]})]})]})]})}export{wa as component};