react-icons/fa#FaHome JavaScript Examples

ICON_COMPONENTS = {
    mug: <GiCoffeeMug className="vertical-align" />,
    circle: <GrStatusGoodSmall className="small-icon" />,
    octocat: <FaGithubAlt className="vertical-align" />,
    times: <FaTimes className="vertical-align" />,
    home: <FaHome className="vertical-align" />,
}

ListItems = () => {
  const links = [
    {
      name: "Home",
      icon: <FaHome />,
      link: "/homepage",
    },
    {
      name: "Profile",
      icon: <FaUserAlt />,
      link: "/homepage/profile",
    },
    {
      name: "My Post",
      icon: <FaStickyNote />,
      link: "/homepage/myposts",
    },
    {
      name: "Settings",
      icon: <FaCog />,
      link: "/homepage/settings",
    },
  ];

  return (
    <div class="dropdown dropstart">
      <button
        class="btn btn-secondary dropdown-toggle"
        type="button"
        id="dropdownMenuButton2"
        data-bs-toggle="dropdown"
        aria-expanded="false"
      >
        {/* Dropdown button */}
        <HiMenuAlt3 />
      </button>
      <ul
        class="dropdown-menu dropdown-menu-dark"
        aria-labelledby="dropdownMenuButton2"
      >
        {links.map((item, idx) => (
          <li key={idx}>
            <NavLink to={item.link} end={true} className="dropdown-item">
              {/* {item.icon} */}
              <span className="ms-3">{item.name}</span>
            </NavLink>
          </li>
        ))}
        <li>
          <hr className="dropdown-divider" />
        </li>
        <li>
          <a
            href="!#"
            data-bs-toggle="modal"
            data-bs-target="#exampleModal"
            class="dropdown-item"
          >
            Logout
          </a>
        </li>
      </ul>
    </div>
  );
}

SideNav = () => {
  const links = [
    {
      name: "Home",
      icon: <FaHome />,
      link: "/homepage",
    },
    {
      name: "Profile",
      icon: <FaUserAlt />,
      link: "/homepage/profile",
    },
    {
      name: "My Post",
      icon: <FaStickyNote />,
      link: "/homepage/myposts",
    },
    {
      name: "Settings",
      icon: <FaCog />,
      link: "/homepage/settings",
    },
  ];

  return (
    <React.Fragment>
      <div className="col-sm-3 sidenav">
        <ul className="list-group list-group-flush">
          {links.map((item, idx) => (
            <li
              className="list-group-item list-group-item-action list-group-item-dark"
              key={idx}
            >
              <NavLink to={item.link} end={true}>
                {item.icon}
                <span className="ms-3">{item.name}</span>
              </NavLink>
            </li>
          ))}
          <li className="list-group-item list-group-item-action list-group-item-dark">
            <a href="!#" data-bs-toggle="modal" data-bs-target="#exampleModal">
              <FaSignOutAlt className="me-3" /> Logout
            </a>
          </li>
        </ul>
      </div>
      <Modal />
    </React.Fragment>
  );
}

function NavBar() {
  const [NavBar, setNavBar] = useState(false);

  const ChangeBackground = () => {
    if (window.scrollY > 220) {
      setNavBar(true);
    } else {
      setNavBar(false);
    }
  };

  window.addEventListener("scroll", ChangeBackground);
  return (
    <IconContext.Provider
      value={{ color: "white", size: "2rem", padding: "20px" }}
    >
      <div>
        <Navbar
          fixed="top"
          expand="lg"
          variant="dark"
          className={NavBar ? "navBar active" : "navBar"}
        >
          <Navbar.Brand href="/">
            <img src={NavLogo} alt="" className="nav-img" />
            CS Hut
          </Navbar.Brand>
          <Navbar.Toggle
            aria-controls="basic-navbar-nav"
            className="custom-toggler"
          />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ml-auto">
              <FaHome />
              <Nav.Link href="/">Home</Nav.Link>
              <div className="borderbottom"></div>
              <MdComputer />
              <Nav.Link href="/Tags">Resources</Nav.Link>
              <div className="borderbottom"></div>
              <FaInfoCircle />
              <Nav.Link>
                <HashLink className="hash-link" to="/#ab">
                  About
                </HashLink>
              </Nav.Link>
              <div className="borderbottom"></div>
              <MdContactMail />
              <Nav.Link href="/contactus">Contact</Nav.Link>
              <div className="borderbottom"></div>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
    </IconContext.Provider>
  );
}

