https://icongeniusai.com/static/js/486.ef2fc40c.chunk.js

1"use strict";(self.webpackChunkicongenius=self.webpackChunkicongenius||[]).push([[486],{5486:function(e,t,r){r.r(t),r.d(t,{default:function(){return N}});var s=r(1413),a=r(4165),n=r(5861),l=r(9439),o=r(2791),i=r(6030),c=r(8125),u=r(8138),d=function(e,t,r){var s=r?function(t){return r(t[e])}:function(t){return t[e]};return t=t?-1:1,function(e,r){return e=s(e),r=s(r),t*((e>r)-(r>e))}},m=r(7721),x=r(8617),h=r(2506),p=r(1724),f=r(4598),g=r(7689),v=r(6090),j=r(2741),y=r(3329),b=p.Ry().shape({projectName:p.Z_().required("Oops, forgot to name your project.").max(50,"Collection name must be less than 50 characters."),logoRequirements:p.Z_().required("Remember to describe your icon :)").max(150,"Icon description must be less than 150 characters."),primaryColor:p.IX().of(p.Z_().trim().required().matches(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i,"Only HEX color values permitted.")).min(1,"Select a color or enter a custom value."),iconStyle:p.IX().of(p.Z_().trim()).min(1,"You must select a style.").required(),nOfIcons:p.Z_().required("You need to create at least 1 icon.")}),N=function(e){var t=e.onNext,r=e.prompt,p=(0,j.Z)().updateUserCredits,N=(0,o.useState)(!1),C=(0,l.Z)(N,2),w=C[0],I=C[1],S=(0,o.useState)(!1),k=(0,l.Z)(S,2),Z=k[0],q=k[1],z=(0,i.v9)((function(e){return e.auth.user})),F=(0,o.useState)(JSON.parse(localStorage.getItem("projectForm"))||""),B=(0,l.Z)(F,1)[0],O=(0,o.useState)(B.collectionId||""),X=(0,l.Z)(O,2),A=X[0],E=X[1],J=(0,o.useState)(B||{projectName:"",logoRequirements:"",primaryColor:[],iconStyle:[],nOfIcons:""}),R=(0,l.Z)(J,2),T=R[0],V=R[1],_=(0,g.s0)(),H=[{value:"red-500",hex:"#EF4444"},{value:"pink-500",hex:"#EC4899"},{value:"purple-500",hex:"#A855F7"},{value:"indigo-500",hex:"#6366F1"},{value:"blue-500",hex:"#3B82F6"},{value:"cyan-500",hex:"#06B6D4"},{value:"teal-500",hex:"#14B8A6"},{value:"emerald-500",hex:"#10B981"},{value:"green-500",hex:"#22C55E"},{value:"amber-500",hex:"#F59E0B"},{value:"orange-500",hex:"#F97316"},{value:"slate-500",hex:"#64748B"}],M=[{value:"Claymorphic"},{value:"3D rendered"},{value:"Pixel art"},{value:"Isometric"},{value:"Flat"},{value:"Cartoon"},{value:"Polygon"},{value:"Watercolor"},{value:"Doodle"},{value:"Neon"},{value:"Children's book"},{value:"Hand drawn"}],P=function(e){switch(e.toLowerCase()){case"pixel art":return"/img/styles/pixel-art.jpg";case"neon":return"/img/styles/neon.jpg";case"claymorphic":return"/img/styles/claymorphic.jpg";case"3d rendered":return"/img/styles/3d-render.jpg";case"isometric":return"/img/styles/isometric.jpg";case"flat":return"/img/styles/flat.jpg";case"cartoon":return"/img/styles/cartoon.jpg";case"polygon":return"/img/styles/polygon.jpg";case"watercolor":return"/img/styles/watercolor.jpg";case"doodle":return"/img/styles/doodle.jpg";case"children's book":return"/img/styles/childrens-book.jpg";default:return"/img/styles/hand-drawn.jpg"}},Y=function(e){var t=e.charAt(0),r=e;return"#"!==t&&(r="#"+e),r},D=function(){var e=(0,n.Z)((0,a.Z)().mark((function e(t){var r,s;return(0,a.Z)().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return r={prompt:t,dateCreated:new Date,uid:z.uid},e.next=3,(0,c.BL)(r,A,z.uid).then(function(){var e=(0,n.Z)((0,a.Z)().mark((function e(t){return(0,a.Z)().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.abrupt("return",t.responseId);case 1:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}());case 3:return s=e.sent,e.abrupt("return",s);case 5:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}();function W(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:toString(),t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:toString();return 2===e.length&&(0===Number(e)?e="1":e>t&&(e=t)),e}function L(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:toString(),t=W(e.substring(0,2),"12");return t}function G(e){u.Am.removeAll(e)}function K(){var e=u.Am.push((0,y.jsxs)(u.P_,{title:"Not enough credits",duration:0,type:"danger",children:[(0,y.jsx)("div",{className:"mt-2 mb-4",children:"You don't have enough credits to perform that request."}),(0,y.jsxs)("div",{className:"flex gap-2 text-right",children:[(0,y.jsx)(u.zx,{size:"sm",onClick:function(){return G(e)},children:"Close"}),(0,y.jsx)(u.zx,{size:"sm",variant:"twoTone",className:"mr-2",onClick:function(){G(e),_("/credits")},children:"Buy credits"})]})]}))}return(0,y.jsxs)("div",{className:"text-center",children:[(0,y.jsxs)("div",{className:"mb-8",children:[(0,y.jsxs)("h1",{className:"mb-2",children:["Create ",(0,y.jsx)("span",{className:"from-fuchsia-600 to-pink-600 bg-gradient-to-r bg-clip-text text-transparent font-bold",children:"your icons."})]}),(0,y.jsx)("p",{children:"Tell us about your project"})]}),(0,y.jsx)("div",{className:"max-w-[600px] lg:min-w-[600px] mx-auto",children:(0,y.jsx)(h.J9,{initialValues:T,validationSchema:b,onSubmit:function(){var e=(0,n.Z)((0,a.Z)().mark((function e(n){var l;return(0,a.Z)().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,I(!0),q(!0),e.next=5,(0,c.NF)(z.uid);case 5:(l=e.sent).credits>=n.nOfIcons?D(n).then((function(e){E(e);

1var a,l,o=(a=n.primaryColor[0],(0,f.B)(a)),i=(0,s.Z)((0,s.Z)({},n),{},{collectionId:e,colorName:o});null===t||void 0===t||t((l=i,void localStorage.setItem("projectForm",JSON.stringify(l))),r(i))})):(K(),p(z.uid,l.credits,"update"),I(!1),q(!1)),e.next=14;break;case 9:e.prev=9,e.t0=e.catch(0),console.log(e.t0),I(!1),q(!1);case 14:case"end":return e.stop()}}),e,null,[[0,9]])})));return function(t){return e.apply(this,arguments)}}(),children:function(e){var t=e.values,r=e.touched,s=e.errors,a=e.setFieldValue,n=e.resetForm;return(0,y.jsx)(h.l0,{children:(0,y.jsxs)(u.Yb,{children:[0===z.credits&&(0,y.jsx)("div",{className:"my-8",children:(0,y.jsx)(v.Z,{})}),(0,y.jsxs)(u.Zb,{className:"border-0 mt-4 text-left",children:[""!==A&&(0,y.jsxs)("div",{className:"mb-6 p-4 flex items-center bg-indigo-50 text-indigo-500 rounded",children:[(0,y.jsx)("div",{className:"mr-2",children:(0,y.jsx)(u.qE,{shape:"rounded",size:"sm",className:"bg-indigo-100 text-indigo-500",icon:(0,y.jsx)(x.N7T,{})})}),(0,y.jsxs)("p",{className:"flex-auto",children:["You're currently working on the ",(0,y.jsx)("span",{className:"font-semibold text-indigo-700",children:T.projectName})," collection."]}),(0,y.jsx)(u.zx,{size:"xs",onClick:function(){localStorage.removeItem("projectForm"),V({projectName:"",logoRequirements:"",primaryColor:[],iconStyle:[],nOfIcons:""}),E(""),n({values:{projectName:"",logoRequirements:"",primaryColor:[],iconStyle:[]}})},variant:"solid",children:"Create new?"})]}),(0,y.jsxs)(u.xJ,{label:"Name your collection",labelClass:"text-slate-700 mb-1",asterisk:!0,invalid:s.projectName&&r.projectName,errorMessage:s.projectName,children:[(0,y.jsx)("p",{className:"text-slate-400 mb-2 font-semibold text-xs",children:"This won't affect your icon design and will help you identify your collection later."}),(0,y.jsx)(h.gN,{type:"text",autoComplete:"off",name:"projectName",placeholder:"Bear INC",component:u.II,prefix:(0,y.jsx)(x.N7T,{className:"text-lg"})})]}),(0,y.jsxs)(u.xJ,{label:"What do you want to see in your icon?",labelClass:"text-slate-700 mb-1",className:"mb-4",asterisk:!0,invalid:s.logoRequirements&&r.logoRequirements,errorMessage:s.logoRequirements,children:[(0,y.jsx)("p",{className:"text-slate-400 mb-2 font-semibold text-xs",children:"These are the instructions we will use for your design."}),(0,y.jsx)(h.gN,{type:"text",autoComplete:"off",name:"logoRequirements",placeholder:"A cute, happy bear waving hello",component:u.II,prefix:(0,y.jsx)(x._vs,{className:"text-lg"})})]}),(0,y.jsx)(u.bZ,{type:"tip",title:"Tips for better icons:",showIcon:!0,customIcon:(0,y.jsx)(x.PjL,{}),children:(0,y.jsxs)("ul",{className:"list-disc",children:[(0,y.jsx)("li",{children:"Keep it simple. Short but detailed and precise is key. Be specific."}),(0,y.jsx)("li",{children:"Set the tone: include words such as happy, angry or energetic."}),(0,y.jsx)("li",{children:"AI models have trouble rendering letters, we don't recommend to ask to include words in your description."})]})}),(0,y.jsx)("hr",{className:"my-8"}),(0,y.jsxs)(u.xJ,{label:"Select a primary color.",labelClass:"text-slate-700",asterisk:!0,invalid:Boolean(s.primaryColor&&r.primaryColor),errorMessage:s.primaryColor,children:[(0,y.jsx)(h.gN,{name:"primaryColor",children:function(e){var r=e.field,s=e.form;return(0,y.jsx)(u.XX,{className:"w-full",selectionType:"single",value:t.primaryColor,onChange:function(e){return s.setFieldValue(r.name,e)},children:(0,y.jsx)("div",{className:"grid md:grid-cols-6 grid-cols-4 md:gap-4 gap-3 w-full",children:H.map((function(e){return(0,y.jsx)(u.XX.Item,{value:e.hex,children:function(t){var r=t.ref,s=t.active,a=t.onSegmentItemClick,n=t.disabled;return(0,y.jsx)(m.v0,{hoverable:!0,ref:r,active:s,disabled:n,defaultGutter:!1,onSegmentItemClick:a,className:"border-none ring-offset-2 hover:ring-2 ".concat(s&&"ring-2"," relative min-h-[60px] w-full overflow-hidden bg-").concat(e.value," shadow-sm hover:-translate-y-1 transition ease-in-out duration-250"),customCheck:(0,y.jsx)(x.HJi,{className:"text-white absolute top-2 right-2 text-xl",size:22})})}},e.value)}))})})}}),(0,y.jsxs)("div",{className:"flex flex-col items-start mt-4",children:[(0,y.jsx)("p",{className:"font-semibold heading-text text-slate-700",children:"Or enter a custom HEX value."}),(0,y.jsx)(h.gN,{name:"primaryColor",type:"text",autoComplete:"off",prefix:(0,y.jsx)(x.Wdx,{className:"text-lg"}),component:u.II,placeholder:"Custom HEX color.",onChange:function(e){return a("primaryColor",e.target.value.length>0?[Y(e.target.value)]:[])}})]})]}),(0,y.jsx)("hr",{className:"my-8"}),(0,y.jsx)(u.xJ,{label:"Select a style",labelClass:"text-slate-700",asterisk:!0,invalid:Boolean(s.iconStyle&&r.iconStyle),errorMessage:s.iconStyle,children:(0,y.jsx)(h.gN,{name:"iconStyle",children:function(e){var r=e.field,s=e.form;return(0,y.jsx)(u.XX,{className:"w-full",selectionType:"single",value:t.iconStyle,onChange:function(e){return s.setFieldValue(r.name,e)},children:(0,y.jsx)("div",{className:"grid md:grid-cols-4 grid-cols-3 md:gap-4 gap-2 w-full",children:M.sort(d("value",!1)).map((function(e){return(0,y.jsxs)("div",{children:[(0,y.jsx)(u.XX.Item,{value:e.value,children:function(t){var r=t.ref,s=t.active,a=t.onSegmentItemClick,n=t.disabled;return(0,y.jsx)(m.v0,{hoverable:!0,ref:r,active:s,disabled:n,defaultGutter:!1,onSegmentItemClick:a,className:"border-none ring-offset-2 hover:ring-2 ".concat(s&&"ring-2"," relative w-full overflow-hidden shadow-sm hover:-translate-y-1 transition ease-in-out duration-250"),customCheck:(0,y.jsx)(x.HJi,{className:"text-white absolute top-2 right-2 text-xl",size:22}),children:(0,y.jsx)("img",{src:P(e.value),alt:e.value})})}}),(0,y.jsx)("p",{className:"mt-1 font-semibold text-xs text-slate-700 text-left",children:e.value})]},e.value)}))})})}})}),(0,y.jsx)("hr",{className:"my-8"}),(0,y.jsx)(u.xJ,{label:"Number of icons to create (max. 12 per request.)",labelClass:"text-slate-700",invali

1d:s.nOfIcons&&r.nOfIcons,errorMessage:s.nOfIcons,asterisk:!0,className:"mb-0",children:(0,y.jsx)(h.gN,{name:"nOfIcons",children:function(e){var t=e.field,r=e.form;return(0,y.jsx)(m.lz,{form:r,field:t,placeholder:"1-12",decimalScale:2,onValueChange:function(e){r.setFieldValue(t.name,e.floatValue)},value:t.value,inputPrefix:(0,y.jsx)(x.qiA,{size:20}),format:L,defaultValue:1})}})})]}),(0,y.jsxs)("div",{className:"mt-8 text-left text-slate-500 text-sm font-semibold flex items-center gap-4",children:[(0,y.jsx)("div",{children:(0,y.jsx)(u.qE,{className:"bg-slate-200 text-slate-500",icon:(0,y.jsx)(x.W79,{size:24})})}),"AI image generation outputs are highly variable, at least a few icons per request are recommended to have enough options to choose from."]}),(0,y.jsx)(u.zx,{className:"mt-8",variant:"solid",type:"submit",block:!0,disabled:Z,loading:w,children:w?"Submitting...":"Create now!"})]})})}})})]})}},6090:function(e,t,r){r(2791);var s=r(8138),a=r(1087),n=r(8617),l=r(3329);t.Z=function(){return(0,l.jsx)(s.Zb,{className:"shadow-sm border-0 col-span-full md:text-left text-center",children:(0,l.jsxs)("div",{className:"block md:flex items-center gap-4",children:[(0,l.jsx)(s.qE,{size:45,className:"bg-indigo-100 text-indigo-600 mb-4 md:mb-0",icon:(0,l.jsx)(n.Kaj,{size:24})}),(0,l.jsx)("div",{className:"flex items-center flex-auto justify-center md:justify-start",children:(0,l.jsxs)("div",{className:"text-slate-900",children:[(0,l.jsx)("h4",{className:"font-bold text-slate-800",children:"Create without limits!"}),(0,l.jsx)("p",{className:"text-slate-400",children:"Buy credits and start creating your icons."})]})}),(0,l.jsx)(a.rU,{to:"/credits",children:(0,l.jsx)(s.zx,{variant:"solid",size:"sm",className:"sm:block w-full md:w-auto md:inline mt-4 md:mt-0",children:"Buy Credits Now"})})]})})}}}]);
2//# sourceMappingURL=486.ef2fc40c.chunk.js.map