@reach/router#Link JavaScript Examples

NavLink = props => {
  return (
    <Link
      className="nav-link"
      {...props}
      getProps={({ isCurrent }) => {
        // the object returned here is passed to the
        // anchor element's props
        return {
          style: {
            width: "100%",
            marginLeft: "0",
            color: isCurrent ? "white" : "#2962FF",
            background: isCurrent ? "#2962FF" : "white",
          },
        };
      }}
    />
  );
}

App = () => (
  <div>
    <nav className={styles.nav}>
      <Link to="meme-creator" getProps={isActive}>Meme Creator</Link>
      <Link to="star-wars-info" getProps={isActive}>Star Wars Info</Link>
      <Link to="personal-blog" getProps={isActive}>Personal Blog</Link>
    </nav>
    <Router>
      <MemeCreator path="meme-creator" />
      <StarWarsInfo path="star-wars-info" />
      <PersonalBlog path="personal-blog/*" />
      <Redirect from="/" to="meme-creator" noThrow />
    </Router>
  </div>
)

function StickyHeader() {
  const { name } = useContext(UserContext);

  return (
    <section className={styles.root}>
      Welcome, <Link to="profile" className={styles.link}>{name}</Link>!
    </section>
  );
}

Sidebar = ({ options, links, home }) => {
  const [signInState, setSignInState] = useContext(SignInContext);
  if (signInState[0] !== "Signed Out" && home) {
    return (
      <div className="side-container-content">
        <Link to="/logout" style={{ textDecoration: "none", color: "white" }}>
          <p>Logout</p>
        </Link>
      </div>
    );
  }
  return (
    <div className="side-container-content">
      {options.map((item, index) => (
        <Link
          key={index}
          to={links[index]}
          style={{ textDecoration: "none", color: "white" }}
        >
          <p key={index}>{item}</p>
        </Link>
      ))}
    </div>
  );
}

NavLink = props => {
  return (
    <Link
      {...props}
      getProps={({ isCurrent }) => {
        // the object returned here is passed to the
        // anchor element's props
        if (isCurrent) {
          return {
            className: 'nav-item nav-link px-4 active',
          };
        } else {
          return { className: 'nav-item nav-link px-4' };
        }
      }}
    />
  );
}

render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <h1>
          There was an Error with this listing. <Link to="/">Click Here</Link>{" "}
          to go back to the home page or wait for 5 seconds.
        </h1>
      );
    }
    return this.props.children;
  }

Navigation = (props) => {
  return (
    <header className='flex-wrap-sm navigation'>
      <div className='container navigation-content'>
        <Link
          to='/'
          onClick={() => {
            props.resetIconSetState()
          }}
        >
          <div className='brand'>
            <img className='logo' src={eosIcon} alt='eos-icons logo' />
          </div>
        </Link>
        <nav className='padding-bottom-s'>
          <NavLink to='/'>
            <i className='eos-icons'>miscellaneous</i>
            Icons
          </NavLink>
          <NavLink to='/about'>
            <i className='eos-icons'>face</i>
            About Us
          </NavLink>
          <NavLink to='/docs'>
            <i className='eos-icons'>description</i>
            Docs{' '}
          </NavLink>
          <NavLink to='/team'>
            <i className='eos-icons'>group</i>
            Team{' '}
          </NavLink>
        </nav>
      </div>
    </header>
  )
}

PageNotFound = () => {
  return (
    <div className='heading-not-found'>
      <h1>404</h1>
      <br />
      <h1>Oops! Something went wrong.</h1>
      <br />
      <Link to='/'>
        <Button>Return To Home</Button>
      </Link>
    </div>
  )
}

NavLink = (props) => (
  <Link
    {...props}
    getProps={({ isCurrent }) => {
      return {
        className: isCurrent ? 'active' : ''
      }
    }}
  />
)

LandingPage = () => {
  const classes = useStyles();
  const { loginWithRedirect } = useAuth0();
  return (
    <IconContext.Provider value={{ color: "white", size: "3rem" }}>
      <NavBar />
      <Container className={classes.container}>
        <div className={classes.box}>
          <Typography className={classes.typography}>
            Your home for Angel City Sports events and more!
          </Typography>
          <img
            className={classes.bannerImg}
            src={landingImage}
            alt="Angel City Sports"
          />
        </div>
      </Container>
      <Container className={classes.contentContainer}>
        <Box className={classes.contentIntro}>
          <Typography variant="subtitle2">Sign Up Now!</Typography>
          <Typography className={classes.contentP}>
            Sign Up Now with Facebook or Google, add your profile info, and keep
            track of Angel City Sports Games, Clinics, and other events! All the
            info you need is all in one place - The Angel City Sports App.
          </Typography>
        </Box>
        <Box className={classes.btnContainer}>
          <Button
            className={classes.btn1}
            onClick={() => loginWithRedirect({})}
          >
            <FaFacebookSquare className={classes.icon} />
            <p>Sign up with Facebook</p>
          </Button>
          <Button
            className={classes.btn2}
            onClick={() => loginWithRedirect({})}
          >
            <FaGoogle className={classes.icon} />
            <p>Sign up with Google</p>
          </Button>
          <Link
            to="privacy-policy"
            style={{ padding: "0" }}
            className={classes.privacyLink}
          >
            <p>Privacy Policy</p>
          </Link>
        </Box>
        <Link to="accessibility" className={classes.a11yLink}>
          Accessibility Statement
        </Link>
      </Container>
    </IconContext.Provider>
  );
}

render() {
    return (
      <nav className="NavBar-Wrapper">
        <span>
          <Link
            to="/"
            className="NavBar-Home"
            onClick={(e) => this.props.leaveRoom()}
          >
            just one!
          </Link>
          <Link
            to="#"
            className="NavBar-Rules"
            onClick={(e) => this.props.toggleRules()}
          >
            rules
          </Link>
        </span>
        {this.props.roomName ? (
          <span className="NavBar-Room">
            {`room: ${this.props.roomName}`}
            <button
              className="small gray"
              onClick={(e) => this.props.changeRoom()}
            >
              change
            </button>
          </span>
        ) : (
          <span className="NavBar-Room">
            <button
              className="small gray"
              onClick={(e) => {
                const current = localStorage.getItem("color-scheme") || "light";
                localStorage.setItem(
                  "color-scheme",
                  current === "light" ? "dark" : "light"
                );
                if (current === "light") {
                  document.querySelector("html").classList.add("dark");
                } else {
                  document.querySelector("html").classList.remove("dark");
                }
              }}
            >
              dark mode
            </button>
          </span>
        )}
      </nav>
    );
  }

StickyHeader = ({ name }) => (
  <section className={styles.root}>
    Welcome, <Link to="profile" className={styles.link}>{name}</Link>!
  </section>
)

export default function Comment(props) {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid item xs={12}>
        <div className={classes.demo}>
          <List>
            {/* {generate( */}
            <ListItem>
              <ListItemAvatar>
                {props.username ? (
                  <Link to={`/user/${props.username}`}>
                    <Avatar className={classes.avatar}>
                      {props.name
                        ? props.name[0]
                        : // + props.name.split(" ")[1][0]
                          "X"}
                    </Avatar>
                  </Link>
                ) : (
                  <Avatar className={classes.avatar}>
                    {props.name
                      ? props.name[0]
                      : // + props.name.split(" ")[1][0]
                        "X"}
                  </Avatar>
                )}
              </ListItemAvatar>
              <ListItemText
                primary={props.comment}
                secondary={
                  <Moment format="MMM D" withTitle>
                    {props.date}
                  </Moment>
                }
              />
              <ListItemSecondaryAction>
                {/* <IconButton edge="end" aria-label="delete">
                  <DeleteIcon fontSize="small" />
                </IconButton> */}
              </ListItemSecondaryAction>
            </ListItem>
          </List>
        </div>
      </Grid>
    </div>
  );
}

CookiesBanner = () => {
  const [cookiesBanner, setCookiesBanner] = useState(false)

  /* Toggle customizable functionality */
  const cookiesHandler = (callback) => {
    setCookiesBanner(true)
    return callback
  }

  useEffect(() => {
    const acceptanceStatus = Cookies.get('acceptance-remainder')
    if (acceptanceStatus) {
      setCookiesBanner(true)
    }
  }, [cookiesBanner])

  return (
    <AppContext.Consumer>
      {({ state, dispatch }) => (
        <>
          <div
            className={cookiesBanner ? 'cookies-alert hide' : 'cookies-alert'}
          >
            <div className='cookies-alert-body'>
              <p>
                EOS Icons uses cookies to help us learn more about how we can
                improve our product.
                <br />
                <Link to='/cookies-policy'>
                  Learn more about our cookie policy
                </Link>
              </p>
            </div>
            <div className='cookies-alert-buttons'>
              <Link
                className='btn btn-default btn-inverted'
                to='/cookies-policy'
              >
                Edit preferences
              </Link>
              <Button
                onClick={() =>
                  cookiesHandler(dispatch({ type: 'TOGGLE_CUSTOMIZE_COOKIES' }))
                }
                primary
                customClass='js-cookies-accept'
              >
                Accept
              </Button>
            </div>
          </div>
        </>
      )}
    </AppContext.Consumer>
  )
}

