Tabify Admin page

client/admin/admin.jsx

@@ -8,11 +8,38 @@ const BrewLookup = require('./brewLookup/brewLookup.jsx');
 const BrewCompress = require ('./brewCompress/brewCompress.jsx');
 const Stats = require('./stats/stats.jsx');
 
+const tabGroups = ['brews'];
+
 const Admin = createClass({
 	getDefaultProps : function() {
 		return {};
 	},
 
+	getInitialState : function() {
+		return {
+			currentTab : 'brews'
+		};
+	},
+
+	handleClick : function(newTab) {
+		if(this.state.currentTab === newTab) return;
+		this.setState({
+			currentTab : newTab
+		});
+	},
+
+	renderBrewTools : function(){
+		return <>
+			<Stats />
+			<hr />
+			<BrewLookup />
+			<hr />
+			<BrewCleanup />
+			<hr />
+			<BrewCompress />
+		</>;
+	},
+
 	render : function(){
 		return <div className='admin'>
 
@@ -23,13 +50,12 @@ const Admin = createClass({
 				</div>
 			</header>
 			<div className='container'>
-				<Stats />
-				<hr />
-				<BrewLookup />
-				<hr />
-				<BrewCleanup />
-				<hr />
-				<BrewCompress />
+				<div className='tabs'>
+					{tabGroups.map((name, idx)=>{
+						return <button className='tab' key={idx} onClick={()=>{return this.handleClick(name);}}>{name.toUpperCase()}</button>;
+					})}
+				</div>
+				{this.state.currentTab == 'brews' && this.renderBrewTools()}
 			</div>
 		</div>;
 	}