Props result Qwik

index-props-components.tsx

import { component$ } from '@builder.io/qwik';

interface TitleProps {
  greetingText: string;
  name: string;
}

export const Title = ({greetingText, name}: TitleProps) => {
  return <h1>{greetingText} {name}</h1>;
};

interface AgeProps {
  age: number;
}

export const Age = ({age}: AgeProps) => {
  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>
  );
};

interface HobbiesProps {
  hobbiesList: string[]
}

export const Hobbies = ({hobbiesList}: HobbiesProps) => {
  return (
    <ul>
      {hobbiesList.map((value, index) => (
        <li key={index + '_hobby'}>
          {index + 1} - {value}
        </li>
      ))}
    </ul>
  );
};

// Componente principal
export default component$(() => {
  return (
    <>
      <Title greetingText={'Hola'} name={'Anartz'}/>
      <br />
      <Age age={37}/>
      <Hobbies hobbiesList={['leer', 'deporte', 'videojuegos']}/>
      <Title greetingText={'Adios'} name={'Qwik'}/>
    </>
  );
});