Saltar al contenido principal

Typography

Use tipografía para presentar su diseño y contenido de la manera más clara y eficiente posible.

User logged​

Hola

Agave User

pages/index.tsx
  <AgaveHeader
    endAdornment={
      <AgaveUser name="Agave User" />
    }
  />

User logged with menu options​

Hola

Agave User

pages/index.tsx
export function AgaveHeader() {
  const handleClick = () => {
    console.log('hola');
  };
  return (
    <AgaveHeader
      endAdornment={
        <AgaveUser
          name="Agave User"
          userOptions={[
            {
              link: (
                <Link href="/hola" color="text.primary">
                  Cerrar sesión
                </Link>
              ),
            },
            { label: 'Texto ejemplo', onClick: handleClick },
          ]}
        />
      }
    />
  );
}

Current station​

Hola

Agave User

Estás trabajando en: MX

pages/index.tsx
  <AgaveHeader
    endAdornment={
      <AgaveUser
        name="Agave User"
        stationId="MX"
      />
    }
  />

Live editor​

https://providers-price-engine.vercel.app/

Editor en vivo
  <div style={{position: 'relative', height: '50px'}}>
    <AgaveHeader
      appBarProps={{position: 'absolute'}}
      endAdornment={
      <AgaveUser
        name="Agave User"
        stationId="MX"
      />
    }
    />
  </div>

Resultado
Loading...