I am at loss how to name my components so that it would look good on the page and not have super long names. For example, I have an app where I have a UsersSidebar component and inside there are User components. But I also have a UserList and inside there is also User components but different components. And then I may have another different User component on the page. So they are 3 different User components but they are all called User. How could I solve this problem?
Should I call it users-sidebar-user and user-list-user because that looks very long and clunky. What if I have 2 different user-sidebar components? Should I call it general-user-sidebar and forum-user-sidebar and then forum-user-sidebar-user?
// Here the <user> is a sidebar item <li>username</li> <users-sidebar> <user> <user> <user> </users-sidebar> // Here the <user> is a different component <div><h1>username</h1></div <user-list> <user> <user> <user> </user-list> // And here <user> is <div class="card">username</user> <user>