export default function Tool(d) {
  const tool = d.data.toolsYaml
  const introText = getIntroText(tool)
  const metaDescription = getMetaDescription(tool)
  const similarTools = getSimilarTools(tool, d.data.allToolsYaml.nodes, 5)
  const freeTools = getFreeTools(tool, d.data.allToolsYaml.nodes, 5)
  return (
    <Layout>
      <Helmet>
        <meta charSet="utf-8" />
        <meta name="description" content={metaDescription} />
        <title>
          {tool.name} - {introText}
        </title>
      </Helmet>
      <article tw="shadow w-full">
        <div tw="bg-white flex justify-start p-2 md:p-6 w-full">
          <div tw="md:w-12 flex-none">
            <Vote k={tool.children[0].key} sum={tool.children[0].sum} />
          </div>
          <div tw="pl-2">
            <a tw="hover:underline" href={tool.homepage}>
              <h1 tw="text-3xl font-semibold mb-5">{tool.name}</h1>
            </a>
            <p tw="pb-3">{tool.description}</p>
          </div>
        </div>
        <div tw="px-4 md:pl-20 md:pr-6">
          {tool.fields.githubStats.stargazers_count && (
            <div tw="flex">
              <a tw="hover:underline" href={tool.source}>
                Github:
              </a>
              <ul tw="ml-2 mb-2">
                <span tw="mr-3" href={tool.source}>
                  <FaStar tw="mb-1 mr-2 inline-block" />
                  {tool.fields.githubStats.stargazers_count}
                </span>
                <span tw="mr-3" href={tool.source}>
                  <FaEye tw="mb-1 mr-2 inline-block" />
                  {tool.fields.githubStats.watchers_count}
                </span>
                <span tw="mr-3" href={tool.source}>
                  <FaExclamationCircle tw="mb-1 mr-2 inline-block" />
                  {tool.fields.githubStats.open_issues_count}
                </span>
                <span tw="mr-3" href={tool.source}>
                  <FaCodeBranch tw="mb-1 mr-2 inline-block" />
                  {tool.fields.githubStats.forks_count}
                </span>
                <span tw="mr-3" href={tool.source}>
                  <FaCalendarAlt tw="mb-1 mr-2 inline-block" />
                  {tool.fields.githubStats.created_at}
                </span>
              </ul>
            </div>
          )}
          <div tw="flex mb-8">
            <span>Workflow integration:</span>
            <ul tw="flex">
              {tool.types.map(t => (
                <li tw="flex" key={t}>
                  <img
                    tw="self-start object-contain ml-2 w-6"
                    src={`/icons/${t}.svg`}
                    alt={`Type: ${t}`}
                  />
                  <div tw="flex-1">{t}</div>
                </li>
              ))}
            </ul>
          </div>
          <MainMedia tool={tool} />
          <p tw="mb-3">
            <FaHome tw="mb-1 mr-2 inline-block" />
            <a tw="underline" href={tool.homepage}>
              Official {tool.name} Homepage
            </a>
          </p>
          {tool.source && (
            <p tw="mb-3">
              <FaLink tw="mb-1 mr-2 inline-block" />
              <a tw="underline" href={tool.source}>
                {tool.source}
              </a>
            </p>
          )}
          {tool.license ? (
            <p tw="mb-3">
              <FaCopyright tw="mb-1 mr-2 inline-block" /> {tool.license}{" "}
            </p>
          ) : (
            <p tw="mb-3">
              <FaOsi tw="mb-1 mr-2 inline-block" />{" "}
              {tool.fields.githubStats.license
                ? tool.fields.githubStats.license.name
                : "Open Source"}
            </p>
          )}
          {tool.deprecated ? (
            <p tw="mb-3">
              <FaExclamationCircle tw="text-red-500 mb-1 mr-2 inline-block" />{" "}
              <span tw="text-red-800">Deprecated/Unmaintained </span>
            </p>
          ) : (
            <p tw="mb-3">
              <FaCheckCircle tw="mb-1 mr-2 inline-block" /> Maintained
            </p>
          )}
          <div>
            <FaTags tw="mb-1 mr-2 inline-block align-top" />
            <ul tw="list-none max-w-sm inline-block align-top">
              {tool.tags.map(tag => (
                <li tw="mb-2 mr-1 inline-block" key={tag}>
                  <a href={"/tag/" + tag}>
                    <span tw="bg-gray-300 hover:bg-gray-400 px-2 py-1 rounded">
                      {tag}
                    </span>
                  </a>
                </li>
              ))}
            </ul>
          </div>
          {tool.resources && (
            <div tw="mb-4">
              <h3 tw="mt-3 mb-2 font-bold">More Resources</h3>
              <ul tw="list-disc">
                {tool.resources.map(resource => (
                  <li tw="underline ml-4 py-1" key={resource.title}>
                    <a href={resource.url}>{resource.title}</a>
                  </li>
                ))}
              </ul>
            </div>
          )}
          {freeTools.length > 0 && (
            <div tw="mb-4">
              <h3 tw="mt-3 mb-2 text-3xl font-semibold">
                Free/OSS Alterantives
              </h3>
              <ul tw="list-disc">
                {freeTools.map(tool => (
                  <li key={`${tool.slug}-free`} tw="list-none">
                    <span tw="rounded-full px-4 mr-4 mb-3 bg-yellow-300 text-white p-2 rounded-full leading-none inline-block">
                      {tool.votes}
                    </span>
                    <Link to={tool.slug}>{tool.name}</Link>
                  </li>
                ))}
              </ul>
            </div>
          )}
          {similarTools.length > 0 && (
            <div tw="mb-4">
              <h3 tw="mt-3 mb-2 text-xl font-semibold">Alternative Tools</h3>
              <ul tw="list-disc">
                {similarTools.map(tool => (
                  <li key={`${tool.slug}-similar`} tw="list-none">
                    <span tw="rounded-full px-4 mr-4 mb-3 bg-yellow-300 text-white p-2 rounded-full leading-none inline-block">
                      {tool.votes}
                    </span>
                    <Link to={tool.slug}>{tool.name}</Link>
                  </li>
                ))}
              </ul>
            </div>
          )}
          <div>
            <Utterances
              repo="analysis-tools-dev/website-comments"
              issueTerm="pathname"
              label=""
              theme="github-light"
              crossorigin="anonymous"
              async={false}
              style={`
            & .utterances {
              max-width: 950px;
            }
          `}
            />
          </div>
        </div>
      </article>
    </Layout>
  )
}