function Profile() {
  const {
    name,
    setName,
    birthMonth,
    birthDay,
    setBirthMonth,
    setBirthDay,
  } = useContext(UserContext);

  function onNameChange(event) {
    setName(event.target.value);
  }

  function onMonthChange(event) {
    setBirthMonth(parseInt(event.target.value, 10));
  }

  function onDayChange(event) {
    setBirthDay(parseInt(event.target.value, 10));
  }

  useEffect(() => {
    const month = months[birthMonth - 1];
    setBirthDay(day => Math.min(day, month.days));
  }, [birthMonth, setBirthDay])

  const numDays = months[birthMonth - 1].days;

  return (
    <div className={styles.root}>
      <h1 className={styles.header}>Profile</h1>
      <div>
        <label className={styles.label}>
          Name
          <input type="text" value={name} onChange={onNameChange} className={styles.input} />
        </label>
      </div>
      <div>
        <label className={styles.label}>
          Birth Month
          <select type="text" value={birthMonth} onChange={onMonthChange} className={styles.select}>
            {months.map((month, i) =>
              <option key={i} value={i + 1}>{month.name}</option>
            )}
          </select>
        </label>
        <label className={styles.label}>
          Birth Day
          <select type="text" value={birthDay} onChange={onDayChange} className={styles.select}>
            {Array(numDays).fill().map((elem, i) =>
              <option key={i} value={i + 1}>{i + 1}</option>
            )}
          </select>
        </label>
      </div>
      <Link to="../" className={styles.link}>Return To Blog</Link>
    </div>
  );
}

StickyHeader = ({ name }) => (
  <section className={styles.root}>
    Welcome, <Link to="profile" className={styles.link}>{name}</Link>!
  </section>
)

function Profile(props) {
  const {
    name,
    birthMonth,
    birthDay,
    setName,
    setBirthMonth,
    setBirthDay,
  } = props;

  function onNameChange(event) {
    setName(event.target.value);
  }

  function onMonthChange(event) {
    setBirthMonth(parseInt(event.target.value, 10));
  }

  function onDayChange(event) {
    setBirthDay(parseInt(event.target.value, 10));
  }

  useEffect(() => {
    const month = months[birthMonth - 1];
    setBirthDay(day => Math.min(day, month.days));
  }, [birthMonth, setBirthDay])

  const numDays = months[birthMonth - 1].days;

  return (
    <div className={styles.root}>
      <h1 className={styles.header}>Profile</h1>
      <div>
        <label className={styles.label}>
          Name
          <input type="text" value={name} onChange={onNameChange} className={styles.input} />
        </label>
      </div>
      <div>
        <label className={styles.label}>
          Birth Month
          <select type="text" value={birthMonth} onChange={onMonthChange} className={styles.select}>
            {months.map((month, i) =>
              <option key={i} value={i + 1}>{month.name}</option>
            )}
          </select>
        </label>
        <label className={styles.label}>
          Birth Day
          <select type="text" value={birthDay} onChange={onDayChange} className={styles.select}>
            {Array(numDays).fill().map((elem, i) =>
              <option key={i} value={i + 1}>{i + 1}</option>
            )}
          </select>
        </label>
      </div>
      <Link to="../" className={styles.link}>Return To Blog</Link>
    </div>
  );
}

render(){
        return (
            <div className="notebooks-container">
                <div className = "notebooks-page-controls">
                <h2>{this.state.username}'s Notebooks</h2>
                        <Button
                         variant="contained"
                        //  color="seagreen"
                         startIcon={<AddIcon/>}
                         onClick={()=>{navigate("/addNotebook")}}
                        >
                            Add Notebook
                        </Button>
                        <Button
                         variant="contained"
                        //  color="seagreen"
                         startIcon={<RemoveIcon/>}
                         onClick={()=>{navigate("/deleteNotebook")}}
                        >
                            Delete Notebook
                        </Button>
                </div>
                <div className="servers-container">
                    <List>
                        {
                            this.state.notebooks.map(({notebookName,createdOn,_id},index)=>{
                                return(
                                    <Link key={index} to={`/notebooks/${this.state.username}/${notebookName}`} style={{ textDecoration: "none", color: "white" }}>
                                    <ListItem button>
                                        <ListItemIcon>
                                            <MenuBookIcon/>
                                        </ListItemIcon>
                                        <ListItemText primary={notebookName} secondary={createdOn}/>
                                    </ListItem>
                                    <Divider/>
                                    </Link>
                                )
                            })
                        }
                    </List>
                </div>
            </div>
        )
    }

render(){
        if(this.state.loading){
            return (
                <div className="serverDetailsPageMainContainer">
          <CircularProgress style={{color:"#42f5bf"}}/>
        </div>
            )
        }else{
            const {servers} = this.state;
            return (
                <div className="server-page-container">
                    <div className="server-page-controls">
                        <h2>{this.state.username}'s Servers</h2>
                        <Button
                         variant="contained"
                         color="seagreen"
                         startIcon={<AddIcon/>}
                         onClick={()=>{navigate("/addServer")}}
                        >
                            Add Server
                        </Button>
                        <Button
                         variant="contained"
                         color="seagreen"
                         startIcon={<MenuBookIcon/>}
                         onClick={()=>{navigate(`/notebooks/${this.state.username}`)}}
                        >
                            Notebooks
                        </Button>
                    </div>
                    <div className="servers-container">
                        <List>
                        {servers.map(({serverName,ipAddr,sshKey,user,password},index)=>{
                            return (
                            <Link key={index} to={`/serverDetails/${this.state.username}/${serverName}/${ipAddr}/${user}/${password}`} style={{ textDecoration: "none", color: "white" }}>
                            <ListItem button>
                                <ListItemIcon>
                                    <DnsIcon/>
                                </ListItemIcon>
                                <ListItemText primary={serverName} secondary={`${user} | ${ipAddr}`}/>
                            </ListItem>
                            <Divider/>
                            </Link>
                            )
                        })}
                        </List>
                    </div>
                </div>
            )
        }
    }

Signupin = () => {
  const [username, setUsername] = useState("username");
  const [password, setPassword] = useState("*******");
  const [signInState, setSignInState] = useContext(SignInContext);
  function verifyDetails() {
    if (username === "" || password === "") {
      alert("Form missing information.");
    } else {
      const formData = {
        username: username,
        password: password,
      };
      axios.post("/users/signin", formData).then((response) => {
        if (response.data === "Authentication Successful") {
          setSignInState(["Signed In", username, password]);
          navigate("/");
        } else {
          alert("Authentication failed.");
        }
      });
    }
  }
  return (
    <div className="form-page-container">
      <div className="form-container">
        <form
          onSubmit={(e) => {
            e.preventDefault();
            verifyDetails();
          }}
        >
          <label htmlFor="username" className="teal-text text-accent-3">
            Username
            <input
              id="username"
              onChange={(event) => setUsername(event.target.value)}
              className="teal-text text-accent-3"
            />
          </label>
          <label htmlFor="password" className="teal-text text-accent-3">
            Password
            <input
              id="password"
              type="password"
              onChange={(event) => setPassword(event.target.value)}
              className="teal-text text-accent-3"
            />
          </label>
          <button className="teal white-text accent-3">submit</button>
          <Link
            to="/signup"
            style={{ textDecoration: "none", color: "#4c5357" }}
          >
            <span className="teal-text text-accent-3">Sign Up</span>
          </Link>
        </form>
      </div>
    </div>
  );
}

