react-icons/fi#FiHome JavaScript Examples

function Error({title, subtitle}) {
  return (
    <div className={styles.error}>
      <img
        src={`/assets/clippy.png`}
        alt="Clippy sad face"
        draggable={false}
      />
      <h1>{title ? title : "Something went terribly wrong."}</h1>
      <h3>
        {subtitle
          ? subtitle
          : "It's looks like you're trying to find something that doesn't exist, would you like some help with that?"}
      </h3>
      <Link href="/">
        <a className={styles.btnError}>
          <div>
            <FiHome />
            Go Home
          </div>
        </a>
      </Link>
    </div>
  );
}

Recommendations = ({ packs }) => {
  return (
    <div className="homeBlock">
      <div className="box">
        <h2 className="blockHeader">Featured Packs</h2>
        <Link href="/packs">
          <a className="button small">
            <FiPackage />
            View All
          </a>
        </Link>
      </div>
      <h3 className="blockSubtitle">
        Just got a new Windows device? Start with our favourites. Click the +
        sign to include an app on your install script.
      </h3>

      <div className={styles.recommendations}>
        <PackList id="A6JzO22Y1" title="Work From Home" packs={packs}>
          <FiHome />
        </PackList>

        <PackList id="z3zuf1vVD" title="Web Browsers" packs={packs}>
          <FiGlobe />
        </PackList>

        <PackList id="ur23Tk6Sf" title="Essential Tools" packs={packs}>
          <FiStar />
        </PackList>

        <PackList id="qO_m22F6k" title="Entertainment" packs={packs}>
          <FiMusic />
        </PackList>

        <PackList id="Jtght2FO5" title="Gaming" packs={packs}>
          <FiCrosshair />
        </PackList>

        <PackList id="3glB-CGXA" title="Developers" packs={packs}>
          <FiCode />
        </PackList>

        <PackList id="NYWPVq9ct" title="Social Media" packs={packs}>
          <FiUserPlus />
        </PackList>
        
        <PackList id="yphy7XItI" title="School" packs={packs}>
          <FiBookOpen />
        </PackList>
      </div>
    </div>
  );
}

function Generate() {
    const { selectedApps } = useContext(SelectedContext);
    const [apps, setApps] = useState([]);
    
    useEffect(() => {
      setApps(selectedApps);
    }, [ apps, selectedApps ]);

    if(selectedApps.length === 0){
      return (
        <div className="generate-container">
          <MetaTags title="winstall - GUI for Windows Package Manager" />
          <div className="illu-box">
            <div className={styles.generate}>
              <h1>Your don't have any apps selected.</h1>
              <h3>
                Make sure you select some apps first to be able to generate a
                script :)
              </h3>
              <Link href="/">
                <a className="button">
                  <FiHome />
                  Go home
                </a>
              </Link>
            </div>
            <div className="art">
              <img
                src="/assets/dl.svg"
                draggable={false}
                alt="download icon"
              />
            </div>
          </div>
        </div>
      );
    }

    return (
      <div className="generate-container">
        <MetaTags title="winstall - GUI for Windows Package Manager" />
        <div className="illu-box">
          <div className={styles.generate}>
            <h1>Your apps are ready to be installed.</h1>
            <h3>Make sure you have Windows Package Manager installed :)</h3>
        
            <ExportApps apps={apps} />
          </div>
          <div className="art">
            <img src="/assets/dl.svg" draggable={false} alt="download icon" />
          </div>
        </div>

        <div className={styles.selectedApps}>
          <h2>Apps you are downloading ({selectedApps.length})</h2>
          <ListPackages showImg={true}>
            {selectedApps.map((app) => (
              <SingleApp app={app} key={app._id} onVersionChange={setApps}/>
            ))}
          </ListPackages>
        </div>

        <Footer />
      </div>
    );
}

INITIAL_STATE = {
    activeMenu: {
        name: 'Dashboard',
        icon: <FiHome />,
        path: '/'
    },
    itens: [
        {
            name: 'Dashboard',
            icon: <FiHome />,
            path: '/'
        },
        {
            name: 'Tables',
            icon: <FiGrid />,
            path: '/tables'
        },
        {
            name: 'Buttons',
            icon: <FiAperture />,
            path: '/buttons'
        },
        {
            name: 'Cards',
            icon: <FiBookmark />,
            path: '/cards'
        },
        {
            name: 'Forms',
            icon: <FiPhoneForwarded />,
            path: '/forms'
        },
        {
            name: 'Alerts',
            icon: <FiInfo />,
            path: '/alerts'
        },
        {
            name: 'Modals',
            icon: <FiBookOpen />,
            path: '/modals'
        },
    ],
}