export function LeftPanel({
  setCurrentRightPanel,
  currentRightPanel,
  isDownload,
}) {
  const isSmallScreen = useIsSmallScreen();
  const [isMobileOpen, setIsMobileOpen] = useState(false);

  const styles = {
    container: {
      position: 'relative',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'space-between',
      backgroundColor: primary45,
      color: '#FFF',
      padding: `${isSmallScreen ? 8 : 20}px 10px 0px 10px`,
      minWidth: 200,
      fontFamily: 'Open Sans',
      paddingBottom: 0,
    },
    logo: {
      display: 'inline-block',
      fontFamily: 'MuseoModerno',
      color: '#FFF',
      fontSize: 24,
      fontWeight: 400,
      marginBottom: isSmallScreen && !isMobileOpen ? 8 : 20,
      textAlign: 'center',
      justifyContent: 'center',
      alignItems: 'center',
      userSelect: 'none',
      cursor: 'pointer',
      lineHeight: '24px',
    },
    settingsBlock: {
      bottom: 0,
      width: '100%',
    },
    mobilePadding: {
      paddingBottom: 6,
    },
    menuIcon: {
      position: 'absolute',
      top: isSmallScreen ? 16 : 25,
      left: 14,
    },
    logoContainer: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
    footer: {
      textAlign: 'center',
      marginBottom: 8,
      fontSize: 13,
      lineHeight: '14px',
      fontFamily: 'Open Sans',
    },
    iconGithub: {
      cursor: 'pointer',
    },
    githubTxt: {
      fontSize: 10,
      userSelect: 'none',
    },
    icon: {
      position: 'relative',
      top: 6,
      width: 30,
    },
    logoTitle: {
      display: 'inline-flex',
    },
  };

  let iconComponent = FaBars;
  if (isMobileOpen) {
    iconComponent = FaTimes;
  }

  const IconComponent = iconComponent;

  return (
    <div style={styles.container}>
      {isSmallScreen ? (
        <IconComponent
          color={'#FFF'}
          size={24}
          style={styles.menuIcon}
          onClick={() => {
            setIsMobileOpen(!isMobileOpen);
          }}
        />
      ) : null}
      <div>
        <div style={styles.logoContainer}>
          <div
            style={styles.logo}
            onClick={() => {
              document.location = `${
                window.location.origin + window.location.pathname
              }`;
            }}>
            <img src={logo} style={styles.icon} />
            <div style={styles.logoTitle}>Sailplane</div>
          </div>
        </div>
        {(isMobileOpen || !isSmallScreen) && !isDownload ? (
          <>
            <PanelItem
              title={'Files'}
              iconComponent={FaFolderOpen}
              selected={currentRightPanel === 'files'}
              onClick={() => {
                setIsMobileOpen(false);
                setCurrentRightPanel('files');
              }}
            />
            <PanelItem
              title={'Drives'}
              iconComponent={FaServer}
              selected={currentRightPanel === 'instances'}
              onClick={() => {
                setIsMobileOpen(false);
                setCurrentRightPanel('instances');
              }}
            />
            <PanelItem
              title={'Contacts'}
              iconComponent={FaAddressBook}
              selected={currentRightPanel === 'contacts'}
              onClick={() => {
                setIsMobileOpen(false);
                setCurrentRightPanel('contacts');
              }}
            />

            {/*<div style={styles.settingsBlock}>*/}
            {/*  <PanelItem*/}
            {/*    title={'Settings'}*/}
            {/*    selected={currentRightPanel === 'settings'}*/}
            {/*    onClick={() => setCurrentRightPanel('settings')}*/}
            {/*    iconComponent={FaCog}*/}
            {/*  />*/}
            {/*</div>*/}
          </>
        ) : (
          <div style={styles.mobilePadding} />
        )}
        {isDownload ? (
          <>
            <div style={styles.settingsBlock}>
              <PanelItem
                title={'Home'}
                onClick={() =>
                  (document.location =
                    'https://cypsela.github.io/sailplane-web/#/')
                }
                iconComponent={FaHome}
              />
            </div>
            <div style={styles.settingsBlock}>
              <PanelItem
                title={'Downloads'}
                onClick={() => {}}
                iconComponent={FaDownload}
                selected={true}
              />
            </div>
          </>
        ) : null}
      </div>
      {!isSmallScreen ? (
        <div style={styles.footer}>
          <a
            href={'https://github.com/cypsela/sailplane-web'}
            target={'_blank'}
            rel={'noopener'}>
            <FaGithub color={primary15} size={20} style={styles.iconGithub} />
          </a>
          <div style={styles.githubTxt}>Source</div>
        </div>
      ) : null}
    </div>
  );
}

