react-icons/fa#FaDiscord TypeScript Examples
The following examples show how to use
react-icons/fa#FaDiscord.
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: HomeScreen.tsx From rewind with MIT License | 6 votes |
|
export function HomeScreen() {
const { appVersion } = useAppInfo();
return (
<Stack gap={4} sx={{ justifyContent: "center", alignItems: "center", margin: "auto", height: "100%" }}>
<Stack alignItems={"center"}>
<FastRewind sx={{ height: "2em", width: "2em" }} />
<Typography fontSize={"1em"} sx={{ userSelect: "none", marginBottom: 2 }}>
REWIND
</Typography>
<Typography fontSize={"caption.fontSize"} color={"text.secondary"}>
Rewind {appVersion} by{" "}
<Link href={RewindLinks.OsuPpyShAbstrakt} target={"_blank"} color={"text.secondary"}>
abstrakt
</Link>
</Typography>
<Typography fontSize={"caption.fontSize"} color={"text.secondary"}>
osu! University
<IconButton href={discordUrl} target={"_blank"} size={"small"}>
<FaDiscord />
</IconButton>
<IconButton href={twitterUrl} target={"_blank"} size={"small"}>
<FaTwitter />
</IconButton>
<IconButton href={youtubeUrl} target={"_blank"} size={"small"}>
<FaYoutube />
</IconButton>
</Typography>
</Stack>
</Stack>
);
}
Example #2
| Source File: BaseDialog.tsx From rewind with MIT License | 6 votes |
|
export function PromotionFooter() {
const { appVersion } = useAppInfo();
return (
<Typography fontSize={"caption.fontSize"} color={"text.secondary"}>
Rewind {appVersion} by{" "}
<Link href={RewindLinks.OsuPpyShAbstrakt} target={"_blank"} color={"text.secondary"}>
abstrakt
</Link>{" "}
| osu! University
<IconButton href={RewindLinks.OsuUniDiscord} target={"_blank"} size={"small"}>
<FaDiscord />
</IconButton>
</Typography>
);
}
Example #3
| Source File: index.tsx From documentation with MIT License | 6 votes |
|
QuickSocialLinksView = (props: { className?: string }): JSX.Element => {
const { className } = props;
const { siteConfig } = useDocusaurusContext();
return (
<div className={clsx(className, styles.IconContainer)}>
<FaGithub
className={styles.Icon}
onClick={() => {
if (!onServer())
window.open(siteConfig.customFields.githubUrl, '_blank');
}}
/>
<FaDiscord
className={styles.Icon}
onClick={() => {
if (!onServer())
window.open(siteConfig.customFields.discordUrl, '_blank');
}}
/>
</div>
);
}
Example #4
| Source File: index.tsx From interbtc-ui with Apache License 2.0 | 6 votes |
|
SOCIAL_MEDIA_ITEMS = [
{
link: INTERLAY_TWITTER_LINK,
icon: <FaTwitter className={clsx('w-3', 'h-3')} />
},
{
link: INTERLAY_DISCORD_LINK,
icon: <FaDiscord className={clsx('w-3', 'h-3')} />
},
{
link: INTERLAY_GITHUB_LINK,
icon: <FaGithub className={clsx('w-3', 'h-3')} />
},
{
link: INTERLAY_EMAIL_LINK,
icon: <FaMailBulk className={clsx('w-3', 'h-3')} />
}
]
Example #5
| Source File: index.tsx From polkabtc-ui with Apache License 2.0 | 6 votes |
|
FEEDBACK_ITEMS = [
{
title: 'User Feedback Form',
link: USER_FEEDBACK_FORM,
icon: <FaExternalLinkAlt />
},
{
title: 'Vault Feedback Form',
link: VAULT_FEEDBACK_FORM,
icon: <FaExternalLinkAlt />
},
{
title: 'Relayer Feedback Form',
link: RELAYER_FEEDBACK_FORM,
icon: <FaExternalLinkAlt />
},
{
title: 'Open an Issue on Github',
link: POLKA_BTC_UI_GITHUB_ISSUES,
icon: <FaGithub />
},
{
title: 'Discuss on Discord',
link: INTERLAY_DISCORD,
icon: <FaDiscord />
}
]
Example #6
| Source File: index.tsx From polkabtc-ui with Apache License 2.0 | 6 votes |
|
SOCIAL_PLATFORM_ITEMS = [
{
link: INTERLAY_TWITTER,
icon: <FaTwitter />
},
{
link: INTERLAY_MEDIUM,
icon: <FaMediumM />
},
{
link: INTERLAY_GITHUB,
icon: <FaGithub />
},
{
link: INTERLAY_LINKEDIN,
icon: <FaLinkedinIn />
},
{
link: INTERLAY_DISCORD,
icon: <FaDiscord />
}
]
Example #7
| Source File: Setup.tsx From bluebubbles-server with Apache License 2.0 | 5 votes |
|
NavBar = (): JSX.Element => {
const { colorMode, toggleColorMode } = useColorMode();
return (
<Flex
height="20"
alignItems="center"
borderBottomWidth="1px"
borderBottomColor={useColorModeValue('gray.200', 'gray.700')}
justifyContent='space-between'
p={4}
pl={6}
>
<Flex alignItems="center" justifyContent='flex-start'>
<img src={logo} className="logo" alt="logo" height={48} />
<Text fontSize="1xl" ml={2}>BlueBubbles</Text>
</Flex>
<Flex justifyContent='flex-end'>
<HStack spacing={{ base: '0', md: '1' }}>
<Tooltip label="Website Home" aria-label="website-tip">
<Link href="https://bluebubbles.app" style={{ textDecoration: 'none' }} target="_blank">
<IconButton size="lg" variant="ghost" aria-label="website" icon={<AiOutlineHome />} />
</Link>
</Tooltip>
<Tooltip label="BlueBubbles Web" aria-label="website-tip">
<Link href="https://bluebubbles.app/web" style={{ textDecoration: 'none' }} target="_blank">
<IconButton size="lg" variant="ghost" aria-label="bluebubbles web" icon={<FiMessageCircle />} />
</Link>
</Tooltip>
<Tooltip label="Support Us" aria-label="donate-tip">
<Link href="https://bluebubbles.app/donate" style={{ textDecoration: 'none' }} target="_blank">
<IconButton size="lg" variant="ghost" aria-label="donate" icon={<MdOutlineAttachMoney />} />
</Link>
</Tooltip>
<Tooltip label="Join our Discord" aria-label="discord-tip">
<Link href="https://discord.gg/yC4wr38" style={{ textDecoration: 'none' }} target="_blank">
<IconButton size="lg" variant="ghost" aria-label="discord" icon={<FaDiscord />} />
</Link>
</Tooltip>
<Tooltip label="Read our Source Code" aria-label="github-tip">
<Link href="https://github.com/BlueBubblesApp" style={{ textDecoration: 'none' }} target="_blank">
<IconButton size="lg" variant="ghost" aria-label="github" icon={<FiGithub />} />
</Link>
</Tooltip>
<Spacer />
<Divider orientation="vertical" width={1} height={15} borderColor='gray' />
<Spacer />
<Spacer />
<Spacer />
<FormControl display='flex' alignItems='center'>
<Box mr={2}><MdOutlineDarkMode size={20} /></Box>
<Switch id='theme-mode-toggle' onChange={toggleColorMode} isChecked={colorMode === 'light'} />
<Box ml={2}><MdOutlineLightMode size={20} /></Box>
</FormControl>
</HStack>
</Flex>
</Flex>
);
}
Example #8
| Source File: SideNavbar.tsx From 3Speak-app with GNU General Public License v3.0 | 4 votes |
|
export function SideNavbar(props: any) {
const [login, setLogin] = useState('')
const [myChannelLink, setMyChannelLink] = useState('')
useEffect(() => {
const load = async () => {
const login = localStorage.getItem('SNProfileID')
if (login) {
const user = (await AccountService.getAccount(login)) as any
const ringItem = user.keyring[0]
setLogin(user.nickname)
setMyChannelLink(`${ringItem.type}:${ringItem.username}`)
}
}
void load()
}, [])
const logOut = async () => {
//TODO: logout logic
const profileID = localStorage.getItem('SNProfileID')
const user = await AccountService.logout(profileID)
const accountsInit = (await AccountService.getAccounts()) as any
localStorage.removeItem('SNProfileID')
console.log(accountsInit)
if (accountsInit.length > 0) {
localStorage.setItem('SNProfileID', accountsInit[0]._id)
}
window.location.reload()
}
return (
<Navbar bg="white" expand="lg" id="layoutNav" className="bg_white fixed-left">
<Navbar.Brand>
<img src={SpeakLogo} />
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav">
<span className="navbar-toggler-icon"></span>
</Navbar.Toggle>
<Navbar.Collapse>
<Nav className="mr-auto nav_dist">
{login && (
<NavDropdown
id="nav-dropdown"
title={
<>
<div className="nav_icons">
<VscKey size="21px" />
</div>
<span>@{login}</span>
</>
}
>
<NavDropdown.Item href="#/accounts">Switch account</NavDropdown.Item>
<NavDropdown.Item href={`#/user/${myChannelLink}`}>Go to my channel</NavDropdown.Item>
<NavDropdown.Item href="#/login">Add account</NavDropdown.Item>
{login && (
<NavDropdown.Item
onClick={() => {
logOut()
}}
>
Log out
</NavDropdown.Item>
)}
</NavDropdown>
)}
{!login && (
<Nav.Link href="#/login" className="display-mobile">
<button className="btn btn-dark text-white btn-sm">Add account</button>
</Nav.Link>
)}
<hr />
<Nav.Link href="#/">
<div className="nav_icons">
<img src={iconHome} height="14px" />
</div>
Home
</Nav.Link>
<Nav.Item></Nav.Item>
<Nav.Link href="#/trends">
<div className="nav_icons">
<img src={iconTrend} height="21px" />
</div>
Trending Content
</Nav.Link>
<Nav.Link href="#/new">
<div className="nav_icons">
<img src={iconNewContent} height="17px" />
</div>
New Content
</Nav.Link>
<NavDropdown
id="nav-dropdown"
title={
<>
<div className="nav_icons">
<img src={shakeHands} style={{ height: '21px' }} />
</div>
Communities
</>
}
>
<Nav.Link href="#/communities">
<FaGlobe /> All Communities...
</Nav.Link>
<NavDropdown.Item href="#/community/hive:hive-181335">
<FaUsers /> Threespeak
</NavDropdown.Item>
<NavDropdown.Item href="#/community/hive:hive-153014">
<FaUsers /> Citizen Journalists
</NavDropdown.Item>
<NavDropdown.Item href="#/community/hive:hive-112355">
<FaUsers /> Threeshorts
</NavDropdown.Item>
<NavDropdown.Item href="#/community/hive:hive-129768">
<FaUsers />
Coronavirus Pandemic
</NavDropdown.Item>
<NavDropdown.Item href="#/community/hive:hive-196427">
<FaUsers /> COVID-19
</NavDropdown.Item>
</NavDropdown>
<Nav.Link href="#/leaderboard">
<div className="nav_icons">
<img src={iconLeaderboard} height="12px" />
</div>
Leaderboard
</Nav.Link>
<Nav.Link href="#/newcomers">
<div className="nav_icons">
<img src={iconNewcomer} height="19px" />
</div>
First Uploads
</Nav.Link>
<Nav.Link href="#/uploader">
<div className="nav_icons">
<FaToolbox />
</div>
Uploader
</Nav.Link>
<Nav.Link href="#/creatorstudio">
<div className="nav_icons">
<FaToolbox />
</div>
Creator Studio
</Nav.Link>
<NavDropdown
id="nav-dropdown"
title={
<>
<div className="nav_icons">
<BsFillGearFill style={{ height: '21px' }} />
</div>
Settings
</>
}
>
<Nav.Link href="#/blocklist">
<FaGlobe /> Blocklist
</Nav.Link>
<Nav.Link href="#/pins">
<FaGlobe /> Pins
</Nav.Link>
<Nav.Link href="#/ipfsconsole">
<FaGlobe /> Ipfs Console
</Nav.Link>
</NavDropdown>
</Nav>
<Nav>
<li className="nav-item">
<div className="pad_l">
<h5>3Speak</h5>
</div>
</li>
<li className="nav-item">
<a className="nav-link" href="https://3speak.co/intl/about_us">
About us
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="https://3speak.co/intl/about_us">
FAQ
</a>
</li>
<li className="nav-item text-center">
<a
className=""
target="_blank"
href="https://twitter.com/3speakonline?utm_source=3speak.co"
>
<FaTwitter size={28} />
</a>
<a className="ml-2" target="_blank" href="https://t.me/threespeak?utm_source=3speak.co">
<FaTelegram size={28} />
</a>
<a
className="ml-2"
target="_blank"
href="https://discord.me/3speak?utm_source=3speak.co"
>
<i className="fab fa-discord text-muted fa-2x"></i>
<FaDiscord size={28} />
</a>
<a
className="ml-2"
target="_blank"
title="Visit Our Blog"
href="https://hive.blog/@threespeak"
>
<img
style={{ width: '32px', marginTop: '-15px', color: 'black' }}
src={iconBlog}
alt=""
/>
</a>
</li>
<Dropdown title="Find us" className="nav-item dropdown mt-2 display-mobile">
<Dropdown.Toggle
className="btn btn-secondary btn-sm dropdown-toggle"
variant="secondary"
data-toggle="dropdown"
aria-haspopup="true"
>
Find us
</Dropdown.Toggle>
<Dropdown.Menu>
<a className="dropdown-item" href="https://t.me/threespeak?utm_source=3speak.co">
Telegram
</a>
<a className="dropdown-item" href="https://discord.me/3speak?utm_source=3speak.co">
Discord
</a>
<a
className="dropdown-item"
target="_blank"
href="https://twitter.com/3speakonline?utm_source=3speak.co"
>
Twitter
</a>
</Dropdown.Menu>
</Dropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
Example #9
| Source File: Navigation.tsx From bluebubbles-server with Apache License 2.0 | 4 votes |
|
MobileNav = ({ onOpen, onNotificationOpen, unreadCount, ...rest }: MobileProps) => {
const { colorMode, toggleColorMode } = useColorMode();
return (
<Flex
ml={{ base: 0, md: 60 }}
px={{ base: 4, md: 4 }}
height="20"
alignItems="center"
borderBottomWidth="1px"
borderBottomColor={useColorModeValue('gray.200', 'gray.700')}
justifyContent={{ base: 'space-between', md: 'flex-end' }}
{...rest}
>
<IconButton
display={{ base: 'flex', md: 'none' }}
onClick={onOpen}
variant="outline"
aria-label="open menu"
icon={<FiMenu />}
/>
<Text display={{ base: 'flex', md: 'none' }} fontSize="2xl" fontFamily="monospace" fontWeight="bold">
<img src={logo} className="logo-small" alt="logo" />
</Text>
<HStack spacing={{ base: '0', md: '1' }}>
<Tooltip label="Website Home" aria-label="website-tip">
<Link href="https://bluebubbles.app" style={{ textDecoration: 'none' }} target="_blank">
<IconButton size="lg" variant="ghost" aria-label="website" icon={<AiOutlineHome />} />
</Link>
</Tooltip>
<Tooltip label="BlueBubbles Web" aria-label="website-tip">
<Link href="https://bluebubbles.app/web" style={{ textDecoration: 'none' }} target="_blank">
<IconButton size="lg" variant="ghost" aria-label="bluebubbles web" icon={<FiMessageCircle />} />
</Link>
</Tooltip>
<Tooltip label="Sponsor Us" aria-label="sponsor-tip">
<Link href="https://github.com/sponsors/BlueBubblesApp" style={{ textDecoration: 'none' }} target="_blank">
<IconButton size="lg" variant="ghost" aria-label="donate" icon={<AiOutlineHeart />} />
</Link>
</Tooltip>
<Tooltip label="Support Us" aria-label="donate-tip">
<Link href="https://bluebubbles.app/donate" style={{ textDecoration: 'none' }} target="_blank">
<IconButton size="lg" variant="ghost" aria-label="donate" icon={<MdOutlineAttachMoney />} />
</Link>
</Tooltip>
<Tooltip label="Join our Discord" aria-label="discord-tip">
<Link href="https://discord.gg/yC4wr38" style={{ textDecoration: 'none' }} target="_blank">
<IconButton size="lg" variant="ghost" aria-label="discord" icon={<FaDiscord />} />
</Link>
</Tooltip>
<Tooltip label="Read our Source Code" aria-label="github-tip">
<Link href="https://github.com/BlueBubblesApp" style={{ textDecoration: 'none' }} target="_blank">
<IconButton size="lg" variant="ghost" aria-label="github" icon={<FiGithub />} />
</Link>
</Tooltip>
<Box position='relative' float='left'>
<IconButton
size="lg"
verticalAlign='middle'
zIndex={1}
variant="ghost"
aria-label="notifications"
icon={<FiBell />}
onClick={() => onNotificationOpen()}
/>
{(unreadCount > 0) ? (
<Badge
borderRadius='lg'
variant='solid'
colorScheme='red'
position='absolute'
margin={0}
top={1}
right={1}
zIndex={2}
>{unreadCount}</Badge>
) : null}
</Box>
<Spacer />
<Divider orientation="vertical" width={1} height={15} borderColor='gray' />
<Spacer />
<Spacer />
<Spacer />
<FormControl display='flex' alignItems='center'>
<Box mr={2}><MdOutlineDarkMode size={20} /></Box>
<Switch id='theme-mode-toggle' onChange={toggleColorMode} isChecked={colorMode === 'light'} />
<Box ml={2}><MdOutlineLightMode size={20} /></Box>
</FormControl>
</HStack>
</Flex>
);
}
