{{=« »=}}
import * as React from 'react';
import { addPropertyControls, ControlType } from 'framer';
// tslint:disable-next-line: ban-ts-ignore
// @ts-ignore
import MuiAppBar from '@material-ui/core/AppBar';
// tslint:disable-next-line: ban-ts-ignore
// @ts-ignore
import Mui«componentName» from '@material-ui/core/«componentName»';
// tslint:disable-next-line: ban-ts-ignore
// @ts-ignore
import MuiTab from '@material-ui/core/Tab';
import { Icon } from './Icon';

interface Props {
«& tsInterface»
}

const defaultProps: Props =  {
«& defaultProps»
};

export const «componentName»: React.SFC<Props> = (props: Props) => {
const { appBarColor, labels, icons, width, height, ...other } = props

  // tslint:disable-next-line: ban-ts-ignore
  // @ts-ignore
  const [value, setValue] = React.useState(0);

  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
    setValue(newValue);
  };

  const items = icons.length > labels.length ? icons : labels;

  return (
    <div>
      <MuiAppBar color={appBarColor}>
        <MuiTabs value={value} onChange={handleChange} {...other}>
          {items.map(
            (item, index) =>
              (labels[index] !== undefined || icons[index] !== undefined) && (
                <MuiTab
                  key={item}
                  value={index}
                  label={labels[index]}
                  icon={<Icon icon={icons[index] || ''} />}
                />
              ),
          )}
        </MuiTabs>
      </MuiAppBar>
    </div>
  );
};

«componentName».defaultProps = defaultProps;

addPropertyControls(«componentName», {
«& propertyControls»
});