Have to make sure that components like Logo that have options for react-router-dom work when the router is/isn't being used

• Create Button component
• Create Input component
• Create Textarea component
• Create Select component
• OR try out a component library like React Bootstrap or Material UI

• Dropdown with light/dark
• Update functionality with auto as an option
• Auto as first option in dropdown

• what do I need to do to switch out the logo between dark/light mode, if there is a different logo for each?
• a way to use an actual svg so it can adjust automatically with the color mode would be nice
• test with actual logo file
• test with svg code

• Same option with the button link, to be a Link or an anchor tag
  • Should that be some kind of props option for a Button component - if the button component has a link to navigate to then a prop to determine if it can be a Link or an anchor tag (most useful for links that need to open a new tab, probably to outside site)

Component will be a button that onClick will toggle between light and dark mode

• prop to set the starting color mode
• prop to customize button text
• prop to hide button text
• function to change the data attribute in the to dark or light
• update bootstrap icon according to which theme is active, moon for dark, sun for light

• Set up props for text, various hover effects, colors, and option to include an icon.
  • name (required)
  • hideName (boolean, only if there is an icon)
  • url
  • new tab (could just be a boolean)
  • icon (fontAwesome icon class name. If true - anchor, if false - Link)
  • hover effect options (could be a union type of options, each with it's own class and subsequent styling)
  • defaultColor - before hover effect
• Nav links could be just an icon too. And a prop for if it needs to open in new window, determining if the nav link will be a Link or an anchor tag
• Make an array of objects with all the link text, url, specific icon, and then map through them to spit out the new nav link component with the corresponding data
  • For each object in the array create a new NavLink component with all the props filled out from what was in the object

Create component for Logo

• prop for path to logo file, if no logo file use altText
• prop for target _blank
• prop to useLink
  • if useLink = true then it's Link and to, else anchor and href
• prop for the link
• prop to size the logo?
• test with actual logo file