export default function Status({
  statusInfo,
  piPowerOff,
  wsConnected,
  delay = 0,
  isFullscreen,
  setting,
  isLogin,
  session,
  changeEditabled,
  channelStatus,
  changeChannel,
  serverConfig,
  version,
  connectType,
  onCarMicphoneChange,
  locked,
  onControllerMicphoneChange = () => {},
  enabledControllerMicphone = true,
}) {
  const isWebRTC = connectType === "webrtc";
  const { sharedEndTime } = serverConfig;

  const gamepadPress = ({ detail: { index, value } }) => {
    if (index === 3 && value > 0.5) {
      onControllerMicphoneChange(!enabledControllerMicphone);
    }
  };

  useKeyPress(
    "t",
    () => onControllerMicphoneChange(!enabledControllerMicphone),
    {
      events: ["keyup"],
    }
  );

  useEventListener("gamepadpress", gamepadPress);

  return (
    <Form layout="inline" className="app-status" size="small">
      <Form.Item>
        <Link to={`${process.env.PUBLIC_URL}/controller`}>
          <img className="logo" src="/logo-256.png" alt="N-RC" />
        </Link>
        <span>N RC</span>
      </Form.Item>
      <Form.Item>
        <Tag
          style={{
            width: "7em",
          }}
          icon={
            locked ? (
              <StopOutlined />
            ) : wsConnected ? (
              <LinkOutlined />
            ) : (
              <DisconnectOutlined />
            )
          }
          color={locked || delay > 80 || !wsConnected ? "red" : "green"}
          size="xs"
        >
          {isWebRTC ? "直连" : "中转"}:{delay.toFixed(0)}
        </Tag>
      </Form.Item>
      {(serverConfig.channelList || [])
        .filter(({ enabled, type }) => enabled && type === "switch")
        .map(({ pin, name }) => (
          <Form.Item key={pin}>
            <Switch
              checked={channelStatus[pin] || false}
              checkedChildren={name}
              unCheckedChildren={name}
              onChange={(value) => changeChannel({ pin, value })}
            />
          </Form.Item>
        ))}

      {isLogin && isWebRTC && (
        <Form.Item>
          <Switch
            checked={enabledControllerMicphone}
            onChange={onControllerMicphoneChange}
            checkedChildren={
              <>
                <DesktopOutlined /> <AudioOutlined />
              </>
            }
            unCheckedChildren={
              <>
                <DesktopOutlined /> <AudioMutedOutlined />
              </>
            }
          />
        </Form.Item>
      )}

      {isLogin && (
        <Form.Item>
          <AudioPlayer
            session={session}
            connectType={connectType}
            onMicphoneChange={onCarMicphoneChange}
            url={`${
              window.location.protocol === "https:" ? "wss://" : "ws://"
            }${setting.host}/microphone`}
          />
        </Form.Item>
      )}

      <Form.Item>
        <Switch
          checkedChildren={<FormOutlined />}
          unCheckedChildren={<FormOutlined />}
          onChange={changeEditabled}
        ></Switch>
      </Form.Item>

      <Form.Item>
        <Link to={`${process.env.PUBLIC_URL}/setting`}>
          <Button
            size="small"
            icon={<SettingOutlined />}
            shape="circle"
          ></Button>
        </Link>
      </Form.Item>

      {document.body.requestFullscreen && (
        <Form.Item>
          <Button
            type="primary"
            shape="circle"
            icon={
              isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />
            }
            onClick={() => {
              if (isFullscreen) {
                document.exitFullscreen();
              } else {
                document.body.requestFullscreen();
              }
            }}
          ></Button>
        </Form.Item>
      )}

      {wsConnected && isLogin && (
        <Form.Item>
          <Button
            type="danger"
            shape="circle"
            icon={<PoweroffOutlined />}
            onClick={piPowerOff}
          ></Button>
        </Form.Item>
      )}

      {wsConnected &&
        isLogin &&
        Object.keys(statusInfo).map((key) => {
          const { color, label, value } = statusInfo[key];
          return !["gps"].includes(label) ? (
            <Form.Item key={key}>
              <Tag color={color}>
                {label}:{value}
              </Tag>
            </Form.Item>
          ) : undefined;
        })}

      {wsConnected && sharedEndTime && (
        <Form.Item>
          <Tag
            icon={<HourglassOutlined />}
            color={session && session.endTime && "orange"}
          >
            {((sharedEndTime - new Date().getTime()) / 1000).toFixed(0)}s
          </Tag>
        </Form.Item>
      )}

      {version && (
        <Form.Item>
          <Tag>v{version}</Tag>
        </Form.Item>
      )}
    </Form>
  );
}

render() {
    const {
      state: { learnArgument, loss, loading },
      props: { sampleList, ai },
      train,
    } = this;
    return (
      <div className="ai-train">
        <Spin spinning={loading} tip={loading}>
          <Form {...layout} initialValues={learnArgument} onFinish={train}>
            <Form.Item label="Learning rate" name="learnRate">
              <Select>
                <Option value={0.00001}>0.00001</Option>
                <Option value={0.0001}>0.0001</Option>
                <Option value={0.001}>0.001</Option>
                <Option value={0.003}>0.003</Option>
              </Select>
            </Form.Item>
            <Form.Item label="Batch Size" name="batchSize">
              <Select>
                <Option value={0.05}>0.05</Option>
                <Option value={0.1}>0.1</Option>
                <Option value={0.4}>0.4</Option>
                <Option value={1}>1</Option>
              </Select>
            </Form.Item>
            <Form.Item label="Epochs" name="epochs">
              <Select>
                <Option value={10}>10</Option>
                <Option value={20}>20</Option>
                <Option value={40}>40</Option>
              </Select>
            </Form.Item>
            <Form.Item label="Hidden units" name="hiddenUnits">
              <Select>
                <Option value={100}>100</Option>
                <Option value={200}>200</Option>
                <Option value={300}>300</Option>
                <Option value={400}>400</Option>
                <Option value={500}>500</Option>
              </Select>
            </Form.Item>
            <Form.Item label="loss">
              <InputNumber value={loss} disabled />
            </Form.Item>
            <Form.Item {...tailLayout}>
              <Button
                key="fit"
                loading={loading}
                disabled={!sampleList.length}
                icon={<ReadOutlined />}
                htmlType="submit"
              >
                学习(样本{sampleList.length})
              </Button>
              &nbsp; &nbsp; &nbsp; &nbsp;
              <Button
                onClick={async () => {
                  await ai.save("test");
                  message.success("模型已经保存");
                }}
                icon={<ExportOutlined />}
                disabled={!sampleList.length}
              >
                导出模型
              </Button>
            </Form.Item>
          </Form>
          <Form>
            <Form.Item {...tailLayout}>
              <Link to="../drive">
                <Button type="primary" disabled={!ai || !ai.model}>
                  下一步
                </Button>
              </Link>
            </Form.Item>
          </Form>
        </Spin>
      </div>
    );
  }

render() {
    const {
      clear,
      download,
      upload,
      props: { onFinish, cameraEnabled },
    } = this;
    const { sampleList } = this.state;
    return (
      <div className="ai-sample">
        <Form layout="inline" className="ai-sample-form">
          {Object.keys(aiAction).map((key) => (
            <Form.Item>
              <Button
                icon={aiAction[key].icon}
                onClick={() => this.add({ action: key })}
                disabled={!cameraEnabled}
              >{aiAction[key].name}</Button>
            </Form.Item>
          ))}
          <Form.Item>
            <Upload
              customRequest={upload}
              accept="application/json"
              showUploadList={false}
            >
              <Button icon={<ImportOutlined />}>导入</Button>
            </Upload>
          </Form.Item>
          <Form.Item>
            <Button
              icon={<ExportOutlined />}
              disabled={!sampleList.length}
              onClick={download}
            >
              导出
            </Button>
          </Form.Item>
          <Form.Item>
            <Button type="danger" disabled={!sampleList.length} onClick={clear}>
              清除
            </Button>
          </Form.Item>
          <Form.Item>
            <Link to="../train">
              <Button
                type="primary"
                disabled={sampleList.length < 10}
                onClick={() => {
                  onFinish(sampleList);
                }}
              >
                下一步
              </Button>
            </Link>
          </Form.Item>
        </Form>
        <List
          size="small"
          className="ai-example-list"
          grid={{ gutter: 16, column: 4 }}
          itemLayout="vertical"
          pagination={{
            pageSize: 12,
          }}
          dataSource={sampleList}
          renderItem={({ img, action }, index) => (
            <List.Item>
              <Card
                size="small"
                title={aiAction[action].icon}
                actions={[
                  <Button
                    size="small"
                    icon={<CloseOutlined />}
                    type="danger"
                    onClick={() => this.remove(index)}
                  />,
                ]}
              >
                <img
                  style={{ width: "100%" }}
                  src={img}
                  alt="example"
                  onLoad={function ({ target }) {
                    target.height = target.width * 0.75;
                  }}
                />
              </Card>
            </List.Item>
          )}
        />
      </div>
    );
  }

