react-icons/fa#FaAngleDown JavaScript Examples

The following examples show how to use react-icons/fa#FaAngleDown. 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: ProjectCard.js    From Winter-of-Code-2.0-frontend with MIT License 6 votes vote down vote up 
ProjectCard = (props) => {
    const [showIdeas, setShow] = useState(false);
    return (
        <div className="Card" >
            <div className="Project_name" style={{visibility: `${showIdeas ? 'hidden' : 'visible'}`, height: `${showIdeas ? '0' : '30'}%`}}>
                {props.data.title}
            </div>
            <div className="Project_ideas" onClick={() => {
                setShow(showIdeas ? false : true);
            }}>
                Check Ideas
                <FaAngleDown style={{transition: "all ease-in-out 0.3s", marginLeft: "5px", transform: `rotateZ(${showIdeas ? '0' : '-90'}deg)`}}/>
            </div>
            <div className="Organizer_img" style={{height: `${showIdeas ? '0' : '50'}%`, backgroundImage: `url(${props.data.org_img})`}} >
            </div> 
            <div className="Ideas" style={{visibility: `${showIdeas ? 'visible' : 'hidden'}`, height: `${showIdeas ? '290' : '0'}%`}}>
                <div className="flex-container">
                    <a href={props.data.repo_link} className={props.data.tags.includes("remove")?"no_view":"git_hub"} target='_blank' rel='noreferrer'><FaGithub /></a>
                </div>
                <div>
                    {props.data.mentors.map((mentor, idx) => {
                        return (
                          <a className="mentors-flex" href= {"mailto:" + mentor.email} >
                            <FiMail style={{color: "white", cursor: "pointer", position: "relative", top: "2px"}} key={idx}></FiMail>
                            <div style={{color: "white", display: "inline", cursor: "pointer", paddingLeft: "5px"}}>{mentor.name}</div>
                          </a>
                        )
                    })}
                </div>
                {props.data.Ideas.map((idea, idx) => {
                    return (
                        <li style={{textAlign: "center", margin: "10px"}}>{idea}</li>
                    )
                })}
            </div>
        </div>
    )
}
Example #2
Source File: FiltersPane.js    From dm2 with Apache License 2.0 6 votes vote down vote up 
FiltersButton = buttonInjector(observer(
  React.forwardRef(({ activeFiltersNumber, size, sidebarEnabled, viewsStore, ...rest }, ref) => {
    const hasFilters = activeFiltersNumber > 0;

    return (
      <Button
        ref={ref}
        size={size}
        onClick={() => sidebarEnabled && viewsStore.toggleSidebar()}
        {...rest}
      >
        Filters {hasFilters && (
          <Badge size="small" style={{ marginLeft: 5 }}>{activeFiltersNumber}</Badge>
        )}
        <FaAngleDown size="16" style={{ marginLeft: 4 }} color="#0077FF" />
      </Button>
    );
  }),
))
Example #3
Source File: ActionsButton.js    From dm2 with Apache License 2.0 5 votes vote down vote up 
ActionsButton = injector(observer(({ store, size, hasSelected, ...rest }) => {
  const formRef = useRef();
  const selectedCount = store.currentView.selectedCount;
  const actions = store.availableActions
    .filter((a) => !a.hidden)
    .sort((a, b) => a.order - b.order);

  const invokeAction = (action, destructive) => {
    if (action.dialog) {
      const { type: dialogType, text, form } = action.dialog;
      const dialog = Modal[dialogType] ?? Modal.confirm;

      dialog({
        title: destructive ? "Destructive action." : "Confirm action.",
        body: buildDialogContent(text, form, formRef),
        buttonLook: destructive ? "destructive" : "primary",
        onOk() {
          const body = formRef.current?.assembleFormData({ asJSON: true });

          store.invokeAction(action.id, { body });
        },
      });
    } else {
      store.invokeAction(action.id);
    }
  };

  const actionButtons = actions.map((action) => {
    const isDeleteAction = action.id.includes("delete");

    return (
      <Menu.Item
        size={size}
        key={action.id}
        danger={isDeleteAction}
        onClick={() => {
          invokeAction(action, isDeleteAction);
        }}
        icon={isDeleteAction && <FaTrash />}
      >
        {action.title}
      </Menu.Item>
    );
  });

  return (
    <Dropdown.Trigger content={<Menu size="compact">{actionButtons}</Menu>} disabled={!hasSelected}>
      <Button size={size} disabled={!hasSelected} {...rest} >
        {selectedCount > 0 && selectedCount} Tasks
        <FaAngleDown size="16" style={{ marginLeft: 4 }} color="#0077FF" />
      </Button>
    </Dropdown.Trigger>
  );
}))
Example #4
Source File: landing.js    From devhost with BSD Zero Clause License 5 votes vote down vote up 
Landing = () => {
  // const data = useStaticQuery(graphql`
  //   query aboutQuery {
  //     desktop: file(relativePath: { eq: "BG_2.png" }) {
  //       childImageSharp {
  //         fluid(quality: 90, maxWidth: 1920) {
  //           ...GatsbyImageSharpFluid
  //         }
  //       }
  //     }
  //   }
  // `)
  // const imageData = data.desktop.childImageSharp.fluid

  return (
    <section className="landing">
      {/* <BackgroundImage
        Tag="section"
        fluid={imageData}
        className={"landing-section"}
      > */}
        <div className="landing-section-overlay">
          <div className="landing-content">
            <div className="landing-content-title">
              <ScrollAnimation animateIn="fadeIn">
                <p>
                  dev<span>host</span> : 22
                </p>
              </ScrollAnimation>
            </div>
            <div className="landing-content-tagline">
              <ScrollAnimation animateIn="fadeIn">
                <p>May the source be with you</p>
              </ScrollAnimation>
            </div>
            <div className="landing-content-dates">
              <ScrollAnimation animateIn="fadeIn">
                <p>Coming Soon</p>
              </ScrollAnimation>
            </div>
            {/* <div className="landing-content-button">
              <Link to="https://youtu.be/j4wDRdo4LOc" className="btn btn_violet-outline">
                Watch Live Now
              </Link>
            </div> */}
            <div className="scroll__container">
              <FaAngleDown className="scroll-indicator" />
            </div>
          </div>
        </div>
      {/* </BackgroundImage> */}
    </section>
  )
}