Refactor tab component

src/components/tabs/tabs.jsx

@@ -10,17 +10,37 @@ require('./tabs.scss');
  * Container for a custom, horizontal list of navigation elements
  * that can be displayed within a view or component.
  */
-const Tabs = props => (
+const Tabs = ({ items, activeTabName }) => {
+    const itemsRendered = items.map(({ name, onTrigger, getContent }) => {
+        const isActive = name === activeTabName
+        return (
+            <li 
+                className={`${isActive ? 'active' : ''}`}
+                onClick={onTrigger}
+                key={name}
+            >
+                {getContent(isActive)}
+            </li>
+        )
+    })
+    return (
         <div className="tab-background">
-        <SubNavigation className={classNames('tabs', props.className)}>
-            {props.children}
+            <SubNavigation className="tabs">
+                {itemsRendered}
             </SubNavigation>
         </div>
-);
+    )
+};
 
 Tabs.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string
+    items: PropTypes.arrayOf(
+        PropTypes.shape({
+            name: PropTypes.string.isRequired,
+            onTrigger: PropTypes.func.isRequired,
+            getContent: PropTypes.func.isRequired
+        })
+    ).isRequired,
+    activeTabName: PropTypes.string.isRequired,
 };
 
 module.exports = Tabs;

src/views/explore/explore.jsx

@@ -27,7 +27,6 @@ class Explore extends React.Component {
             'handleGetExploreMore',
             'handleChangeSortMode',
             'getBubble',
-            'getTab'
         ]);
 
         this.state = this.getExploreState();
@@ -125,43 +124,53 @@ class Explore extends React.Component {
                             </h1>
                         </div>
                     </TitleBanner>
-                    {/* <Tabs>
-                        {this.getTab('projects')}
-                        {this.getTab('studios')}
-                    </Tabs> */}
                     <Tabs
-                        items={
-                            [
+                        items={[
                             {
                                 name: 'projects',
                                 onTrigger: () => { 
                                     window.location = `${window.location.origin}/explore/projects/${this.state.category}/${this.state.mode}`;
                                 },
-                                    getContent: () =>(
-                                        <li className={classes}>
-                                            {this.state.itemType === type ? [
+                                getContent: (isActive) => (
+                                    <div>
+                                        {isActive ? (
                                                 <img 
-                                                    className={`tab-icon ${type}`}
-                                                    key={`tab-${type}`}
-                                                    src={`/svgs/tabs/${type}-active.svg`}
+                                                    className="tab-icon projects"
+                                                    src="/svgs/tabs/projects-active.svg"
                                                 />
-                                            ] : [
+                                            ) : (
                                                 <img
-                                                    className={`tab-icon ${type}`}
-                                                    key={`tab-${type}`}
-                                                    src={`/svgs/tabs/${type}-inactive.svg`}
+                                                    className="tab-icon projects"
+                                                    src="/svgs/tabs/projects-inactive.svg"
                                                 />
-                                            ]}
-                                            <FormattedMessage id={`general.${type}`} />
-                                        </li>
+                                            )
+                                        }
+                                        <FormattedMessage id="general.projects" />
+                                    </div>
                                 )
                             },
                             {
                                 name: 'studios',
                                 onTrigger: () => { 
-                                        window.location = `${window.location.origin}/explore/studios/${this.state.tab}/${this.state.mode}`;
+                                    window.location = `${window.location.origin}/explore/studios/${this.state.category}/${this.state.mode}`;
                                 },
-                                    content: 'studios'
+                                getContent: (isActive) => (
+                                    <div>
+                                        {isActive ? (
+                                                <img 
+                                                    className="tab-icon studios"
+                                                    src="/svgs/tabs/studios-active.svg"
+                                                />
+                                            ) : (
+                                                <img
+                                                    className="tab-icon studios"
+                                                    src="/svgs/tabs/studios-inactive.svg"
+                                                />
+                                            )
+                                        }
+                                        <FormattedMessage id="general.studios" />
+                                    </div>
+                                )
                             }
                         ]}
                         activeTabName={ this.state.itemType }