export default function PostCard(props) {
  const classes = useStyles();
  const [expanded, setExpanded] = useState(false);
  const [selected, setSelected] = useState(false);
  const [likeCount, setLikeCount] = useState(props.likes.likers.length);
  const comments = props.comments;

  const handleExpandClick = () => {
    setExpanded(!expanded);
  };

  useEffect(() => {
    if (cookies.get('userDetails')) {
      name = cookies.get('userDetails').name;
      userId = cookies.get('userDetails')._id;
      username = cookies.get('userDetails').username;
    }
    if (props.likes.likers.find((e) => e === userId)) setSelected(true);
  }, []);

  const handleLike = (selected) => {
    let liked = !selected;

    axios
      .post(
        `${ConnectServerUrl}/handlelike?` +
          queryString.stringify({ _id: props._id, email, googleToken }),
        {
          currentUserId: cookies.get('userDetails')._id,
          email,
          liked,
          //liked is true if user like , false if unliked ;
        }
      )
      .then((res) => console.log(res))
      .catch((err) => console.log(err));
  };

  return (
    <Card className={classes.root + " card"}>
      <CardHeader
        avatar={
          <Link to={`/user/${props.creator.username}`}>
            <Avatar aria-label="recipe" className={classes.avatar}>
              {props.creator
                ? props.creator.name
                  ? props.creator.name[0]
                  : // + props.creator.name.split(" ")[1][0]
                    props.Name[0]
                : // + props.Name.split(" ")[1][0]
                props.Name
                ? props.Name
                : 'X'}
            </Avatar>
          </Link>
        }
        action={
          <IconButton aria-label="settings">
            <MoreVertIcon />
          </IconButton>
        }
        title={props.title}
        subheader={
          <Moment format="MMM D, YYYY" withTitle>
            {props.date}
          </Moment>
        }
      />
      {props.imageUrl ? (
        <>
          <CardMedia
            className={classes.media}
            image={
              `https://res.cloudinary.com/${CloudName}/image/upload/c_crop,g_custom/v1/` +
              props.imageUrl
            }
            title="AcadVault"
          />
        </>
      ) : (
        <>
          <video width="300" height="200" controls>
            <source
              type="video/mp4"
              data-reactid=".0.1.0.0.0"
              src={
                `https://res.cloudinary.com/${CloudName}/video/upload/q_auto/v1588194153/` +
                props.videoUrl
              }
            ></source>
          </video>
        </>
      )}

      <CardContent>
        <Typography
          className="desc"
          variant="body2"
          color="textSecondary"
          component="p"
        >
          <Linkify properties={{ target: '_blank' }}>
            {props.description ? props.description : ''}
          </Linkify>
        </Typography>
      </CardContent>
      <CardActions disableSpacing>
        <Box alignItems="center" display={'flex'}>
            <IconButton
              style= {{paddingRight:0}}
              onClick={() => {
                handleLike(selected);
                selected
                  ? setLikeCount(likeCount - 1)
                  : setLikeCount(likeCount + 1);
                setSelected(!selected);
              }}
            >
              {selected ? (
                <FavoriteIcon color="secondary" />
              ) : (
                <FavoriteIcon />
              )}
            </IconButton>
          <Box l={3} p={1} b={4}>
            <Typography style={{ fontSize: '1.15rem' }}>
              {likeCount}
            </Typography>
          </Box>
          <Box display={'flex'}>
            <IconButton aria-label="share">
              <CommentIcon />
            </IconButton>
            <Typography style={{ fontSize: '1.15rem', marginTop: '.5rem' }}>
              {' '}
              {props.comments.length}
            </Typography>
          </Box>
        </Box>
        <IconButton
          className={clsx(classes.expand, {
            [classes.expandOpen]: expanded,
          })}
          onClick={handleExpandClick}
          aria-expanded={expanded}
          aria-label="show more"
        >
          <ExpandMoreIcon />
        </IconButton>
      </CardActions>
      <Collapse in={expanded} timeout="auto" unmountOnExit>
      <Divider/>
        <CardContent>
          
          <Typography variant="h6" className={classes.title}>
            Comments
          </Typography>
          <AddComment
            name={name}
            postId={props._id}
            userId={userId}
            username={username}
          />

          {comments
            ? comments.map((comment) => (
                <Comment
                  {...comment}
                  key={comment.date}
                  // onClick={handleComments}
                />
              ))
            : null}
        </CardContent>
      </Collapse>
    </Card>
  );
}

export default function NavAppBar(props) {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState(null);
  const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);

  const isMenuOpen = Boolean(anchorEl);
  const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);

  const [mobileOpen, setMobileOpen] = React.useState(false);

  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
  };

  const handleProfileMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMobileMenuClose = () => {
    setMobileMoreAnchorEl(null);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
    handleMobileMenuClose();
  };

  const handleMobileMenuOpen = (event) => {
    setMobileMoreAnchorEl(event.currentTarget);
  };

  const handleLogOut = () => {
    setMobileMoreAnchorEl(null);
    cookies.remove("userCookie");
    cookies.remove("userDetails");
    window.location.reload();
  };

  const menuId = "primary-search-account-menu";
  const renderMenu = (
    <Menu
      anchorEl={anchorEl}
      anchorOrigin={{ vertical: "top", horizontal: "right" }}
      id={menuId}
      keepMounted
      transformOrigin={{ vertical: "top", horizontal: "right" }}
      open={isMenuOpen}
      onClose={handleMenuClose}
    >
      <Link to={`/profile`} className={classes.link}>
        <MenuItem onClick={handleMenuClose}>Profile</MenuItem>
      </Link>
      <MenuItem onClick={handleMenuClose} onClick={handleLogOut}>
        Log Out
      </MenuItem>
    </Menu>
  );

  const mobileMenuId = "primary-search-account-menu-mobile";
  const renderMobileMenu = (
    <Menu
      anchorEl={mobileMoreAnchorEl}
      anchorOrigin={{ vertical: "top", horizontal: "right" }}
      id={mobileMenuId}
      keepMounted
      transformOrigin={{ vertical: "top", horizontal: "right" }}
      open={isMobileMenuOpen}
      onClose={handleMobileMenuClose}
    >
      <Link to="/chat" className={classes.link}>
        <MenuItem onClick={handleMobileMenuClose}>
          <IconButton aria-label="show 4 new mails" color="inherit">
            <Badge badgeContent={"ßeta"} color="secondary">
              <MailIcon />
            </Badge>
          </IconButton>
          <p>Messages</p>
        </MenuItem>
      </Link>
      <Link to="/add" className={classes.link}>
        <MenuItem onClick={handleMobileMenuClose}>
          <IconButton aria-label="show 11 new notifications" color="inherit">
            {/* <Badge badgeContent={11} color="secondary"> */}
            <PostAddIcon />
            {/* </Badge> */}
          </IconButton>
          <p>Add Post</p>
        </MenuItem>
      </Link>

      <Link to={`/profile`} className={classes.link}>
        <MenuItem onClick={handleMobileMenuClose}>
          <IconButton
            aria-label="account of current user"
            aria-controls="primary-search-account-menu"
            aria-haspopup="true"
            color="inherit"
          >
            <AccountCircle />
          </IconButton>
          <p>Profile</p>
        </MenuItem>
      </Link>
      <MenuItem onClick={handleLogOut}>
        <IconButton aria-label="show 11 new notifications" color="inherit">
          <ExitToAppIcon />
        </IconButton>
        <p>Log Out</p>
      </MenuItem>
    </Menu>
  );

  const { container } = props;

  const theme = useTheme();

  const drawer = (
    <div>
      <div className={classes.toolbar} />
      <List>
        <ListItem>
          <Typography>Browse by Category</Typography>
        </ListItem>
      </List>

      <Divider />
      <List>
        {/* <Link to="/home/Project"> */}
        <a href="/home/Project">
          <ListItem button key={"Projects"}>
            <ListItemIcon>
              <GitHubIcon />
            </ListItemIcon>
            <ListItemText primary={"Projects"} />
          </ListItem>
        </a>
        {/* </Link> */}

        {/* <Link to="/home/Writings"> */}
        <a href="/home/Writings">
          <ListItem button key={"Writings"}>
            <ListItemIcon>
              <CreateIcon />
            </ListItemIcon>
            <ListItemText primary={"Writings"} />
          </ListItem>
        </a>
        {/* </Link> */}

        {/* <Link to="/home/Artwork" onClick={handleTagLink}> */}
        <a href="/home/Artwork">
          <ListItem button key={"Artwork"}>
            <ListItemIcon>
              <GestureIcon />
            </ListItemIcon>
            <ListItemText primary={"Artwork"} />
          </ListItem>
        </a>
        {/* </Link> */}
      </List>
      <Divider />

      <List>
        {/* <Link to="/home/Music"> */}
        <a href="/home/Music">
          <ListItem button key={"Music"}>
            <ListItemIcon>
              <MusicNoteIcon />
            </ListItemIcon>
            <ListItemText primary={"Music"} />
          </ListItem>
        </a>
        {/* </Link> */}

        {/* <Link to="/home/Dance"> */}
        <a href="/home/Dance">
          <ListItem button key={"Dance"}>
            <ListItemIcon>
              <DirectionsWalkIcon />
            </ListItemIcon>
            <ListItemText primary={"Dance"} />
          </ListItem>
        </a>
        {/* </Link> */}

        {/* <Link to="/home/Other"> */}
        <a href="/home/Other">
          <ListItem button key={"Other"}>
            <ListItemIcon>
              <CallSplitIcon />
            </ListItemIcon>
            <ListItemText primary={"Other"} />
          </ListItem>
        </a>
        {/* </Link> */}
      </List>
      <Divider />
    </div>
  );

  const userCookie = cookies.get("userCookie");
  const googleToken = userCookie.Token;
  const email = userCookie.Email;

  const [searchResults, setSearchResults] = useState([]);

  const searchUsers = debounce((searchString) => {
    axios
      .get(
        `${ConnectServerUrl}/searchUsers?` +
          queryString.stringify(
            { searchString, googleToken, email },
            { withCredentials: true }
          )
      )
      .then((res) => {
        setSearchResults(res.data);
      })
      .catch(console.log);
  }, 400);

  const onSearchInputChange = (event) => {
    const searchString = event.target.value;
    if (searchString) {
      searchUsers(searchString);
    }
  };

  return (
    <div className={classes.root}>
      <CssBaseline />
      <div className={classes.grow}>
        <AppBar position="fixed" className={classes.appBar}>
          <Toolbar>
            <IconButton
              edge="start"
              className={handleDrawerToggle}
              color="inherit"
              aria-label="open drawer"
              onClick={handleDrawerToggle}
              // eslint-disable-next-line
              className={classes.menuButton}
            >
              <MenuIcon />
            </IconButton>
            <Link to="/">
              <IconButton edge="start">
                <DonutSmallIcon style={{ color: "white" }} />
              </IconButton>
            </Link>
            <Typography className={classes.title} variant="h6" noWrap>
              Connect
            </Typography>
            <div className={classes.search}>
              <div className={classes.searchIcon}>
                <SearchIcon />
              </div>
              <Autocomplete
                id="free-solo-demo"
                freeSolo
                clearOnBlur
                options={searchResults}
                className="searchBox"
                classes={{
                  root: classes.inputRoot,
                  input: classes.inputInput,
                  endAdornment: classes.endAdornment,
                }}
                getOptionLabel={(option) => option.name}
                renderOption={(option, state) => (
                  <Link to={`/user/${option.username}`}>
                    <Typography>{option.name}</Typography>
                  </Link>
                )}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    onChange={onSearchInputChange}
                    placeholder="Search DAIICTians"
                  />
                )}
              />
            </div>
            <div className={classes.grow} />
            <div className={classes.sectionDesktop}>
              <Link to="/chat">
                <IconButton aria-label="show 4 new mails" color="inherit">
                  <Badge badgeContent={"ßeta"} color="secondary">
                    <MailIcon />
                  </Badge>
                </IconButton>
              </Link>
              <Link to="/add">
                <IconButton
                  aria-label="show 17 new notifications"
                  color="inherit"
                >
                  {/* <Badge badgeContent={17} color="secondary"> */}
                  <PostAddIcon />
                  {/* </Badge> */}
                </IconButton>
              </Link>
              <IconButton
                edge="end"
                aria-label="account of current user"
                aria-controls={menuId}
                aria-haspopup="true"
                onClick={handleProfileMenuOpen}
                color="inherit"
              >
                <AccountCircle />
              </IconButton>
            </div>
            <div className={classes.sectionMobile}>
              <IconButton
                aria-label="show more"
                aria-controls={mobileMenuId}
                aria-haspopup="true"
                onClick={handleMobileMenuOpen}
                color="inherit"
              >
                <MoreIcon />
              </IconButton>
            </div>
          </Toolbar>
        </AppBar>
        {renderMobileMenu}
        {renderMenu}
      </div>
      <nav className={classes.drawer} aria-label="mailbox folders">
        {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
        <Hidden smUp implementation="css">
          <Drawer
            container={container}
            variant="temporary"
            anchor={theme.direction === "rtl" ? "right" : "left"}
            open={mobileOpen}
            onClose={handleDrawerToggle}
            classes={{
              paper: classes.drawerPaper,
            }}
            ModalProps={{
              keepMounted: true, // Better open performance on mobile.
            }}
          >
            {drawer}
          </Drawer>
        </Hidden>
        <Hidden xsDown implementation="css">
          <Drawer
            classes={{
              paper: classes.drawerPaper,
            }}
            variant="permanent"
            open
          >
            {drawer}
          </Drawer>
        </Hidden>
      </nav>
      <main className={classes.content}>
        {props.children}
        {/* <div className={classes.toolbar} /> */}
      </main>
    </div>
  );
}

