import { Component } from 'solid-js';

const App: Component = () => {
  return <p>Hello world!</p>;
};

import { Component, createSignal, createEffect } from 'solid-js';

const App: Component = () => {
  const [password, setPassword] = createSignal('');
  
  createEffect(() => {
    console.log(password());
  });
  
  return (
    <>
      Password: {password()}	
      <input 
        type="text" 
        onInput={(e) => setPassword(e.currentTarget.value)} 
      />
    </>
  );
};

const [count, setCount] = createSignal(0);

const doubleCount = () => count() * 2;

const fetchUser = async (id) =>
  (await fetch(`https://swapi.dev/api/people/${id}/`)).json();

const App = () => {
  const [userId, setUserId] = createSignal();
  const [user] = createResource(userId, fetchUser);

  return (
    <>
      <input
        type="number"
        onInput={(e) => setUserId(e.currentTarget.value)}
      />
      <span>{user.loading && "Loading..."}</span>
      <span>Username: {user()?.name}</span>
    </>
  );
};

const App = () => {
  const [loggedIn, setLoggedIn] = createSignal(false);
  const toggle = () => setLoggedIn(!loggedIn())
  
  return (
    <Show
      when={loggedIn()}
      fallback={
        <button onClick={toggle}>Log in</button>
      }
    >
      <button onClick={toggle}>Log out</button>
    </Show>
  );
}