Navbar = (props) => {
  const [searchText, setSearchText] = useState("");
  const [open, setOpen] = useState(false);
  const [openProfile, setOpenProfile] = useState(false);

  return (
    <>
      <nav className={classes.Navbar}>
        <div className={classes.NavContent}>
          <Title title="Devagram" />
          <div className={classes.Search}>
            <input
              type="text"
              value={searchText}
              onChange={setSearchText}
              name="search"
              required
              placeholder="Search"
              aria-labelledby="label-search"
            />
            <Link to="#">
              <FaSearch size="1.2em" style={{ color: "#aaa" }} />
            </Link>
          </div>
          <div className={classes.Options}>
            <div className={classes.Option}>
              <Link to="#">
                <FaInbox style={{ color: "black" }} />
              </Link>
            </div>
            <div className={classes.Option}>
              <Link to="/feeds">
                <FaCompass style={{ color: "black" }} />
              </Link>
            </div>
            <div className={classes.Option}>
              <Link to="/connect">
                <FaUsers style={{ color: "black" }} />
              </Link>
            </div>
            <div className={classes.Option}>
              <Link to="/jobsAndHack">
                <AiFillCode style={{ color: "black" }} />
              </Link>
            </div>
            <div
              className={classes.Option}
              onClick={() => setOpenProfile(!openProfile)}
            >
              <CgProfile style={{ color: "black", cursor: "pointer" }} />
            </div>
            <div
              className={(classes.Option, classes.Burger)}
              onClick={() => setOpen(!open)}
            >
              <FaHamburger style={{ color: "black", cursor: "pointer" }} />
            </div>
          </div>
        </div>
        <div
          className={[
            classes.ProfileOptions,
            openProfile ? classes.Open : "",
          ].join(" ")}
        >
          <div className={classes.ProfileOption}>
            <NavLink to="/dashboard" activeClassName={classes.selected}>
              <FaHome />
              <span>Home</span>
            </NavLink>
          </div>
          <div className={classes.ProfileOption}>
            <NavLink to="#" activeClassName={classes.selected}>
              <FaSearch />
              <span>Search</span>
            </NavLink>
          </div>
          <div className={classes.ProfileOption}>
            <NavLink to="#" activeClassName={classes.selected}>
              <FaPlus />
              <span>Create Post</span>
            </NavLink>
          </div>
          <div className={classes.ProfileOption}>
            <NavLink to="/profile" activeClassName={classes.selected}>
              <FaUser />
              <span>Profile</span>
            </NavLink>
          </div>
        </div>
        <div
          className={[classes.SmallScreen, open ? classes.Open : ""].join(" ")}
        >
          <div className={classes.SmallOption}>
            <Link to="/dashboard">
              <FaHome style={{ color: "black" }} />
              <span>Home</span>
            </Link>
          </div>
          <div className={classes.SmallOption}>
            <Link to="#">
              <FaInbox style={{ color: "black" }} />
              <span>Inbox</span>
            </Link>
          </div>
          <div className={classes.SmallOption}>
            <Link to="/feeds">
              <FaCompass style={{ color: "black" }} />
              <span>Explore-feeds</span>
            </Link>
          </div>
          <div className={classes.SmallOption}>
            <Link to="/connect">
              <FaUsers style={{ color: "black" }} />
              <span>Connect</span>
            </Link>
          </div>
          <div className={classes.SmallOption}>
            <Link to="/jobsAndHack">
              <AiFillCode style={{ color: "black" }} />
              <span>jobs-hackathons</span>
            </Link>
          </div>
        </div>
      </nav>
    </>
  );
}

