{"loaderData":{"0":null,"0-16":{"tags":[{"name":"button","label":"Button","count":1289},{"name":"checkbox","label":"Checkbox","count":139},{"name":"loader","label":"Loader","count":732},{"name":"switch","label":"Switch","count":229},{"name":"card","label":"Card","count":648},{"name":"input","label":"Input","count":158},{"name":"radio-button","label":"Radio Button","count":37},{"name":"form","label":"Form","count":157},{"name":"pattern","label":"Pattern","count":83},{"name":"tooltip","label":"Tooltip","count":33},{"name":"twitter","label":"Twitter","count":5},{"name":"runjscollect","label":"RunJS Collect","count":10}]},"0-16-0":{"total":158,"projects":[{"created":"2024-01-22T17:15:59.000Z","isPrivate":0,"projectId":"f761ed","snapshot":null,"tags":null,"title":"input by vinodjangid07","updated":"2024-01-22T17:15:59.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1484,"jsLen":0,"cssLen":2062,"pureCSS":1,"html":"

\n \n \n Add an image\n \n \n

\n \n \n

\n","css":".messageBox {\n width: fit-content;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #2d2d2d;\n padding: 0 15px;\n border-radius: 10px;\n border: 1px solid rgb(63, 63, 63);\n}\n.messageBox:focus-within {\n border: 1px solid rgb(110, 110, 110);\n}\n.fileUploadWrapper {\n width: fit-content;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: Arial, Helvetica, sans-serif;\n}\n\n#file {\n display: none;\n}\n.fileUploadWrapper label {\n cursor: pointer;\n width: fit-content;\n height: fit-content;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n}\n.fileUploadWrapper label svg {\n height: 18px;\n}\n.fileUploadWrapper label svg path {\n transition: all 0.3s;\n}\n.fileUploadWrapper label svg circle {\n transition: all 0.3s;\n}\n.fileUploadWrapper label:hover svg path {\n stroke: #fff;\n}\n.fileUploadWrapper label:hover svg circle {\n stroke: #fff;\n fill: #3c3c3c;\n}\n.fileUploadWrapper label:hover .tooltip {\n display: block;\n opacity: 1;\n}\n.tooltip {\n position: absolute;\n top: -40px;\n display: none;\n opacity: 0;\n color: white;\n font-size: 10px;\n text-wrap: nowrap;\n background-color: #000;\n padding: 6px 10px;\n border: 1px solid #3c3c3c;\n border-radius: 5px;\n box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.596);\n transition: all 0.3s;\n}\n#messageInput {\n width: 200px;\n height: 100%;\n background-color: transparent;\n outline: none;\n border: none;\n padding-left: 10px;\n color: white;\n}\n#messageInput:focus ~ #sendButton svg path,\n#messageInput:valid ~ #sendButton svg path {\n fill: #3c3c3c;\n stroke: white;\n}\n\n#sendButton {\n width: fit-content;\n height: 100%;\n background-color: transparent;\n outline: none;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.3s;\n}\n#sendButton svg {\n height: 18px;\n transition: all 0.3s;\n}\n#sendButton svg path {\n transition: all 0.3s;\n}\n#sendButton:hover svg path {\n fill: #3c3c3c;\n stroke: white;\n}\n"}]}},"actionData":null,"errors":null}