Untitled

{file && (
            <div className="relative flex w-full cursor-pointer flex-col items-center rounded-lg border-cozy-900 bg-gray-cozy tracking-wide  ">
              <Image
                className="h-64 w-full object-cover object-center"
                src={`/images/teaching-3.jpg`}
                alt="preview"
                height={500}
                width={700}
              />
              {/* <img src={file} alt="preview" /> */}
              <button
                onClick={(e) => setFile(undefined)}
                className="absolute right-1 top-2 rounded-full bg-red-400 px-2 text-white"
              >
                X
              </button>
            </div>
          )}
          {!file && (
            <label className="flex w-full cursor-pointer flex-col items-center rounded-lg bg-gray-cozy px-4 py-12 tracking-wide text-gray-500 hover:bg-cozy-500 hover:text-white ">
              <svg
                width="70"
                height="70"
                viewBox="0 0 70 70"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g id="mdi:folder-image">
                  <path
                    id="Vector"
                    d="M14.5835 49.5832L27.7085 32.0832L37.9168 45.2082L45.2085 36.4582L55.4168 49.5832M58.3335 17.4998H35.0001L29.1668 11.6665H11.6668C10.1197 11.6665 8.636 12.2811 7.54204 13.375C6.44808 14.469 5.8335 15.9527 5.8335 17.4998V52.4998C5.8335 54.0469 6.44808 55.5307 7.54204 56.6246C8.636 57.7186 10.1197 58.3332 11.6668 58.3332H58.3335C59.8806 58.3332 61.3643 57.7186 62.4583 56.6246C63.5522 55.5307 64.1668 54.0469 64.1668 52.4998V23.3332C64.1668 21.7861 63.5522 20.3023 62.4583 19.2084C61.3643 18.1144 59.8806 17.4998 58.3335 17.4998Z"
                    fill="#E0E0E0"
                  />
                </g>
              </svg>

              <span className="mt-2 flex flex-row gap-x-3 rounded-full bg-cozy-secondary px-5 py-2 text-sm leading-normal text-white">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  viewBox="0 0 20 20"
                  fill="none"
                >
                  <g clipPath="url(#clip0_4774_811)">
                    <path
                      d="M16.125 8.36683C15.8451 6.94826 15.0813 5.67088 13.9642 4.75287C12.8471 3.83486 11.4459 3.33317 10 3.3335C7.59167 3.3335 5.5 4.70016 4.45833 6.70016C3.23353 6.83252 2.10084 7.41284 1.27791 8.3296C0.454976 9.24636 -0.000143085 10.4349 3.3744e-08 11.6668C3.3744e-08 14.4252 2.24167 16.6668 5 16.6668H15.8333C18.1333 16.6668 20 14.8002 20 12.5002C20 10.3002 18.2917 8.51683 16.125 8.36683ZM15.8333 15.0002H5C3.15833 15.0002 1.66667 13.5085 1.66667 11.6668C1.66667 9.9585 2.94167 8.5335 4.63333 8.3585L5.525 8.26683L5.94167 7.47516C6.3249 6.72914 6.90656 6.10334 7.6226 5.66666C8.33865 5.22997 9.1613 4.99934 10 5.00016C12.1833 5.00016 14.0667 6.55016 14.4917 8.69183L14.7417 9.94183L16.0167 10.0335C16.6431 10.0756 17.2303 10.3535 17.6602 10.8112C18.09 11.2688 18.3305 11.8723 18.3333 12.5002C18.3333 13.8752 17.2083 15.0002 15.8333 15.0002ZM6.66667 10.8335H8.79167V13.3335H11.2083V10.8335H13.3333L10 7.50016L6.66667 10.8335Z"
                      fill="white"
                    />
                  </g>
                  <defs>
                    <clipPath id="clip0_4774_811">
                      <rect width="20" height="20" fill="white" />
                    </clipPath>
                  </defs>
                </svg>
                Upload Cover
              </span>
              <input
                type="file"
                className="hidden"
                onChange={handleChangeImage}
                accept="image/*"
              />
            </label>
          )}