javascript – Preferred way to use different types of components?

I'm working on a component for a navigation bar. This navigation bar currently has two variants: a "back" version and a "closed" version.

I've proposed three different implementations, but I do not know which one is the best. Currently, I look for this implementation because it seems to me the best.

const NAVIGATION_BAR_TYPE = {
return back ",
close: "close",
}

const NavigationBar = ({type = NAVIGATION_BAR_TYPE.back, text, linkTo}) => {
return (
    
{text}
) } NavigationBar.Close = (props) => ( ) NavigationBar.Back = (props) => ( ) // Use:

This is similar to the first, but you must import the object that contains the navigation bar types:

const NAVIGATION_BAR_TYPE = {
return back ",
close: "close",
}

const NavigationBar = ({type = NAVIGATION_BAR_TYPE.back, text, linkTo}) => {
return (
    
{text}
) } // Use:

Or this one, taking advantage of the accessories:

Const NavigationBar = ({return, close, text, link to}) => {
const navigationType = back? & # 39; back & # 39 ;: & # 39; close & # 39;

return (
    
{text}
) } // Use:

I do not like the third solution because if I need to add more variations, I have the impression that it clutters the accessories. And I do not like the second solution because you then import this enumerated object to define the type.