@fortawesome/free-regular-svg-icons#faBell TypeScript Examples

The following examples show how to use @fortawesome/free-regular-svg-icons#faBell. 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: icons.font-awesome-regular.ts    From dayz-server-manager with MIT License 5 votes vote down vote up 
fontAwesomeRegularIcons = {
    faBell,
}
Example #2
Source File: profile.ts    From resume-nextjs with MIT License 5 votes vote down vote up 
profile: IProfile.Payload = {
  disable: false,

  // image: 'https://resume.yowu.dev/static/image/profile_2019.png',
  image,
  name: {
    title: 'Lorem ipsum',
    small: '(LI)',
  },
  contact: [
    {
      title: '[email protected]',
      link: '#',
      icon: faEnvelope,
    },
    {
      title: 'Please contact me by email',
      icon: faPhone,
      badge: true,
    },
    {
      title: 'https://github.com',
      link: 'https://github.com/uyu423/resume-nextjs',
      icon: faGithub,
    },
    {
      link: 'https://www.facebook.com/iu.loen',
      icon: faFacebook,
    },
    {
      title: 'YouTube',
      link: 'https://www.youtube.com/channel/UC3SyT4_WLHzN7JmHQwKQZww',
      // icon: faRss,
      icon: faYoutube,
    },
  ],
  notice: {
    title: "This resume is a sample page of 'https://github.com/uyu423/resume-nextjs'.",
    icon: faBell,
  },
}
Example #3
Source File: NotificationTooltip.tsx    From frontend.ro with MIT License 4 votes vote down vote up 
NotificationsTooltip = ({
  className, tooltipClassName, theme = 'default', user, dispatch,
}: Props) => {
  const [error, setError] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  const [loading, setLoading] = useState(false);

  const hiddenRef = useRef<HTMLDivElement>(null);
  const componentRef = useRef<HTMLDivElement>(null);
  const notifications = user.notifications.list || [];

  const toggle = () => setIsOpen(!isOpen);

  const loadNextPage = async () => {
    setLoading(true);

    try {
      const newNotifications = await NotificationService.fetchAll();
      dispatch(replaceNotificationsSuccess(newNotifications));
    } catch (err) {
      setError(true);
      console.error('NotificationsTooltip.loadNextPage', err);
    } finally {
      setLoading(false);
    }
  };

  const markAsRead = async (id) => {
    const { notifications } = user;

    if (notifications.list.find((n) => n._id === id).read === false) {
      try {
        dispatch(markNotificationAsRead(id));
        await NotificationService.markAsRead(id);
      } catch (err) {
        dispatch(markNotificationAsUnread(id));
      }
    }
  };

  const markAllAsRead = async () => {
    try {
      dispatch(markAllAsReadAction());
      await NotificationService.markAllAsRead();
    } catch (err) {
      SweetAlertService.toast({ type: 'error', text: err });
    }
  };

  useEffect(() => {
    if (isOpen && !user.notifications.list) {
      loadNextPage();
    }
  }, [isOpen]);

  useOutsideClick(componentRef, () => setIsOpen(false));

  /** For the moment disable pagination */
  // const observer = useRef<IntersectionObserver>(null);
  // const initIntersectionObserver = () => {
  //   const options = {
  //     threshold: 0.3,
  //   };
  //   observer.current = new IntersectionObserver(loadMore, options);
  //   observer.current.observe(hiddenRef.current);
  // };

  // const loadMore = (entries) => {
  //   entries.forEach((entry) => {
  //     if (entry.isIntersecting) {
  //       loadNextPage();
  //     }
  //   });
  // };
  // useEffect(() => {
  //   if (user.notifications.end && observer.current) {
  //     observer.current.disconnect();
  //   }
  // }, [user.notifications.end]);

  // useEffect(() => {
  //   if (isOpen && !user.notifications.end) {
  //     initIntersectionObserver();
  //     return () => observer.current.disconnect();
  //   }

  //   return noop;
  // }, [isOpen, user.notifications.end]);

  return (
    <div ref={componentRef} className={`${className ?? ''} ${styles[`theme-${theme}`]} relative`}>
      <Button
        onClick={toggle}
        variant="transparent"
        className={`${styles.icon} relative`}
      >
        <FontAwesomeIcon style={{ minWidth: '20px' }} width="20px" icon={loading ? faSpinner : faBell} />
        {user.notifications.unreadCount > 0 && (
          <span className={`${styles['unread-badge']} text-white text-center text-xs`}>
            {user.notifications.unreadCount}
          </span>
        )}
      </Button>
      {isOpen && (
        <div className={`${styles.tooltip} ${tooltipClassName ?? ''} bg-white`}>
          {notifications.length > 0 && (
            <div className="text-right p-3 text-xs text-blue">
              <Button
                variant="transparent"
                onClick={markAllAsRead}
              >
                Marchează notificările drept citite
              </Button>
            </div>
          )}
          {notifications.length > 0 && (
            <List>
              {notifications.map((notificationProps) => (
                <Notification
                  key={notificationProps._id}
                  notification={notificationProps}
                  onMarkAsRead={() => markAsRead(notificationProps._id)}
                />
              ))}
            </List>
          )}
          {loading && (<SkeletonNotificationList />)}
          {notifications.length === 0 && !loading && (
            <p className="font-light text-center"> Deocamdată nu ai notificări... </p>
          )}
          {error && (
            <div className="font-light text-center">
              <p className="mb-4">
                Nu am putut încărca notificările...?
              </p>
              <p>
                Încearcă să refresh-uiești pagina
              </p>
            </div>
          )}
          <div className="invisible" ref={hiddenRef} />
        </div>
      )}
    </div>
  );
}