HTML/CSS and React Online Test

Consider the following components:

const SecurityContext = React.createContext({ username: "", permissions: [] });

const ControlsComponent = (props) => {
  return (
    <SecurityContext.Provider value={{ username: props.username }}>
      <LogoutWrapper></LogoutWrapper>
    </SecurityContext.Provider>
  );
};

const LogoutWrapper = (props) => {
  var context = React.useContext(SecurityContext);
  
  return (
    <div>
      <p>{context.username}</p>
      <button>Click here to logout</button>
    </div>
  );
};

Select all the correct statements if ControlsComponent is rendered with the username prop equal to "James".

(Select all acceptable answers.)

Every user on your website has an image avatar that is displayed when they post a comment. You want to style these images differently from other images on your site. Add a CSS class named avatar that fulfils the following requirements:

1. The avatar's border is rounded, so that it appears as a circle.
2. The avatar's width and height are both 150px.
3. The avatar has a solid border, has a width of 2px, and be colored gray.

For example, the avatar in the template should look like:

Finish the FocusableInput component so that the input element automatically receives focus on the first render.

The component should use React Hooks.