-
-
Notifications
You must be signed in to change notification settings - Fork 743
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #261 from harshzalavadiya/master
Performance and UI Improvements
- Loading branch information
Showing
26 changed files
with
3,314 additions
and
351 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| SKIP_PREFLIGHT_CHECK=true | ||
| GENERATE_SOURCEMAP=false |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,193 +1,43 @@ | ||
| import React, { Component } from "react"; | ||
|
|
||
| import { Route, NavLink } from "react-router-dom"; | ||
| import { Router, Switch } from "react-router"; | ||
| import { createHashHistory } from "history"; | ||
| import React, { useState } from "react"; | ||
| import { IconsManifest } from "react-icons"; | ||
| import { Router, Switch } from "react-router"; | ||
| import { Route } from "react-router-dom"; | ||
|
|
||
| import { IconsManifest, IconContext } from "react-icons"; | ||
| import * as Icons from "react-icons/all"; | ||
|
|
||
| import logo from "./react-icons.svg"; | ||
| import "./App.css"; | ||
| import Sidebar from "./components/sidebar"; | ||
| import HomePage from "./pages/home"; | ||
| import IconSetPage from "./pages/iconset"; | ||
| import SearchPage from "./pages/search"; | ||
|
|
||
| function IconsView({ icons, id }) { | ||
| return Object.keys(icons) | ||
| .filter(name => name.toLocaleLowerCase().startsWith(id)) | ||
| .map(name => renderIcon(icons[name], name)); | ||
| } | ||
| const history = createHashHistory({}); | ||
|
|
||
| function FilterView({ icons, query }) { | ||
| return Object.keys(icons) | ||
| .filter(name => name.toLocaleLowerCase().includes(query.toLocaleLowerCase())) | ||
| .map(name => renderIcon(icons[name], name)); | ||
| } | ||
| function App() { | ||
| const [searchText, setSearchText] = useState(""); | ||
|
|
||
| function renderIcon(icon, name) { | ||
| return ( | ||
| <div className="item" key={name}> | ||
| <div className="body">{icon()}</div> | ||
| <div className="name">{name}</div> | ||
| <Router history={history}> | ||
| <div className="App"> | ||
| <Sidebar searchText={searchText} setSearchText={setSearchText} /> | ||
| <div className="content"> | ||
| <Switch> | ||
| <Route path="/" exact={true}> | ||
| <HomePage /> | ||
| </Route> | ||
|
|
||
| {IconsManifest.map(icon => ( | ||
| <Route key={icon.id} path={`/icons/${icon.id}`}> | ||
| <IconSetPage icon={icon} /> | ||
| </Route> | ||
| ))} | ||
|
|
||
| <Route path="/search" exact={true}> | ||
| <SearchPage searchText={searchText} /> | ||
| </Route> | ||
| </Switch> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const history = createHashHistory({}); | ||
|
|
||
| class App extends Component { | ||
| state = { | ||
| query: "" | ||
| }; | ||
|
|
||
| handleSearch = query => { | ||
| this.setState({query}); | ||
| }; | ||
|
|
||
| render() { | ||
| return ( | ||
| <IconContext.Provider value={{ color: "#333" }}> | ||
| <Router history={history}> | ||
| <div className="App"> | ||
| <div className="sidebar"> | ||
| <header> | ||
| <img src={logo} alt="react-icons" /> | ||
| <span>react-icons</span> | ||
| </header> | ||
| <ul className="links"> | ||
| <li> | ||
| <NavLink to="/" exact={true}> | ||
| Home | ||
| </NavLink> | ||
| </li> | ||
| {IconsManifest.map(icon => ( | ||
| <li key={icon.id}> | ||
| <NavLink to={`/icons/${icon.id}`}>{icon.name}</NavLink> | ||
| </li> | ||
| ))} | ||
| <li> | ||
| <NavLink to="/search" className="search"> | ||
| <input | ||
| type="text" | ||
| value={this.state.query || ""} | ||
| onChange={event => this.handleSearch(event.target.value)} | ||
| placeholder="Search" | ||
| /> | ||
| </NavLink> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| <div className="content"> | ||
| <Switch> | ||
| <Route path="/" exact={true}> | ||
| <article> | ||
| <h1>React Icons</h1> | ||
| <p> | ||
| <a | ||
| href="https://www.npmjs.com/package/react-icons" | ||
| rel="nofollow" | ||
| > | ||
| <img | ||
| src="https://img.shields.io/npm/v/react-icons.svg" | ||
| alt="npm" | ||
| /> | ||
| </a>{" "} | ||
| <a | ||
| href="https://travis-ci.com/react-icons/react-icons" | ||
| rel="nofollow" | ||
| > | ||
| <img | ||
| src="https://travis-ci.com/react-icons/react-icons.svg?branch=master" | ||
| alt="travis ci" | ||
| /> | ||
| </a> | ||
| </p> | ||
| <p> | ||
| Include popular icons in your React projects easly with | ||
| react-icons, which utilizes ES6 imports that allows you to | ||
| include only the icons that your project is using. | ||
| </p> | ||
| <h2>Installation</h2> | ||
| <code> | ||
| <pre>npm install react-icons --save</pre> | ||
| </code> | ||
| <h2>Usage</h2> | ||
| <code> | ||
| <pre> | ||
| {`import { FaBeer } from 'react-icons/fa'; | ||
| class Question extends React.Component { | ||
| render() { | ||
| return <h3> Lets go for a <FaBeer />? </h3> | ||
| } | ||
| }`} | ||
| </pre> | ||
| </code> | ||
| <h2>More info</h2> | ||
| <p> | ||
| <a href="https://github.com/react-icons/react-icons"> | ||
| Github | ||
| </a> | ||
| </p> | ||
| <p /> | ||
| </article> | ||
| </Route> | ||
| {IconsManifest.map(icon => ( | ||
| <Route key={icon.id} path={`/icons/${icon.id}`}> | ||
| <article className="icons-article"> | ||
| <h1>{icon.name}</h1> | ||
| <table> | ||
| <tbody> | ||
| <tr> | ||
| <th>License</th> | ||
| <td> | ||
| <a href={icon.licenseUrl} target="_blank" rel="noopener noreferrer"> | ||
| {icon.license} | ||
| </a> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <th>Project</th> | ||
| <td> | ||
| <a href={icon.projectUrl} target="_blank" rel="noopener noreferrer"> | ||
| {icon.projectUrl} | ||
| </a> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| <div className="example-code"> | ||
| <code> | ||
| <pre> | ||
| {`import { ICON_NAME } from "react-icons/${ | ||
| icon.id | ||
| }";`} | ||
| </pre> | ||
| </code> | ||
| </div> | ||
| <div className="icons"> | ||
| <IconsView icons={Icons} id={icon.id} /> | ||
| </div> | ||
| </article> | ||
| </Route> | ||
| ))} | ||
| <Route path="/search" exact={true}> | ||
| <article> | ||
| {this.state.query.length && this.state.query.length >= 3 ? ( | ||
| <div className="icons"> | ||
| <FilterView icons={Icons} query={this.state.query} /> | ||
| </div> | ||
| ) : ( | ||
| <div>Enter at least 3 characters to search...</div> | ||
| )} | ||
| </article> | ||
| </Route> | ||
|
|
||
| </Switch> | ||
| </div> | ||
| </div> | ||
| </Router> | ||
| </IconContext.Provider> | ||
| ); | ||
| } | ||
| </Router> | ||
| ); | ||
| } | ||
|
|
||
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import React from "react"; | ||
|
|
||
| function Icon({ icon, name }) { | ||
| return ( | ||
| <div className="item"> | ||
| <div className="icon" key={name}> | ||
| <div className="body">{icon()}</div> | ||
| </div> | ||
| <div className="name">{name}</div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Icon; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import React from "react"; | ||
| import logo from "../../assets/react-icons.svg"; | ||
| import { Link } from "react-router-dom"; | ||
|
|
||
| function Header() { | ||
| return ( | ||
| <Link to="/"> | ||
| <header> | ||
| <img src={logo} alt="react-icons" /> | ||
| <span>react-icons</span> | ||
| </header> | ||
| </Link> | ||
| ); | ||
| } | ||
|
|
||
| export default Header; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import "./sidebar.scss"; | ||
|
|
||
| import React from "react"; | ||
| import { IconsManifest } from "react-icons"; | ||
| import { NavLink, useHistory } from "react-router-dom"; | ||
|
|
||
| import Header from "./header"; | ||
|
|
||
| function Sidebar({ searchText, setSearchText }) { | ||
| const history = useHistory(); | ||
|
|
||
| const onSearch = event => { | ||
| setSearchText(event.target.value); | ||
| }; | ||
|
|
||
| const onBlur = event => { | ||
| if (event.target.value.length === 0) { | ||
| history.goBack(); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="sidebar"> | ||
| <Header /> | ||
| <NavLink to="/search" className="search"> | ||
| <input | ||
| type="text" | ||
| value={searchText} | ||
| onChange={onSearch} | ||
| onBlur={onBlur} | ||
| placeholder="Search Icons" | ||
| /> | ||
| </NavLink> | ||
| <ul className="links"> | ||
| <li> | ||
| <NavLink to="/" exact={true}> | ||
| Home | ||
| </NavLink> | ||
| </li> | ||
| {IconsManifest.map(icon => ( | ||
| <li key={icon.id}> | ||
| <NavLink to={`/icons/${icon.id}`}>{icon.name}</NavLink> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Sidebar; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| .sidebar { | ||
| width: var(--sidebar-width); | ||
| position: fixed; | ||
| background: var(--color-gray-1); | ||
| height: 100vh; | ||
| padding: 2rem 0 1rem 1rem; | ||
| box-sizing: border-box; | ||
| overflow: auto; | ||
|
|
||
| header { | ||
| display: flex; | ||
| align-items: center; | ||
|
|
||
| img { | ||
| height: 5rem; | ||
| margin-right: 0.5rem; | ||
| } | ||
| } | ||
|
|
||
| .links { | ||
| list-style: none; | ||
| padding: 0; | ||
|
|
||
| li a { | ||
| display: block; | ||
| padding: 0.8rem 1rem; | ||
| color: var(--color-text); | ||
| text-decoration: none; | ||
| transition: all 0.25s ease; | ||
|
|
||
| &.active { | ||
| border-top-left-radius: var(--radius-md); | ||
| border-bottom-left-radius: var(--radius-md); | ||
| background: var(--color-gray-2); | ||
| font-weight: bold; | ||
| } | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.