Implement preliminary tutorial screen

[yxu-lanl]

Implement tutorial screen

Most of the PR titles in this repository are written in that "(Do) (thing)" format.

[eecavanna]

Looks good, @yxu-lanl!

The GitHub Action workflow that checks the format of the code is failing.

You can fix it by running the following commands locally to check the format of—and then automatically format—the code:

# Optional:
npm run format:check

# Required:
npm run format

Those commands will cause these "scripts" to run:

nmdc-field-notes/package.json

Lines 9 to 10 in 227d993

	"format": "prettier . --write",
	"format:check": "prettier . --check",

[eecavanna]

I approve of this branch being merged into main after the code formatting has been fixed.

[eecavanna]

Also, I recommend updating the PR title to:

Implement tutorial screen

Most of the PR titles in this repository are written in that "(Do) (thing)" format.

[pkalita-lbl]

This looks good! Other than what Eric said about the formatting, I would also add a request to use CSS Modules instead of plain CSS files. The changes here would be:

• Rename Tutorial.css to Tutorial.module.css
• Change the import from import "./Tutorial.css"; to import styles from "./Tutorial.module.css"
• Change the usages of the classes from className="tutorial-header" to className={styles["tutorial-header"]}. You might also rename the CSS class itself to use camelCase (i.e. tutorialHeader) in which case you could use className={styles.tutorialHeader}.