AddPostPage = () => {
  const [Media, SetMedia] = useState('upload');
  const [ImageUrl, SetImageUrl] = useState('');
  const [VideoUrl, SetVideoUrl] = useState('');
  const styles = useStyles();

  const Video = (props) => {
    return (
      <video width="200" controls>
        <source
          type="video/mp4"
          data-reactid=".0.1.0.0.0"
          src={
            `https://res.cloudinary.com/${CloudName}/video/upload/v1588194153/` +
            props.videoUrl
          }
        ></source>
      </video>
    );
  };

  const UImage = (props) => {
    return (
      <CardMedia
        className={styles.media}
        image={
          `https://res.cloudinary.com/${CloudName}/image/upload/c_crop,g_custom/v1/` +
          props.ImageUrl
        }
        title="AcadVault"
      />
    );
  };

  function Upload(props) {
    let widget = window.cloudinary.createUploadWidget(
      {
        cloudName: CloudName,
        uploadPreset: UploadPreset,
        multiple: false,
        cropping: true,
        showSkipCropButton: false,
        croppingAspectRatio: 1,
        folder: 'daconnect',
        clientAllowedFormats: ['png', 'jpeg', 'mp4', 'mov', 'heic'],
        maxFileSize: 7000000,
        maxImageFileSize: 3500000,
        maxVideoFileSize: 40000000,
        maxImageWidth: 2000,
        maxImageHeight: 2000,
        sources: ['local', 'instagram', 'facebook'],
      },
      (err, res) => {
        if (err) console.log(err);
        if (res.event === 'success') {
          if (res.info.resource_type === 'image') {
            SetImageUrl(res.info.public_id);
            SetMedia('image');
          } else {
            SetVideoUrl(res.info.public_id);
            SetMedia('video');
          }
        }
      }
    );

    const showWidget = () => {
      widget.open();
    };

    return (
      <div>
        <button onClick={showWidget}>
          {props.element} <br />
          {props.text}
        </button>
      </div>
    );
  }

  const AddPostMedia = () => {
    if (Media === 'image') return <UImage ImageUrl={ImageUrl} />;
    else if (Media === 'video') return <Video videoUrl={VideoUrl} />;
    else
      return (
        <Upload
          element={<AddPhotoAlternateIcon />}
          text="Upload Image/Video (required)"
        />
      );
  };

  const [postSuccess, setPostSuccess] = useState(false);

  return (
    <div>
      {postSuccess ? (
        <div className={styles.root}>
          <Link to="/">
            <Typography>Post added successfully! ?</Typography>
            <br />
            <CheckCircleIcon fontSize="large" />
          </Link>
        </div>
      ) : (
        <>
          <Card className={styles.card}>
            <CardContent>
              <h6 className={styles.heading}>Add a Post </h6>
              <Divider light />
              <AddPostMedia />

              <Divider light />
              <Formik
                initialValues={{
                  title: '',
                  description: '',
                  tags: [],
                }}
                validate={(values) => {
                  const errors = {};
                  if (values.title === '')
                    errors.title = "Title can't be blank";

                  return errors;
                }}
                onSubmit={async (values) => {
                  if (VideoUrl || ImageUrl) {
                    axios
                      .post(
                        `${ConnectServerUrl}/addpost?` +
                          queryString.stringify({ email, googleToken }),
                        {
                          currentUserId: cookies.get('userDetails')._id,
                          title: values.title,
                          tags: values.tags,
                          description: values.description,

                          imageUrl: ImageUrl,
                          videoUrl: VideoUrl,
                        }
                      )
                      .then(function (res) {
                        if (res.data === 'successfully added post')
                          setPostSuccess(true);
                      })
                      .catch(function (error) {
                        console.log(error);
                      });
                  }
                }}
              >
                {({
                  values,
                  errors,
                  touched,
                  handleChange,
                  handleBlur,
                  handleSubmit,
                  setFieldValue,

                  /* and other goodies */
                }) => (
                  <form onSubmit={handleSubmit}>
                    <FormControl fullWidth>
                      <TextField
                        required
                        className={styles.input}
                        id="standard-filled"
                        label="Title"
                        variant="filled"
                        name="title"
                        value={values.title}
                        onChange={handleChange}
                        onBlur={handleBlur}
                      />
                      <Typography style={{ color: 'black' }}>
                        {errors.title && touched.title && errors.title}
                      </Typography>
                      <TextField
                        className={styles.input}
                        id="outlined-multiline-static"
                        label="Description"
                        multiline
                        rows={2}
                        variant="outlined"
                        name="description"
                        value={values.description}
                        onChange={handleChange}
                        onBlur={handleBlur}
                      />
                      <Divider light />
                      <Box display={'flex'}>
                        <Autocomplete
                          className={styles.input}
                          fullWidth
                          multiple
                          limitTags={1}
                          id="multiple-limit-tags"
                          options={tags}
                          getOptionLabel={(option) => option}
                          name="tags"
                          onChange={(e, value) => {
                            setFieldValue(
                              'tags',
                              value !== null ? value : values.tags
                            );
                          }}
                          // value={values.tags}
                          renderInput={(params) => (
                            <TextField
                              {...params}
                              variant="outlined"
                              label="Tags"
                              placeholder="AddTags"
                              name="tags"
                            />
                          )}
                        />
                      </Box>

                      <Button type="submit" variant="contained" color="primary">
                        Post
                      </Button>
                    </FormControl>
                  </form>
                )}
              </Formik>
            </CardContent>
            <Divider light />
          </Card>
        </>
      )}
    </div>
  );
}

