https://backlinkbot.ai/_next/static/chunks/4685.d51ed63ce5d92c2e.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4685],{13406:(e,s,a)=>{a.d(s,{Xi:()=>c,av:()=>o,j7:()=>n,tU:()=>d});var t=a(95155),i=a(12115),l=a(25667),r=a(64269);let d=l.bL,n=i.forwardRef((e,s)=>{let{className:a,...i}=e;return(0,t.jsx)(l.B8,{ref:s,className:(0,r.cn)("inline-flex h-10 items-center justify-center rounded-full bg-muted p-1 text-muted-foreground",a),...i})});n.displayName=l.B8.displayName;let c=i.forwardRef((e,s)=>{let{className:a,...i}=e;return(0,t.jsx)(l.l9,{ref:s,className:(0,r.cn)("inline-flex items-center justify-center whitespace-nowrap rounded-full px-4 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",a),...i})});c.displayName=l.l9.displayName;let o=i.forwardRef((e,s)=>{let{className:a,...i}=e;return(0,t.jsx)(l.UC,{ref:s,className:(0,r.cn)("mt-6 focus-visible:outline-none",a),...i})});o.displayName=l.UC.displayName},13496:(e,s,a)=>{a.d(s,{Accordion:()=>n,AccordionContent:()=>m,AccordionItem:()=>c,AccordionTrigger:()=>o});var t=a(95155),i=a(12115),l=a(16083),r=a(24033),d=a(64269);let n=l.bL,c=i.forwardRef((e,s)=>{let{className:a,...i}=e;return(0,t.jsx)(l.q7,{ref:s,className:(0,d.cn)("border-b",a),...i})});c.displayName="AccordionItem";let o=i.forwardRef((e,s)=>{let{className:a,children:i,...n}=e;return(0,t.jsx)(l.Y9,{className:"flex",children:(0,t.jsxs)(l.l9,{ref:s,className:(0,d.cn)("flex flex-1 items-center justify-between py-4 text-left text-base font-medium transition-all hover:text-purple [&[data-state=open]>svg]:rotate-180",a),...n,children:[i,(0,t.jsx)(r.A,{className:"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"})]})})});o.displayName=l.l9.displayName;let m=i.forwardRef((e,s)=>{let{className:a,children:i,...r}=e;return(0,t.jsx)(l.UC,{ref:s,className:"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",...r,children:(0,t.jsx)("div",{className:(0,d.cn)("pb-4 pt-0 text-muted-foreground",a),children:i})})});m.displayName=l.UC.displayName},15894:(e,s,a)=>{a.d(s,{dj:()=>m,oR:()=>o});var t=a(12115);let i=0,l=new Map,r=e=>{if(l.has(e))return;let s=setTimeout(()=>{l.delete(e),c({type:"REMOVE_TOAST",toastId:e})},1e6);l.set(e,s)},d=[],n={toasts:[]};function c(e){n=((e,s)=>{switch(s.type){case"ADD_TOAST":return{...e,toasts:[s.toast,...e.toasts].slice(0,1)};case"UPDATE_TOAST":return{...e,toasts:e.toasts.map(e=>e.id===s.toast.id?{...e,...s.toast}:e)};case"DISMISS_TOAST":{let{toastId:a}=s;return a?r(a):e.toasts.forEach(e=>{r(e.id)}),{...e,toasts:e.toasts.map(e=>e.id===a||void 0===a?{...e,open:!1}:e)}}case"REMOVE_TOAST":if(void 0===s.toastId)return{...e,toasts:[]};return{...e,toasts:e.toasts.filter(e=>e.id!==s.toastId)}}})(n,e),d.forEach(e=>{e(n)})}function o(e){let{...s}=e,a=(i=(i+1)%Number.MAX_SAFE_INTEGER).toString(),t=()=>c({type:"DISMISS_TOAST",toastId:a});return c({type:"ADD_TOAST",toast:{...s,id:a,open:!0,onOpenChange:e=>{e||t()}}}),{id:a,dismiss:t,update:e=>c({type:"UPDATE_TOAST",toast:{...e,id:a}})}}function m(){let[e,s]=t.useState(n);return t.useEffect(()=>(d.push(s),()=>{let e=d.indexOf(s);e>-1&&d.splice(e,1)}),[e]),{...e,toast:o,dismiss:e=>c({type:"DISMISS_TOAST",toastId:e})}}},34685:(e,s,a)=>{a.r(s),a.d(s,{default:()=>T});var t=a(95155),i=a(12115),l=a(42196),r=a(21786),d=a(71360),n=a(89559),c=a(44173),o=a(23540),m=a(39867),u=a(98613),h=a(3998),x=a(65142),p=a(76444),f=a(86948),g=a(13406),j=a(44846),b=a(50909),N=a(86259),v=a(11186),w=a(82021),y=a(13496);let S=[{name:"Social Media Post",width:1200,height:630},{name:"Instagram Post",width:1080,height:1080},{name:"Instagram Story",width:1080,height:1920},{name:"Facebook Cover",width:851,height:315},{name:"Twitter Post",width:1200,height:675},{name:"YouTube Thumbnail",width:1280,height:720},{name:"LinkedIn Cover",width:1584,height:396},{name:"Email Header",width:600,height:200},{name:"A4 Document",width:2480,height:3508}],C=[{value:"jpeg",label:"JPEG"},{value:"png",label:"PNG"},{value:"webp",label:"WebP"}],A=[{value:"low",label:"Low (60%)",quality:60},{value:"medium",label:"Medium (80%)",quality:80},{value:"high",label:"High (90%)",quality:90},{value:"best",label:"Best (100%)",quality:100}],z=[{id:"original",label:"Original"},{id:"1:1",label:"1:1 (Square)"},{id:"4:3",label:"4:3"},{id:"16:9",label:"16:9"},{id:"3:2",label:"3:2"},{id:"2:3",label:"2:3"},{id:"9:16",label:"9:16"}],T=()=>{let[e,s]=(0,i.useState)("resize"),[a,T]=(0,i.useState)(!1),[R,k]=(0,i.useState)(!1),[I,F]=(0,i.useState)(!1),M=(0,i.useRef)(null),[B,q]=(0,i.useState)(null),[E,O]=(0,i.useState)(null),[P,U]=(0,i.useState)(null),[_,D]=(0,i.useState)(null),[J,L]=(0,i.useState)(800),[W,Z]=(0,i.useState)(600),[V,$]=(0,i.useState)(!0),[G,K]=(0,i.useState)("jpeg"),[X,Y]=(0,i.useState)("high"),[H,Q]=(0,i.useState)(80),[ee,es]=(0,i.useState)("original"),[ea,et]=(0,i.useState)({original:"0 KB",processed:"0 KB"}),ei=e=>{if(0===e)return"0 Bytes";let s=Math.floor(Math.log(e)/Math.log(1024));return parseFloat((e/Math.pow(1024,s)).toFixed(2))+" "+["Bytes","KB","MB","GB"][s]};return(0,t.jsx)(u.A,{title:"Image Resizer",description:"Resize, compress, and convert images for your website or social media",icon:(0,t.jsx)(l.A,{className:"h-8 w-8"}),children:(0,t.jsxs)(g.tU,{defaultValue:"resize",value:e,onValueChange:s,className:"w-full",children:[(0,t.jsxs)(g.j7,{className:"grid w-full grid-cols-2",children:[(0,t.jsx)(g.Xi,{value:"resize",children:"Resize Image"}),(0,t.jsx)(g.Xi,{value:"batch",disabled:!0,children:"Batch Processing"})]}

