Description

Create a small utilities Component function that given an input string, returns a <div> that has a nicely styled BG with the initials
Component can be reused everywhere we have initials on the page

Wireframe

Initial code

function InitialsBox({firstWord='', secondWord='', bgColor=null})

If bgColor is null, then randomly pick 1 out of 10 colors
If first and second words are empty, then just use AA
If first word present but second word not present (or vice-versa) pick first 2 characters of the one that is present
If both words present, pick first character of each word
Return a <div style={bgcolor}> with the initials
Don't specify dimensions on div, let the parent component specify dimensions either via a CSS className or using style directly.

Component needs to be imported first:

import InitialsBox from '../../utils/InitialsBox'

Then the Component needs to be called with the relevant parameters inside a parent div:

<div className="comment-profile-img">
    <InitialsBox firstWord={'John'} secondWord={'Smith'} bgColor={'#aabbcc'} />
</div>