Docs = () => {
  const colorizeCodeSnippet = () => {
    Prism.highlightAll()
    scrollToTop()

    const getTab = document.getElementsByClassName('tab-list-item')
    const getTabList = document.getElementsByClassName('tabs')
    const uprDiv = document.getElementsByClassName('page-header')
    for (let i = 0; i < getTab.length; i++) {
      getTab[i].addEventListener('click', () => {
        if (uprDiv[0].clientHeight < 217) {
          getTabList[0].scrollIntoView()
          window.scrollTo(0, 30)
        }
      })
    }
  }
  useEffect(() => {
    colorizeCodeSnippet()
  })

  return (
    <div className='docs'>
      <Helmet>
        <title>Get EOS Icons | EOS Icons </title>
        <meta
          name='description'
          content='Download the latest copy of our computer-specific icon files for your design or install them in your application using npm, our CDN or our Rails gem.'
        />
        <meta
          name='keywords'
          content='open source icon, ligature icon, action icon, animated icon, ai icon, design icon'
        />
      </Helmet>

      <PageHeader>
        <div className='docs-header'>
          <h1>Get EOS ICONS</h1>
          <div className='docs-header-tools'>
            <p>
              Download the latest copy of our computer-specific files. You’ll
              need them to be able to work with your desired design software.
            </p>
          </div>
          <br />
          <span className='flex'>
            <DownloadEOSicons />
          </span>
        </div>
      </PageHeader>

      <div className='toolbar'></div>

      <div className='container no-padding'>
        <Tabs
          showMultipleSwitch={false}
          currentTab={'In your application'}
          tabChangeHandler={colorizeCodeSnippet}
        >
          <div label='In your application'>
            <div className='container'>
              <h2>Installing EOS icons</h2>
              <p>
                There are several options for you to use EOS icons in your
                product:
              </p>
              <h3 className='padding-top-xs'>
                Installing the npm
                <a
                  href='https://www.npmjs.com/package/eos-icons'
                  data-event-category='External link'
                  data-event-action='Link to EOS Icons NPM'
                  data-event-label='Docs page'
                  target='_blank'
                  rel='noopener noreferrer'
                >
                  {' '}
                  <i className='eos-icons eos-18'>open_in_new</i>
                </a>
              </h3>
              <pre className='code language-shell'>
                <code>npm install eos-icons --save</code>
              </pre>
              <h3 className='padding-top-xs'>
                Using the CDN
                <a
                  href='https://cdn.jsdelivr.net/npm/eos-icons@latest/dist/'
                  data-event-category='External link'
                  data-event-action='Link to EOS Icons CDN (title)'
                  data-event-label='Docs page'
                  target='_blank'
                  rel='noopener noreferrer'
                >
                  {' '}
                  <i className='eos-icons eos-18'>open_in_new</i>
                </a>
              </h3>
              <p>Default theme (filled): </p>
              <div className='resp-link-edit'>
                <a
                  href='https://cdn.jsdelivr.net/npm/eos-icons@latest/dist/css/eos-icons.css'
                  data-event-category='External link'
                  data-event-action='Link to EOS Icons CDN'
                  data-event-label='Docs page'
                  target='_blank'
                  rel='noopener noreferrer'
                >
                  {' '}
                  https://cdn.jsdelivr.net/npm/eos-icons@latest/dist/css/eos-icons.css
                </a>
              </div>
              <br />
              <p>Outline theme:</p>
              <div className='resp-link-edit'>
                <a
                  href='https://cdn.jsdelivr.net/npm/eos-icons@latest/dist/css/outlined/eos-icons-outlined.css'
                  data-event-category='External link'
                  data-event-action='Link to EOS Icons CDN'
                  data-event-label='Docs page'
                  target='_blank'
                  rel='noopener noreferrer'
                >
                  {' '}
                  https://cdn.jsdelivr.net/npm/eos-icons@latest/dist/css/outlined/eos-icons-outlined.css
                </a>
              </div>
              <p>
                Add one of the following lines in your{' '}
                <code> &lt;head&gt;</code> tag as <code> link:css </code>
                according to which theme you want to import:
              </p>
              <h3>Default theme</h3>
              <pre className='code language-html'>
                <code>
                  {
                    "<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/eos-icons@latest/dist/css/eos-icons.css' />"
                  }
                </code>
              </pre>
              <h3>Outlined theme</h3>
              <pre className='code language-html'>
                <code>
                  {
                    "<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/eos-icons@latest/dist/css/outlined/eos-icons-outlined.css' />"
                  }
                </code>
              </pre>
              <h3 className='padding-top-xs'>
                Installing the Ruby gem
                <a
                  href='https://rubygems.org/gems/eos-icons-font'
                  data-event-category='External link'
                  data-event-action='Link to EOS Icons Gem'
                  data-event-label='Docs page'
                  target='_blank'
                  rel='noopener noreferrer'
                >
                  {' '}
                  <i className='eos-icons eos-18'>open_in_new</i>
                </a>
              </h3>
              <pre className='code language-shell'>
                <code>gem install eos-icons-font</code>
              </pre>
              <p>
                Add the following directive to your application:
                <code className='line-edit'>*= require eos-icons-font</code>
              </p>
              <h2>Using EOS icons in your projects</h2>
              <p>
                Just like in any other iconic font, you need to add the Fonts
                and CSS files in your project:
              </p>
              <p>
                1- Add the <code>eos-icons.css</code> or{' '}
                <code>eos-icons-outlined.css</code> file available under the
                <code> dist/css </code>
                folder into your project's
                <code> &lt;head&gt;</code>.
                <br />
                (*) If you're using the CDN, you can skip this step.
              </p>
              <pre className='code language-html'>
                <code>{"<link rel='stylesheet' href='eos-icons.css'/>"}</code>
              </pre>
              or
              <pre className='code language-html'>
                <code>
                  {"<link rel='stylesheet' href='eos-icons-outlined.css'/>"}
                </code>
              </pre>
              <p>
                2- Make sure the fonts folder available at{' '}
                <code>dist/fonts</code> is placed at the same location as your{' '}
                <code>eos-icons.css </code> file so the fonts can be read
                correctly.
                <br />
                (*) If you're using the CDN, you can skip this step.
              </p>
              <code>
                - index.html
                <br />
                - eos-icons.css
                <br />- fonts/...
              </code>
              <p>3- Use the icons in your html as follows:</p>
              <pre className='code language-html'>
                <code>{"<i class='eos-icons'>LIGATURE_OF_THE_ICON</i>"}</code>
              </pre>
              or for outlined icons
              <pre className='code language-html'>
                <code>
                  {"<i class='eos-icons-outlined'>LIGATURE_OF_THE_ICON</i>"}
                </code>
              </pre>
              <p>
                Where the <code>LIGATURE_OF_THE_ICON</code> is the name of the
                icon. Go to the
                <a
                  href='/'
                  data-event-category='Internal link'
                  data-event-action='Link to home page'
                  data-event-label='Docs page'
                  target='_blank'
                  rel='noopener noreferrer'
                >
                  {' '}
                  home page
                </a>{' '}
                to see the all icons' names.
              </p>
              <h2>Using Animated icons</h2>
              <p>
                The animated EOS icons are built using SMIL SVG animations. To
                implement them you don't need anything special, just an{' '}
                <code>img</code> tag with the <code>src</code> to the svg. For
                example:
              </p>
              <pre className='code language-html'>
                <code>{"<img src='loading'/>"}</code>
              </pre>
              <p>
                Head to the
                <a
                  href='/'
                  data-event-category='Internal link'
                  data-event-action='Link to home page'
                  data-event-label='Docs page'
                  target='_blank'
                  rel='noopener noreferrer'
                >
                  {' '}
                  home page
                </a>{' '}
                to download animated icons. Click on the icon you want to use to
                see the code snippet.
              </p>
              <h2>Our recommended sizes</h2>
              <p>
                Both MD icons and EOS icons have been designed to work and look
                perfect at: 18px, 24px, 36px and 48px.
              </p>
              <h2>Implementation Examples</h2>
              <i className='eos-icons eos-18 mr-3'>miscellaneous</i>
              <i className='eos-icons eos-24 mr-3'>miscellaneous</i>
              <i className='eos-icons eos-36 mr-3'>miscellaneous</i>
              <i className='eos-icons eos-48'>miscellaneous</i>
              <pre className='code language-html'>
                <code>
                  {`<i class='eos-icons eos-18'>miscellaneous</i>
  <i class='eos-icons eos-24'>miscellaneous</i>
  <i class='eos-icons eos-36'>miscellaneous</i>
  <i class='eos-icons eos-48'>miscellaneous</i> `}
                </code>
              </pre>
              <h3>SCSS code snippet</h3>
              <pre className='code language-css'>
                <code>
                  {`/* size variables */
  $eos-18: 18px;
  $eos-24: 24px;
  $eos-36: 36px;
  $eos-48: 48px;

  /* Rules for sizing the icon. */
  .eos-18 { font-size: $eos-18; }
  .eos-24 { font-size: $eos-24; }
  .eos-36 { font-size: $eos-36; }
  .eos-48 { font-size: $eos-48; } `}
                </code>
              </pre>
              <p>
                EOS icons is open source. Go to our Gitlab repository to find
                out more :
                <a
                  href='https://gitlab.com/SUSE-UIUX/eos-icons'
                  data-event-category='External link'
                  data-event-action='Link to Gitlab repository'
                  data-event-label='Docs page'
                  target='_blank'
                  rel='noopener noreferrer'
                  className='line-edit'
                >
                  {' '}
                  https://gitlab.com/SUSE-UIUX/eos-icons
                </a>
              </p>
            </div>
          </div>
          <div label='On your computer'>
            <div className='container'>
              <h2>Download EOS icons</h2>
              <p>
                EOS icons can be used on your computer. Adding them to your
                designs is now very easy with our ligature-based font files.
                We’ve also included optimized vector SVG files of each separate
                icon.
              </p>
              <p>
                Download the latest copy of our computer-specific files. You’ll
                need them to be able to work with your desired design software.
              </p>
              <DownloadEOSicons />

              <h2>What’s included in the package?</h2>
              <p>
                Once you’ve downloaded the EOS Icons package, you’ll need to
                uncompress it. If you’re a Windows user, you’ll need to use a
                free tool such as {''}
                <a
                  href='https://www.7-zip.org/'
                  rel='noopener noreferrer'
                  target='_blank'
                >
                  7-Zip
                </a>{' '}
                {''}
                to be able to do it. Once uncompressed, you’ll find several
                folders. The ones relevant for designers are the following:
              </p>
              <div>
                <table className='table'>
                  <thead>
                    <tr>
                      <th>Folders</th>
                      <th>What are they</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                        <code>dist/fonts/</code>
                      </td>
                      <td>
                        Ligature-based font files in different formats (.eot,
                        .woff, .woff2, .svg & .ttf).
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <code>/svg</code>
                      </td>
                      <td>Optimized individual SVG vector files.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <h2>Installing the ligature-based font files</h2>
              <p>
                Inside the <code>fonts/</code> folder you’ll find the following
                font-file formats. You can also download them individually from
                here:
              </p>
              <div className='resp-link-edit'>
                <table className='table'>
                  <thead>
                    <tr>
                      <th>Font-files</th>
                      <th>Direct download</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                        <code>dist/fonts/eos-icons.eot</code>
                      </td>
                      <td>
                        <a
                          href='https://cdn.jsdelivr.net/npm/eos-icons/dist/fonts/eos-icons.eot'
                          rel='noopener noreferrer'
                          target='_blank'
                        >
                          https://cdn.jsdelivr.net/npm/eos-icons/dist/fonts/eos-icons.eot
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <code>dist/fonts/eos-icons.ttf</code>
                      </td>
                      <td>
                        <a
                          href='https://cdn.jsdelivr.net/npm/eos-icons/dist/fonts/eos-icons.ttf'
                          rel='noopener noreferrer'
                          target='_blank'
                        >
                          https://cdn.jsdelivr.net/npm/eos-icons/dist/fonts/eos-icons.ttf
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <code>dist/fonts/eos-icons.woff</code>
                      </td>
                      <td>
                        <a
                          href='https://cdn.jsdelivr.net/npm/eos-icons/dist/fonts/eos-icons.woff'
                          rel='noopener noreferrer'
                          target='_blank'
                        >
                          https://cdn.jsdelivr.net/npm/eos-icons/dist/fonts/eos-icons.woff
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <code>dist/fonts/eos-icons.woff2</code>
                      </td>
                      <td>
                        <a
                          href='https://cdn.jsdelivr.net/npm/eos-icons/dist/fonts/eos-icons.woff2'
                          rel='noopener noreferrer'
                          target='_blank'
                        >
                          https://cdn.jsdelivr.net/npm/eos-icons/dist/fonts/eos-icons.woff2
                        </a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                In order to install the fonts, you’ll need to use the font
                manager tool provided by your operative system. For Macs, the
                default tool is Font Book:
              </p>
              <img
                src={FontbookImg}
                alt='Animation displaying how to install the eos-icons font'
                className='onyour-img-edit'
              />
              <h2>Using EOS icons in your favourite design tool</h2>
              <p>
                Once you’ve installed the font, you’re ready to use EOS Icons in
                your designs. All you need to do, is select the
                <em>“eos-icons”</em> font and use type the ligature for your
                icon. We have a cheatsheet with all the ligatures which can be
                found &nbsp;
                <Link to='../cheatsheet'>here</Link>.
              </p>
              <img
                src={UsingIconsImg}
                alt='Animation displaying how to use eos icons in design tool'
                className='onyour-img-edit'
              />
            </div>
          </div>
          <div label='React'>
            <div className='container'>
              <h2>Installing EOS icons React</h2>
              <p>
                Note: we've introduced several improvements in
                [email protected] and we strongly suggest upgrading.
              </p>
              <h3 className='padding-top-xs'>
                Installation with npm
                <a
                  href='https://www.npmjs.com/package/eos-icons-react'
                  data-event-category='External link'
                  data-event-action='Link to EOS Icons React NPM'
                  data-event-label='Docs page'
                  target='_blank'
                  rel='noopener noreferrer'
                >
                  {' '}
                  <i className='eos-icons eos-18'>open_in_new</i>
                </a>
              </h3>
              <pre className='code language-shell'>
                <code>npm install eos-icons-react</code>
              </pre>
              <h3 className='padding-top-xs'>
                Installation with yarn
                <a
                  href='https://yarnpkg.com/package/eos-icons-react'
                  data-event-category='External link'
                  data-event-action='Link to EOS Icons React yarn'
                  data-event-label='Docs page'
                  target='_blank'
                  rel='noopener noreferrer'
                >
                  {' '}
                  <i className='eos-icons eos-18'>open_in_new</i>
                </a>
              </h3>
              <pre className='code language-shell'>
                <code>yarn add eos-icons-react</code>
              </pre>
              <h2>Using EOS icons React in your projects</h2>
              Note: the middle part of the component name is the same as the
              icon name and should always be written in uppercase.
              <pre className='code language-js'>
                <code>{`import { EOS_STAR, EOS_STAR_FILLED, EOS_STAR_OUTLINED } from 'eos-icons-react';

function App() {
  return (
    <div>
        <EOS_STAR/>
        <EOS_STAR_FILLED />
        <EOS_STAR_OUTLINED />
    </div>
  );
}

export default App;`}</code>
              </pre>
              <h2>Using Animated icons</h2>
              <pre className='code language-js'>
                <code>{`import { EOS_LOADING_ANIMATED } from 'eos-icons-react';

function App() {
  return (
    <div>
        <EOS_LOADING_ANIMATED />
    </div>
  );
}

export default App;`}</code>
              </pre>
              <h2>Props</h2>
              <div className='resp-link-edit'>
                <table className='table'>
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Type</th>
                      <th>Default</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                        <code>size</code>
                      </td>
                      <td>string, number</td>
                      <td>'m'</td>
                      <td>sets the size of icon *</td>
                    </tr>
                    <tr>
                      <td>
                        <code>color</code>
                      </td>
                      <td>string</td>
                      <td>black</td>
                      <td>sets the color of icon</td>
                    </tr>
                    <tr>
                      <td>
                        <code>rotate</code>
                      </td>
                      <td>string, number</td>
                      <td>0</td>
                      <td>sets the rotation degree of icon</td>
                    </tr>
                    <tr>
                      <td>
                        <code>horizontalFlip</code>
                      </td>
                      <td>boolean</td>
                      <td>false</td>
                      <td>Flips icon horizontally</td>
                    </tr>
                    <tr>
                      <td>
                        <code>verticalFlip</code>
                      </td>
                      <td>boolean</td>
                      <td>false</td>
                      <td>Flips icon vertically</td>
                    </tr>
                    <tr>
                      <td>
                        <code>theme</code>
                      </td>
                      <td>string</td>
                      <td>'filled'</td>
                      <td>
                        sets icon theme (only available for common components)**
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <code>className</code>
                      </td>
                      <td>string</td>
                      <td>''</td>
                      <td>set custom styling class for icon component</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                (**) The theme prop is only available for common icon component.
                Eos-Icons React has 4 different types of icon components (common
                / filled / outlined / animated). The common icon component
                contains both filled and outlined version of the icon. For
                switching between the two types of version you can either supply
                'outlined' or 'filled' to the theme prop.
              </p>
              <h3>Pre-defined size list</h3>
              <p>
                (*) Size can be provided using either string or number.
                Pre-Defined size list
              </p>
              <div>
                <table className='table'>
                  <thead>
                    <tr>
                      <th>Size Name</th>
                      <th>Size Value</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>xs</td>
                      <td>4</td>
                    </tr>
                    <tr>
                      <td>s</td>
                      <td>8</td>
                    </tr>
                    <tr>
                      <td>base</td>
                      <td>14</td>
                    </tr>
                    <tr>
                      <td>m</td>
                      <td>18</td>
                    </tr>
                    <tr>
                      <td>l</td>
                      <td>24</td>
                    </tr>
                    <tr>
                      <td>xl</td>
                      <td>32</td>
                    </tr>
                    <tr>
                      <td>xxl</td>
                      <td>48</td>
                    </tr>
                    <tr>
                      <td>xxxl</td>
                      <td>64</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                checkout storybook for an in-depth look at the various different
                icons that are provided by EOS-Icons React as well the props
                available for configuring icons.
                <a
                  href='https://storybook.eos-icons.com/'
                  data-event-category='External link'
                  data-event-action='Link to storybook react'
                  data-event-label='Docs page'
                  target='_blank'
                  rel='noopener noreferrer'
                >
                  {' '}
                  https://storybook.eos-icons.com/
                </a>
              </p>
              <p>
                EOS icons React is open source. Go to our GitHub repository to
                find out more :
                <a
                  href='https://github.com/EOS-uiux-Solutions/eos-icons-react'
                  data-event-category='External link'
                  data-event-action='Link to Github repository'
                  data-event-label='Docs page'
                  target='_blank'
                  rel='noopener noreferrer'
                  className='line-edit'
                >
                  {' '}
                  https://github.com/EOS-uiux-Solutions/eos-icons-react
                </a>
              </p>
            </div>
          </div>
          <div label='Vue 2/3'>
            <div className='container'>
              <h2>Installing EOS icons for Vue 3</h2>
              <h3 className='padding-top-xs'>
                Installation with npm
                <a
                  href='https://www.npmjs.com/package/eos-icons-vue3'
                  data-event-category='External link'
                  data-event-action='Link to EOS Icons vue3 NPM'
                  data-event-label='Docs page'
                  target='_blank'
                  rel='noopener noreferrer'
                >
                  {' '}
                  <i className='eos-icons eos-18'>open_in_new</i>
                </a>
              </h3>
              <pre className='code language-shell'>
                <code>npm install eos-icons-vue3</code>
              </pre>
              <h3 className='padding-top-xs'>
                Installation with yarn
                <a
                  href='https://yarnpkg.com/package/eos-icons-vue3'
                  data-event-category='External link'
                  data-event-action='Link to EOS Icons React vue3'
                  data-event-label='Docs page'
                  target='_blank'
                  rel='noopener noreferrer'
                >
                  {' '}
                  <i className='eos-icons eos-18'>open_in_new</i>
                </a>
              </h3>
              <pre className='code language-shell'>
                <code>yarn add eos-icons-vue3</code>
              </pre>
              <h2>Installing EOS icons for Vue 2</h2>
              <h3 className='padding-top-xs'>
                Installation with npm
                <a
                  href='https://www.npmjs.com/package/eos-icons-vue2'
                  data-event-category='External link'
                  data-event-action='Link to EOS Icons vue2 NPM'
                  data-event-label='Docs page'
                  target='_blank'
                  rel='noopener noreferrer'
                >
                  {' '}
                  <i className='eos-icons eos-18'>open_in_new</i>
                </a>
              </h3>
              <pre className='code language-shell'>
                <code>npm install eos-icons-vue2</code>
              </pre>
              <h3 className='padding-top-xs'>
                Installation with yarn
                <a
                  href='https://yarnpkg.com/package/eos-icons-vue2'
                  data-event-category='External link'
                  data-event-action='Link to EOS Icons React vue2'
                  data-event-label='Docs page'
                  target='_blank'
                  rel='noopener noreferrer'
                >
                  {' '}
                  <i className='eos-icons eos-18'>open_in_new</i>
                </a>
              </h3>
              <pre className='code language-shell'>
                <code>yarn add eos-icons-vue2</code>
              </pre>
              <h2>Using EOS icons Vue in your projects</h2>
              Note: the middle part of the component name is the same as the
              icon name and should always be written in uppercase.
              <h3>Vue 3 usage:</h3>
              <pre className='code language-js'>
                <code>{`<template>
  <div>
    <EOS_10K_FILLED />
    <EOS_10K_OUTLINED />
    <EOS_LOADING_ANIMATED />
  </div>
</template>

<script>
import { EOS_10K_FILLED, EOS_10K_OUTLINED, EOS_LOADING_ANIMATED } from "eos-icons-vue3";

export default {
  name: "App",
  components: {
    EOS_10K_FILLED,
    EOS_10K_OUTLINED,
    EOS_LOADING_ANIMATED
  },
};
</script>`}</code>
              </pre>
              <h3>Vue 2 usage:</h3>
              <pre className='code language-js'>
                <code>{`<template>
  <div>
    <EOS_10K_FILLED />
    <EOS_10K_OUTLINED />
    <EOS_LOADING_ANIMATED />
  </div>
</template>

<script>
import { EOS_10K_FILLED, EOS_10K_OUTLINED, EOS_LOADING_ANIMATED } from "eos-icons-vue2";

export default {
  name: "App",
  components: {
    EOS_10K_FILLED,
    EOS_10K_OUTLINED,
    EOS_LOADING_ANIMATED
  },
};
</script>`}</code>
              </pre>
              <h2>Props</h2>
              <div className='resp-link-edit'>
                <table className='table'>
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Type</th>
                      <th>Default</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                        <code>size</code>
                      </td>
                      <td>string</td>
                      <td>'m'</td>
                      <td>sets the size of icon *</td>
                    </tr>
                    <tr>
                      <td>
                        <code>color</code>
                      </td>
                      <td>string</td>
                      <td>#000000</td>
                      <td>sets the color of icon</td>
                    </tr>
                    <tr>
                      <td>
                        <code>rotate</code>
                      </td>
                      <td>string</td>
                      <td>0</td>
                      <td>sets the rotation degree of icon</td>
                    </tr>
                    <tr>
                      <td>
                        <code>horizontalFlip</code>
                      </td>
                      <td>boolean</td>
                      <td>false</td>
                      <td>Flips icon horizontally</td>
                    </tr>
                    <tr>
                      <td>
                        <code>verticalFlip</code>
                      </td>
                      <td>boolean</td>
                      <td>false</td>
                      <td>Flips icon vertically</td>
                    </tr>
                    <tr>
                      <td>
                        <code>theme</code>
                      </td>
                      <td>string</td>
                      <td>'filled'</td>
                      <td>
                        sets icon theme (only available for common components)**
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                (**) The theme prop is only available for common icon component.
                Eos-Icons React has 4 different types of icon components (common
                / filled / outlined / animated). The common icon component
                contains both filled and outlined version of the icon. For
                switching between the two types of version you can either supply
                'outlined' or 'filled' to the theme prop.
              </p>
              <h3>Pre-defined size list</h3>
              <p>
                (*) Size can be provided using either string or number.
                Pre-Defined size list
              </p>
              <div>
                <table className='table'>
                  <thead>
                    <tr>
                      <th>Size Name</th>
                      <th>Size Value</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>xs</td>
                      <td>4</td>
                    </tr>
                    <tr>
                      <td>s</td>
                      <td>8</td>
                    </tr>
                    <tr>
                      <td>base</td>
                      <td>14</td>
                    </tr>
                    <tr>
                      <td>m</td>
                      <td>18</td>
                    </tr>
                    <tr>
                      <td>l</td>
                      <td>24</td>
                    </tr>
                    <tr>
                      <td>xl</td>
                      <td>32</td>
                    </tr>
                    <tr>
                      <td>xxl</td>
                      <td>48</td>
                    </tr>
                    <tr>
                      <td>xxxl</td>
                      <td>64</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                EOS icons Vue 3 -{' '}
                <a
                  href='https://github.com/EOS-uiux-Solutions/eos-icons-vue'
                  data-event-category='External link'
                  data-event-action='Link to Github repository'
                  data-event-label='Docs page'
                  target='_blank'
                  rel='noopener noreferrer'
                >
                  {' '}
                  https://github.com/EOS-uiux-Solutions/eos-icons-vue
                </a>{' '}
                and Vue 2 -{' '}
                <a
                  href='https://github.com/EOS-uiux-Solutions/eos-icons-vue2'
                  data-event-category='External link'
                  data-event-action='Link to Github repository'
                  data-event-label='Docs page'
                  target='_blank'
                  rel='noopener noreferrer'
                >
                  {' '}
                  https://github.com/EOS-uiux-Solutions/eos-icons-vue2
                </a>{' '}
                are open source.
                <br />
                Go to our GitHub repository to find out more:{''}
                <a
                  href='https://github.com/EOS-uiux-Solutions'
                  data-event-category='External link'
                  data-event-action='Link to Github repository'
                  data-event-label='Docs page'
                  target='_blank'
                  rel='noopener noreferrer'
                >
                  {' '}
                  https://github.com/EOS-uiux-Solutions
                </a>
              </p>
            </div>
          </div>
        </Tabs>
      </div>
    </div>
  )
}