1),(0,t.jsxs)(g.av,{value:"resize",className:"space-y-4 mt-4",children:[(0,t.jsxs)("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[(0,t.jsxs)(f.Zp,{className:"md:col-span-1",children:[(0,t.jsxs)(f.aR,{children:[(0,t.jsx)(f.ZB,{children:"Original Image"}),(0,t.jsx)(f.BT,{children:"Upload an image to resize or convert"})]}),(0,t.jsx)(f.Wu,{className:"space-y-4",children:E?(0,t.jsxs)("div",{className:"space-y-4",children:[(0,t.jsx)("div",{className:"relative aspect-square rounded-md overflow-hidden border",children:(0,t.jsx)("img",{src:E,alt:"Original",className:"w-full h-full object-contain"})}),(0,t.jsxs)("div",{className:"space-y-2",children:[(0,t.jsxs)("div",{className:"flex justify-between text-sm",children:[(0,t.jsx)("span",{className:"text-muted-foreground",children:"Original Size:"}),(0,t.jsx)("span",{className:"font-medium",children:_?"".concat(_.width," \xd7 ").concat(_.height,"px"):""})]}),(0,t.jsxs)("div",{className:"flex justify-between text-sm",children:[(0,t.jsx)("span",{className:"text-muted-foreground",children:"File Size:"}),(0,t.jsx)("span",{className:"font-medium",children:ea.original})]}),(0,t.jsxs)("div",{className:"flex justify-between text-sm",children:[(0,t.jsx)("span",{className:"text-muted-foreground",children:"File Type:"}),(0,t.jsx)("span",{className:"font-medium",children:null==B?void 0:B.type.split("/")[1].toUpperCase()})]})]}),(0,t.jsxs)(h.$,{variant:"ghost",size:"sm",onClick:()=>{q(null),O(null),U(null),D(null),F(!1),M.current&&(M.current.value="")},className:"w-full",children:[(0,t.jsx)(d.A,{className:"h-4 w-4 mr-2"}),"Remove Image"]})]}):(0,t.jsxs)("div",{className:"border border-dashed rounded-lg p-6 flex flex-col items-center justify-center space-y-2",children:[(0,t.jsx)(x.p,{type:"file",className:"hidden",accept:"image/*",ref:M,onChange:e=>{var s;let a=null==(s=e.target.files)?void 0:s[0];if(a){if(!a.type.startsWith("image/"))return void(0,w.o)({title:"Invalid file type",description:"Please upload an image file (JPG, PNG, WebP, etc.)",variant:"destructive"});q(a),et(e=>({...e,original:ei(a.size)}));let e=new FileReader;e.onload=e=>{var s;let a=null==(s=e.target)?void 0:s.result;O(a);let t=document.createElement("img");t.onload=()=>{D({width:t.width,height:t.height}),L(t.width),Z(t.height)},t.src=a},e.readAsDataURL(a),F(!1),U(null)}}}),(0,t.jsx)("div",{className:"p-4 rounded-full bg-muted",children:(0,t.jsx)(r.A,{className:"h-8 w-8 text-muted-foreground"})}),(0,t.jsx)("p",{className:"text-sm text-center text-muted-foreground",children:"Upload an image to resize"}),(0,t.jsx)(h.$,{variant:"outline",onClick:()=>{M.current&&M.current.click()},children:"Select Image"})]})})]}),(0,t.jsxs)(f.Zp,{className:"md:col-span-1",children:[(0,t.jsxs)(f.aR,{children:[(0,t.jsx)(f.ZB,{children:"Resize Settings"}),(0,t.jsx)(f.BT,{children:"Adjust dimensions and quality settings"})]}),(0,t.jsx)(f.Wu,{className:"space-y-6",children:(0,t.jsxs)("div",{className:"space-y-4",children:[(0,t.jsxs)("div",{className:"space-y-2",children:[(0,t.jsxs)("div",{className:"flex justify-between",children:[(0,t.jsx)(p.J,{htmlFor:"width",children:"Width (px)"}),_&&(0,t.jsx)(h.$,{variant:"ghost",size:"sm",className:"h-5 text-xs",onClick:()=>L(_.width),children:"Reset"})]}),(0,t.jsx)(x.p,{id:"width",type:"number",value:J,onChange:e=>{let s=parseInt(e.target.value);L(s),V&&_&&Z(Math.round(s/(_.width/_.height)))},disabled:!E||R,min:1,max:1e4})]}),(0,t.jsxs)("div",{className:"space-y-2",children:[(0,t.jsxs)("div",{className:"flex justify-between",children:[(0,t.jsx)(p.J,{htmlFor:"height",children:"Height (px)"}),_&&(0,t.jsx)(h.$,{variant:"ghost",size:"sm",className:"h-5 text-xs",onClick:()=>Z(_.height),children:"Reset"})]}),(0,t.jsx)(x.p,{id:"height",type:"number",value:W,onChange:e=>{let s=parseInt(e.target.value);Z(s),V&&_&&L(Math.round(s*(_.width/_.height)))},disabled:!E||R,min:1,max:1e4})]}),(0,t.jsxs)("div",{className:"flex items-center space-x-2",children:[(0,t.jsx)(j.d,{id:"aspect-ratio",checked:V,onCheckedChange:$,disabled:!E||R}),(0,t.jsx)(p.J,{htmlFor:"aspect-ratio",children:"Maintain aspect ratio"})]}),(0,t.jsx)(N.w,{}),(0,t.jsxs)("div",{className:"space-y-2",children:[(0,t.jsx)(p.J,{children:"Aspect Ratio"}),(0,t.jsx)(b.z,{value:ee,onValueChange:e=>{if(es(e),"original"!==e&&_){let[s,a]=e.split(":").map(Number),t=Math.round(_.width/(s/a));L(_.width),Z(t)}else _&&(L(_.width),Z(_.height))},className:"grid grid-cols-3 gap-2",disabled:!E||R,children:z.map(e=>(0,t.jsxs)("div",{className:"flex items-center space-x-1",children:[(0,t.jsx)(b.C,{value:e.id,id:"ratio-".concat(e.id)}),(0,t.jsx)(p.J,{htmlFor:"ratio-".concat(e.id),className:"text-xs",children:e.label})]},e.id))})]}),(0,t.jsx)(N.w,{}),(0,t.jsxs)("div",{className:"space-y-2",children:[(0,t.jsx)(p.J,{children:"Format"}),(0,t.jsx)(b.z,{value:G,onValueChange:K,className:"flex space-x-4",disabled:!E||R,children:C.map(e=>(0,t.jsxs)("div",{className:"flex items-center space-x-1",children:[(0,t.jsx)(b.C,{value:e.value,id:"format-".concat(e.value)}),(0,t.jsx)(p.J,{htmlFor:"format-".concat(e.value),children:e.label})]},e.value))})]}),(0,t.jsxs)("div",{className:"space-y-2",children:[(0,t.jsx)(p.J,{children:"Quality"}),(0,t.jsxs)(v.l6,{value:X,onValueChange:Y,disabled:!E||R,children:[(0,t.jsx)(v.bq,{className:"w-full",children:(0,t.jsx)(v.yv,{placeholder:"Select Quality"})}),(0,t.jsx)(v.gC,{children:A.map(e=>(0,t.jsx)(v.eb,{value:e.value,children:e.label},e.value))})]})]})]})}),(0,t.jsx)(f.wL,{className:"border-t pt-4",children:(0,t.jsx)(h.$,{className:"w-full",onClick:()=>{E&&_&&(k(!0),setTimeout(()=>{var e;U(E);let s=(null==B?void 0:B.size)||0,a=(null==(e=A.find(e=>e.value===X))?void 0:e.quality)||90,t="webp"===G?.6:"png"===G?1.2:1,i=Math.round(s*(J*W/(_.width*_.height))*(a/100)*t);et(e=>({...e,processed:ei(i)})),k(!1),F(!0),(0,w.o)({title:"Image processed",description:"Your image has been resized successfully"})},1500))},disabled:!E||R,children:R?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.A,{className:"h-4 w-4 mr-2 animate-spin"}),"Processing..."]}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(c.A,{className:"h-4 w-4 mr-2"}),"Resize Image"]})})})]}),(0,t.jsxs)(f.Zp,{className:"md:col-span-1",children:[(0,t.jsxs)(f.aR,{children:[(0,t.jsx)(f.ZB,{children:"Processed Image"}),(0,t.jsx)(f.BT,{children:"Preview and download your resized image"})]}),(0,t.jsx)(f.Wu,{className:"space-y-4",children:P?(0,t.jsxs)("div",{className:"space-y-4",children:[(0,t.jsx)("div",{className:"relative aspect-square rounded-md overflow-hidden border",children:(0,t.jsx)("img",{src:P,alt:"Processed",className:"w-full h-full object-contain"})}),(0,t.jsxs)("div",{className:"space-y-2",children:[(0,t.jsxs)("div",{className:"flex justify-between text-sm",children:[(0,t.jsx)("span",{className:"text-muted-foreground",children:"New Size:"}),(0,t.jsx)("span",{className:"font-medium",children:"".concat(J," \xd7 ").concat(W,"px")})]}),(0,t.jsxs)("div",{className:"flex justify-between text-sm",children:[(0,t.jsx)("span",{className:"text-muted-foreground",children:"File Size:"}),(0,t.jsx)("span",{className:"font-medium",children:ea.processed})]}),(0,t.jsxs)("div",{className:"flex justify-between text-sm",children:[(0,t.jsx)("span",{className:"text-muted-foreground",children:"File Type:"}),(0,t.jsx)("span",{className:"font-medium",children:G.toUpperCase()})]})]}),(0,t.jsxs)(h.$,{className:"w-full",onClick:()=>

1{if(!P)return;let e="jpeg"===G?"jpg":G,s=document.createElement("a");s.href=P,s.download="resized-image.".concat(e),document.body.appendChild(s),s.click(),document.body.removeChild(s),(0,w.o)({title:"Download started",description:"Your resized image is being downloaded as ".concat(e.toUpperCase())})},children:[(0,t.jsx)(m.A,{className:"h-4 w-4 mr-2"}),"Download"]})]}):(0,t.jsxs)("div",{className:"border border-dashed rounded-lg p-6 flex flex-col items-center justify-center min-h-[260px] space-y-2",children:[(0,t.jsx)("div",{className:"p-4 rounded-full bg-muted",children:(0,t.jsx)(o.A,{className:"h-8 w-8 text-muted-foreground"})}),(0,t.jsx)("p",{className:"text-sm text-center text-muted-foreground",children:E?'Click "Resize Image" to process':"Upload an image to get started"})]})})]})]}),(0,t.jsx)(y.Accordion,{type:"single",collapsible:!0,children:(0,t.jsxs)(y.AccordionItem,{value:"common-sizes",children:[(0,t.jsx)(y.AccordionTrigger,{children:"Common Image Sizes"}),(0,t.jsx)(y.AccordionContent,{children:(0,t.jsx)("div",{className:"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2",children:S.map(e=>(0,t.jsx)(h.$,{variant:"outline",className:"justify-start",disabled:!E||R,onClick:()=>((e,s)=>{L(e),Z(s);let a=(e,s)=>0===s?e:a(s,e%s),t=a(e,s),i=e/t,l=s/t,r="".concat(i,":").concat(l),d=z.find(e=>e.id===r);d?es(d.id):es("original")})(e.width,e.height),children:(0,t.jsxs)("div",{className:"text-left",children:[(0,t.jsx)("p",{className:"text-xs font-medium",children:e.name}),(0,t.jsx)("p",{className:"text-xs text-muted-foreground",children:"".concat(e.width," \xd7 ").concat(e.height)})]})},e.name))})})]})}),(0,t.jsxs)(f.Zp,{children:[(0,t.jsx)(f.aR,{className:"pb-2",children:(0,t.jsx)(f.ZB,{className:"text-base",children:"Tips for Image Optimization"})}),(0,t.jsx)(f.Wu,{children:(0,t.jsxs)("ul",{className:"list-disc list-inside space-y-1 text-sm text-muted-foreground",children:[(0,t.jsx)("li",{children:"Use WebP format for the best compression quality ratio"}),(0,t.jsx)("li",{children:"For web images, dimensions under 1200px wide are usually sufficient"}),(0,t.jsx)("li",{children:"For social media profile pictures, use square (1:1) aspect ratio"}),(0,t.jsx)("li",{children:"For banners and headers, use landscape (16:9 or 3:1) aspect ratios"}),(0,t.jsx)("li",{children:"Medium quality (80%) is usually imperceptible from high quality for most images"}),(0,t.jsx)("li",{children:"Keep file sizes under 200KB for optimal website loading speed"})]})})]})]})]})})}},44846:(e,s,a)=>{a.d(s,{d:()=>d});var t=a(95155),i=a(12115),l=a(27599),r=a(64269);let d=i.forwardRef((e,s)=>{let{className:a,...i}=e;return(0,t.jsx)(l.bL,{className:(0,r.cn)("peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",a),...i,ref:s,children:(0,t.jsx)(l.zi,{className:(0,r.cn)("pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0")})})});d.displayName=l.bL.displayName},50909:(e,s,a)=>{a.d(s,{C:()=>c,z:()=>n});var t=a(95155),i=a(12115),l=a(24058),r=a(99051),d=a(64269);let n=i.forwardRef((e,s)=>{let{className:a,...i}=e;return(0,t.jsx)(l.bL,{className:(0,d.cn)("grid gap-2",a),...i,ref:s})});n.displayName=l.bL.displayName;let c=i.forwardRef((e,s)=>{let{className:a,...i}=e;return(0,t.jsx)(l.q7,{ref:s,className:(0,d.cn)("aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",a),...i,children:(0,t.jsx)(l.C1,{className:"flex items-center justify-center",children:(0,t.jsx)(r.A,{className:"h-2.5 w-2.5 fill-current text-current"})})})});c.displayName=l.q7.displayName},76444:(e,s,a)=>{a.d(s,{J:()=>c});var t=a(95155),i=a(12115),l=a(10489),r=a(83101),d=a(64269);let n=(0,r.F)("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"),c=i.forwardRef((e,s)=>{let{className:a,...i}=e;return(0,t.jsx)(l.b,{ref:s,className:(0,d.cn)(n(),a),...i})});c.displayName=l.b.displayName},82021:(e,s,a)=>{a.d(s,{d:()=>t.dj,o:()=>t.oR});var t=a(15894)},86259:(e,s,a)=>{a.d(s,{w:()=>d});var t=a(95155),i=a(12115),l=a(57268),r=a(64269);let d=i.forwardRef((e,s)=>{let{className:a,orientation:i="horizontal",decorative:d=!0,...n}=e;return(0,t.jsx)(l.b,{ref:s,decorative:d,orientation:i,className:(0,r.cn)("shrink-0 bg-border","horizontal"===i?"h-[1px] w-full":"h-full w-[1px]",a),...n})});d.displayName=l.b.displayName}}]);