@fortawesome/free-brands-svg-icons#faTwitter TypeScript Examples
The following examples show how to use
@fortawesome/free-brands-svg-icons#faTwitter.
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: SocialMediaButtons.tsx From frontend.ro with MIT License | 6 votes |
|
export function TwitterButton({ url, hashtags = 'FrontEndRo' }: { url: string, hashtags?: string }) {
const share = useSocialShare('Twitter');
return (
<a
target="_blank"
rel="noreferrer"
onClick={share}
href={`https://twitter.com/intent/tweet?hashtags=${hashtags}&url=${url}`}
className="btn btn--light no-underline btn--with-icon"
>
<FontAwesomeIcon icon={faTwitter} height="24" className="mr-2" />
Share on Twitter
</a>
);
}
Example #2
| Source File: core.module.ts From enterprise-ng-2020-workshop with MIT License | 6 votes |
|
constructor(
@Optional()
@SkipSelf()
parentModule: CoreModule,
faIconLibrary: FaIconLibrary
) {
if (parentModule) {
throw new Error('CoreModule is already loaded. Import only in AppModule');
}
faIconLibrary.addIcons(
faCog,
faBars,
faRocket,
faPowerOff,
faUserCircle,
faPlayCircle,
faGithub,
faMediumM,
faTwitter,
faInstagram,
faYoutube
);
}
Example #3
| Source File: Footer.tsx From Money-printer-go-BRRR with MIT License | 6 votes |
|
socialLinks = [
{
title: 'Twitter',
href: `${twitterUrl}/${tweet.handle}`,
icon: faTwitter,
color: twitterColor,
},
{
title: 'Facebook',
href: 'https://fb.me/institute.for.memetic.research.and.development',
icon: faFacebook,
color: '#4267B2',
},
{
title: 'GitHub',
href: 'https://github.com/memetic-institute/Money-printer-go-BRRR',
icon: faGithub,
color: black,
},
]
Example #4
| Source File: index.tsx From bad-cards-game with GNU Affero General Public License v3.0 | 6 votes |
|
library.add( faDotCircle, faCircle, faBars, faTimes, faInfoCircle, faTrophy, faShareSquare, faHeart, faInstagram, faTwitter, faGithub, faFacebook, faHandPointRight, faEdit, faSave, faCamera, faPlus, faMinus, faRandom, );
Example #5
| Source File: fa-init.ts From blog.uhy.ooo with MIT License | 5 votes |
|
library.add(faHome, faRss, faTags, faTwitter, faGithub)
Example #6
| Source File: app.component.ts From gnosis.1inch.exchange with MIT License | 5 votes |
|
// gasPrice = '';
// txSpeedStr = ''
twitterIcon = faTwitter;
Example #7
| Source File: ReferralView.tsx From mysterium-vpn-desktop with MIT License | 5 votes |
|
twitterLink = (token: string): JSX.Element => {
const encoded = encodeURI(`${shareMessage(token)}\n\n${MYST_APP_URL}`)
return (
<TransparentButton onClick={() => shell.openExternal(`https://twitter.com/intent/tweet?text=${encoded}`)}>
<FontAwesomeIcon size="3x" icon={faTwitter} color="#fff" />
</TransparentButton>
)
}
Example #8
| Source File: icons.font-awesome-brands.ts From dayz-server-manager with MIT License | 5 votes |
|
fontAwesomeBrandsIcons = {
faGithub,
faFacebook,
faFacebookF,
faGoogle,
faTwitter,
}
Example #9
| Source File: index.tsx From website with MIT License | 5 votes |
|
ProfileSocialMedia: React.FC<Props> = ({ socialMedia }) => {
return (
<div className="flex items-center space-x-2">
{socialMedia.twitter && (
<Link href={socialMedia.twitter}>
<a
target="_blank"
className="flex items-center justify-center w-8 h-8 rounded-full text-primary bg-zinc-700"
>
<FontAwesomeIcon className="w-4 h-4" icon={faTwitter} />
</a>
</Link>
)}
{socialMedia.web && (
<Link href={socialMedia.web}>
<a
target="_blank"
className="flex items-center justify-center w-8 h-8 rounded-full text-primary bg-zinc-700"
>
<FontAwesomeIcon className="w-4 h-4 " icon={faGlobe} />
</a>
</Link>
)}
{socialMedia.linkedin && (
<Link href={socialMedia.linkedin}>
<a
target="_blank"
className="flex items-center justify-center w-8 h-8 rounded-full text-primary bg-zinc-700"
>
<FontAwesomeIcon className="w-4 h-4" icon={faLinkedinIn} />
</a>
</Link>
)}
{socialMedia.github && (
<Link href={socialMedia.github}>
<a
target="_blank"
className="flex items-center justify-center w-8 h-8 rounded-full text-primary bg-zinc-700"
>
<FontAwesomeIcon className="w-4 h-4" icon={faGithub} />
</a>
</Link>
)}
</div>
);
}
Example #10
| Source File: LandingFooter.tsx From argo-react with MIT License | 5 votes |
|
LandingFooter = () => {
return (
<div className="landing-footer">
<div className="landing-footer-container">
<div>
© 2020 ArGo • Built on{" "}
<a
href="https://www.arweave.org"
target="_blank"
rel="noopener noreferrer"
>
Arweave
</a>{" "}
•{" "}
<a
href="https://www.arweave.org"
target="_blank"
rel="noopener noreferrer"
>
Privacy Policy
</a>
</div>
<div className="landing-footer-container-right">
<div
className="landing-footer-icon"
onClick={(e) =>
window.open("https://github.com/argoapp-live", "_blank", "noopener")
}
>
<FontAwesomeIcon icon={faGithub} />
</div>
<div
className="landing-footer-icon"
onClick={(e) =>
window.open("https://twitter.com/argoapplive", "_blank", "noopener")
}
>
<FontAwesomeIcon icon={faTwitter} />
</div>
</div>
</div>
</div>
);
}
Example #11
| Source File: app.component.ts From thorchain-explorer-singlechain with MIT License | 5 votes |
|
constructor(private thorchainNetworkService: ThorchainNetworkService) {
this.twitterIcon = faTwitter;
this.redditIcon = faReddit;
this.gitlabIcon = faGitlab;
this.telegramIcon = faTelegram;
this.discordIcon = faDiscord;
this.mediumIcon = faMedium;
}
Example #12
| Source File: PortfolioSocialLinks.tsx From MLH-Fellow-Map with MIT License | 5 votes |
|
icons = {
github: faGithub,
linkedin: faLinkedin,
twitter: faTwitter,
}
Example #13
| Source File: index.tsx From website with MIT License | 4 votes |
|
Footer: React.FC<FooterProps> = ({ mainClasses }) => {
const { socialnetworks, footerNavItems } = useSettings();
const currentYear = new Date().getFullYear();
return (
<footer className={` ${mainClasses} mt-40 border-t border-zinc-500 w-full`}>
<div className="container flex justify-center w-full py-16 mx-auto text-primary md:justify-between">
<div className="flex flex-col justify-center w-full text-center">
<div className="flex flex-col justify-between w-full md:flex-row">
<div className="flex flex-col gap-1 pb-8 font-medium md:pb-3">
{footerNavItems?.map(({ link, title }) => (
<Link href={link.value} key={link.value}>
<a className="md:mr-10 md:text-left">{title}</a>
</Link>
))}
</div>
<div className="flex flex-col gap-3">
<p className="font-medium text-center md:text-left">
Encuéntranos en
</p>
<div className="flex justify-center gap-3 md:justify-start">
{socialnetworks?.twitter && (
<Link href={socialnetworks?.twitter}>
<a
target="_blank"
className="grid w-6 h-6 rounded-full place-items-center"
>
<FontAwesomeIcon icon={faTwitter} size="lg" />
</a>
</Link>
)}
{socialnetworks?.instagram && (
<Link href={socialnetworks?.instagram}>
<a
target="_blank"
className="grid w-6 h-6 rounded-full place-items-center"
>
<FontAwesomeIcon icon={faInstagram} size="lg" />
</a>
</Link>
)}
{socialnetworks?.github && (
<Link href={socialnetworks?.github}>
<a
target="_blank"
className="grid w-6 h-6 rounded-full place-items-center"
>
<FontAwesomeIcon icon={faGithub} size="lg" />
</a>
</Link>
)}
{socialnetworks?.youtube && (
<Link href={socialnetworks?.youtube}>
<a
target="_blank"
className="grid w-6 h-6 rounded-full place-items-center"
>
<FontAwesomeIcon icon={faYoutube} size="lg" />
</a>
</Link>
)}
{socialnetworks?.linkedin && (
<Link href={socialnetworks?.linkedin}>
<a
target="_blank"
className="grid w-6 h-6 rounded-full place-items-center "
>
<FontAwesomeIcon icon={faLinkedin} size="lg" />
</a>
</Link>
)}
{socialnetworks?.twitch && (
<Link href={socialnetworks?.twitch}>
<a
target="_blank"
className="grid w-6 h-6 rounded-full place-items-center"
>
<FontAwesomeIcon icon={faTwitch} size="lg" />
</a>
</Link>
)}
</div>
</div>
</div>
<div className="flex flex-col items-center mt-16 md:flex-row">
<div>
<p className="mb-2 font-light md:mr-4">
© FrontendCafé {currentYear}
</p>
</div>
<div>
<Link href="https://vercel.com/?utm_source=hifrontendcafe&utm_campaign=oss">
<a target="_blank" rel="noopener noreferrer">
<Image
src={logo_vercel}
alt="Powered by Vercel"
placeholder="blur"
blurDataURL={logo_vercel}
/>
</a>
</Link>
</div>
</div>
</div>
</div>
</footer>
);
}
Example #14
| Source File: index.tsx From website with MIT License | 4 votes |
|
TwitterCard: React.FC<TwitterCardProps> = ({
id,
text,
author,
media,
referenced_tweets,
is_quote = false,
}) => {
const tweetUrl = `https://twitter.com/${author.username}/status/${id}`;
const authorUrl = `https://twitter.com/${author.username}`;
const quoteTweet =
referenced_tweets && referenced_tweets.find((t) => t.type === 'quoted');
const retweet =
referenced_tweets && referenced_tweets.find((t) => t.type === 'retweeted');
if (retweet) {
return (
<TwitterCard
key={retweet.id}
id={retweet.id}
text={retweet.text}
author={retweet.author}
created_at={retweet.created_at}
media={retweet.media}
/>
);
}
const border = is_quote ? 'border border-zinc-500' : '';
const tweetIcon = (
<div className="flex mb-auto">
<a href={tweetUrl}>
<FontAwesomeIcon
icon={faTwitter}
width="18px"
className="fill-current text-lightBlue"
/>
</a>
</div>
);
return (
<div>
<div
className={`w-full p-5 mx-auto mb-2 rounded-md text-tertiary bg-zinc-800 ${border}`}
>
<div className="flex justify-between">
<a href={authorUrl} className="flex">
<Image
alt={author.username}
height={48}
width={48}
src={author.profile_image_url}
className="w-12 rounded-full"
/>
<div className="ml-2">
<h2 className="font-semibold">{author.name}</h2>
<h3 className="text-primary0">@{author.username}</h3>
</div>
</a>
{!is_quote ? tweetIcon : null}
</div>
<div className="my-2">{text}</div>
<div>
{media
? media.map((img) => (
<img
key={img.url}
className="object-cover rounded-md"
src={img.url}
alt={img.alt_text}
/>
))
: null}
</div>
{quoteTweet ? (
<TwitterCard
key={quoteTweet.id}
id={quoteTweet.id}
text={quoteTweet.text}
author={quoteTweet.author}
created_at={quoteTweet.created_at}
media={quoteTweet.media}
is_quote={true}
/>
) : null}
</div>
</div>
);
}
Example #15
| Source File: Navigation.tsx From apps with MIT License | 4 votes |
|
render() {
return (
<>
<Navbar id={"navigation"} bg={"dark"} variant={"dark"} expand={"lg"}>
<Container fluid>
<Navbar.Brand as={Link} to="/" title="Atlas Academy Database">
Atlas Academy DB
</Navbar.Brand>
<Navbar.Toggle />
<Navbar.Collapse>
<Nav activeKey={this.props.location.pathname}>
<NavPage path="servants" description="Servants" />
<NavPage path="craft-essences" description="Craft Essences" />
<NavPage path="wars" description="Wars" />
<NavDropdown title="Other" id="dropdown-other">
<NavDropdownPage path="command-codes" description="Command Codes" />
<NavDropdownPage path="mystic-codes" description="Mystic Codes" />
<NavDropdownPage path="items" description="Materials" />
<NavDropdownPage path="events" description="Events" />
<NavDropdownPage path="bgms" description="BGMs" />
<NavDropdownPage path="master-missions" description="Master Missions" />
</NavDropdown>
<NavDropdown title="Search" id="dropdown-search">
<NavDropdownPage path="entities" description="Entities" />
<NavDropdownPage path="skills" description="Skills" />
<NavDropdownPage path="noble-phantasms" description="Noble Phantasms" />
<NavDropdownPage path="funcs" description="Functions" />
<NavDropdownPage path="buffs" description="Buffs" />
<NavDropdownPage path="quests" description="Quests" />
<NavDropdownPage path="scripts" description="Scripts" />
</NavDropdown>
<NavDropdown title="Changelog" id="dropdown-search">
<NavDropdownPage path="changes" description="Master Data" />
<NavDropdownPage path="enemy-changes" description="Enemy Data" />
</NavDropdown>
</Nav>
<Nav className={"ml-auto icons"} activeKey="">
<Row>
<Col>
<Link
to={this.regionLink(Region.JP)}
className={`nav-link ${this.regionClass(Region.JP)}`}
>
<JPFlag title="View data from the JP version" />
</Link>
</Col>
<Col>
<Link
to={this.regionLink(Region.NA)}
className={`nav-link ${this.regionClass(Region.NA)}`}
>
<USFlag title="View data from the NA version" />
</Link>
</Col>
<Col>
<Link
to={this.regionLink(Region.CN)}
className={`nav-link ${this.regionClass(Region.CN)}`}
>
<CNFlag title="View data from the CN version" />
</Link>
</Col>
<Col>
<Link
to={this.regionLink(Region.KR)}
className={`nav-link ${this.regionClass(Region.KR)}`}
>
<KRFlag title="View data from the KR version" />
</Link>
</Col>
<Col>
<Link
to={this.regionLink(Region.TW)}
className={`nav-link ${this.regionClass(Region.TW)}`}
>
<TWFlag title="View data from the TW version" />
</Link>
</Col>
</Row>
<Row>
<Col>
<Nav.Link
href="https://atlasacademy.io/discord"
target="_blank"
rel="noreferrer"
>
<FontAwesomeIcon icon={faDiscord} title="Atlas Academy Discord" />
</Nav.Link>
</Col>
<Col>
<Nav.Link
href="https://twitter.com/aacademy_fgo"
target="_blank"
rel="noreferrer"
>
<FontAwesomeIcon icon={faTwitter} title="Atlas Academy Twitter" />
</Nav.Link>
</Col>
<Col>
<Nav.Link
href="https://github.com/atlasacademy/apps"
target="_blank"
rel="noreferrer"
>
<FontAwesomeIcon icon={faGithub} title="Atlas Academy DB Github" />
</Nav.Link>
</Col>
</Row>
<Button variant={"primary"} onClick={() => this.showSettings()}>
<FontAwesomeIcon icon={faCog} title="Settings" />
</Button>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<Modal show={this.state.showSettings} onHide={() => this.hideSettings()}>
<Modal.Header>
<Modal.Title>Settings</Modal.Title>
<button className="modal-close" onClick={() => this.hideSettings()}>
<FontAwesomeIcon icon={faXmark} title="Close Settings" />
</button>
</Modal.Header>
<Modal.Body>
<SettingForm language={this.props.language} theme={this.props.theme} />
</Modal.Body>
</Modal>
</>
);
}
Example #16
| Source File: SharePopup.tsx From argo-react with MIT License | 4 votes |
|
SharePopup: React.FC<IPopupProps> = ({
isOpen,
link,
protocol,
paymentStatus,
}) => {
const defaultOptions = {
loop: true,
autoplay: true,
animationData: animationData,
rendererSettings: {
preserveAspectRatio: "xMidYMid",
},
};
const showProtocolText = (protocol: string, platform: string) => {
switch (protocol) {
case "arweave":
switch (platform) {
case "twitter":
return "@ArweaveTeam";
case "telegram":
return "@arweavers";
case "mail":
return "Arweave";
case "fb":
return "Arweave";
default:
return "";
}
case "skynet":
switch (platform) {
case "twitter":
return "@SkynetLabs";
case "telegram":
return "Skynet";
case "mail":
return "Skynet";
case "fb":
return "Skynet";
default:
return "";
}
case "neofs":
switch (platform) {
case "twitter":
return "@Neo_Blockchain";
case "telegram":
return "@NEO_EN";
case "mail":
return "NeoFs";
case "fb":
return "NeoFs";
default:
return "";
}
default:
return "";
}
};
const shareAchievement = (platform: string) => {
switch (platform) {
case "twitter":
return `I decentralized my web app using @SpheronHQ.%0a%0aCheck it out at ${link} deployed on ${showProtocolText(
protocol,
platform,
)}. ?%0a%0a%23PoweredBySpheron`;
case "fb":
return `I decentralized my web app using Spheron Protocol.%0a%0aCheck it out at ${link} deployed on ${showProtocolText(
protocol,
platform,
)}. ?%0a%0a%23PoweredBySpheron`;
case "telegram":
return `I decentralized my web app using @argoofficial.%0a%0aCheck it out at ${link} deployed on ${showProtocolText(
protocol,
platform,
)}. ?%0a%0a%23PoweredBySpheron`;
case "mail":
return `I decentralized my web app using Spheron Protocol.%0a%0aCheck it out at ${link} deployed on ${showProtocolText(
protocol,
platform,
)}. ?%0a%0a%23PoweredBySpheron`;
default:
return "";
}
};
return (
<Popup
trigger={
<button className="share-button" disabled={paymentStatus !== "success"}>
Share
</button>
}
position="center center"
open={isOpen}
className="popup-container"
modal
>
<div className="modal-container">
<div className="content">
<div className="share-form">
<label className="share-form-title">
<Lottie options={defaultOptions} height={150} />
</label>
<label className="share-form-subtitle">
You have successfully deployed your app!
<br /> Let your friends know by sharing this achievement.
</label>
</div>
<div className="share-container">
<a
href={`https://twitter.com/share?text=${shareAchievement(
"twitter",
)}&hashtag=PoweredByArGoApp`}
target="_blank"
rel="noopener noreferrer"
>
<button className="share-button">
<FontAwesomeIcon icon={faTwitter} className="share-button-icon" />
</button>
</a>
<a
href={`https://t.me/share/url?url=${shareAchievement("telegram")}`}
target="_blank"
rel="noopener noreferrer"
>
<button className="share-button">
<FontAwesomeIcon
icon={faTelegramPlane}
className="share-button-icon"
/>
</button>
</a>
{/* <a
href={`https://www.facebook.com/sharer/sharer.php?quote=${shareAchievement(
"fb",
)}`}
target="_blank"
rel="noopener noreferrer"
>
<button className="share-button">
<FontAwesomeIcon icon={faFacebookF} className="share-button-icon" />
</button>
</a> */}
<a
href={`mailto:?subject=Check out my latest App &body=${shareAchievement(
"mail",
)}`}
target="_blank"
rel="noopener noreferrer"
>
<button className="share-button">
<FontAwesomeIcon icon={faEnvelope} className="share-button-icon" />
</button>
</a>
</div>
</div>
</div>
</Popup>
);
}
Example #17
| 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 #18
| Source File: Footer.tsx From devex with GNU General Public License v3.0 | 4 votes |
|
Footer: React.FC = () => {
const themeContext = useContext(ThemeContext)
const { theme, toggle } = themeContext!
return <div className='custom-footer'>
<Container>
<Row className='justify-content-between'>
<Col sm md lg={2}>
<Row>
<span className='social-header'>Social</span>
</Row>
<Row>
<a target='_blank' rel='noopener noreferrer' href='https://www.twitter.com/zilliqa'>
<FontAwesomeIcon size='lg' icon={faTwitter} cursor='pointer' />
</a>
<a target='_blank' rel='noopener noreferrer' href='https://www.facebook.com/zilliqa/'>
<FontAwesomeIcon size='lg' icon={faFacebookF} cursor='pointer' />
</a>
<a target='_blank' rel='noopener noreferrer' href='https://www.reddit.com/r/zilliqa'>
<FontAwesomeIcon size='lg' icon={faRedditAlien} cursor='pointer' />
</a>
</Row>
<Row>
<a target='_blank' rel='noopener noreferrer' href='https://blog.zilliqa.com'>
<FontAwesomeIcon size='lg' icon={faMediumM} cursor='pointer' />
</a>
<a target='_blank' rel='noopener noreferrer' href='https://www.youtube.com/channel/UCvinnFbf0u71cajoxKcfZIQ'>
<FontAwesomeIcon size='lg' icon={faYoutube} cursor='pointer' />
</a>
<a target='_blank' rel='noopener noreferrer' href='https://t.me/zilliqachat'>
<FontAwesomeIcon size='lg' icon={faTelegramPlane} cursor='pointer' />
</a>
</Row>
</Col>
<Col>
<span className='related-links-header'>Related Links</span>
<div>
<a target='_blank' rel='noopener noreferrer' href='https://github.com/Zilliqa/dev-explorer'>Project Repo</a>
</div>
<div>
<a target='_blank' rel='noopener noreferrer' href='https://ide.zilliqa.com/#/'>Neo Savant IDE</a>
</div>
<div>
<a target='_blank' rel='noopener noreferrer' href='https://github.com/Zilliqa/Zilliqa-JavaScript-Library'>Javascript SDK</a>
</div>
<div>
<a target='_blank' rel='noopener noreferrer' href='https://viewblock.io/zilliqa'>ViewBlock</a>
</div>
</Col>
<Col className='align-self-center'>
<Row className='justify-content-end'>
Powered by <a href='http://www.zilliqa.com'>
<span><u>Zilliqa</u></span></a>
</Row>
<Row className='justify-content-end'>
<span><small>© 2020 Zilliqa</small></span>
</Row>
<Row className='justify-content-end pt-1'>
<OverlayTrigger placement='top'
overlay={<Tooltip id={'theme-tt'}>Toggle Light/Dark</Tooltip>}>
<Switch
className='theme-switch'
loadingIcon={null}
onChange={() => {
toggle()
}}
disabled={false}
defaultChecked={theme === 'light'}
checkedChildren={
<div className='theme-icon-div'>
<FontAwesomeIcon className='theme-icon' icon={faMoon} size='xs' color='white' />
</div>}
unCheckedChildren={
<div className='theme-icon-div'>
<FontAwesomeIcon className='theme-icon' icon={faSun} size='xs' color='white' />
</div>}
/>
</OverlayTrigger>
</Row>
</Col>
</Row>
</Container>
</div >
}
