I recognised that in few different pages i am locating elements by the exact same locators, as an example i have created LoginInPage and RegistrationPage and both of them have static function emailInput() there are more elements i am locating by the exact locators and its values through the project, so my question what would be modern approach towards it?

I did research and saw that often used functions are placed in commands.ts but personally i do not like this approach as what if commands will end up having 30+ functions it be super messy, would appreciate any solutions suggested

export class LogInPage {
  static get emailInput(): Cypress.Chainable<JQuery<HTMLInputElement>> {
    return cy.get<HTMLInputElement>('input[placeholder="Email address"]');
  }
}


 export class RegistrationPage {
      static get emailInput(): Cypress.Chainable<JQuery<HTMLInputElement>> {
    return cy.get<HTMLInputElement>('input[placeholder="Email address"]');
  }