@fortawesome/free-solid-svg-icons#faComments TypeScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faComments.
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: navigation.component.ts From dating-client with MIT License | 6 votes |
|
menuItems: MenuItem[] = [
{
title: 'Members',
link: '/members/all',
icon: faUsers,
},
{
title: 'Matches',
link: '/matches',
icon: faStar,
},
{
title: 'Messages',
link: '/messages',
icon: faComments,
}
];
Example #2
| Source File: CommentSection.tsx From knboard with MIT License | 5 votes |
|
CommentSection = ({ taskId }: Props) => {
const dispatch = useDispatch();
const user = useSelector(selectMe);
const comments = useSelector(selectAllComments);
const memberEntities = useSelector(selectMembersEntities);
const fetchStatus = useSelector(selectFetchCommentsStatus);
const createStatus = useSelector(selectCreateCommentStatus);
const [text, setText] = useState("");
useEffect(() => {
dispatch(fetchComments(taskId));
}, [dispatch, taskId]);
const postComment = () => {
setText("");
dispatch(createComment({ text, task: taskId }));
};
const currentTaskComments = comments.filter(
(comment) => comment.task === taskId
);
return (
<>
<Header>
<FontAwesomeIcon icon={faComments} />
<Title>Discussion</Title>
</Header>
<Box display="flex" mb={4}>
<MemberAvatar member={memberEntities[user?.id ?? -1]} />
<Box
display="flex"
flexDirection="column"
justifyContent="flex-start"
marginLeft={2}
marginRight={2}
>
<CommentTextarea
onChange={(e) => setText(e.target.value)}
value={text}
/>
<Box>
<Button
color="primary"
variant="contained"
size="small"
startIcon={
createStatus === "loading" ? (
<CircularProgress color="inherit" size={16} />
) : undefined
}
disabled={!text.length || createStatus === "loading"}
css={css`
text-transform: none;
`}
onClick={postComment}
>
Post comment
</Button>
</Box>
</Box>
</Box>
{!currentTaskComments.length && fetchStatus === "loading" && (
<CircularProgress />
)}
{currentTaskComments.map((comment) => (
<CommentItem key={comment.id} comment={comment} />
))}
</>
);
}
Example #3
| Source File: HelpView.tsx From mysterium-vpn-desktop with MIT License | 4 votes |
|
HelpView: React.FC = observer(function HelpView() {
const { navigation } = useStores()
const navigate = useNavigate()
const location = useLocation()
const isBugReportActive = location.pathname.includes(locations.helpBugReport)
const isTermsAndConditionsActive = location.pathname.includes(locations.helpTermsAndConditions)
return (
<ViewContainer>
<ViewNavBar />
<ViewSplit>
<ViewSidebar>
<SideTop>
<IconPerson color={brandLight} />
<Title>Get help</Title>
<Small>Help using Mysterium VPN</Small>
</SideTop>
<SideBot>
<SupportChatButton onClick={() => navigation.openChat()}>
<FontAwesomeIcon icon={faComments} />
Support chat
</SupportChatButton>
<NavButton active={isBugReportActive} onClick={() => navigate(locations.helpBugReport)}>
<FontAwesomeIcon icon={faBug} />
Bug report
</NavButton>
<NavButton
active={isTermsAndConditionsActive}
onClick={() => navigate(locations.helpTermsAndConditions)}
>
<FontAwesomeIcon icon={faFileContract} />
Terms & Conditions
</NavButton>
<NavButton active={false} onClick={() => shell.openExternal("https://docs.mysterium.network")}>
<FontAwesomeIcon icon={faBook} />
Documentation
</NavButton>
<SocialButtons>
<IconButton
active={false}
onClick={() => {
shell.openExternal("https://discordapp.com/invite/n3vtSwc")
}}
>
<FontAwesomeIcon icon={faDiscord} size="2x" />
</IconButton>
<IconButton
active={false}
onClick={() => {
shell.openExternal("https://www.reddit.com/r/MysteriumNetwork/")
}}
>
<FontAwesomeIcon icon={faReddit} size="2x" />
</IconButton>
<IconButton active={false}>
<FontAwesomeIcon
icon={faTwitter}
size="2x"
onClick={() => {
shell.openExternal("https://twitter.com/MysteriumNet")
}}
/>
</IconButton>
<IconButton active={false}>
<FontAwesomeIcon
icon={faFacebookSquare}
size="2x"
onClick={() => {
shell.openExternal("https://www.facebook.com/MysteriumNet")
}}
/>
</IconButton>
</SocialButtons>
<Version />
</SideBot>
</ViewSidebar>
<Content>
<Outlet />
</Content>
</ViewSplit>
</ViewContainer>
)
})
Example #4
| Source File: index.tsx From nouns-monorepo with GNU General Public License v3.0 | 4 votes |
|
NavBar = () => {
const activeAccount = useAppSelector(state => state.account.activeAccount);
const stateBgColor = useAppSelector(state => state.application.stateBackgroundColor);
const isCool = useAppSelector(state => state.application.isCoolBackground);
const history = useHistory();
const ethBalance = useEtherBalance(config.addresses.nounsDaoExecutor);
const lidoBalanceAsETH = useLidoBalance();
const treasuryBalance = ethBalance && lidoBalanceAsETH && ethBalance.add(lidoBalanceAsETH);
const daoEtherscanLink = buildEtherscanHoldingsLink(config.addresses.nounsDaoExecutor);
const [isNavExpanded, setIsNavExpanded] = useState(false);
const useStateBg =
history.location.pathname === '/' ||
history.location.pathname.includes('/noun/') ||
history.location.pathname.includes('/auction/');
const nonWalletButtonStyle = !useStateBg
? NavBarButtonStyle.WHITE_INFO
: isCool
? NavBarButtonStyle.COOL_INFO
: NavBarButtonStyle.WARM_INFO;
const closeNav = () => setIsNavExpanded(false);
return (
<>
<Navbar
expand="xl"
style={{ backgroundColor: `${useStateBg ? stateBgColor : 'white'}` }}
className={classes.navBarCustom}
expanded={isNavExpanded}
>
<Container style={{ maxWidth: 'unset' }}>
<div className={classes.brandAndTreasuryWrapper}>
<Navbar.Brand as={Link} to="/" className={classes.navBarBrand}>
<img src={logo} className={classes.navBarLogo} alt="Nouns DAO logo" />
</Navbar.Brand>
{Number(CHAIN_ID) !== 1 && (
<Nav.Item>
<img className={classes.testnetImg} src={testnetNoun} alt="testnet noun" />
TESTNET
</Nav.Item>
)}
<Nav.Item>
{treasuryBalance && (
<Nav.Link
href={daoEtherscanLink}
className={classes.nounsNavLink}
target="_blank"
rel="noreferrer"
>
<NavBarTreasury
treasuryBalance={Number(utils.formatEther(treasuryBalance)).toFixed(0)}
treasuryStyle={nonWalletButtonStyle}
/>
</Nav.Link>
)}
</Nav.Item>
</div>
<Navbar.Toggle className={classes.navBarToggle} aria-controls="basic-navbar-nav" onClick={() => setIsNavExpanded(!isNavExpanded)} />
<Navbar.Collapse className="justify-content-end">
<Nav.Link as={Link} to="/vote" className={classes.nounsNavLink} onClick={closeNav} >
<NavBarButton
buttonText={<Trans>DAO</Trans>}
buttonIcon={<FontAwesomeIcon icon={faUsers} />}
buttonStyle={nonWalletButtonStyle}
/>
</Nav.Link>
<Nav.Link
href={externalURL(ExternalURL.notion)}
className={classes.nounsNavLink}
target="_blank"
rel="noreferrer"
onClick={closeNav}
>
<NavBarButton
buttonText={<Trans>Docs</Trans>}
buttonIcon={<FontAwesomeIcon icon={faBookOpen} />}
buttonStyle={nonWalletButtonStyle}
/>
</Nav.Link>
<Nav.Link
href={externalURL(ExternalURL.discourse)}
className={classes.nounsNavLink}
target="_blank"
rel="noreferrer"
onClick={closeNav}
>
<NavBarButton
buttonText={<Trans>Discourse</Trans>}
buttonIcon={<FontAwesomeIcon icon={faComments} />}
buttonStyle={nonWalletButtonStyle}
/>
</Nav.Link>
<Nav.Link as={Link} to="/playground" className={classes.nounsNavLink} onClick={closeNav}>
<NavBarButton
buttonText={<Trans>Playground</Trans>}
buttonIcon={<FontAwesomeIcon icon={faPlay} />}
buttonStyle={nonWalletButtonStyle}
/>
</Nav.Link>
<NavLocaleSwitcher buttonStyle={nonWalletButtonStyle} />
<NavWallet address={activeAccount || '0'} buttonStyle={nonWalletButtonStyle} />{' '}
</Navbar.Collapse>
</Container>
</Navbar>
</>
);
}
