@material-ui/icons#Apps JavaScript Examples

The following examples show how to use @material-ui/icons#Apps. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: component.js    From Queen with MIT License 4 votes vote down vote up 
Navigation = ({ className, title }) => {
  const { questionnaire, bindings, validatedPages, setMenuOpen, readonly, setPage } = useContext(
    OrchestratorContext
  );
  const [open, setOpen] = useState(false);
  const [surveyOpen, setSurveyOpen] = useState(false);
  const [stopOpen, setStopOpen] = useState(false);
  const [selectedSequence, setSelectedSequence] = useState(undefined);

  const lunaticVersion = dependencies['@inseefr/lunatic'].replace('^', '');
  const getVtlLabel = label => {
    return lunatic.interpret(['VTL'])(bindings)(label);
  };

  const getFilterValue = cache => conditionFilter => {
    if (!!conditionFilter || !!conditionFilter.value) return true;
    const { value } = conditionFilter;
    if (cache[value] !== undefined) {
      return cache[value];
    }
    cache[value] = lunatic.interpret(['VTL'])(bindings, true)(value);
    return cache[value];
  };

  const specialVTLComponents = components => {
    const localCache = {};
    return components.reduce((_, { componentType, conditionFilter, label, ...other }) => {
      if (componentType === 'Sequence') {
        const { page } = other;
        return [
          ..._,
          {
            componentType,
            labelNav: getVtlLabel(label),
            reachable:
              validatedPages?.includes(page) && getFilterValue(localCache)(conditionFilter),
            ...other,
          },
        ];
      }
      if (componentType === 'Subsequence') {
        const { goToPage } = other;
        return [
          ..._,
          {
            componentType,
            labelNav: getVtlLabel(label),
            reachable:
              validatedPages?.includes(goToPage) && getFilterValue(localCache)(conditionFilter),
            ...other,
          },
        ];
      }
      return _;
    }, []);
  };

  const componentsVTL = specialVTLComponents(questionnaire.components);

  const getSubsequenceComponents = useMemo(
    () => id =>
      componentsVTL.filter(
        ({
          componentType,
          hierarchy: {
            sequence: { id: idSequence },
          },
        }) => componentType === 'Subsequence' && idSequence === id
      ),
    [componentsVTL]
  );

  const navigationComponents = useMemo(() => {
    return surveyOpen
      ? componentsVTL.reduce((_, { id, componentType, ...other }) => {
          if (componentType === 'Sequence') {
            return [
              ..._,
              {
                id,
                componentType,
                components: getSubsequenceComponents(id),
                ...other,
              },
            ];
          }
          return _;
        }, [])
      : null;
  }, [surveyOpen, componentsVTL, getSubsequenceComponents]);
  const offset = 1;

  const menuItemsSurvey = [D.surveyNavigation];
  const menuItemsQuality = !readonly ? ['Arrêt'] : [];

  const [currentFocusElementIndex, setCurrentFocusElementIndex] = useState(0);
  const [listRefs] = useState(
    [...menuItemsSurvey, ...menuItemsQuality].reduce(
      _ => [..._, React.createRef()],
      createArrayOfRef(offset)
    )
  );

  const setFocus = useCallback(index => () => setCurrentFocusElementIndex(index), [
    setCurrentFocusElementIndex,
  ]);
  const reachableRefs = [...menuItemsSurvey, ...menuItemsQuality].reduce(
    _ => [..._, true],
    createReachableElement(offset)
  );

  const openCloseSubMenu = useCallback(
    type => {
      if (type === 'sequence') {
        setStopOpen(false);
        if (surveyOpen) {
          setSelectedSequence(undefined);
          setSurveyOpen(false);
          listRefs[1].current.focus();
        } else {
          setSurveyOpen(true);
        }
      } else if (type === 'stop') {
        setSurveyOpen(false);
        if (stopOpen) {
          setStopOpen(false);
          listRefs[2].current.focus();
        } else {
          setStopOpen(true);
        }
      }
    },
    [listRefs, stopOpen, surveyOpen]
  );

  const openCloseMenu = useCallback(() => {
    if (surveyOpen) openCloseSubMenu('sequence');
    if (stopOpen) openCloseSubMenu('stop');
    setOpen(!open);
    setMenuOpen(!open);
    listRefs[0].current.focus();
  }, [surveyOpen, openCloseSubMenu, stopOpen, open, setMenuOpen, listRefs]);

  const setNavigationPage = useCallback(
    page => {
      openCloseMenu();
      setPage(page);
    },
    [openCloseMenu, setPage]
  );

  const getKeysToHandle = () => {
    if (open && (surveyOpen || stopOpen)) return ['alt+b'];
    if (open) return ['alt+b', 'esc', 'right', 'up', 'down'];
    return ['alt+b'];
  };
  const keysToHandle = getKeysToHandle();

  const keyboardShortcut = (key, e) => {
    e.preventDefault();
    if (key === 'alt+b') {
      openCloseMenu();
    }
    if (key === 'esc' && !surveyOpen) openCloseMenu();
    if (key === 'right') {
      if (currentFocusElementIndex === 1) openCloseSubMenu('sequence');
      if (currentFocusElementIndex === 2) openCloseSubMenu('stop');
    }
    if (key === 'down' || key === 'up') {
      const directionFocus = key === 'down' ? NEXT_FOCUS : PREVIOUS_FOCUS;
      const newRefIndex = getNewFocusElementIndex(directionFocus)(currentFocusElementIndex)(
        reachableRefs
      );
      listRefs[newRefIndex]?.current?.focus();
    }
  };
  const classes = useStyles();

  const [trapFocus, setTrapFocus] = useState(false);

  useEffect(() => {
    setTimeout(() => setTrapFocus(open), 250);
  }, [open]);

  const rootRef = useRef();

  const menu = (
    <>
      <IconButton
        ref={listRefs[0]}
        // eslint-disable-next-line jsx-a11y/no-autofocus
        autoFocus
        title={D.mainMenu}
        className={classes.menuIcon}
        onClick={openCloseMenu}
        onFocus={setFocus(0)}
      >
        <Apps fontSize={'small'} htmlColor={open ? '#E30342' : '#000000'} />
      </IconButton>
      <div className={`${classes.menu}${open ? ' slideIn' : ''}`}>
        {open && (
          <>
            <div className={classes.navigationContainer}>
              <span className={classes.goToNavigationSpan}>{`${D.goToNavigation} ...`}</span>
              <nav role="navigation">
                <ul>
                  {menuItemsSurvey.map((label, index) => {
                    const type = index === 0 ? 'sequence' : '';
                    return (
                      <li key={label}>
                        <ButtonItemMenu
                          ref={listRefs[index + offset]}
                          selected={currentFocusElementIndex === index + offset}
                          onClick={() => openCloseSubMenu(type)}
                          onFocus={setFocus(index + offset)}
                        >
                          {label}
                          <span>{'\u3009'}</span>
                        </ButtonItemMenu>
                      </li>
                    );
                  })}
                  {menuItemsQuality.map((label, index) => {
                    const type = 'stop';
                    return (
                      <li key={label}>
                        <ButtonItemMenu
                          ref={listRefs[index + menuItemsSurvey.length + offset]}
                          selected={
                            currentFocusElementIndex === index + menuItemsSurvey.length + offset
                          }
                          onClick={() => openCloseSubMenu(type)}
                          onFocus={setFocus(index + menuItemsSurvey.length + offset)}
                        >
                          {label}
                          <span>{'\u3009'}</span>
                        </ButtonItemMenu>
                      </li>
                    );
                  })}
                </ul>
              </nav>
            </div>
            <div
              className={classes.version}
            >{`Queen : ${version} | Lunatic : ${lunaticVersion}`}</div>
          </>
        )}
      </div>
    </>
  );
  return (
    <div ref={rootRef} className={className}>
      {trapFocus && <focus-trap>{menu}</focus-trap>}
      {!trapFocus && menu}
      {open && (
        <>
          <div
            className={`${classes.subMenuNavigationContainer} ${
              classes.sequenceNavigationContainer
            }${surveyOpen || stopOpen ? ' slideIn' : ''}`}
          >
            {surveyOpen && (
              <SequenceNavigation
                title={title}
                components={navigationComponents}
                setPage={setNavigationPage}
                setSelectedSequence={setSelectedSequence}
                subSequenceOpen={!!selectedSequence}
                close={openCloseSubMenu}
              />
            )}
            {stopOpen && <StopNavigation ref={rootRef} close={openCloseSubMenu} />}
          </div>
          {surveyOpen && (
            <div
              className={`${classes.subMenuNavigationContainer} ${
                classes.subsequenceNavigationContainer
              }${selectedSequence ? ' slideIn' : ''}`}
            >
              {selectedSequence && selectedSequence.components.length > 0 && (
                <SubsequenceNavigation
                  sequence={selectedSequence}
                  close={() => setSelectedSequence(undefined)}
                  setPage={setNavigationPage}
                />
              )}
            </div>
          )}
        </>
      )}

      {open && <div className={classes.backgroundMenu} onClick={openCloseMenu} />}

      <KeyboardEventHandler
        handleKeys={keysToHandle}
        onKeyEvent={keyboardShortcut}
        handleFocusableElements
      />
    </div>
  );
}
Example #2
Source File: HeaderLinksCopy.js    From Dashboard with MIT License 4 votes vote down vote up 
function HeaderLinks() {
  const auth = useContext(AuthContext);
  const {
    user,
    methods
  } = auth;

  const {
    signOut
  } = methods;

  const handleSignOut = (e) => {
    e.preventDefault();
    firebase.auth().onAuthStateChanged(function (user) {
      if (!user) {
        window.location.href = '/';
      }
    });
    signOut(); 
  }

  const classes = useStyles();
  return (
    <List className={classes.list}>
      <ListItem className={classes.listItem}>
        {user ? 
        (<CustomDropdown
          noLiPadding
          buttonText=""
          buttonProps={{
            className: classes.navLink,
            color: "transparent"
          }}
          buttonIcon={Apps}
          dropdownList={[
            <Link to="/dashboard" className={classes.dropdownLink}>
              Home Page
            </Link>,
            <Link to="/search-page" className={classes.dropdownLink}>
               Search Page
            </Link>,
              <Link to="/add-actor" className={classes.dropdownLink}>
              Add an Actor
            </Link>,
             <Link to="#" className={classes.dropdownLink} onClick={handleSignOut}>
             Logout
           </Link>,
          ]}
        />) : (<CustomDropdown
          noLiPadding
          buttonText=""
          buttonProps={{
            className: classes.navLink,
            color: "transparent"
          }}
          buttonIcon={Apps}
          dropdownList={[
            <Link to="/" className={classes.dropdownLink}>
            Home Page
          </Link>,
            <Link to="/" className={classes.dropdownLink}>
              Registration Page
            </Link>,
              <Link to="/login-page" className={classes.dropdownLink}>
              Login Page
            </Link>,
          ]}
        />) }
      </ListItem> 
      <ListItem className={classes.listItem}>
        <Button 
          to="/"
          color="transparent"
          target="_blank"
          className={classes.navLink}>
          <Link to="/add-actor" className={classes.dropdownLink}>
              Home
          </Link>
          </Button>
      </ListItem>
      <ListItem className={classes.listItem}>
        <Button 
          to="/"
          color="transparent"
          target="_blank"
          className={classes.navLink}>
          <Link to="/add-actor" className={classes.dropdownLink}>
              Add an Actor
          </Link>
          </Button>
      </ListItem>
      <ListItem className={classes.listItem}>
        <Button 
          to="/"
          color="transparent"
          target="_blank"
          className={classes.navLink}>
          <Link to="/search-page" className={classes.dropdownLink}>
              Search
          </Link>
          </Button>
      </ListItem>
      <ListItem className={classes.listItem}>
      {user ? 
        (
          <Button 
          to="/"
          color="transparent"
          target="_blank"
          className={classes.navLink}>
          <Link to="/search-page" className={classes.dropdownLink}>
              
          </Link>
         </Button>) : (
          <Button 
          to="/"
          color="transparent"
          target="_blank"
          className={classes.navLink}>
          <Link to="/search-page" className={classes.dropdownLink}>
              Login
          </Link>
          </Button>)}
</ListItem>
    </List>
  );
}
Example #3
Source File: Toolbox.jsx    From doc2pen with Creative Commons Zero v1.0 Universal 4 votes vote down vote up 
function VerticalTabs(props) {
	const {
		color,
		setColor,
		fillColor,
		setFillColor,
		fillOpacity,
		setFillOpacity,
		setBowing,
		setFillStyle,
		setFillWeight,
		setHachureAngle,
		setHachureGap,
		bowing,
		fillStyle,
		fillWeight,
		hachureAngle,
		hachureGap,
		background,
		setBackground,
		width,
		setWidth,
		stroke,
		setStroke,
		roughness,
		setRoughness,
		type,
		setType,
		fontSize,
		setFontSize,
		fontStyle,
		setFontStyle,
		fontFamily,
		setFontFamily,
		edge,
		setEdge,
		clear,
		download,
		initiateLoadSaved,
		loadLastState,
		saveInstance,
	} = props;
	const [displayColorPicker, setDisplayColorPicker] = useState(false);
	const ColorPicker = props => {
		const { width, name, color, onColorChange } = props;
		return (
			<div className={styles.root}>
				<div className={styles.swatch}>
					<div
						className={styles.colorIndicator}
						style={{
							backgroundColor: props.color || "#fff",
						}}
						onMouseDown={() => {
							setDisplayColorPicker(true);
						}}
					/>
				</div>
				{displayColorPicker ? (
					<ClickAwayListener
						onClickAway={() => {
							setDisplayColorPicker(false);
						}}
					>
						<div className={styles.popover}>
							<ChromePicker
								width={width}
								name={name}
								color={color}
								onChangeComplete={color => onColorChange(color.hex)}
							/>
						</div>
					</ClickAwayListener>
				) : null}
			</div>
		);
	};

	const classes = useStyles();
	const [value, setValue] = React.useState(0);
	const handleChange = (event, newValue) => {
		setValue(newValue);
	};

	function Feature({ title, children, classname }) {
		return (
			<ListItem>
				<div className={styles.feature + " " + classname}>
					<ListItemText className={styles.title}>{title}</ListItemText>
					<div className={styles.body}>{children}</div>
				</div>
			</ListItem>
		);
	}

	function Shape({ type_, id, label, children }) {
		return (
			<label style={{ marginTop: "3px" }} htmlFor={id} title={label}>
				<div
					className={`${styles.feature} ${
						type === type_ && styles.active_feature
					}`}
					onClick={() => setType(type_)}
					id={id}
				>
					{children}
				</div>
			</label>
		);
	}

	return (
		<div className={styles.toolbox_root}>
			<div className={styles.canvas_toolbox}>
				<div className={classes.root}>
					<Tabs
						orientation="vertical"
						variant="scrollable"
						value={value}
						onChange={handleChange}
						className={classes.tabs}
					>
						<Tab
							onClick={() => setType("pen")}
							label={
								<label title="Project">
									<AccountTree />
								</label>
							}
							{...a11yProps(0)}
						/>
						<Tab
							onClick={() => setType("pen")}
							label={
								<label title="Canvas Setup">
									<RiFileSettingsLine size={25} />
								</label>
							}
							{...a11yProps(1)}
						/>
						<Tab
							onClick={() => setType("pen")}
							label={
								<label title="Shapes & Tools">
									<FaShapes size={25} />
								</label>
							}
							{...a11yProps(2)}
						/>
						<Tab
							onClick={() => setType("text")}
							label={
								<label title="Text">
									<TextFields />
								</label>
							}
							{...a11yProps(3)}
						/>
						<Tab
							onClick={() => {
								setType("pen");
							}}
							label={
								<label title="Icon Library">
									<Apps />
								</label>
							}
							{...a11yProps(4)}
						/>
						<Tab
							onClick={() => setType("pen")}
							label={
								<label title="Minimize Sidebar">
									<Close />
								</label>
							}
							{...a11yProps(5)}
						/>
					</Tabs>
					<TabPanel value={value} index={0}>
						<List component="div">
							<ListItem button onClick={clear}>
								<ListItemIcon>
									<Delete />
								</ListItemIcon>
								<ListItemText primary="Clear Canvas" />
							</ListItem>
							<ListItem button onClick={download}>
								<ListItemIcon>
									<SaveAlt />
								</ListItemIcon>
								<ListItemText primary="Download PNG" />
							</ListItem>
							<ListItem
								button
								onClick={() => initiateLoadSaved("img-file-selector")}
							>
								<ListItemIcon>
									<PhotoLibrary />
									<input
										type="file"
										id="img-file-selector"
										style={{ display: "none" }}
										accept="image/*"
										onChange={event => loadLastState(event)}
									/>
								</ListItemIcon>
								<ListItemText primary="Place Image" />
							</ListItem>
							<ListItem
								button
								onClick={() => saveInstance("savedProgress.d2ps")}
							>
								<ListItemIcon>
									<Save />
								</ListItemIcon>
								<ListItemText primary="Save & download Progress" />
							</ListItem>
							<ListItem
								button
								onClick={() => initiateLoadSaved("file-selector")}
							>
								<ListItemIcon style={{ width: 0 }}>
									<D2psIcon
										style={{
											transform: "scale(0.6) translateX(-30px)",
										}}
									/>
									<input
										type="file"
										id="file-selector"
										style={{ display: "none" }}
										accept=".d2ps"
										onChange={event => loadLastState(event)}
									/>
								</ListItemIcon>
								<ListItemText primary="Load Previous Progress" />
							</ListItem>
						</List>
					</TabPanel>
					<TabPanel value={value} index={1}>
						<List component="div">
							<Feature title="Canvas Setup">
								<div className={styles.colorPicker}>
									<ColorPicker
										width={200}
										name="canvas_bg_color"
										color={background}
										onColorChange={setBackground}
									/>
									<input
										className={styles.hexInput}
										placeholder="#"
										type="text"
										value={background}
										onInput={e => setBackground(e.target.value)}
									/>
								</div>
							</Feature>
						</List>
					</TabPanel>
					<TabPanel value={value} index={2}>
						<List component="div">
							<Feature title="Shapes and Tools">
								<Shape type_="pen" id="sketch-shapes-pen" label="Pen">
									<FaPencilAlt size={12} />
								</Shape>
								<Shape type_="line" id="sketch-shapes-line" label="Line">
									<FaSlash size={10} />
								</Shape>
								<Shape type_="square" id="sketch-shapes-square" label="Square">
									<FaRegSquare size={10} />
								</Shape>
								<Shape type_="circle" id="sketch-shapes-circle" label="Circle">
									<FaRegCircle size={10} />
								</Shape>
								<Shape
									type_="triangle"
									id="sketch-shapes-triangle"
									label="Triangle"
								>
									<GiTriangleTarget size={12} />
								</Shape>
								<Shape type_="arrow" id="sketch-shapes-arrow" label="Arrow">
									<BsArrowUpRight size={12} />
								</Shape>
								<Shape
									type_="diamond"
									id="sketch-shapes-diamond"
									label="Diamond"
								>
									<BsDiamond size={10} />
								</Shape>
								<Shape
									type_="biShapeTriangle"
									id="sketch-shapes-biShapeTriangle"
									label="Bi Shape Triangle"
								>
									<BiShapeTriangle size={12} />
								</Shape>
							</Feature>
							<Divider />
							{!["text", "pen", "line"].includes(type) && (
								<>
									<Feature title="Fill Style">
										<select
											name="shape_fill_style"
											value={fillStyle}
											onChange={e => setFillStyle(e.target.value)}
										>
											<option value="none">none</option>
											<option value="solid">solid</option>
											<option value="hachure">hachure</option>
											<option value="zigzag">zigzag</option>
											<option value="cross-hatch">cross-hatch</option>
											<option value="dots">dots</option>
											<option value="dashed">dashed</option>
											<option value="zigzag-line">zigzag-line</option>
										</select>
									</Feature>
									{fillStyle !== "none" && (
										<>
											<Feature title="Fill Color">
												<div className={styles.colorPicker}>
													<ColorPicker
														width={200}
														name="canvas_pen_color"
														color={fillColor}
														onColorChange={setFillColor}
													/>
													<input
														className={styles.hexInput}
														placeholder="#"
														type="text"
														value={fillColor}
														onInput={e => setFillColor(e.target.value)}
													/>
												</div>
											</Feature>
											<Feature
												classname={styles.sliderWrapper}
												title={"Fill Opacity"}
											>
												<input
													className={styles.slider}
													type="range"
													min={0}
													max={1}
													step={0.1}
													value={fillOpacity}
													onChange={e => setFillOpacity(e.target.value)}
												/>
											</Feature>
										</>
									)}
									{!["none", "solid"].includes(fillStyle) && (
										<>
											<Feature
												classname={styles.sliderWrapper}
												title={"Fill Weight"}
											>
												<input
													className={styles.slider}
													type="range"
													min={1}
													max={10}
													step={0.1}
													value={fillWeight}
													onChange={e => setFillWeight(e.target.value)}
												/>
											</Feature>
											<Feature
												classname={styles.sliderWrapper}
												title={"Fill Hachure Angle"}
											>
												<input
													className={styles.slider}
													type="range"
													min={0}
													max={360}
													step={1}
													value={hachureAngle + 180}
													onChange={e => setHachureAngle(e.target.value - 180)}
												/>
											</Feature>
											<Feature
												classname={styles.sliderWrapper}
												title={"Fill Hachure Gap"}
											>
												<input
													className={styles.slider}
													type="range"
													min={1}
													max={10}
													step={0.1}
													value={hachureGap}
													onChange={e => setHachureGap(e.target.value)}
												/>
											</Feature>
										</>
									)}
									<Divider />
								</>
							)}

							<Feature title="Stroke">
								<div className={styles.colorPicker}>
									<ColorPicker
										width={200}
										name="canvas_pen_color"
										color={color}
										onColorChange={setColor}
									/>
									<input
										className={styles.hexInput}
										placeholder="#"
										type="text"
										value={color}
										onInput={e => setColor(e.target.value)}
									/>
								</div>
							</Feature>
							<Feature classname={styles.sliderWrapper} title={"Roughness"}>
								<input
									className={styles.slider}
									type="range"
									min={0}
									max={5}
									step={0.1}
									value={roughness}
									onChange={e => setRoughness(e.target.value)}
								/>
							</Feature>
							<Feature classname={styles.sliderWrapper} title={"Stroke Bowing"}>
								<input
									className={styles.slider}
									type="range"
									min={0}
									max={10}
									step={0.1}
									value={bowing}
									onChange={e => setBowing(e.target.value)}
								/>
							</Feature>
							<Feature title="Stroke Width">
								<select
									name="canvas_pen_width"
									value={width}
									onChange={e => setWidth(e.target.value)}
								>
									<option value="1">1px</option>
									<option value="2">2px</option>
									<option value="3">3px</option>
									<option value="4">4px</option>
									<option value="5">5px</option>
									<option value="6">6px</option>
									<option value="7">7px</option>
									<option value="8">8px</option>
									<option value="9">9px</option>
									<option value="10">10px</option>
									<option value="11">11px</option>
								</select>
							</Feature>
							<Feature title="Stroke Style">
								<div
									className={`${styles.feature_box} ${
										stroke === "none" && styles.active_feature_box
									}`}
									onClick={() => setStroke("none")}
								>
									<AiOutlineLine size={20} />
								</div>
								<div
									className={`${styles.feature_box} ${
										stroke === "small" && styles.active_feature_box
									}`}
									onClick={() => setStroke("small")}
								>
									<AiOutlineSmallDash size={20} />
								</div>
								<div
									className={`${styles.feature_box} ${
										stroke === "big" && styles.active_feature_box
									}`}
									onClick={() => setStroke("big")}
								>
									<AiOutlineDash size={20} />
								</div>
							</Feature>
							<Feature title="Edge">
								<select value={edge} onChange={e => setEdge(e.target.value)}>
									<option value="round">Round</option>
									<option value="bevel">Bevel</option>
									<option value="miter">Miter</option>
								</select>
							</Feature>
						</List>
					</TabPanel>
					<TabPanel value={value} index={3}>
						<List component="div">
							<Feature title="Stroke">
								<div className={styles.colorPicker}>
									<ColorPicker
										width={200}
										name="canvas_pen_color"
										color={color}
										onColorChange={setColor}
									/>
									<input
										className={styles.hexInput}
										placeholder="#"
										type="text"
										value={color}
										onInput={e => setColor(e.target.value)}
									/>
								</div>
							</Feature>
							<Feature
								classname={styles.sliderWrapper}
								title={`Font [ ${fontSize} ]`}
							>
								<input
									className={styles.slider}
									type="range"
									min="10"
									max="20"
									value={fontSize * 10}
									onChange={e => setFontSize(e.target.value / 10)}
								/>
							</Feature>
							<Feature title="Font Style">
								<div
									className={`${styles.feature_box} ${
										fontStyle === "normal" && styles.active_feature_box
									}`}
									onClick={() => setFontStyle("normal")}
								>
									<BsFonts size={20} />
								</div>
								<div
									className={`${styles.feature_box} ${
										fontStyle === "italic" && styles.active_feature_box
									}`}
									onClick={() => setFontStyle("italic")}
								>
									<FaItalic size={15} />
								</div>
								<div
									className={`${styles.feature_box} ${
										fontStyle === "bold" && styles.active_feature_box
									}`}
									onClick={() => setFontStyle("bold")}
								>
									<FaBold size={15} />
								</div>
							</Feature>
							<Feature title="Font Family">
								<select
									value={fontFamily}
									onChange={e => setFontFamily(e.target.value)}
								>
									<option value="cursive">Cursive</option>
									<option value="Courier New">Courier New</option>
									<option value="serif">Serif</option>
								</select>
							</Feature>
						</List>
					</TabPanel>
					<TabPanel value={value} index={4}>
						<List component="div">
							<IconsLibrary />
						</List>
					</TabPanel>
					<TabPanel
						className={classes.tabPanelClose}
						value={value}
						index={5}
					></TabPanel>
				</div>
			</div>
		</div>
	);
}