Untitled

return (
    <div className="flex flex-col bg-gray-200 w-[34rem] h-full rounded p-5 gap-3">
      <div className="flex flex-row justify-between text-center">
        <p className="font-bold text-xl">
          {translation.page.management.raidData}
        </p>
        <p
          className={
            `font-bold text-lg text-blue-500 cursor-pointer` +
            (isEditing ? " hidden" : "")
          }
          onClick={() => setIsEditing(true)}
        >
          {translation.page.management.edit}
        </p>
        <p
          className={
            `font-bold text-lg text-blue-500 cursor-pointer` +
            (isEditing ? "" : " hidden")
          }
          onClick={() => setIsEditing(false)}
        >
          {translation.page.management.save}
        </p>
      </div>
      <div className="flex flex-col gap-3">
        <p>{translation.page.management.raidInfo}</p>
        <div className="flex flex-row gap-5">
          <div className="flex flex-col gap-1">
            <p>{translation.page.management.fullName}</p>
            <input
              type="text"
              className="border-2 border-gray-400 rounded w-56"
              disabled={!isEditing}
            />
          </div>
          <div className="flex flex-col gap-1">
            <p>{translation.page.management.zipCode}</p>
            <input
              type="text"
              className="border-2 border-gray-400 rounded w-56"
              disabled={!isEditing}
            />
          </div>
        </div>
        <div className="flex flex-row gap-5">
          <div className="flex flex-col gap-1">
            <p>{translation.page.management.email}</p>
            <input
              type="text"
              className="border-2 border-gray-400 rounded w-56"
              disabled={!isEditing}
            />
          </div>
          <div className="flex flex-col gap-1">
            <p>{translation.page.management.birthday}</p>
            <input
              type="text"
              className="border-2 border-gray-400 rounded w-56"
              disabled={!isEditing}
            />
          </div>
        </div>
        <div className="flex flex-row gap-5">
          <div className="flex flex-col gap-1">
            <p>{translation.page.management.gender}</p>
            <input
              type="text"
              className="border-2 border-gray-400 rounded w-56"
              disabled={!isEditing}
            />
          </div>
          <div className="flex flex-col gap-1">
            <p>{translation.page.management.phone}</p>
            <input
              type="text"
              className="border-2 border-gray-400 rounded w-56"
              disabled={!isEditing}
            />
          </div>
        </div>
        <div className="flex flex-row gap-5">
          <div className="flex flex-col gap-1">
            <p>{translation.page.management.cpf}</p>
            <input
              readOnly
              type="text"
              className="border-2 border-gray-400 rounded w-56"
              disabled={!isEditing}
            />
          </div>
        </div>
      </div>
    </div>
  );