@fortawesome/free-solid-svg-icons#faSadCry TypeScript Examples

The following examples show how to use @fortawesome/free-solid-svg-icons#faSadCry. 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: TopupFailed.tsx    From mysterium-vpn-desktop with MIT License 6 votes vote down vote up 
TopupFailed: React.FC = observer(() => {
    const navigate = useNavigate()
    const handleStartOver = () => {
        navigate(-3)
    }
    return (
        <ViewContainer>
            <ViewNavBar>
                <div style={{ width: 375, textAlign: "center" }}>
                    <StepProgressBar step={2} />
                </div>
            </ViewNavBar>
            <ViewSplit>
                <ViewSidebar>
                    <SideTop>
                        <TitleIcon>
                            <IconWallet color={brandLight} />
                        </TitleIcon>
                        <Title>Payment failed</Title>
                        <TitleDescription>Order expired or there was another issue.</TitleDescription>
                    </SideTop>
                    <SideBot>
                        <BrandButton style={{ marginTop: "auto" }} onClick={handleStartOver}>
                            Start over
                        </BrandButton>
                    </SideBot>
                </ViewSidebar>
                <Content>
                    <div style={{ marginTop: "auto", marginBottom: "auto" }}>
                        <Heading2>
                            <FontAwesomeIcon className="icon" icon={faSadCry} color="#ffffff44" size="10x" />
                        </Heading2>
                    </div>
                </Content>
            </ViewSplit>
        </ViewContainer>
    )
})
Example #2
Source File: AddMediaTabUser.tsx    From sync-party with GNU General Public License v3.0 4 votes vote down vote up 
export default function AddMediaTabUser({
    partyItemsSet,
    addUserItem,
    setPlayerFocused,
    handleItemEditSave
}: Props): ReactElement {
    const userItems = useSelector(
        (state: RootAppState) => state.globalState.userItems
    );

    const { t } = useTranslation();
    const [itemsFilter, setItemsFilter] = useState<string | null>(null);
    const [filteredItems, setFilteredItems] = useState<MediaItem[]>(
        userItems || []
    );

    // (Re-)Filter items if items filter term or user items change
    useEffect(() => {
        if (userItems && itemsFilter !== null) {
            const normalizedSearchTerm = itemsFilter.toLowerCase();

            setItemsFilter(normalizedSearchTerm);

            if (normalizedSearchTerm !== '') {
                setFilteredItems(
                    userItems.filter((item) =>
                        item.name.toLowerCase().includes(normalizedSearchTerm)
                    )
                );
            } else {
                setFilteredItems(userItems);
            }
        }
    }, [userItems, itemsFilter]);

    return (
        <div>
            <input
                className="text-white p-1 text-sm w-full rounded mb-2 outline-none backgroundOpacityLow"
                value={itemsFilter || ''}
                placeholder={t('mediaMenu.filter')}
                onChange={(event): void => setItemsFilter(event.target.value)}
                onFocus={(): void => setPlayerFocused(false)}
                onBlur={(): void => setPlayerFocused(true)}
            ></input>
            {filteredItems.length ? (
                <div className="userItemList">
                    {filteredItems
                        .sort((a: MediaItem, b: MediaItem) => {
                            return a.name.toLowerCase() < b.name.toLowerCase()
                                ? -1
                                : 1;
                        })
                        .map((source: MediaItem) => {
                            if (!partyItemsSet.has(source.id)) {
                                return (
                                    <ItemListed
                                        key={source.id}
                                        item={source}
                                        handleItemClick={(): Promise<void> =>
                                            addUserItem(source)
                                        }
                                        handleItemSave={(
                                            item: MediaItem
                                        ): void => {
                                            setPlayerFocused(true);
                                            handleItemEditSave(item);
                                        }}
                                        setPlayerFocused={(
                                            focused: boolean
                                        ): void => setPlayerFocused(focused)}
                                        nameEditingAllowed={true}
                                    ></ItemListed>
                                );
                            } else {
                                return null;
                            }
                        })}
                </div>
            ) : itemsFilter === '' ? (
                <div className="flex flex-row">
                    <div className="m-auto mr-2">
                        <FontAwesomeIcon
                            size="2x"
                            icon={faSadCry}
                        ></FontAwesomeIcon>
                    </div>
                    <div>
                        <p>{t('mediaMenu.userItemsEmpty')}</p>
                        <p>{t('mediaMenu.userItemsUpload')}</p>
                    </div>
                </div>
            ) : (
                <div className="flex flex-row">
                    {t('mediaMenu.noFilterResults')}.
                </div>
            )}
        </div>
    );
}