react-icons/fa#FaFacebookF JavaScript Examples
The following examples show how to use
react-icons/fa#FaFacebookF.
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: Admin_Home_Page.jsx From camprec with MIT License | 6 votes |
|
function Cards(props) {
return (
<>
<div className="card2 magin-top" >
<div className="card-body profile_width pop">
<div><img src={props.image} className="profile_img2 marginl"></img></div>
<div className="cb"><div className="cb2"><strong><h4 className="card-title centers fsize2">{props.name}</h4></strong>
<p className="card-text centers"><strong>Location : </strong> {props.location}</p></div>
<div className="details">
<p className="card-text fsize" ><strong>Email:</strong> {props.email}</p>
<p className="card-text fsize"><strong> Year of Establishment:</strong> {props.year}</p>
<p className="card-text fsize"><strong>Description :</strong> {props.description}</p>
<p className="card-text fsize"><strong>Webite :</strong> <a href={props.website}>{props.website}</a></p>
<p className="card-text fsize"> <a href={props.facebook}><FaFacebookF></FaFacebookF></a> <a href={props.twitter}><FaTwitter></FaTwitter></a> <a href={props.LinkedIn}> <FaLinkedin></FaLinkedin></a> <a href={props.Insta}> <FaInstagram></FaInstagram></a></p>
<ReactPlayer url={props.url} />
<div className='pop' >
<a href="/editcollege" className="btn btn-primary text_size left_m">Edit</a></div>
</div>
</div>
</div>
</div>
</>
)
}
Example #2
| Source File: View_Student_Company_Page.jsx From camprec with MIT License | 6 votes |
|
function Cards(props) {
return (
<>
<Navbar_viewstdcompany></Navbar_viewstdcompany>
<div className="card1 magin-top" >
<div className="card-body profile_width pop">
<div><img src={props.image} className="profile_img "></img></div>
<div className="cb"><div className="cb2"><strong><h4 className="card-title centers fsize2">{props.name}</h4></strong>
<p className="card-text centers"><strong>Location : </strong> {props.location}</p></div>
<div className="details">
<p className="card-text fsize" ><strong>Email:</strong> {props.email}</p>
<p className="card-text fsize"><strong> Year of Establishment:</strong> {props.year}</p>
<p className="card-text fsize"><strong>Description :</strong> {props.description}</p>
<p className="card-text fsize"><strong>Webite :</strong> <a href={props.website}>{props.website}</a></p>
<p className="card-text fsize"> <a href={props.facebook}><FaFacebookF></FaFacebookF></a> <a href={props.twitter}><FaTwitter></FaTwitter></a> <a href={props.LinkedIn}> <FaLinkedin></FaLinkedin></a> <a href={props.Insta}> <FaInstagram></FaInstagram></a></p>
<ReactPlayer url={props.url} />
</div>
</div>
</div>
</div>
</>
)
}
Example #3
| Source File: Footer.jsx From gatsby-airtable-listing with MIT License | 5 votes |
|
Footer = () => {
const {
site: {
meta: { links },
},
} = useStaticQuery(graphql`
query FooterQuery {
site {
meta: siteMetadata {
links {
contact
facebook
linkedin
twitter
}
}
}
}
`)
return (
<footer className="bg-white dark:bg-transparent">
<div className="container pt-12 pb-12 flex flex-wrap text-center lg:flex-row-reverse lg:justify-between lg:items-center">
<ul className="w-full lg:w-auto">
<FooterIconLink
href={links.facebook}
icon={FaFacebookF}
label="Facebook"
/>
<FooterIconLink
href={links.twitter}
icon={FaTwitter}
label="Twitter"
/>
<FooterIconLink
href={links.linkedin}
icon={FaLinkedinIn}
label="LinkedIn"
/>
<FooterIconLink
href={links.contact}
icon={FaEnvelope}
label="E-mail"
/>
</ul>
<div className="w-full lg:w-auto pt-6 lg:pt-0 text-blue-800 dark:text-blue-500 text-sm">
© 2020 All rights reserved.
</div>
</div>
</footer>
)
}
Example #4
| Source File: SignupMenuModal.js From airdnd-frontend with MIT License | 5 votes |
|
SignupMenuModal = ({
modalVisible,
openLoginModal,
openSignupEmailModal,
closeModal,
onSuccessGoogle,
onFailureGoogle,
}) => {
return (
<StSignupMenuModal
modalState={modalVisible}
header
title="회원가입"
width="570px"
height="380px"
setModalState={closeModal}
>
<StSignupFormWrapper>
<GoogleLogin
clientId={process.env.REACT_APP_GOOGLE_LOGIN_API_KEY}
cookiePolicy={'single_host_origin'}
onSuccess={onSuccessGoogle}
onFailure={onFailureGoogle}
render={renderProps => (
<StFacebookButton onClick={renderProps.onClick}>
<FaFacebookF />
<StButtonText>페이스북 계정으로 회원 가입</StButtonText>
</StFacebookButton>
)}
></GoogleLogin>
<GoogleLogin
clientId={process.env.REACT_APP_GOOGLE_LOGIN_API_KEY}
cookiePolicy={'single_host_origin'}
onSuccess={onSuccessGoogle}
onFailure={onFailureGoogle}
render={renderProps => (
<StGoogleButton onClick={renderProps.onClick}>
<FcGoogle />
<StButtonText>구글 계정으로 회원 가입</StButtonText>
</StGoogleButton>
)}
></GoogleLogin>
<StDividerLine />
<StDividerText>또는</StDividerText>
<StEmailButton onClick={openSignupEmailModal}>
<AiOutlineMail />
<StButtonText>이메일로 회원 가입</StButtonText>
</StEmailButton>
<StDividerLine />
<StLoginButtonWrapper>
<StLoginText>이미 에어비앤비 계정이 있나요?</StLoginText>
<StLoginButton btnType="color" onClick={openLoginModal}>
로그인
</StLoginButton>
</StLoginButtonWrapper>
</StSignupFormWrapper>
</StSignupMenuModal>
);
}
Example #5
| Source File: Company_Home_Page.jsx From camprec with MIT License | 5 votes |
|
function Cards(props) {
return (
<>
<div className="magin-top">
<div className="card-body profile_width pop">
<div>
<img src={props.image} className="profile_img"></img>
</div>
<div className="cb">
<div className="cb2">
<strong>
<h4 className="card-title centers fsize2">{props.name}</h4>
</strong>
<p className="card-text centers">
<strong>Location : </strong> {props.location}
</p>
</div>
<div className="details">
<p className="card-text fsize">
<strong>Email:</strong> {props.email}
</p>
<p className="card-text fsize">
<strong> Year of Establishment:</strong> {props.year}
</p>
<p className="card-text fsize">
<strong>Description :</strong> {props.description}
</p>
<p className="card-text fsize">
<strong>Webite :</strong>{" "}
<a href={props.website}>{props.website}</a>
</p>
<p className="card-text fsize">
{" "}
<a href={props.facebook}>
<FaFacebookF></FaFacebookF>
</a>{" "}
<a href={props.twitter}>
<FaTwitter></FaTwitter>
</a>{" "}
<a href={props.LinkedIn}>
{" "}
<FaLinkedin></FaLinkedin>
</a>{" "}
<a href={props.Insta}>
{" "}
<FaInstagram></FaInstagram>
</a>
</p>
<ReactPlayer url={props.url} />
<div className="pop">
<a
href="/editcompany"
className="btn btn-primary text_size left_m"
>
Edit
</a>
</div>
</div>
</div>
</div>
</div>
</>
);
}
Example #6
| Source File: Student_Home_Page.jsx From camprec with MIT License | 5 votes |
|
function Cards(props) {
console.log(props.certification)
return (
<>
<div className="card2 magin-top" >
<div className="card-body profile_width pop">
<div ><img src={props.image} className="profile_img"></img></div>
<div className="cb"><strong><h4 className="card-title marginb centers fsize2">{props.name}</h4></strong>
<div className="details"><p className=" card-body card-text fsize"><strong>Email : <br/> </strong> {props.email}</p>
<p className="card-body card-text boder fsize" ><strong>Phone no: </strong> <br/>{props.phone}</p>
<p className="card-body card-text fsize"><strong>College : </strong> <br/>{props.college}</p>
<p className="card-body card-text fsize"><strong>Description : </strong> <br/> {props.description}</p>
<p className="card-body card-text fsize"><strong>Education : </strong><br/>
{props.education.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.education[i].course}<br/>
<strong>Institute: </strong>{props.education[i].institute}<br/>
<strong>Marks: </strong>{props.education[i].marks}<br/>
</div>
<br/>
</>
);
})}
<p ><a href="\addedu"><FaPlus></FaPlus></a> <a href="/deledu"><FaRegTrashAlt></FaRegTrashAlt></a> </p>
</p>
<p className="card-body card-text fsize"><strong>Work experience :</strong> <br/>
{props.work.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Job Title: </strong>{props.work[i].names}<br/>
<strong>Company: </strong>{props.work[i].companys}<br/>
<strong>Duration:</strong>{props.work[i].duration}<br/>
<strong>Description: </strong>{props.work[i].description}<br/>
<strong>Link:</strong> <a href={props.work[i].link}>{props.work[i].link}</a>
</div>
<br/>
</>
);
})}
<p ><a href="\addexp"><FaPlus></FaPlus></a> <a href="\delexp"><FaRegTrashAlt></FaRegTrashAlt></a> </p>
</p>
<p className="card-body card-text fsize"><strong>Certification :</strong><br/> {props.certification.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.certification[i].courses}<br/>
<strong>Institutes: </strong>{props.certification[i].institutes}<br/>
<strong>Valid_till: </strong>{props.certification[i].valid_till}<br/>
<strong>Link: </strong> <a href={props.certification[i].links}>{props.certification[i].links}</a>
</div>
<br/>
</>
);
})}
<p ><a href="\addcer"><FaPlus></FaPlus></a> <a href="\delcer"><FaRegTrashAlt></FaRegTrashAlt></a> </p>
</p>
<p className="card-text fsize"> <a href={props.facebook}><FaFacebookF></FaFacebookF></a> <a href={props.twitter}><FaTwitter></FaTwitter></a> <a href={props.LinkedIn}> <FaLinkedin></FaLinkedin></a> <a href={props.Insta}> <FaInstagram></FaInstagram></a></p>
</div>
</div>
</div>
</div>
</>
)
}
Example #7
| Source File: View_Admin_Std_Page.jsx From camprec with MIT License | 5 votes |
|
function Cards(props) {
console.log(props.certification)
return (
<>
<div className="card2 magin-top" >
<div className="card-body profile_width pop">
<div ><img src={props.image} className="profile_img"></img></div>
<div className="cb"><strong><h4 className="card-title marginb centers fsize2">{props.name}</h4></strong>
<div className="details"><p className=" card-body card-text fsize"><strong>Email : <br/> </strong> {props.email}</p>
<p className="card-body card-text boder fsize" ><strong>Phone no: </strong> <br/>{props.phone}</p>
<p className="card-body card-text fsize"><strong>College : </strong> <br/>{props.college}</p>
<p className="card-body card-text fsize"><strong>Description : </strong> <br/> {props.description}</p>
<p className="card-body card-text fsize"><strong>Education : </strong><br/>
{props.education.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.education[i].course}<br/>
<strong>Institute: </strong>{props.education[i].institute}<br/>
<strong>Marks: </strong>{props.education[i].marks}<br/>
</div>
<br/>
</>
);
})}
</p>
<p className="card-body card-text fsize"><strong>Work experience :</strong> <br/>
{props.work.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Job Title: </strong>{props.work[i].names}<br/>
<strong>Company: </strong>{props.work[i].companys}<br/>
<strong>Duration:</strong>{props.work[i].duration}<br/>
<strong>Description: </strong>{props.work[i].description}<br/>
<strong>Link:</strong> <a href={props.work[i].link}>{props.work[i].link}</a>
</div>
<br/>
</>
);
})}
</p>
<p className="card-body card-text fsize"><strong>Certification :</strong><br/> {props.certification.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.certification[i].courses}<br/>
<strong>Institutes: </strong>{props.certification[i].institutes}<br/>
<strong>Valid_till: </strong>{props.certification[i].valid_till}<br/>
<strong>Link: </strong> <a href={props.certification[i].links}>{props.certification[i].links}</a>
</div>
<br/>
</>
);
})}
</p>
<p className="card-text fsize"> <a href={props.facebook}><FaFacebookF></FaFacebookF></a> <a href={props.twitter}><FaTwitter></FaTwitter></a> <a href={props.LinkedIn}> <FaLinkedin></FaLinkedin></a> <a href={props.Insta}> <FaInstagram></FaInstagram></a></p>
</div>
</div>
</div>
</div>
</>
)
}
Example #8
| Source File: View_Applicant_Student_Page.jsx From camprec with MIT License | 5 votes |
|
function Cards(props) {
console.log(props.certification)
return (
<>
<div className="card2 magin-top" >
<div className="card-body profile_width pop">
<div ><img src={props.image} className="profile_img"></img></div>
<div className="cb"><strong><h4 className="card-title marginb centers fsize2">{props.name}</h4></strong>
<div className="details"><p className=" card-body card-text fsize"><strong>Email : <br/> </strong> {props.email}</p>
<p className="card-body card-text boder fsize" ><strong>Phone no: </strong> <br/>{props.phone}</p>
<p className="card-body card-text fsize"><strong>College : </strong> <br/>{props.college}</p>
<p className="card-body card-text fsize"><strong>Description : </strong> <br/> {props.description}</p>
<p className="card-body card-text fsize"><strong>Education : </strong><br/>
{props.education.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.education[i].course}<br/>
<strong>Institute: </strong>{props.education[i].institute}<br/>
<strong>Marks: </strong>{props.education[i].marks}<br/>
</div>
<br/>
</>
);
})}
</p>
<p className="card-body card-text fsize"><strong>Work experience :</strong> <br/>
{props.work.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Job Title: </strong>{props.work[i].names}<br/>
<strong>Company: </strong>{props.work[i].companys}<br/>
<strong>Duration:</strong>{props.work[i].duration}<br/>
<strong>Description: </strong>{props.work[i].description}<br/>
<strong>Link:</strong> <a href={props.work[i].link}>{props.work[i].link}</a>
</div>
<br/>
</>
);
})}
</p>
<p className="card-body card-text fsize"><strong>Certification :</strong><br/> {props.certification.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.certification[i].courses}<br/>
<strong>Institutes: </strong>{props.certification[i].institutes}<br/>
<strong>Valid_till: </strong>{props.certification[i].valid_till}<br/>
<strong>Link: </strong> <a href={props.certification[i].links}>{props.certification[i].links}</a>
</div>
<br/>
</>
);
})}
</p>
<p className="card-text fsize"> <a href={props.facebook}><FaFacebookF></FaFacebookF></a> <a href={props.twitter}><FaTwitter></FaTwitter></a> <a href={props.LinkedIn}> <FaLinkedin></FaLinkedin></a> <a href={props.Insta}> <FaInstagram></FaInstagram></a></p>
</div>
</div>
</div>
</div>
</>
)
}
Example #9
| Source File: View_Student_Page.jsx From camprec with MIT License | 5 votes |
|
function Cards(props) {
console.log(props.certification)
return (
<>
<div className="card2 magin-top" >
<div className="card-body profile_width pop">
<div ><img src={props.image} className="profile_img"></img></div>
<div className="cb"><strong><h4 className="card-title marginb centers fsize2">{props.name}</h4></strong>
<div className="details"><p className=" card-body card-text fsize"><strong>Email : <br/> </strong> {props.email}</p>
<p className="card-body card-text boder fsize" ><strong>Phone no: </strong> <br/>{props.phone}</p>
<p className="card-body card-text fsize"><strong>College : </strong> <br/>{props.college}</p>
<p className="card-body card-text fsize"><strong>Description : </strong> <br/> {props.description}</p>
<p className="card-body card-text fsize"><strong>Education : </strong><br/>
{props.education.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.education[i].course}<br/>
<strong>Institute: </strong>{props.education[i].institute}<br/>
<strong>Marks: </strong>{props.education[i].marks}<br/>
</div>
<br/>
</>
);
})}
</p>
<p className="card-body card-text fsize"><strong>Work experience :</strong> <br/>
{props.work.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Job Title: </strong>{props.work[i].names}<br/>
<strong>Company: </strong>{props.work[i].companys}<br/>
<strong>Duration:</strong>{props.work[i].duration}<br/>
<strong>Description: </strong>{props.work[i].description}<br/>
<strong>Link:</strong> <a href={props.work[i].link}>{props.work[i].link}</a>
</div>
<br/>
</>
);
})}
</p>
<p className="card-body card-text fsize"><strong>Certification :</strong><br/> {props.certification.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.certification[i].courses}<br/>
<strong>Institutes: </strong>{props.certification[i].institutes}<br/>
<strong>Valid_till: </strong>{props.certification[i].valid_till}<br/>
<strong>Link: </strong> <a href={props.certification[i].links}>{props.certification[i].links}</a>
</div>
<br/>
</>
);
})}
</p>
<p className="card-text fsize"> <a href={props.facebook}><FaFacebookF></FaFacebookF></a> <a href={props.twitter}><FaTwitter></FaTwitter></a> <a href={props.LinkedIn}> <FaLinkedin></FaLinkedin></a> <a href={props.Insta}> <FaInstagram></FaInstagram></a></p>
</div>
</div>
</div>
</div>
</>
)
}
Example #10
| Source File: index.js From react-portfolio with MIT License | 5 votes |
|
Socialicons = (params) => {
return (
<div className="stick_follow_icon">
<ul>
{socialprofils.twitter && (
<li>
<a href={socialprofils.twitter}>
<FaTwitter />
</a>
</li>
)}
{socialprofils.github && (
<li>
<a href={socialprofils.github}>
<FaGithub />
</a>
</li>
)}
{socialprofils.facebook && (
<li>
<a href={socialprofils.facebook}>
<FaFacebookF />
</a>
</li>
)}
{socialprofils.linkedin && (
<li>
<a href={socialprofils.linkedin}>
<FaLinkedin />
</a>
</li>
)}
{socialprofils.youtube && (
<li>
<a href={socialprofils.youtube}>
<FaYoutube />
</a>
</li>
)}
{socialprofils.twitch && (
<li>
<a href={socialprofils.twitch}>
<FaTwitch />
</a>
</li>
)}
</ul>
<p>Follow Me</p>
</div>
);
}
Example #11
| Source File: index.js From atendimento-e-agilidade-medica-AAMed with MIT License | 5 votes |
|
export default function Rodape() {
return (
<div className="rodape">
<div className="sub_rodape">
<div className="redes_sociais">
<ul>
<li>
<FaFacebookF />
</li>
<li>
<FaInstagram />
</li>
<li>
<FaLinkedin />
</li>
<li>
<FaTwitter />
</li>
</ul>
</div>
<div>
<i>Fale Conosco: (19) 3269-4089</i>
</div>
</div>
<div className="sub_rodape2">
<div>
<ul>
<span className="usuarios">Usuários</span>
<li>Aplicativo</li>
<li>Login</li>
<li>Cadastro</li>
<li>Localização</li>
<li>Suporte</li>
<li>Termos de Uso</li>
</ul>
</div>
<div>
<ul>
<span className="fast_Help">AAMed</span>
<li>Certificações</li>
<li>Membros</li>
<li>Base</li>
<li>Localização</li>
<li>Contato</li>
<li>Aplicação</li>
</ul>
</div>
<div>
<ul>
<span className="hospitais">Hospitais</span>
<li>Certificações</li>
<li>Login</li>
<li>Unidades</li>
<li>Localização</li>
<li>Contato</li>
<li>Termos de Uso</li>
</ul>
</div>
</div>
</div>
);
}
Example #12
| Source File: Home.jsx From CodeSignal-Practice_Solutions with MIT License | 5 votes |
|
export default function Home() {
const icons = [
{
href: "https://www.linkedin.com/in/sagnik-ghosh-564574199",
icon: <FaLinkedinIn />,
},
{
href: "https://github.com/sagnikghoshcr7",
icon: <FaGithub />,
},
{
href: "https://twitter.com/sagnikghoshcr7",
icon: <FaTwitter />,
},
{
href: "https://www.facebook.com/profile.php?id=100036939404474",
icon: <FaFacebookF />,
},
{
href: "https://www.instagram.com/sagnikghoshcr7",
icon: <FaInstagram />,
},
]
return (
<Section id="about">
<div className='row justify-content-between'>
<div className='col-md-6 order-last order-lg-first' data-aos='fade-up'>
<h1 className="mb-0">
Sagnik
<span className="text-primary" style={{paddingLeft: '2vw'}}>Ghosh</span>
</h1>
<div className="subheading mb-3">
<span style={{paddingRight: '0.3vw'}}>
Impossible is nothing!
</span>
<span style={{paddingRight: '0.3vw'}}>
·
</span>
<a href="mailto:[email protected]" className='home-mail'>
[email protected]
</a>
</div>
</div>
<div className='col-md-3 mb-5 mb-lg-0' data-aos='fade-up'>
<img
src={SGCartoon}
alt="Sagnik Cartoon"
style={{height: '40vh', width: '40vh'}}
/>
</div>
</div>
<p className="lead mb-4">
I am a third-year undergraduate Information Technology Student at KIIT University. I am amongst the top contributors in Github from India. I am an Full-Stack Intern at Kaglorsys & Flutter Developer Intern at Skillablers, presently leading the Microsoft Student Ambassadors Community KIIT. I am a Machine Learning Enthusiast also. My other interests are DevOps and UI/UX.
</p>
<div className="btn-group mb-5">
<button
className="btn btn-primary btn-custom py-2 px-5 CV-Button"
type="submit"
onClick={() => window.open(ResumePDF)}
>
Download CV
</button>
</div>
<div className="social-icons">
{icons.map(({ href, icon }, index) => (
<SocialIcon href={href} icon={icon} key={index} />
))}
</div>
</Section>
)
}
Example #13
| Source File: footer.js From next-ecommerce with MIT License | 4 votes |
|
export default function Fotter() {
return (
<footer>
<div className="footer footer-top">
<Logo />
<div className="footer-nav">
<Link href="/">
<a>Shop</a>
</Link>
<Link href="/">
<a>Journal</a>
</Link>
<Link href="/">
<a>About</a>
</Link>
<Link href="/">
<a>Contacts</a>
</Link>
</div>
<div className="social-links">
<Link href="/">
<a>
<FaFacebookF color="#d8d8d8" size="18px" />
</a>
</Link>
<Link href="/">
<a>
<FaTwitter color="#d8d8d8" size="18px" />
</a>
</Link>
<Link href="/">
<a>
<FaInstagram color="#d8d8d8" size="18px" />
</a>
</Link>
<Link href="/">
<a>
<FaYoutube color="#d8d8d8" size="18px" />
</a>
</Link>
</div>
</div>
<div className="footer footer-bottom">
<div className="texts">
<p>© 2016. Quantum UI kit</p>
<p>Privacy Policy</p>
<p>Terms of Use</p>
</div>
<div className="payment-info">
<p className="text">Accepted payment methods</p>
<div className="payment-methods">
<div>
<FaCcVisa color="#424242" size="32px" />
</div>
<div>
<FaCcMastercard color="#424242" size="32px" />
</div>
<div>
<FaCcPaypal color="#424242" size="32px" />
</div>
<div>
<FaCcAmazonPay color="#424242" size="32px" />
</div>
</div>
</div>
</div>
<style jsx>{`
footer {
width: 100vw;
display: flex;
flex-direction: column;
margin-top: 30px;
background-color: #ffffff;
box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.05);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05);
overflow-x: hidden;
}
.footer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 28px 10vw;
}
.footer-top .footer-nav {
display: flex;
align-items: center;
}
.footer-top .footer-nav a {
font-style: normal;
font-weight: 500;
font-size: 16px;
color: #666666;
text-decoration: none;
margin-left: 18px;
margin-right: 18px;
}
.footer-top .footer-nav a:hover {
text-decoration: underline;
}
.footer-top .social-links a {
margin-left: 12px;
margin-right: 12px;
}
/* Footer Bottom */
.footer-bottom {
border-top: 2px solid #f5f5f5;
}
.footer-bottom .texts {
display: flex;
flex-direction: row;
align-items: center;
}
.footer-bottom .texts p {
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 60px;
color: #b3b3b3;
margin-right: 15px;
margin-left: 15px;
}
.footer-bottom .payment-info {
display: flex;
flex-direction: row;
align-items: center;
}
.footer-bottom .payment-info .text {
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 60px;
color: #b3b3b3;
}
.footer-bottom .payment-info .payment-methods {
display: flex;
flex-direction: row;
margin-left: 12px;
}
.footer-bottom .payment-info .payment-methods div {
margin-left: 5px;
margin-right: 5px;
}
@media (max-width: 1000px) {
.footer-top .footer-nav {
display: none;
}
.footer-bottom {
display: flex;
flex-direction: column;
}
.footer-bottom .texts {
flex-direction: column;
}
.footer-bottom .texts p {
line-height: 40px;
}
.footer-bottom .payment-info .text {
display: none;
}
.footer-bottom .payment-info {
margin-top: 24px;
}
}
@media (max-width: 700px) {
.footer-top {
display: flex;
flex-direction: column;
}
.footer-top .social-links {
margin-top: 8px;
}
}
`}</style>
</footer>
);
}
Example #14
| Source File: about-us.js From warsinhk with MIT License | 4 votes |
|
AboutUsPage = props => {
const { data } = props
const { t } = useTranslation()
const contributors = React.useMemo(
() =>
[]
.concat(data.configJson.credits.contributors)
.sort((a, b) => (a > b ? 1 : -1)),
[data.configJson.credits]
)
const volunteers = React.useMemo(
() =>
[]
.concat(data.configJson.credits.volunteers)
.sort((a, b) => (a.name > b.name ? 1 : -1)),
[data.configJson.credits.volunteers]
)
const designers = React.useMemo(
() =>
[]
.concat(data.configJson.credits.designers)
.sort((a, b) => (a.name > b.name ? 1 : -1)),
[data.configJson.credits.designers]
)
return (
<Layout>
<SEO title="AboutUsPage" />
<SplitWrapper>
<SessionWrapper>
<Typography variant="h2" style={{ marginBottom: 16 }}>
{t("about_us.title")}
</Typography>
<Paragraph
dangerouslySetInnerHTML={{ __html: t("about_us.who_are_we_1") }}
/>
<Paragraph
dangerouslySetInnerHTML={{ __html: t("about_us.who_are_we_2") }}
/>
<Paragraph
dangerouslySetInnerHTML={{ __html: t("about_us.who_are_we_3") }}
/>
<Paragraph
dangerouslySetInnerHTML={{ __html: t("about_us.donation") }}
/>
<Paragraph
dangerouslySetInnerHTML={{ __html: t("about_us.who_are_we_4") }}
/>
<Button
style={{ marginTop: 8 }}
variant="outlined"
color="primary"
size="small"
startIcon={<FaFacebookF size="0.8rem" />}
href="https://www.facebook.com/vote4hongkong/"
target="_blank"
rel="noopener noreferer"
onClick={() => {
trackCustomEvent({
category: "about_us",
action: "click",
label: "https://www.facebook.com/vote4hongkong/",
})
}}
>
{t("about_us.vote4hk_fb")}
</Button>
<Grid container spacing={2} style={{ marginTop: 16 }}>
<Grid item md={6}>
<Typography variant="h3" style={{ marginBottom: 8 }}>
{t("about_us.g0vhk_title")}
</Typography>
<Paragraph
dangerouslySetInnerHTML={{ __html: t("about_us.g0vhk_1") }}
/>
{/* <Button
component="button"
variant="outlined"
color="primary"
size="small"
startIcon={mapIcon("attach_money")}
href="https://www.collaction.hk/s/g0vhk/fund"
target="_blank"
rel="noopener noreferer"
onClick={() => {
trackCustomEvent({
category: "about_us",
action: "click",
label: "https://www.collaction.hk/s/g0vhk/fund",
})
}}
>
{t("about_us.donate_g0vhk")}
</Button> */}
</Grid>
<Grid item md={6}>
<Typography variant="h3" style={{ marginBottom: 8 }}>
{t("about_us.sooc_title")}
</Typography>
<Paragraph
dangerouslySetInnerHTML={{ __html: t("about_us.sooc_1") }}
/>
{/* <Button
variant="outlined"
color="primary"
size="small"
startIcon={mapIcon("attach_money")}
href="https://www.collaction.hk/s/station/fund"
target="_blank"
rel="noopener noreferer"
onClick={() => {
trackCustomEvent({
category: "about_us",
action: "click",
label: "https://www.collaction.hk/s/station/fund",
})
}}
>
{t("about_us.donate_sooc")}
</Button> */}
</Grid>
<Grid item xs={12}>
<Typography variant="h3" style={{ marginBottom: 8 }}>
{t("about_us.contact_title")}
</Typography>
<Paragraph
dangerouslySetInnerHTML={{
__html: t("about_us.contact_method"),
}}
/>
</Grid>
</Grid>
<Paragraph
dangerouslySetInnerHTML={{ __html: t("about_us.open_source") }}
style={{ marginTop: 16 }}
/>
<Paragraph
dangerouslySetInnerHTML={{ __html: t("about_us.citation") }}
style={{ marginTop: 16 }}
/>
<LinkBox>
<Button
variant="outlined"
color="primary"
size="small"
startIcon={<FaGithubAlt />}
href="https://github.com/nandiheath/warsinhk"
target="_blank"
rel="noopener noreferer"
onClick={() => {
trackCustomEvent({
category: "about_us",
action: "click",
label: "https://github.com/nandiheath/warsinhk",
})
}}
>
{t("about_us.github")}
</Button>
<Button
variant="outlined"
color="secondary"
size="small"
startIcon={mapIcon("insert_drive_file")}
href="https://docs.google.com/spreadsheets/d/e/2PACX-1vT6aoKk3iHmotqb5_iHggKc_3uAA901xVzwsllmNoOpGgRZ8VAA3TSxK6XreKzg_AUQXIkVX5rqb0Mo/pub?gid=0&range=A2:ZZ&output=csv"
target="_blank"
rel="noopener noreferer"
onClick={() => {
trackCustomEvent({
category: "about_us",
action: "click",
label: "high_risk_source_data",
})
}}
>
{t("about_us.high_risk")} 2020
</Button>
<Button
variant="outlined"
color="secondary"
size="small"
startIcon={mapIcon("insert_drive_file")}
href="https://docs.google.com/spreadsheets/d/e/2PACX-1vQVRg6iiYOHZwLsXdZE6TVWBO7Cldi07NUnbeVY3nI97_IjyG3jiWnjaUS51HRNJI1fN3io1paMa6jZ/pub?gid=0&range=A2:ZZ&output=csv"
target="_blank"
rel="noopener noreferer"
onClick={() => {
trackCustomEvent({
category: "about_us",
action: "click",
label: "high_risk_source_data",
})
}}
>
{t("about_us.high_risk")} 2021
</Button>
<Button
variant="outlined"
color="secondary"
size="small"
startIcon={mapIcon("insert_drive_file")}
href="https://docs.google.com/spreadsheets/d/e/2PACX-1vTl_YWJy_osrNeOD0ufyQH4CuWTKCX9ng-tUPpIFXsAdk_ry2uciIt752f9a-yd83IGUtsw2rHQNB0s/pub?gid=0&range=A2:ZZ&output=csv"
target="_blank"
rel="noopener noreferer"
onClick={() => {
trackCustomEvent({
category: "about_us",
action: "click",
label: "high_risk_source_data",
})
}}
>
{t("about_us.high_risk")} 2022
</Button>
<Button
variant="outlined"
color="secondary"
size="small"
startIcon={mapIcon("insert_drive_file")}
href="https://docs.google.com/spreadsheets/d/e/2PACX-1vSr2xYotDgnAq6bqm5Nkjq9voHBKzKNWH2zvTRx5LU0jnpccWykvEF8iB_0g7Tzo2pwzkTuM3ETlr_h/pub?gid=0&range=A2:ZZ&output=csv"
target="_blank"
rel="noopener noreferer"
onClick={() => {
trackCustomEvent({
category: "about_us",
action: "click",
label: "wars_cases_source_data",
})
}}
>
{t("about_us.wars_cases")} 2020
</Button>
<Button
variant="outlined"
color="secondary"
size="small"
startIcon={mapIcon("insert_drive_file")}
href="https://docs.google.com/spreadsheets/d/e/2PACX-1vT-Xw-QHYydz_kJCJLBqTKGbb2OF8_gisdUsduPbdR6Dp3tLbWxy_mkfRx2tMmGJ0q64uNsLLv3bbfb/pub?gid=0&range=A2:ZZ&output=csv"
target="_blank"
rel="noopener noreferer"
onClick={() => {
trackCustomEvent({
category: "about_us",
action: "click",
label: "wars_cases_source_data",
})
}}
>
{t("about_us.wars_cases")} 2021
</Button>
<Button
variant="outlined"
color="secondary"
size="small"
startIcon={mapIcon("insert_drive_file")}
href="https://docs.google.com/spreadsheets/d/e/2PACX-1vTEJyeLTOgntmUjeRhyEB1w_eFD6BUKAEgkR47pp3yXY_XB3IlF7DstsAA0pHz33h2pzGIxGbvGhjMe/pub?gid=0&range=A2:ZZ&output=csv"
target="_blank"
rel="noopener noreferer"
onClick={() => {
trackCustomEvent({
category: "about_us",
action: "click",
label: "wars_cases_source_data",
})
}}
>
{t("about_us.wars_cases")} 2022
</Button>
</LinkBox>
</SessionWrapper>
<SessionWrapper>
<Typography variant="h2">{t("about_us.volunteers")}</Typography>
<Grid container spacing={1} style={{ marginTop: 8 }}>
{volunteers.map(item => (
<Grid item key={item.id} xs={6} md={4}>
<Volunteer
item={item}
siteUrl={data.site.siteMetadata.siteUrl}
/>
</Grid>
))}
</Grid>
<Typography variant="h2" style={{ marginTop: 16 }}>
{t("about_us.designers")}
</Typography>
<Grid container spacing={1} style={{ marginTop: 8 }}>
{designers.map(item => (
<Grid item key={item.id} xs={6} md={4}>
<Volunteer
item={item}
siteUrl={data.site.siteMetadata.siteUrl}
/>
</Grid>
))}
</Grid>
<Typography variant="h2" style={{ marginTop: 16 }}>
{t("about_us.contributors")}
</Typography>
<Grid container spacing={1} style={{ marginTop: 8 }}>
{contributors.map(item => (
<Grid item xs={6} md={4} key={item}>
<Contributor githubId={item} />
</Grid>
))}
</Grid>
</SessionWrapper>
</SplitWrapper>
</Layout>
)
}
Example #15
| Source File: Footer.js From plataforma-sabia with MIT License | 4 votes |
|
Footer = ({ isAbout }) => (
<StyledFooter>
<FooterHeader>
<FooterHeaderContainer>
<FooterText>Siga o sabiá por onde ele for!</FooterText>
<FooterIconsList>
<FooterIconsListItem>
<a
href={socialMediaPages.facebook}
target="_blank"
rel="noopener noreferrer"
>
<FaFacebookF />
</a>
</FooterIconsListItem>
<FooterIconsListItem>
<a
href={socialMediaPages.twitter}
target="_blank"
rel="noopener noreferrer"
>
<FaTwitter />
</a>
</FooterIconsListItem>
<FooterIconsListItem>
<a
href={socialMediaPages.instagram}
target="_blank"
rel="noopener noreferrer"
>
<FaInstagram />
</a>
</FooterIconsListItem>
<FooterIconsListItem>
<a
href={socialMediaPages.linkedIn}
target="_blank"
rel="noopener noreferrer"
>
<FaLinkedin />
</a>
</FooterIconsListItem>
<FooterIconsListItem>
<a
href={socialMediaPages.youtube}
target="_blank"
rel="noopener noreferrer"
>
<FaYoutube />
</a>
</FooterIconsListItem>
</FooterIconsList>
</FooterHeaderContainer>
</FooterHeader>
<SiteInfo>
<SiteInfoContainer>
<div>
<Link href={internalPages.home}>
<img src="/logo-footer.svg" alt="Logo da Plataforma Sabiá" />
</Link>
</div>
<div>
<SiteInfoListTitle>Plataforma</SiteInfoListTitle>
<ul>
<SiteInfoListItem>
<Link
href={
isAbout
? landingPage.intro
: `${landingPage.url}${landingPage.intro}`
}
>
O que é?
</Link>
</SiteInfoListItem>
<SiteInfoListItem>
<Link
href={
isAbout
? landingPage.about
: `${landingPage.url}${landingPage.about}`
}
>
Quem somos
</Link>
</SiteInfoListItem>
</ul>
</div>
<div>
<SiteInfoListTitle>Funcionalidades</SiteInfoListTitle>
<ul>
<SiteInfoListItem>
<Link
href={
isAbout
? landingPage.features
: `${landingPage.url}${landingPage.features}`
}
>
Para Inventores
</Link>
</SiteInfoListItem>
<SiteInfoListItem>
<Link
href={
isAbout
? landingPage.features
: `${landingPage.url}${landingPage.features}`
}
>
Para a Sociedade
</Link>
</SiteInfoListItem>
<SiteInfoListItem>
<Link
href={
isAbout
? landingPage.features
: `${landingPage.url}${landingPage.features}`
}
>
Para Financiadores
</Link>
</SiteInfoListItem>
</ul>
</div>
<div>
<SiteInfoListTitle>Recursos</SiteInfoListTitle>
<ul>
<SiteInfoListItem>
<Link
href={socialMediaPages.podcast}
target="_blank"
rel="noopener noreferrer"
>
Podcasts
</Link>
</SiteInfoListItem>
<SiteInfoListItem>
<Link href={socialMediaPages.courses}>Cursos</Link>
</SiteInfoListItem>
<SiteInfoListItem>
<Link
href={socialMediaPages.blog}
target="_blank"
rel="noopener noreferrer"
>
Blog
</Link>
</SiteInfoListItem>
{/* <SiteInfoListItem>
<Link href={internalPages.ideas}>Banco de Ideias</Link>
</SiteInfoListItem>
<SiteInfoListItem>
<Link href={internalPages.announcements}>Banco de Editais</Link>
</SiteInfoListItem> */}
<SiteInfoListItem>
<Link href={internalPages.showcase}>Vitrines tecnológicas</Link>
</SiteInfoListItem>
</ul>
</div>
<div>
<SiteInfoListTitle>Contato</SiteInfoListTitle>
<ul>
<SiteInfoListItem>
<Link
href={
isAbout
? landingPage.contact
: `${landingPage.url}${landingPage.contact}`
}
>
Fale conosco
</Link>
</SiteInfoListItem>
</ul>
</div>
</SiteInfoContainer>
</SiteInfo>
<SiteSocket>
<SiteSocketContainer>
<div>
<span>Orgulhosamente</span> desenvolvido pela equipe da
<span> Plataforma Sabiá</span> na{' '}
<span>UNIVERSIDADE FEDERAL RURAL DO SEMI-ÁRIDO - UFERSA</span>.
</div>
<SiteSocketList>
<SiteSocketListItem>
<Link href={internalPages.privacyPolicy}>Política de Privacidade</Link>
</SiteSocketListItem>
<SiteSocketListItem>
<Link href={internalPages.termsOfUse}>Termos e Condições</Link>
</SiteSocketListItem>
<SiteSocketListItem>
<Link href={`${landingPage.url}${landingPage.contact}`}>Contato</Link>
</SiteSocketListItem>
</SiteSocketList>
</SiteSocketContainer>
</SiteSocket>
</StyledFooter>
)
Example #16
| Source File: index.js From cardano-documentation with MIT License | 4 votes |
|
Footer = ({ theme }) => {
const content = data.content
let logoURL = 'https://ucarecdn.com/75b74f03-ff04-47ba-821c-5e477d3d46d4/'
return (
<FooterSection theme={theme}>
<TopRow>
<Copyright>
<div>
<p>© IOHK 2015 - {new Date().getFullYear()}</p>
</div>
<div>
<Link
rel="noopener"
title="Input Output HK GitHub"
href="https://github.com/input-output-hk"
>
<DiGithubBadge size={25} />
</Link>
</div>
</Copyright>
<TopRight>
<Logo>
<Link
rel="noopener"
href="https://iohk.io/"
title="Input Output HK"
>
<div>
<Image
src={logoURL}
alt="IOHK logo"
sizeFactor={0.14}
maintainTransparency
/>
</div>
<div>
<p>IOHK supported project</p>
</div>
</Link>
</Logo>
<SocialLinks>
<SocialLink>
<Link
title="Input Output HK Twitter"
rel="noopener"
href="https://twitter.com/inputoutputHK"
>
<FaTwitter size={20} />
</Link>
</SocialLink>
<SocialLink>
<Link
title="Input Output HK Facebook"
rel="noopener"
href="https://www.facebook.com/iohk.io/"
>
<FaFacebookF size={20} />
</Link>
</SocialLink>
<SocialLink>
<Link
title="Input Output HK YouTube"
rel="noopener"
href="https://www.youtube.com/c/IohkIo"
>
<FaYoutube size={20} />
</Link>
</SocialLink>
<SocialLink>
<Link
title="Input Output HK Blog"
rel="noopener"
href="https://iohk.io/blog/"
>
<FaRss size={20} />
</Link>
</SocialLink>
</SocialLinks>
</TopRight>
</TopRow>
<hr />
<BottomRow>
<div style={{ marginBottom: '1rem' }}>
<img src={logo} alt="Cardano Logo" style={{ marginBottom: '1rem' }} />
<Markdown source={content.body} />
</div>
<div>
<LinksColumn>
<p>
<strong>{content.cardanoLinks.title}</strong>
</p>
<ul>
{content.cardanoLinks.links.map(({ href, label }) => (
<li key={`${href}_${label}`}>
<Link href={href} rel="noopener">
{label}
</Link>
</li>
))}
</ul>
</LinksColumn>
<LinksColumn>
<p>
<strong>{content.communityLinks.title}</strong>
</p>
<ul>
{content.communityLinks.links.map(({ href, label }) => (
<li key={`${href}_${label}`}>
<Link href={href} rel="noopener">
{label}
</Link>
</li>
))}
</ul>
</LinksColumn>
</div>
</BottomRow>
</FooterSection>
)
}
Example #17
| Source File: ShelleyHaskellStakingCalculator.js From testnets-cardano-org with MIT License | 4 votes |
|
Calculator = ({
currencies,
content,
initialValues,
initialCalculator,
origin,
pathname,
}) => {
const [allCurrencies, setAllCurrencies] = useState(
JSON.parse(JSON.stringify(currencies))
)
const [values, setValues] = useState(
getDefaultValues(allCurrencies[0], initialValues)
)
const [type, setType] = useState(initialCalculator)
const [showAdvancedOptions, setShowAdvancedOptions] = useState(false)
const [shareModalVisible, setShareModalVisible] = useState(false)
const [copied, setCopied] = useState(false)
const containerRef = useRef(null)
const copiedTimeout = useRef(null)
const modalContent = useRef(null)
function getInitialCurrency(key) {
return currencies.filter((currency) => currency.key === key).shift() || {}
}
function getTotalADAInCirculation(epoch, startingTotalADAInCirculation) {
let i = 1
let totalADAInCirculation =
startingTotalADAInCirculation || values.totalADAInCirculation
while (i < epoch) {
const reserve = values.totalADA - totalADAInCirculation
totalADAInCirculation += reserve * values.expansionRate
i++
}
return totalADAInCirculation
}
function getEpochDistributableRewards(
totalADAInCirculation,
transactionFeesPerEpoch
) {
const reserve = values.totalADA - totalADAInCirculation
return (
(reserve * values.expansionRate + transactionFeesPerEpoch) *
(1 - values.treasuryRate)
)
}
function getDistributableRewards(epoch) {
let transactionFeesPerEpoch = parseFloat(values.transactionFeesPerEpoch)
if (
!transactionFeesPerEpoch ||
isNaN(transactionFeesPerEpoch) ||
transactionFeesPerEpoch < 0
)
transactionFeesPerEpoch = 0
const totalADAInCirculation = getTotalADAInCirculation(epoch)
const epochDistribution = getEpochDistributableRewards(
totalADAInCirculation,
transactionFeesPerEpoch
)
return epochDistribution
}
const setValue = (key, value) => {
const newValues = { ...values, [key]: value }
if (
key === 'currency' &&
value.exchangeRate !== values.currency.exchangeRate
) {
const stakePoolFixedFeeInADA = toADA(parseFloat(values.stakePoolFixedFee))
newValues.stakePoolFixedFee = `${fromADA(
stakePoolFixedFeeInADA,
value.exchangeRate
)}`
}
setValues(newValues)
}
const updateType = (type) => (e) => {
e.preventDefault()
setType(type)
}
const fromADA = (amount, exchangeRate = null) => {
let exchangeRateUsed = parseFloat(
exchangeRate === null ? values.currency.exchangeRate : exchangeRate
)
if (isNaN(exchangeRateUsed) || exchangeRateUsed <= 0)
exchangeRateUsed =
getInitialCurrency(values.currency.key).exchangeRate || 1
return amount * exchangeRateUsed
}
const toADA = (amount, exchangeRate = null) => {
let exchangeRateUsed = parseFloat(
exchangeRate === null ? values.currency.exchangeRate : exchangeRate
)
if (isNaN(exchangeRateUsed) || exchangeRateUsed <= 0)
exchangeRateUsed =
getInitialCurrency(values.currency.key).exchangeRate || 1
return amount / exchangeRateUsed
}
const toggleShowAdvancedOptions = (e) => {
e.preventDefault()
setShowAdvancedOptions(!showAdvancedOptions)
}
const reset = () => {
const currency = currencies
.filter((currency) => currency.key === values.currency.key)
.shift()
setAllCurrencies(JSON.parse(JSON.stringify(currencies)))
setValues(getDefaultValues(currency, initialValues))
}
const onReset = (e) => {
e.preventDefault()
reset()
}
const getCurrencySymbol = (key) =>
(currencies.filter((currency) => currency.key === key).shift() || {})
.symbol || null
const normalizeLargeNumber = (number, dp = 0, preserveDP = false) => {
let negative = number < 0
const normalizedNumber = Math.abs((number || 0).toFixed(dp))
if (normalizedNumber === 0) negative = false
const asStringArray = `${normalizedNumber}`.split('.')
const n = asStringArray[0].split('').reverse()
let i = 3
while (i < n.length) {
n.splice(i, 0, ',')
i += 4
}
let finalNumber = n
.reverse()
.join('')
.concat(asStringArray[1] ? `.${asStringArray[1]}` : '')
if (!preserveDP && finalNumber.indexOf('.') > -1) {
while (finalNumber[finalNumber.length - 1] === '0') {
finalNumber = finalNumber.substring(0, finalNumber.length - 1)
}
}
return `${negative ? '-' : ''}${finalNumber.replace(/\.$/, '')}`
}
const getShareableLink = () => {
const params = new URLSearchParams()
const keys = [
'ada',
'stakePoolControl',
'operatorsStake',
'stakePoolMargin',
'stakePoolPerformance',
'totalStakePools',
'influenceFactor',
'transactionFeesPerEpoch',
'stakePoolFixedFee',
'treasuryRate',
'expansionRate',
'epochDurationInDays',
'currentEpoch',
]
keys.forEach((key) => params.set(key, values[key]))
params.set('calculator', type)
return `${origin}${pathname}?${params.toString()}`
}
const copyShareableLink = (e) => {
e.preventDefault()
const el = document.createElement('textarea')
const link = getShareableLink()
el.value = link
el.setAttribute('readonly', 'true')
el.setAttribute('aria-hidden', 'true')
el.setAttribute('tab-index', '-1')
el.style.position = 'absolute'
el.style.left = '-999999px'
modalContent.current.appendChild(el)
el.select()
document.execCommand('copy')
modalContent.current.removeChild(el)
clearTimeout(copiedTimeout.current)
setCopied(true)
copiedTimeout.current = setTimeout(() => setCopied(false), 500)
}
const CalculatorComponent = type === 'delegator' ? Delegator : Operator
return (
<Container ref={containerRef}>
<Introduction paddingBottom={1} textAlign="center">
<p>{content.staking_calculator.select_a_calculator}</p>
<p>{content.staking_calculator.i_want_to}</p>
</Introduction>
<CalculatorPicker>
<div>
<Button
variant={type === 'delegator' ? 'contained' : 'outlined'}
onClick={updateType('delegator')}
color="primary"
fullWidth
>
<DelegatorIcon active={type === 'delegator'} />
<span>{content.staking_calculator.delegate_my_stake}</span>
</Button>
<CardanoLogo active={type === 'delegator'} />
</div>
<div>
<Button
variant={type === 'operator' ? 'contained' : 'outlined'}
onClick={updateType('operator')}
color="primary"
fullWidth
>
<OperatorIcon active={type === 'operator'} />
<span>{content.staking_calculator.run_a_stake_pool}</span>
</Button>
<CardanoLogo active={type === 'operator'} />
</div>
</CalculatorPicker>
<Actions>
<div>
<div>
<Button
color="primary"
variant={showAdvancedOptions ? 'contained' : 'outlined'}
onClick={toggleShowAdvancedOptions}
fullWidth
>
{content.staking_calculator.show_advanced_options}
<Box component="span" marginLeft={0.8}>
{showAdvancedOptions ? <MdVisibilityOff /> : <MdVisibility />}
</Box>
</Button>
</div>
<div>
<Button
color="primary"
variant="outlined"
onClick={onReset}
fullWidth
>
{content.staking_calculator.reset}
<Box component="span" marginLeft={0.8}>
<MdRotateLeft />
</Box>
</Button>
</div>
</div>
<div>
<div>
<Button
color="primary"
variant="outlined"
onClick={(e) => {
e.preventDefault()
setShareModalVisible(true)
}}
fullWidth
>
{content.staking_calculator.share}
<Box component="span" marginLeft={0.8}>
<MdFileUpload />
</Box>
</Button>
{shareModalVisible && (
<Modal
open={shareModalVisible}
onClose={(e) => {
e.preventDefault()
setShareModalVisible(false)
}}
disableScrollLock
>
<ModalContent ref={modalContent}>
<CloseModal
href="#"
onClick={(e) => {
e.preventDefault()
setShareModalVisible(false)
}}
>
<MdClose />
</CloseModal>
<ModalContentInner>
<Box textAlign="center">
<ShareLinks>
<div>
<TwitterLink
href={`https://twitter.com/intent/tweet?text=${getShareableLink()}`}
>
<FaTwitter />{' '}
<span>{content.staking_calculator.tweet}</span>
</TwitterLink>
</div>
<div>
<FacebookLink
href={`https://www.facebook.com/dialog/share?href=${getShareableLink()}&display=popup&app_id=282617186477949&redirect_uri=https://facebook.com/`}
>
<FaFacebookF />{' '}
<span>{content.staking_calculator.share}</span>
</FacebookLink>
</div>
</ShareLinks>
<p>
<CopyToClipboardLink
href="#copy-to-clipboard"
onClick={copyShareableLink}
>
<FaClipboard />{' '}
<span className="text">
{content.staking_calculator.copy_to_clipboard}
</span>
{copied && (
<AnimatedClipboard>
<FaClipboard />
</AnimatedClipboard>
)}
</CopyToClipboardLink>
</p>
</Box>
</ModalContentInner>
</ModalContent>
</Modal>
)}
</div>
<div />
</div>
</Actions>
<Inputs>
<CalculatorComponent
values={values}
setValue={setValue}
content={content}
toADA={toADA}
fromADA={fromADA}
showAdvancedOptions={showAdvancedOptions}
HalfWidthGroup={HalfWidthGroup}
FullWidthGroup={FullWidthGroup}
getCurrencySymbol={getCurrencySymbol}
currencies={currencies}
normalizeLargeNumber={normalizeLargeNumber}
getDistributableRewards={getDistributableRewards}
getTotalADAInCirculation={getTotalADAInCirculation}
containerRef={containerRef}
/>
</Inputs>
</Container>
)
}
Example #18
| Source File: index.js From layer5-ng with Apache License 2.0 | 4 votes |
|
FooterClassic = () => {
return (
<FotterWrapper>
<img src={FooterBGTwo} alt="img" className="section__particle one" />
<ParticleComponent />
<Container>
<Row>
<Col xs={12} sm={6} lg={3}>
<div className="footer-widgets first">
<Link to="#" className="footer-logo">
<img src={logo} alt="logo" />
</Link>
<form className="subscribe-form">
<input type="text" placeholder="Search here..." />
<Button>
<FaEnvelope />
</Button>
</form>
</div>
</Col>
<Col xs={12} sm={6} lg={2}>
<div className="footer-widgets">
<h3 className="widget-title">Download</h3>
<ul className="widget-catagory">
<li>
<Link to="#">Company</Link>
</li>
<li>
<Link to="#">Android App</Link>
</li>
<li>
<Link to="#">ios App</Link>
</li>
<li>
<Link to="#">Desktop</Link>
</li>
</ul>
</div>
</Col>
<Col xs={12} sm={6} lg={3}>
<div className="footer-widgets">
<h3 className="widget-title">Help</h3>
<ul className="widget-catagory">
<li>
<Link to="#">FAQ</Link>
</li>
<li>
<Link to="#">Privecy</Link>
</li>
<li>
<Link to="#">Reporting</Link>
</li>
<li>
<Link to="#">Terms & Condition</Link>
</li>
</ul>
</div>
</Col>
<Col xs={12} sm={6} lg={4}>
<div className="footer-widgets">
<h3 className="widget-title">Follow US</h3>
<ul className="social">
<li>
<Link to="#">
<FaFacebookF />
</Link>
</li>
<li>
<Link to="#">
<FaTwitter />
</Link>
</li>
<li>
<Link to="#">
<FaInstagram />
</Link>
</li>
<li>
<Link to="#">
<FaLinkedinIn />
</Link>
</li>
<li>
<Link to="#">
<FaPinterestP />
</Link>
</li>
</ul>
<p className="copyright-text">
Copyright © 2020 Design By
<Link to="#">Devscorn</Link>
</p>
</div>
</Col>
</Row>
</Container>
</FotterWrapper>
);
}
Example #19
| Source File: index.js From layer5-ng with Apache License 2.0 | 4 votes |
|
Footer = () => {
return (
<FotterWrapper>
<img className="section__particle one" alt="img" src={particleOne} alt="appion app landing" />
<Container>
<Row>
<Col xs={12} sm={6} lg={3}>
<div className="footer-widgets first">
<Link className="footer-logo" to="#">
<img src={logo} alt="logo" />
</Link>
<ul className="info">
<li>
<FiMail />
<Link className="anchor" to="#">
[email protected]
</Link>
</li>
<li>
<FiPhoneCall />
<Link className="anchor" to="#">
+88 12345 697858
</Link>
</li>
</ul>
<ul className="social">
<li>
<Link className="anchor" to="#">
<FaFacebookF />
</Link>
</li>
<li>
<Link className="anchor" to="#">
<FaTwitter />
</Link>
</li>
<li>
<Link className="anchor" to="#">
<FaLinkedinIn />
</Link>
</li>
</ul>
</div>
</Col>
<Col xs={12} sm={6} lg={3}>
<div className="footer-widgets">
<h3 className="widget-title">Services</h3>
<ul className="widget-catagory">
<li>
<Link className="anchor" to="#">
Web Developments
</Link>
</li>
<li>
<Link className="anchor" to="#">
UX/UI Design
</Link>
</li>
<li>
<Link className="anchor" to="#">
Graphic Design
</Link>
</li>
<li>
<Link className="anchor" to="#">
Software Development
</Link>
</li>
<li>
<Link className="anchor" to="#">
Contact
</Link>
</li>
</ul>
</div>
</Col>
<Col xs={12} sm={6} lg={3}>
<div className="footer-widgets">
<h3 className="widget-title">About Us</h3>
<ul className="widget-catagory">
<li>
<Link className="anchor" to="#">
About Us
</Link>
</li>
<li>
<Link className="anchor" to="#">
Work Portfolio
</Link>
</li>
<li>
<Link className="anchor" to="#">
Team
</Link>
</li>
<li>
<Link className="anchor" to="#">
Plan & Pricing
</Link>
</li>
<li>
<Link className="anchor" to="#">
Company News
</Link>
</li>
</ul>
</div>
</Col>
<Col xs={12} sm={6} lg={3}>
<div className="footer-widgets">
<h3 className="widget-title">Our Address</h3>
<p>
1370 Roosevelt Street, <br />
Little York City, New Jersey <br />
08834
</p>
</div>
</Col>
</Row>
<div className="footer-bottom">
<ul className="footer-menu">
<li>
<Link className="anchor" to="#">
Terms
</Link>
</li>
<li>
<Link className="anchor" to="#">
Condition
</Link>
</li>
<li>
<Link className="anchor" to="#">
Contact
</Link>
</li>
<li>
<Link className="anchor" to="#">
Help
</Link>
</li>
</ul>
<p className="copyright-text">
Copyright @
<Link className="anchor" to="#">
Devscorn
</Link>
| All Right Reserved 2020
</p>
</div>
</Container>
</FotterWrapper>
);
}
Example #20
| Source File: Footer.js From airdnd-frontend with MIT License | 4 votes |
|
Footer = ({ ...rest }) => {
return (
<StFooter {...rest}>
<StUpperWrapper>
<StContentSection>
<StContentTitle>소개</StContentTitle>
<StContentList>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/d/howairbnbworks"
target="_blank"
>
에어비앤비 이용 방법
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://news.airbnb.com/ko/"
target="_blank"
>
뉴스룸
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnbcitizen.com/?utm_source=airbnb&utm_medium=footer&utm_campaign=product"
target="_blank"
>
Airbnb Citizen
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/plus"
target="_blank"
>
에어비앤비 플러스
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/luxury"
target="_blank"
>
에어비앤비 Luxe
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.hoteltonight.com/?utm_source_name=Airbnb&utm_campaign_name=Dr_Us_Desktop_Airbnb_Footer"
target="_blank"
>
호텔투나잇
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/work?s=footer"
target="_blank"
>
에어비앤비 비즈니스 프로그램
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/d/olympics"
target="_blank"
>
올림픽
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://careers.airbnb.com/"
target="_blank"
>
채용정보
</StContentItemLink>
</StContentItem>
</StContentList>
</StContentSection>
<StContentSection>
<StContentTitle>커뮤니티</StContentTitle>
<StContentList>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/diversity"
target="_blank"
>
다양성 및 소속감
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/d/accessibility"
target="_blank"
>
접근성
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/magazine"
target="_blank"
>
에어비앤비 매거진
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/associates?from=footer"
target="_blank"
>
에어비앤비 어소시에이트
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/d/covid19relief"
target="_blank"
>
구호 인력을 위한 숙소
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/invite?r=6"
target="_blank"
>
친구 초대하기
</StContentItemLink>
</StContentItem>
</StContentList>
</StContentSection>
<StContentSection>
<StContentTitle>호스팅하기</StContentTitle>
<StContentList>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/host/homes?from_footer=1"
target="_blank"
>
숙소 호스팅
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/d/onlinehost"
target="_blank"
>
온라인 체험 호스팅
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/host/experiences"
target="_blank"
>
체험 호스팅하기
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/resources/hosting-homes/t/leadership-updates-35"
target="_blank"
>
브라이언 체스키 CEO의 메시지
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/help/article/1387/%ED%95%9C%EA%B5%AD%EC%97%90%EC%84%9C-%EC%B1%85%EC%9E%84%EA%B0%90-%EC%9E%88%EB%8A%94-%ED%98%B8%EC%8A%A4%ED%8C%85-%ED%95%98%EA%B8%B0"
target="_blank"
>
책임감 있는 호스팅
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/openhomes?from_footer=1"
target="_blank"
>
Open Homes
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/resources/hosting-homes"
target="_blank"
>
자료 센터
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://community.withairbnb.com/t5/Community-Center-KR/ct-p/Community-Center-Korean"
target="_blank"
>
커뮤니티 센터
</StContentItemLink>
</StContentItem>
</StContentList>
</StContentSection>
<StContentSection>
<StContentTitle>에어비앤비 지원</StContentTitle>
<StContentList>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/resources/hosting-homes"
target="_blank"
>
코로나19 관련 업데이트
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/help/home"
target="_blank"
>
도움말 센터
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/help/article/2701/%EC%BD%94%EB%A1%9C%EB%82%98%EB%B0%94%EC%9D%B4%EB%9F%AC%EC%8A%A4%EA%B0%90%EC%97%BC%EC%A6%9D19%EC%BD%94%EB%A1%9C%EB%82%9819-%EA%B4%80%EB%A0%A8-%EC%A0%95%EC%83%81%EC%B0%B8%EC%9E%91%EC%9D%B4-%EA%B0%80%EB%8A%A5%ED%95%9C-%EC%83%81%ED%99%A9-%EC%A0%95%EC%B1%85"
target="_blank"
>
예약 취소 옵션
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/neighbors"
target="_blank"
>
에어비앤비 이웃 민원 지원
</StContentItemLink>
</StContentItem>
<StContentItem>
<StContentItemLink
href="https://www.airbnb.co.kr/trust"
target="_blank"
>
신뢰와 안전
</StContentItemLink>
</StContentItem>
</StContentList>
</StContentSection>
</StUpperWrapper>
<StLowerWrapper>
<StLowerLeftWrapper>
<StCopyRight>
© 2020 DEVengersAssemble. All rights reserved
</StCopyRight>
<StRuleList>
<StRuleItem>
<StRuleLink
href="https://www.airbnb.co.kr/terms/privacy_policy"
target="_blank"
>
개인정보 처리방침
</StRuleLink>
</StRuleItem>
<StDot aria-hidden="true">・</StDot>
<StRuleItem>
<StRuleLink href="https://www.airbnb.co.kr/terms" target="_blank">
이용약관
</StRuleLink>
</StRuleItem>
<StDot aria-hidden="true">・</StDot>
<StRuleItem>
<StRuleLink
href="https://www.airbnb.co.kr/sitemaps/v2"
target="_blank"
>
사이트맵
</StRuleLink>
</StRuleItem>
<StDot aria-hidden="true">・</StDot>
<StRuleItem>
<StRuleLink
href="https://www.airbnb.co.kr/home/updated_cancellation_policies?korean_strict_policy=true#strict"
target="_blank"
>
한국의 변경된 환불 정책
</StRuleLink>
</StRuleItem>
</StRuleList>
</StLowerLeftWrapper>
<StLowerRightWrapper>
<StSettingButtonWrapper>
<StSettingButton btnType="underlined">
<span className="a11yHidden">언어 바꾸기 버튼</span>
<FiGlobe />
<StButtonText>한국어(KR)</StButtonText>
</StSettingButton>
<StSettingButton btnType="underlined" height="20px" fontSize="14px">
<span className="a11yHidden">화폐 바꾸기 버튼</span>
<FaWonSign />
<StButtonText>KRW</StButtonText>
</StSettingButton>
</StSettingButtonWrapper>
<StSiteLinkList>
<StSiteLinkItem>
<StSiteLink
href="https://www.facebook.com/AirbnbKorea"
target="_blank"
>
<span className="a11yHidden">페이스북으로 이동하기</span>
<FaFacebookF />
</StSiteLink>
</StSiteLinkItem>
<StSiteLinkItem>
<StSiteLink href="https://twitter.com/airbnb" target="_blank">
<span className="a11yHidden">트위터로 이동하기</span>
<FaTwitter />
</StSiteLink>
</StSiteLinkItem>
<StSiteLinkItem>
<StSiteLink
href="https://www.instagram.com/airbnb/"
target="_blank"
>
<span className="a11yHidden">인스타그램으로 이동하기</span>
<FaInstagram />
</StSiteLink>
</StSiteLinkItem>
</StSiteLinkList>
</StLowerRightWrapper>
</StLowerWrapper>
</StFooter>
);
}
Example #21
| Source File: LoginModal.js From airdnd-frontend with MIT License | 4 votes |
|
LoginModal = ({
modalVisible,
form,
invalid,
refObj,
loading,
result,
isPwdShown,
onFormChange,
cleanupModal,
openSignupMenuModal,
closeModal,
onToggleShowPwd,
handleSubmit,
}) => {
const { email, pwd } = form;
const { emailRef, pwdRef } = refObj;
return (
<StLoginModal
modalState={modalVisible}
header
width="570px"
height="545px"
title="로그인"
setModalState={closeModal}
cleanup={cleanupModal}
>
<StLoginModalWrapper>
<GoogleLogin
clientId={process.env.REACT_APP_GOOGLE_LOGIN_API_KEY}
cookiePolicy={'single_host_origin'}
onSuccess={res => console.log(res)}
onFailure={res => console.log(res)}
render={() => (
<StFacebookButton>
<FaFacebookF />
<StButtonText>페이스북 계정으로 로그인</StButtonText>
</StFacebookButton>
)}
></GoogleLogin>
<GoogleLogin
clientId={process.env.REACT_APP_GOOGLE_LOGIN_API_KEY}
cookiePolicy={'single_host_origin'}
onSuccess={res => console.log(res)}
onFailure={res => console.log(res)}
render={() => (
<StGoogleButton>
<FcGoogle />
<StButtonText>구글 계정으로 로그인</StButtonText>
</StGoogleButton>
)}
></GoogleLogin>
<StDividerLine />
<StDividerText>또는</StDividerText>
<StLoginForm onSubmit={handleSubmit}>
{result && result !== 'Success' && (
<StResultWrapper result={result}>
<StErrorWrapper>
<AiOutlineWarning></AiOutlineWarning>
</StErrorWrapper>
<StResultTextWrapper>
{result === 'NoId' && (
<StResultText>
이 이메일 주소와 연결된 계정이 없습니다. 다른 이메일 주소를
사용해 보세요.
</StResultText>
)}
{result === 'WrongPwd' && (
<StResultText>비밀번호가 틀립니다.</StResultText>
)}
</StResultTextWrapper>
</StResultWrapper>
)}
<StInputWrapper>
<StInput
value={email}
onChange={({ target: { value } }) => onFormChange('email', value)}
focusBorderColor
placeholder="이메일 주소"
ref={emailRef}
isInvalid={invalid.email}
></StInput>
<RiMailLine />
{email.length === 0 && invalid.email && (
<StValidationText isInvalid={invalid.email}>
이메일을 입력하세요.
</StValidationText>
)}
{email.length > 0 && invalid.email && (
<StValidationText isInvalid={invalid.email}>
이메일 형식이 맞지 않습니다.
</StValidationText>
)}
</StInputWrapper>
<StInputWrapper name="password">
<StInput
type={isPwdShown ? 'text' : 'password'}
value={pwd}
onChange={({ target: { value } }) => onFormChange('pwd', value)}
focusBorderColor
placeholder="비밀번호"
ref={pwdRef}
isInvalid={invalid.pwd}
></StInput>
<RiLock2Line />
{pwd.length === 0 && invalid.pwd && (
<StValidationText isInvalid={invalid.pwd}>
비밀번호를 입력하세요.
</StValidationText>
)}
{pwd.length > 0 && invalid.pwd && (
<StValidationText isInvalid={invalid.pwd}>
비밀번호는 최소 8글자 이상이어야 합니다. 다시 시도해 주세요.
</StValidationText>
)}
</StInputWrapper>
<StShowPwdButtonWrapper>
<StShowPwdButton onClick={onToggleShowPwd}>
{isPwdShown ? '비밀번호 숨기기' : '비밀번호 보이기'}
</StShowPwdButton>
</StShowPwdButtonWrapper>
<StSubmitButton border="none" type="submit" disabled={loading}>
{loading ? <StSubmitLoader /> : '로그인하기'}
</StSubmitButton>
</StLoginForm>
<StDividerLine />
<StSignupButtonWrapper>
<StSignupText>에어비앤비 계정이 없으세요? </StSignupText>
<StSignupButton btnType="color" onClick={openSignupMenuModal}>
회원가입하기
</StSignupButton>
</StSignupButtonWrapper>
</StLoginModalWrapper>
</StLoginModal>
);
}
