useId Hook

import React from 'react';

import LoginForm from './LoginForm';

function App() {
  return (
    <>
      <header>
        <LoginForm />
      </header>
      <main>
        <h1>Some Website</h1>
        <p>
          Lorem Ipsum is simply dummy text of the printing and
          typesetting industry. Lorem Ipsum has been the
          industry's standard dummy text ever since the 1500s,
          when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has
          survived not only five centuries, but also the leap into
          electronic typesetting, remaining essentially unchanged.
        </p>
        <p>
          It was popularised in the 1960s with the release of
          Letraset sheets containing Lorem Ipsum passages, and
          more recently with desktop publishing software like
          Aldus PageMaker including versions of Lorem Ipsum.
        </p>
      </main>
      <footer>
        <LoginForm />
      </footer>
    </>
  );
}

export default App;

import React from 'react';

import Toggle from './Toggle';

function App() {
  const [isDarkMode, setIsDarkMode] = React.useState(false);

  return (
    <div
      className="wrapper"
      style={{
        // NOTE: This is a just-for-fun mini demo, not a
        // full-featured Dark Mode implementation!
        '--color-bg': isDarkMode ? 'black' : 'white',
        '--color-text': isDarkMode ? 'white' : 'black',
      }}
    >
      <Toggle
        label="Dark Mode"
        checked={isDarkMode}
        handleToggle={setIsDarkMode}
      />
    </div>
  );
}

export default App;