{"size": 1651, "ext": "js", "max_stars_repo_path": "src/components/RightSidebar/RightSidebar.js", "max_stars_repo_name": "biximilien/Reactive-Resume", "max_stars_repo_stars_event_min_datetime": "2020-04-30T08:02:20.000Z", "max_stars_repo_stars_event_max_datetime": "2020-04-30T08:02:20.000Z", "max_issues_repo_path": "src/components/RightSidebar/RightSidebar.js", "max_issues_repo_name": "biximilien/Reactive-Resume", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/RightSidebar/RightSidebar.js", "max_forks_repo_name": "biximilien/Reactive-Resume", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.5166666667, "max_line_length": 107, "alphanum_fraction": 0.6159903089}
import React, { useState, useContext } from 'react';

import AppContext from '../../context/AppContext';
import TabBar from '../../shared/TabBar';
import TemplatesTab from './tabs/Templates';
import ColorsTab from './tabs/Colors';
import FontsTab from './tabs/Fonts';
import ActionsTab from './tabs/Actions';
import AboutTab from './tabs/About';

const tabs = ['Templates', 'Colors', 'Fonts', 'Actions', 'About'];

const RightSidebar = () => {
  const context = useContext(AppContext);
  const { state, dispatch } = context;
  const { data, theme } = state;

  const [currentTab, setCurrentTab] = useState('Templates');
  const onChange = (key, value) => {
    dispatch({
      type: 'on_input',
      payload: {
        key,
        value,
      },
    });

    dispatch({ type: 'save_data' });
  };

  const renderTabs = () => {
    switch (currentTab) {
      case 'Templates':
        return <TemplatesTab theme={theme} onChange={onChange} />;
      case 'Colors':
        return <ColorsTab theme={theme} onChange={onChange} />;
      case 'Fonts':
        return <FontsTab theme={theme} onChange={onChange} />;
      case 'Actions':
        return <ActionsTab data={data} theme={theme} dispatch={dispatch} />;
      case 'About':
        return <AboutTab />;
      default:
        return null;
    }
  };

  return (
    <div
      id="rightSidebar"
      className="animated slideInRight z-10 py-6 h-screen bg-white col-span-1 shadow-2xl overflow-y-scroll"
    >
      <TabBar tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
      <div className="px-6">{renderTabs()}</div>
    </div>
  );
};

export default RightSidebar;
