Share your opinion

{#if imageInput.length !== 0}
      <div class="ml-2">
        <label on:click={() => imageInput = ''} class="btn btn-xs btn-circle bg-red-600 absolute -top-2 -right-2">
          ✕
        </label>
        <img class="object-contain w-10 h-10 mx-auto rounded"
             alt="Image preview"
             id="image-preview" />
      </div>
      
      {/if}

</div>
      <div class="relative flex justify-end items-center ml-auto mr-2">
      <label on:click={handleCancel} class="inline-flex justify-end items-center py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg hover:bg-gray-800 cursor-pointer mr-3">
          Cancel
      </label>
        <label on:click={createComment} class="inline-flex justify-end items-center bg-blue-700 {inputValue.length !== 0 ? 'opacity-100 cursor-pointer' : 'opacity-60'}  py-2.5 px-4 text-xs font-medium text-center text-white rounded-lg focus:ring-purple-300">
            Post
        </label>

</div>
      
      </div>

<label on:click={() => handleCancel()} class="absolute left-6 top-4">
      <svg class="w-6 h-6 inline-block mb-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"/></svg>
        <span class="text-white text-md font-medium">
          Return
        </span>
    </label>

</div>

</div>
</div>

.quill-editor, textarea {
        touch-action: none; /* or 'none' if manipulation doesn't work */
    }
	
</style>