render() {
    return (
      <div
        style={styles.tabCreatorContainer}
        onClick={() => {
          this.setState({ showPlayContextMenu: false });
        }}
      >
        {this.state.exporting && (
          <ScreenWideModal>
            <div style={styles.exportModal}>
              <div>Exporting Song...</div>
              <div style={{ margin: 10 }}>
                <ClipLoader />
              </div>
              <div>Don't resize the window for best results.</div>
            </div>
          </ScreenWideModal>
        )}
        {this.state.showNewSongWindow && (
          <NewSongWindow
            hide={() => {
              this.setState({ showNewSongWindow: false });
            }}
            onCreate={() => {
              //ask if they want to save this song

              this.setState({ showNewSongWindow: false });

              let kalimba = document.getElementById("kalimbaContainer");
              kalimba.scrollTop = kalimba.scrollHeight;
            }}
          />
        )}
        {/* TOOLBAR */}
        <div style={styles.controlPanelContainer}>
          {/* SONG CONTROL */}
          <div style={styles.songControlContainer}>
            {/* HOME BUTTON */}
            <ToolBarButton
              onClick={async () => {
                this.stopSong();
                await delay(1);
                this.props.history.push("/");
              }}
              name="Home"
            >
              <FaHome size={30} />
            </ToolBarButton>
            {/* NEW SONG */}
            <ToolBarButton
              onClick={() => {
                this.setState({ showNewSongWindow: true });
              }}
              name="New"
            >
              <FaFile size={25} />
            </ToolBarButton>
            {/* OPEN */}
            <ToolBarButton
              onClick={() => {
                this.openSong();
              }}
              name="Open"
            >
              <FaFolderOpen size={30} />
            </ToolBarButton>
            {/* SAVE */}
            <ToolBarButton
              onClick={() => {
                this.saveSong();
              }}
              name="Save"
            >
              <FaSave size={30} />
            </ToolBarButton>
            {/* EXPORT */}
            <ToolBarButton
              onClick={() => {
                this.exportToPDF();
              }}
              disabled={this.state.exporting || this.state.playing}
              selected={this.state.exporting}
              name="Export"
            >
              {this.state.exporting ? (
                <ClipLoader size={30} color="blue" />
              ) : (
                <FaFileExport size={30} />
              )}
            </ToolBarButton>
            {/* PLAY BUTTON */}
            <div style={{ position: "relative" }}>
              <ToolBarButton
                selected={this.state.playing}
                onClick={() => {
                  this.state.playing ? this.stopSong() : this.playSong(false);
                }}
                onContextMenu={() => {
                  this.setState({ showPlayContextMenu: true });
                }}
                name={this.state.playing ? "Stop" : "Play"}
              >
                {this.state.playing ? (
                  <FaStop color="red" size={30} />
                ) : (
                  <FaPlay color="blue" size={30} />
                )}
              </ToolBarButton>
              {this.state.showPlayContextMenu && (
                <PlayContextMenu
                  play={(fromMiddle) => {
                    this.state.playing
                      ? this.stopSong()
                      : this.playSong(fromMiddle);
                    this.setState({ showPlayContextMenu: false });
                  }}
                  isPlaying={this.state.playing}
                  stop={() => {
                    this.stopSong();
                  }}
                />
              )}
            </div>
          </div>
          {/* TITLE INPUT */}
          <div style={styles.titleContainer} id="titleandtempo">
            {!this.state.editTitle ? (
              <div
                onClick={() => {
                  this.setState({ editTitle: true });
                }}
                style={styles.songTitle}
              >
                {this.props.songTitle}
              </div>
            ) : (
              <input
                placeholder={this.props.songTitle}
                onKeyPress={(event) => {
                  if (event.key === "Enter") {
                    this.setState({ editTitle: false });
                  }
                }}
                style={styles.titleInput}
                onChange={(e) => {
                  this.props.changeTitle(e.target.value);
                }}
              />
            )}
            {!this.state.editTempo ? (
              <div
                onClick={() => {
                  this.setState({ editTempo: true });
                }}
                style={{ margin: 5 }}
              >
                {this.props.tempo}
              </div>
            ) : (
              <input
                onKeyPress={(event) => {
                  if (event.key === "Enter") {
                    this.setState({ editTempo: false });
                    this.props.changeTempo(this.state.enteredTempo);
                  }
                }}
                placeholder={this.props.tempo}
                style={styles.tempoInput}
                type="number"
                min="0"
                max="500"
                onChange={(e) => {
                  // this.props.changeTempo(e.target.value);
                  this.setState({ enteredTempo: e.target.value });
                }}
              />
            )}
          </div>
          {/* NOTE TOOLBAR */}
          <div style={styles.noteToolbarContainer}>
            {/* SELECTION MODE BUTTON */}
            <ToolBarButton
              selected={this.props.selectionMode}
              onClick={() => {
                this.props.toggleSelectionMode();
              }}
              name="Selection Mode"
            >
              <FaHandPointer />
            </ToolBarButton>
            <div style={styles.noteToolbarDivider} />
            {/* EXTEND SONG BUTTON */}
            <ToolBarButton
              onClick={() => {
                this.props.extendSong();
              }}
              name="Extend Song"
            >
              <FaPlus />
            </ToolBarButton>
            <div style={styles.noteToolbarDivider} />
            <NoteButton value={1} />
            <NoteButton value={2} />
            <NoteButton value={4} />
            <NoteButton value={8} />
            <NoteButton value={16} />
            <div style={styles.noteToolbarDivider} />
            <AccidentalButton value="♯" />
            <AccidentalButton value="♭" />
            <AccidentalButton value="♮" />
            <div style={styles.noteToolbarDivider} />
            {/* DOTTED BUTTON */}
            <ToolBarButton
              selected={this.props.dotted}
              onClick={() => {
                this.props.toggleDotted();
              }}
            >
              <div
                style={{
                  width: 10,
                  height: 10,
                  borderRadius: 5,
                  backgroundColor: this.props.dotted ? "blue" : "black",
                }}
              />
            </ToolBarButton>
            {/* REST BUTTON */}
            <ToolBarButton
              selected={this.props.rest}
              onClick={() => {
                this.props.toggleRest();
              }}
            >
              <img
                src={QuarterRest}
                style={{ width: 15, height: "auto" }}
                alt={"resticon"}
              />
            </ToolBarButton>
            {/* TRIPLET BUTTON */}
            <ToolBarButton
              selected={this.props.tripletMode}
              onClick={() => {
                this.props.toggleTriplet();
              }}
              name="Triplet"
            >
              -3-
            </ToolBarButton>
          </div>
        </div>
        {/* EVERYTHING BELOW TOOLBAR */}
        <div style={styles.lowerHalf}>
          <div style={{ flex: 1 }}></div>
          <div
            id="kalimbaContainer"
            style={{
              ...styles.kalimbaContainer,
              height: this.state.height - 90,
            }}
          >
            {this.state.kalimba !== null ? (
              <Kalimba
                kalimba={this.state.kalimba}
                currentNote={this.state.currentNoteIndex}
                playing={this.state.playing}
                visibleHeight={this.state.height}
                playFromNote={(index) => {
                  this.playSong(false, index);
                }}
                scrollBack={() => {
                  let kalimbaContainer = document.getElementById(
                    "kalimbaContainer"
                  );
                  kalimbaContainer.scrollTop += 50 * 25;
                }}
              />
            ) : (
              <div style={{ alignSelf: "center" }}>
                <ScaleLoader />
              </div>
            )}
          </div>
          <div style={{ flex: 1 }}></div>
        </div>
      </div>
    );
  }