react-icons/fi#FiInfo JavaScript Examples

The following examples show how to use react-icons/fi#FiInfo. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Blockquote.js    From starter-project-gatsby-mdx-blog-course-project with MIT License 6 votes vote down vote up
Blockquote = ({ children, display }) => {
  if (display === "warning")
    return (
      <Wrapper>
        <div className="container warning">
          <TiWarningOutline className="icon" />
          {children}
        </div>
      </Wrapper>
    )
  if (display === "info")
    return (
      <Wrapper>
        <div className="container info">
          <FiInfo className="icon" />
          {children}
        </div>
      </Wrapper>
    )
  if (display === "default") {
    return (
      <Wrapper>
        <div className="container default">{children}</div>
      </Wrapper>
    )
  } else {
    return (
      <Wrapper>
        <div className="quote">
          <GoQuote className="quote-icon" />
          {children}
        </div>
      </Wrapper>
    )
  }
}
Example #2
Source File: GenericExport.js    From winstall with GNU General Public License v3.0 5 votes vote down vote up
GenericExport = ({ fileContent, displayedCommand, fileExtension, prioritiseDownload=false, tip }) => {
    const [copyText, setCopyText] = useState("Copy to clipboard");
    const [textboxContent, setTextboxContent] = useState();
    const [downloadId, setDownloadId] = useState(Math.floor(1000 + Math.random() * 9000));

    useEffect(() => {
        setCopyText("Copy to clipboard");

        setTextboxContent(displayedCommand ? displayedCommand.replace("$fileName", `winstall-${downloadId}.json`) : fileContent);
    }, [fileContent, displayedCommand, downloadId])

    return (
        <div className={styles.generate}>
            <textarea
                value={ textboxContent }
                readOnly
                onFocus={(e) => e.target.select()}
                onClick={(e) => e.target.select()}
                spellCheck={false}
                data-gramm_editor={false} // disable grammarly from showing up
            />

            { tip && (
                <div className={styles.tipContainer}>
                    <FiInfo/>
                    <p>{tip}</p>
                </div>
            )}

            <div className={`box`}>
                { !prioritiseDownload && (
                    <button className={`button accent`} onClick={() => handleCopy(textboxContent, setCopyText)}>
                        <FiCopy />
                        {copyText}
                    </button>
                )}

                <button className={`button dl ${prioritiseDownload ? 'accent' : ''}`}  onClick={() => {
                    handleDownload(fileContent, fileExtension, downloadId);
                    setDownloadId(Math.floor(1000 + Math.random() * 9000));

                    if(prioritiseDownload){
                        handleCopy(textboxContent);
                    }
                }}>
                    <FiDownload />
                    Download {fileExtension} {prioritiseDownload ? " + Copy to clipboard" : ""}
                </button>
            </div>
        </div>
    )
}
Example #3
Source File: index.js    From dashboard-reactjs with MIT License 5 votes vote down vote up
export default function TablesPage() {

    useEffect(() => {
        document.title = 'Tables'
    }, []);

    return (
        <>
            <div className="col-12 title">
                <h1>Tables</h1>
            </div>
            <div className="col-12 px-0">
                <Card className="red">
                    <div className="card-title">
                        <h3>Tables</h3>
                    </div>
                    <div className="card-body">
                        <Table>
                            <thead>
                                <tr>
                                    <th className="col-1">#</th>
                                    <th className="col-8">Name</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {array.map(item => (
                                    <tr>
                                        <td style={{ textAlign: 'center' }}>{ item.id }</td>
                                        <td style={{ textAlign: 'center' }}>{ item.name }</td>
                                        <td style={{ textAlign: 'center' }}>
                                            <button className="edit">
                                                <FiEdit />
                                            </button>
                                            <button className="info">
                                                <FiInfo />
                                            </button>
                                            <button className="eraser">
                                                <FiTrash />
                                            </button>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </Table>
                    </div>
                </Card>
            </div>
        </>
    );
}
Example #4
Source File: reducer.js    From dashboard-reactjs with MIT License 5 votes vote down vote up
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'
        },
    ],
}
Example #5
Source File: AdvancedConfig.js    From winstall with GNU General Public License v3.0 4 votes vote down vote up
AdvancedConfig = ({ refreshConfig, activeTab }) => {
    const [ expanded, setExpnaded ] = useState(false);

    const [ config, setConfig ] = useState({
        "--scope": null,
        "-i": false,
        "-h": false,
        "-o": "",
        "--override": false,
        "-l": "",
        "--force": false,
        "--ignore-unavailable": false
    });

    const [ hiddenOptions, setHiddenOptions ] = useState([]);

    const updateConfig = async (key, val) => {
        const existingConfig = { ...config };
        const newConfig = { ...existingConfig, [key]: val};

        setConfig(newConfig);
        refreshConfig(newConfig, hiddenOptions);

        await localStorage.setItem("winstall-advanced-config", JSON.stringify(newConfig));
    }

    useEffect(() => {
        const loadExistingConfig = async (unavailableOptions) => {
            let previousConfig = await localStorage.getItem("winstall-advanced-config")

            if(previousConfig){
                previousConfig = JSON.parse(previousConfig);
                setExpnaded(true);
            } else{
                previousConfig = { ...config };
            }

            refreshConfig(previousConfig, unavailableOptions);
            setConfig(previousConfig);
        }


        let unavailableOptions = ["--ignore-unavailable"];

        if(activeTab === ".json"){
            unavailableOptions = ["--scope", "-i", "-h", "-o", "--override", "-l", "--force"];
        } 

        setHiddenOptions(unavailableOptions);
        loadExistingConfig(unavailableOptions);

    }, [ activeTab ]);


    return (
        <div className={styles.expandBlock}>
            <h3 className={`${styles.expandHeader} ${ expanded ? styles.expandedHeader : ''}`} onClick={() => setExpnaded(e => !e)}>
                <FiChevronDown size={22} className={expanded ? styles.expandedIcon : ''}/>
                Advanced Options
            </h3>

            { expanded && (
                <div>
                    <p className={styles.center}><FiInfo/> All of the following options are persisted locally in your browser.</p>

                    <RadioConfig
                        id="--scope"
                        defaultChecked={config["--scope"]}
                        options={[{ id: "user", label: "User" }, { id: "machine", label: "Machine" }]}
                        updateConfig={updateConfig}
                        hiddenOptions={hiddenOptions}
                        labelText="Installation scope"
                    />

                    <CheckboxConfig id="-i" defaultChecked={config["-i"]} updateConfig={updateConfig} hiddenOptions={hiddenOptions} labelText="Request interactive installation; user input may be needed"/>
                    <CheckboxConfig id="-h" defaultChecked={config["-h"]} updateConfig={updateConfig} hiddenOptions={hiddenOptions} labelText="Request silent installation"/>
                    <CheckboxConfig id="--override" defaultChecked={config["--override"]} updateConfig={updateConfig} hiddenOptions={hiddenOptions} labelText="Override arguments to be passed on to the installer"/>
                    <CheckboxConfig id="--force" defaultChecked={config["--force"]} updateConfig={updateConfig} hiddenOptions={hiddenOptions} labelText="Override the installer hash check"/>
                    
                    <TextInputConfig id="-o" defaultValue={config["-o"]} updateConfig={updateConfig} hiddenOptions={hiddenOptions} labelText="Log location (if supported)" inputPlaceholder="Enter a valid path for your local machine"/>
                    <TextInputConfig id="-l" defaultValue={config["-l"]} updateConfig={updateConfig} hiddenOptions={hiddenOptions} labelText="Location to install to (if supported)" inputPlaceholder="Enter a valid path for your local machine"/>
                   
                    <CheckboxConfig id="--ignore-unavailable" defaultChecked={config["--ignore-unavailable"]} updateConfig={updateConfig} hiddenOptions={hiddenOptions} labelText="Ignore unavailable packages "/>

                </div>
            )}
        </div>
    )
}
Example #6
Source File: SingleApp.js    From winstall with GNU General Public License v3.0 4 votes vote down vote up
SingleApp = ({ app, all, onVersionChange = false, large = false, showTime = false, pack = false, displaySelect = true, preventGlobalSelect, hideBorder=false, preSelected=false}) => {
  const [selected, setSelected] = useState(false);
  const { selectedApps, setSelectedApps } = useContext(SelectedContext);

  const [version, setVersion] = useState(app.latestVersion);

  if (!app.selectedVersion) app.selectedVersion = version;

  if (app.versions.length > 1) {
    app.versions = app.versions.sort((a, b) =>
      compareVersion(b.version, a.version)
    );
    // make sure latest version is sorted
    app.latestVersion = app.versions[0].version;
  }

  useEffect(() => {
    if(preSelected){
      setSelected(true);
      return;
    }

    let found = selectedApps.find((a) => a._id === app._id);

    if (!found){
      if(selected){
        setSelected(false);
      }
      
      return;
    };

    if (found.selectedVersion !== app.latestVersion) {
      setVersion(found.selectedVersion);
    }

    setSelected(true);    
  }, [selectedApps, app._id]);

  let handleAppSelect = () => {
    if (preventGlobalSelect) {
      preventGlobalSelect(app, !selected);
      setSelected(!selected);
      return;
    }

    let found = selectedApps.findIndex((a) => a._id === app._id);
    
    if (found !== -1) {
      let updatedSelectedApps = selectedApps.filter(
        (a, index) => index !== found
      );

      setSelectedApps(updatedSelectedApps);
      setSelected(false);
      
    } else if(app){
      setSelected(true);

      if (all) {
        app = all.find((i) => app._id == i._id);
        setSelectedApps([...selectedApps, app]);
      } else {
        setSelectedApps([...selectedApps, app]);
      }
    }

  };


  if (!app && !app.img || !app.name) return <></>;

  let VersionSelector = () => {
    return (
      <div className={styles.versions}>
        <select
          className={styles.versionSelector}
          value={version}
          onClick={(e) => e.stopPropagation()}
          id="v-selector"
          name="Select app version"
          onChange={(e) => {
            setVersion(e.target.value);
            app.selectedVersion = e.target.value;

            if (selected) {
              let found = selectedApps.find((a) => a._id === app._id);
              found.selectedVersion = e.target.value;

              if(onVersionChange) onVersionChange();
            }
          }}
        >
          {app.versions.map((v) => {
            return (
              <option key={v.version} value={v.version}>
                v{v.version}
              </option>
            );
          })}
        </select>
        <FiChevronDown/>
        {app.versions.length > 1 && (
          <span>
            <label htmlFor="v-selector">
              ({app.versions.length - 1} other{" "}
              {app.versions.length - 1 > 1 ? "versions" : "version"} available)
            </label>
          </span>
        )}
      </div>
    );
  };

  const handleShare = () => {
    const link = `https://twitter.com/intent/tweet?text=${encodeURIComponent(`Checkout ${app.name} by ${app.publisher} on @winstallHQ:`)}&url=${encodeURIComponent(`https://winstall.app/apps/${app._id}`)}`

    window.open(link)
  }

  return (
    <li
      key={app._id}
      // onClick={handleAppSelect}
      className={`${hideBorder ? styles.noBorder: "" }${large ? styles.large : ""} ${pack ? styles.pack : ""} ${styles.single} ${
        selected ? styles.selected : ""
      }`}
    >
      <div className={styles.info}>
        <h3>
          {large ? (
            <>
              <AppIcon id={app._id} name={app.name} icon={app.icon} />
              {app.name}
            </>
          ) : (
            <Link href="/apps/[id]" as={`/apps/${app._id}`} prefetch={false}>
              <a>
                <AppIcon id={app._id} name={app.name} icon={app.icon} />
                <p>{app.name}</p>
              </a>
            </Link>
          )}

          {displaySelect &&  (
            <button
              className={styles.selectApp}
              onClick={handleAppSelect}
              aria-label={selected ? "Unselect app" : "Select app"}
            >
              <FiPlus />
            </button>
          )}
        </h3>

        {!pack && <Description desc={app.desc} id={app._id} full={large} />}
      </div>

      {large && <Copy id={app._id} version={version} latestVersion={app.latestVersion} />}
      <ul className={styles.metaData}>
        {!large && (
          <li>
            <Link href="/apps/[id]" as={`/apps/${app._id}`} prefetch={false}>
              <a>
                <FiInfo />
                View App
              </a>
            </Link>
          </li>
        )}

        {(showTime || large) && (
          <li>
            <FiClock />
            <span>Last updated {timeAgo(app.updatedAt)}</span>
          </li>
        )}

        {!pack && (
          <li className={app.versions.length > 1 ? styles.hover : ""}>
            <FiPackage />
            {app.versions.length > 1 ? (
              <VersionSelector />
            ) : (
              <span>v{app.selectedVersion}</span>
            )}
          </li>
        )}

        <li>
          <Link href={`/apps?q=${`publisher: ${app.publisher}`}`}>
            <a>
              <FiCode />
              Other apps by {app.publisher}
            </a>
          </Link>
        </li>

        {app.homepage && large && (
          <li>
            <a
              href={`${app.homepage}?ref=winstall`}
              target="_blank"
              rel="noopener noreferrer"
              onClick={(e) => e.stopPropagation()}
            >
              <FiExternalLink />
              View Site
            </a>
          </li>
        )}

        {!pack && (
          <li>
            <a
              href={`${
                app.versions.find((i) => i.version === app.selectedVersion)
                  .installers[0]
              }`}
              onClick={(e) => e.stopPropagation()}
            >
              <FiDownload />
              Download{" "}
              {app.versions[0].installerType
                ? `(.${app.versions[0].installerType.toLowerCase()})`
                : ""}
            </a>
          </li>
        )}

        {large && <ExtraMetadata app={app} />}
      </ul>

      {large && app.tags && app.tags.length > 1 && <Tags tags={app.tags} />}

      {large && (
        <div className={styles.largeAppButtons}>
          <button className={styles.selectApp} onClick={handleAppSelect}>
            <FiPlus />
            {selected ? "Unselect" : "Select"} app
          </button>
          <button className={`button ${styles.shareApp}`} onClick={handleShare}>
            <FiShare2 />
            Share
          </button>
        </div>
      )}
    </li>
  );
}
Example #7
Source File: you.js    From winstall with GNU General Public License v3.0 4 votes vote down vote up
function OwnProfile() {
  const [user, setUser] = useState();
  const [packs, setPacks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [status, setStatus] = useState("Loading...");

  const router = useRouter();

  useEffect(() => {
    getSession().then(async (session) => {
      if (!session) {
        router.push(`/`);
        return;
      }

      let packs = await localStorage.getItem("ownPacks");

      if (packs != null) {
        setPacks(JSON.parse(packs));
        setLoading(false);
      } else {
        getPacks(session.user);
      }

      setUser(session.user);
    });
  }, []);

  const getPacks = async (user) => {
    const { response: packs, error } = await fetchWinstallAPI(
      `/packs/profile/${user.id}`,
      {
        headers: {
          Authorization: `${user.accessToken},${user.refreshToken}`,
        },
      }
    );

    if (error) {
      setStatus(error);
      return;
    }

    if (packs) {
      setPacks(packs);
      setLoading(false);
      localStorage.setItem("ownPacks", JSON.stringify(packs));
    }
  };

  const handleDelete = (id) => {
    const newPacks = packs.filter((p) => p._id != id);
    setPacks(newPacks);
  };

  return (
    <PageWrapper>
      {user && user.errors ? (
        <MetaTags title={`winstall`} />
      ) : (
        <MetaTags title={`Your packs - winstall`} />
      )}

      <div>
        <div className={styles.controls}>
          <h1>Your Packs</h1>

          {/* <Pagination/> */}
        </div>

        {loading ? (
          <p>{status}</p>
        ) : packs.length === 0 ? (
          <p>
            You don't have any packs yet. Try creating one first when selecting
            apps :)
          </p>
        ) : (
          <>
            <Alert
              id="packEditWarn"
              text="Note: changes to your own packs can take up to 10 minutes to appear due to resource limitations. This will be improved in the future."
            >
              <FiInfo />
            </Alert>
            <ul className={`${styles.all} ${styles.storeList}`}>
              {packs.map((pack) => (
                <li key={pack._id}>
                  <PackPreview
                    pack={pack}
                    showDelete={true}
                    auth={user}
                    deleted={handleDelete}
                  />
                </li>
              ))}
            </ul>
          </>
        )}
      </div>
    </PageWrapper>
  );
}
Example #8
Source File: index.js    From dashboard-reactjs with MIT License 4 votes vote down vote up
export default function ButtonsPage() {
    useEffect(() => {
        document.title = 'Buttons'
    }, []);

    return (
        <>
            <div className="col-12 title">
                <h1>Tables</h1>
            </div>
            <div className="col-6 px-0">
                <Card className="red">
                    <div className="card-title">
                        <h3>State Buttons</h3>
                    </div>
                    <div className="card-body">
                        <Buttons className="wrap">
                            <Button className="danger">Danger</Button>
                            <Button className="warning">Warning</Button>
                            <Button className="info">Info</Button>
                            <Button className="success">Success</Button>
                            <Button className="primary">Primary</Button>
                            <Button className="light">Light</Button>
                            <Button className="dark">Dark</Button>
                        </Buttons>
                    </div>
                </Card>
            </div>
            <div className="col-6 px-0">
                <Card className="red">
                    <div className="card-title">
                        <h3>Circle Buttons</h3>
                    </div>
                    <div className="card-body">
                        <Buttons className="wrap">
                            <Button className="danger btn-circle">Danger</Button>
                            <Button className="warning btn-circle">Warning</Button>
                            <Button className="info btn-circle">Info</Button>
                            <Button className="success btn-circle">Success</Button>
                            <Button className="primary btn-circle">Primary</Button>
                            <Button className="light btn-circle">Light</Button>
                            <Button className="dark btn-circle">Dark</Button>
                        </Buttons>
                    </div>
                </Card>
            </div>
            <div className="col-6 px-0">
                <Card className="red">
                    <div className="card-title">
                        <h3>Shadow Buttons</h3>
                    </div>
                    <div className="card-body">
                        <Buttons className="wrap">
                            <Button className="danger btn-shadow">Danger</Button>
                            <Button className="warning btn-shadow">Warning</Button>
                            <Button className="info btn-shadow">Info</Button>
                            <Button className="success btn-shadow">Success</Button>
                            <Button className="primary btn-shadow">Primary</Button>
                            <Button className="light btn-shadow">Light</Button>
                            <Button className="dark btn-shadow">Dark</Button>
                        </Buttons>
                    </div>
                </Card>
            </div>
            <div className="col-6 px-0">
                <Card className="red">
                    <div className="card-title">
                        <h3>Button with Icon</h3>
                    </div>
                    <div className="card-body">
                        <Buttons className="wrap">
                            <Button className="danger btn-shadow"><FiX /> Danger</Button>
                            <Button className="warning btn-shadow"><FiAlertTriangle /> Warning</Button>
                            <Button className="info btn-shadow"><FiInfo />Info</Button>
                            <Button className="success btn-shadow"><FiCheckCircle /> Success</Button>
                            <Button className="primary btn-shadow"><FiCoffee /> Primary</Button>
                        </Buttons>
                    </div>
                </Card>
            </div>
            <div className="col-6 px-0">
                <Card className="red">
                    <div className="card-title">
                        <h3>Size Buttons</h3>
                    </div>
                    <div className="card-body">
                        <Buttons>
                            <Button className="danger btn-sm">Danger SM</Button>
                            <Button className="warning btn-sm">Warning SM</Button>
                            <Button className="success btn-sm">Success SM</Button>
                        </Buttons>
                        <Buttons>
                            <Button className="danger">Danger</Button>
                            <Button className="warning">Warning</Button>
                            <Button className="success">Success</Button>
                        </Buttons>
                        <Buttons>
                            <Button className="danger btn-lg">Danger LG</Button>
                            <Button className="warning btn-lg">Warning LG</Button>
                            <Button className="success btn-lg">Success LG</Button>
                        </Buttons>
                    </div>
                </Card>
            </div>
        </>
    );
}