components.tsx

export const Title = () => {
  const name = 'Anartz';
  return <h1>{name}</h1>;
};

export const Age = () => {
  const age = 37;
  return (
    <p>
      {age > 40
        ? 'Como "tienes más de 40 años", tienes 18 años y más de 22 años de experiencia ;)'
        : `Eres joven, todavía tienes ${age} años y te faltan ${
            40 - age
          } para volver a cumplir 18 años ;)`}
    </p>
  );
};

export const Hobbies = () => {
  return (
    <ul>
      {['leer', 'deporte', 'videojuegos'].map((value, index) => (
        <li key={index + '_hobby'}>
          {index + 1} - {value}
        </li>
      ))}
    </ul>
  );
};

// Componente principal
export default component$(() => {
  return (
    <>
      <Title />
      <br />
      <Age />
      <Hobbies />
    </>
  );
});