react-icons/fa#FaInstagram JavaScript Examples
The following examples show how to use
react-icons/fa#FaInstagram.
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: social-icon.js From gatsby-theme-intro with MIT License | 6 votes |
|
SocialIcon = ({ name, ...params }) => {
const icons = {
behance: FaBehance,
dribbble: FaDribbble,
facebook: FaFacebook,
github: FaGithub,
goodreads: FaGoodreadsG,
medium: FaMediumM,
instagram: FaInstagram,
linkedin: FaLinkedinIn,
producthunt: FaProductHunt,
twitter: FaTwitter,
youtube: FaYoutube,
xing: FaXing,
}
const Icon = icons[name]
return Icon ? <Icon {...params} /> : null
}
Example #2
| Source File: Footer.js From Winter-of-Code-2.0-frontend with MIT License | 6 votes |
|
Footer = () => {
return (
<footer className="footer">
<div className="contact">
<a href="https://twitter.com/gdsciiitkalyani" target="_blank" rel="noreferrer" className="icon twitter"><FaTwitter size = '5x'/></a>
<a href="https://www.instagram.com/gdsciiitkalyani/" target="_blank" rel="noreferrer" className="icon instagram"><FaInstagram size = '5x'/></a>
<a href="https://www.linkedin.com/company/gdsc-iiit-kalyani/" target="_blank" rel="noreferrer" className="icon linkedin"><FaLinkedin size = '5x'/></a>
<a href="https://mail.google.com/" target="_blank" rel="noreferrer" className="icon email"><FaEnvelope size = '5x'/></a>
<a href="https://github.com/GDSC-IIIT-Kalyani" target="_blank" rel="noreferrer" className="icon github"><FaGithub size='5x'/></a>
</div>
<div className="copyright">
<h2><FaCopyright/> 2021-22 GDSC IIIT Kalyani</h2>
</div>
</footer>
);
}
Example #3
| Source File: Footer.js From Cross-woc with MIT License | 6 votes |
|
function Footer() {
//To get ongoing year
const currentYear = new Date().getFullYear();
return (
<div className='Footer text-center' id='contact'>
{/* Contact Us Heading */}
<h1 className="footer-heading">Contact Us</h1>
{/* Social Media Icons */}
<div className="footer-media">
<a className="footer-icon" href="/" target="_blank" title="Facebook"><FaFacebook size="20px" color="purple" /></a>
<a className="footer-icon" href="/" target="_blank" title="Twitter"><FaTwitter size="20px" color="purple" /></a>
<a className="footer-icon" href="/" target="_blank" title="Instagram"><FaInstagram size="20px" color="purple" /></a>
<a className="footer-icon" href="/" target="_blank" title="Linkedin"><FaLinkedinIn size="20px" color="purple" /></a>
<a className="footer-icon" href="/" target="_blank" title="Mail"><FaEnvelope size="20px" color="purple" /></a>
</div>
{/* Copyright Item */}
<div className="footer-copyright-item">
<p>Made with ❤️ by <a className="ieeelink" href="https://ieeedtu.in/" target="_blank" rel="noreferrer"> <span className="span"> IEEE DTU</span></a></p>
</div>
<div className="footer-copyright-item">
<p>© Copyright {currentYear} IEEE DTU. All rights reserved.</p>
</div>
</div>
)
}
Example #4
| 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 #5
| Source File: SocialIcons.js From caasy-nextjs-blog-template with MIT License | 6 votes |
|
SocialIcons = () => (
<div className={styling.social}>
<a href={blogConfig.social.youtube} target='_blank' rel='noreferrer' hidden={!blogConfig.social.youtube}>
<FaYoutube />
</a>
<a href={blogConfig.social.linkedin} target='_blank' rel='noreferrer' hidden={!blogConfig.social.linkedin}>
<FaLinkedin />
</a>
<a href={blogConfig.social.dev} target='_blank' rel='noreferrer' hidden={!blogConfig.social.dev}>
<FaDev />
</a>
<a href={blogConfig.social.facebook} target='_blank' rel='noreferrer' hidden={!blogConfig.social.facebook}>
<FaFacebook />
</a>
<a href={blogConfig.social.instagram} target='_blank' rel='noreferrer' hidden={!blogConfig.social.instagram}>
<FaInstagram />
</a>
<a href={blogConfig.social.twitter} target='_blank' rel='noreferrer' hidden={!blogConfig.social.twitter}>
<FaTwitter />
</a>
<a href={blogConfig.social.github} target='_blank' rel='noreferrer' hidden={!blogConfig.social.github}>
<FaGithub />
</a>
</div>
)
Example #6
| Source File: SocialIcon.js From portfolio-react with MIT License | 6 votes |
|
function SocialIcon() {
return (
<SocialDiv>
<ul>
<li className="item">
<a
href="https://www.linkedin.com/in/your_username/"
target="_blank"
rel="noopener noreferrer"
>
<FaLinkedin />
</a>
</li>
<li className="item">
<a
href="https://github.com/your_username/"
target="_blank"
rel="noopener noreferrer"
>
<FaGithub />
</a>
</li>
<li className="item">
<a
href="https://github.com/your_username/"
target="_blank"
rel="noopener noreferrer"
>
<FaInstagram />
</a>
</li>
</ul>
</SocialDiv>
);
}
Example #7
| 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 #8
| Source File: FixSocialIcon.js From portfolio-react with MIT License | 6 votes |
|
function FixSocialIcon() {
return (
<Social>
<ul>
<li className="item">
<a
href="https://www.linkedin.com/in/your_username/"
target="_blank"
rel="noopener noreferrer"
>
<FaLinkedin />
</a>
</li>
<li className="item">
<a
href="https://github.com/your_username/"
target="_blank"
rel="noopener noreferrer"
>
<FaGithub />
</a>
</li>
<li className="item">
<a
href="https://github.com/your_username/"
target="_blank"
rel="noopener noreferrer"
>
<FaInstagram />
</a>
</li>
</ul>
</Social>
);
}
Example #9
| Source File: Header.jsx From emprezzo with MIT License | 5 votes |
|
Header = ({ children, title, date, subtitle, cover, socialDetails, likeEnabled }) => (
<Wrapper>
<Helmet>
<script src="//w.likebtn.com/js/w/widget.js"></script>
</Helmet>
{cover && typeof cover === 'object' &&
<Img fluid={cover || {} || [] || ''} />
}
{cover && typeof cover === 'string' &&
<img src={cover || {} || [] || ''} style={{ width: '100%', objectFit: 'fill', objectPosition: '50% 50%' }} />
}
<Text>
{likeEnabled &&
<img src={likeEnabled.storeProfileImage} title={title} alt={title} style={{ 'margin-top': '4rem', 'max-height': '80px', 'textAlign': 'center', 'borderRadius': '0%' }} />
}
{likeEnabled &&
<span
className="likebtn-wrapper"
data-theme="custom"
data-icon_l="str1-o"
data-icon_d="sgn9-f"
data-icon_l_c="rgb(55,24,71)"
data-icon_l_c_v="rgb(192,76,253)"
data-icon_d_c="rgb(55,24,71)"
data-icon_d_c_v="rgba(253,76,97,0.88)"
data-bg_c="#ffffff"
data-bg_c_v="#ffffff"
data-f_family="Courier New"
data-i18n_like="favorite"
data-ef_voting="bounce"
data-white_label="true"
data-rich_snippet="true"
data-identifier={likeEnabled.storeName}
data-counter_count="true"
data-popup_disabled="true"
data-share_enabled="false"
data-addthis_pubid="ra-5f7b9ff19ad7a3f6"
data-item_url={likeEnabled.storeURL}
data-item_title={likeEnabled.storeName}
data-item_image={likeEnabled.storeProfileImage}
data-lazy_load="false"
data-tooltip_enabled="false"
data-site_id="5f795f90943ec9bf477cbfbe"
>
</span>
}
<h3 style={{ 'margin-bottom': '0.5rem'}}>{title}</h3>
<h4>{subtitle}</h4>
{socialDetails &&
<SocialIcons>
{socialDetails.InstagramLink &&
<a href={socialDetails.InstagramLink} target="_blank"><FaInstagram size="32" color="black" /></a>
}
{socialDetails.FacebookLink &&
<a href={socialDetails.FacebookLink} target="_blank"><FaFacebookSquare size="32" color="black" /></a>
}
{socialDetails.PinterestLink &&
<a href={socialDetails.PinterestLink} target="_blank"><FaPinterestSquare size="32" color="black" /></a>
}
{socialDetails.TwitterLink &&
<a href={socialDetails.TwitterLink} target="_blank"><FaTwitterSquare size="32" color="black" /></a>
}
{socialDetails.YouTubeLink &&
<a href={socialDetails.YouTubeLink} target="_blank"><FaYoutube size="32" color="black" /></a>
}
</SocialIcons>
}
{children && <Subtitle dangerouslySetInnerHTML={{ __html: children }} />}
</Text>
</Wrapper>
)
Example #10
| Source File: Footer.jsx From gatsby-contentful-portfolio with MIT License | 5 votes |
|
Footer = () => {
const {
site: {
meta: { links },
},
} = useStaticQuery(graphql`
query FooterQuery {
site {
meta: siteMetadata {
links {
facebook
instagram
pinterest
twitter
}
}
}
}
`)
return (
<div className="container py-12 md:flex md:items-center md:justify-between">
<ul className="flex justify-center md:order-2">
<FooterLink href={links.twitter} icon={FaTwitter} label="Twitter" />
<FooterLink href={links.facebook} icon={FaFacebook} label="Facebook" />
<FooterLink
href={links.instagram}
icon={FaInstagram}
label="Instagram"
/>
<FooterLink
href={links.pinterest}
icon={FaPinterest}
label="Pinterest"
/>
</ul>
<div className="mt-8 md:mt-0 md:order-1">
<p className="text-center text-sm md:text-base text-gray-700">
© 2020 John Doe. All rights reserved.
</p>
</div>
</div>
)
}
Example #11
| 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 #12
| Source File: Footer.js From dscmec-website with MIT License | 5 votes |
|
function Footer() {
return (
<div className="footer">
<img className="footer-background" src={footerBackground} alt="" />
<div className="footer-container">
<div className="footer-icons">
<a
href="https://www.instagram.com/dscmec/"
target="_blank"
rel="noreferrer noopener"
>
<FaInstagram className="f-icon" />
</a>
<a
href="https://www.youtube.com/channel/UC3sLPfRwlw6ytRtYT91XKWQ/featured"
target="_blank"
rel="noreferrer noopener"
>
<FaYoutube className="f-icon" />
</a>
<a
href="https://twitter.com/dsc_mec"
target="_blank"
rel="noreferrer noopener"
>
<FaTwitter className="f-icon" />
</a>
<a
href="https://www.linkedin.com/showcase/dscmec/"
target="_blank"
rel="noreferrer noopener"
>
<FaLinkedinIn className="f-icon" />
</a>
</div>
<div className="footer-copyright">
©
<div>
<img src={logo} className="footer-logo" alt="" />
</div>
Developer Student Clubs MEC {new Date().getFullYear()}
</div>
</div>
</div>
);
}
Example #13
| 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 #14
| 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 #15
| 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 #16
| 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 #17
| 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 #18
| 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 #19
| Source File: ProfileCard.js From Winter-of-Code-2.0-frontend with MIT License | 5 votes |
|
Card = ({ isHighlighted, name, image, role, socialMedia }) => {
return (
<div className={isHighlighted ? "active-card" : "card"}>
<div className="imgBx">
<img src={image} alt="profile pic of developer" />
</div>
<div className="content">
<div className="details">
<h2>
{name}
<br />
<span>{role}</span>
</h2>
<ul className="sci">
<li>
<a href={socialMedia.github} target="_blank" rel="noreferrer">
<FaGithub />
</a>
</li>
<li>
<a href={socialMedia.twitter} target="_blank" rel="noreferrer">
<FaTwitter />
</a>
</li>
<li>
<a href={socialMedia.linkedin} target="_blank" rel="noreferrer">
<FaLinkedin />
</a>
</li>
<li>
<a href={socialMedia.instagram} target="_blank" rel="noreferrer">
<FaInstagram />
</a>
</li>
</ul>
</div>
</div>
</div>
);
}
Example #20
| 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 #21
| 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 #22
| 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 #23
| Source File: Contacts.js From developer-portfolio with Apache License 2.0 | 4 votes |
|
function Contacts() {
const [open, setOpen] = useState(false);
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
const [success, setSuccess] = useState(false);
const [errMsg, setErrMsg] = useState('');
const { theme } = useContext(ThemeContext);
const handleClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
setOpen(false);
};
const useStyles = makeStyles((t) => ({
input: {
border: `4px solid ${theme.primary80}`,
backgroundColor: `${theme.secondary}`,
color: `${theme.tertiary}`,
fontFamily: 'var(--primaryFont)',
fontWeight: 500,
transition: 'border 0.2s ease-in-out',
'&:focus': {
border: `4px solid ${theme.primary600}`,
},
},
message: {
border: `4px solid ${theme.primary80}`,
backgroundColor: `${theme.secondary}`,
color: `${theme.tertiary}`,
fontFamily: 'var(--primaryFont)',
fontWeight: 500,
transition: 'border 0.2s ease-in-out',
'&:focus': {
border: `4px solid ${theme.primary600}`,
},
},
label: {
backgroundColor: `${theme.secondary}`,
color: `${theme.primary}`,
fontFamily: 'var(--primaryFont)',
fontWeight: 600,
fontSize: '0.9rem',
padding: '0 5px',
transform: 'translate(25px,50%)',
display: 'inline-flex',
},
socialIcon: {
width: '45px',
height: '45px',
borderRadius: '50%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '21px',
backgroundColor: theme.primary,
color: theme.secondary,
transition: '250ms ease-in-out',
'&:hover': {
transform: 'scale(1.1)',
color: theme.secondary,
backgroundColor: theme.tertiary,
},
},
detailsIcon: {
backgroundColor: theme.primary,
color: theme.secondary,
borderRadius: '50%',
width: '45px',
height: '45px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '23px',
transition: '250ms ease-in-out',
flexShrink: 0,
'&:hover': {
transform: 'scale(1.1)',
color: theme.secondary,
backgroundColor: theme.tertiary,
},
},
submitBtn: {
backgroundColor: theme.primary,
color: theme.secondary,
transition: '250ms ease-in-out',
'&:hover': {
transform: 'scale(1.08)',
color: theme.secondary,
backgroundColor: theme.tertiary,
},
},
}));
const classes = useStyles();
const handleContactForm = (e) => {
e.preventDefault();
if (name && email && message) {
if (isEmail(email)) {
const responseData = {
name: name,
email: email,
message: message,
};
axios.post(contactsData.sheetAPI, responseData).then((res) => {
console.log('success');
setSuccess(true);
setErrMsg('');
setName('');
setEmail('');
setMessage('');
setOpen(false);
});
} else {
setErrMsg('Invalid email');
setOpen(true);
}
} else {
setErrMsg('Enter all the fields');
setOpen(true);
}
};
return (
<div
className='contacts'
id='contacts'
style={{ backgroundColor: theme.secondary }}
>
<div className='contacts--container'>
<h1 style={{ color: theme.primary }}>Contacts</h1>
<div className='contacts-body'>
<div className='contacts-form'>
<form onSubmit={handleContactForm}>
<div className='input-container'>
<label htmlFor='Name' className={classes.label}>
Name
</label>
<input
placeholder='John Doe'
value={name}
onChange={(e) => setName(e.target.value)}
type='text'
name='Name'
className={`form-input ${classes.input}`}
/>
</div>
<div className='input-container'>
<label
htmlFor='Email'
className={classes.label}
>
Email
</label>
<input
placeholder='[email protected]'
value={email}
onChange={(e) => setEmail(e.target.value)}
type='email'
name='Email'
className={`form-input ${classes.input}`}
/>
</div>
<div className='input-container'>
<label
htmlFor='Message'
className={classes.label}
>
Message
</label>
<textarea
placeholder='Type your message....'
value={message}
onChange={(e) => setMessage(e.target.value)}
type='text'
name='Message'
className={`form-message ${classes.message}`}
/>
</div>
<div className='submit-btn'>
<button
type='submit'
className={classes.submitBtn}
>
<p>{!success ? 'Send' : 'Sent'}</p>
<div className='submit-icon'>
<AiOutlineSend
className='send-icon'
style={{
animation: !success
? 'initial'
: 'fly 0.8s linear both',
position: success
? 'absolute'
: 'initial',
}}
/>
<AiOutlineCheckCircle
className='success-icon'
style={{
display: !success
? 'none'
: 'inline-flex',
opacity: !success ? '0' : '1',
}}
/>
</div>
</button>
</div>
</form>
<Snackbar
anchorOrigin={{
vertical: 'top',
horizontal: 'center',
}}
open={open}
autoHideDuration={4000}
onClose={handleClose}
>
<SnackbarContent
action={
<React.Fragment>
<IconButton
size='small'
aria-label='close'
color='inherit'
onClick={handleClose}
>
<CloseIcon fontSize='small' />
</IconButton>
</React.Fragment>
}
style={{
backgroundColor: theme.primary,
color: theme.secondary,
fontFamily: 'var(--primaryFont)',
}}
message={errMsg}
/>
</Snackbar>
</div>
<div className='contacts-details'>
<a
href={`mailto:${contactsData.email}`}
className='personal-details'
>
<div className={classes.detailsIcon}>
<FiAtSign />
</div>
<p style={{ color: theme.tertiary }}>
{contactsData.email}
</p>
</a>
<a
href={`tel:${contactsData.phone}`}
className='personal-details'
>
<div className={classes.detailsIcon}>
<FiPhone />
</div>
<p style={{ color: theme.tertiary }}>
{contactsData.phone}
</p>
</a>
<div className='personal-details'>
<div className={classes.detailsIcon}>
<HiOutlineLocationMarker />
</div>
<p style={{ color: theme.tertiary }}>
{contactsData.address}
</p>
</div>
<div className='socialmedia-icons'>
{socialsData.twitter && (
<a
href={socialsData.twitter}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaTwitter aria-label='Twitter' />
</a>
)}
{socialsData.github && (
<a
href={socialsData.github}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaGithub aria-label='GitHub' />
</a>
)}
{socialsData.linkedIn && (
<a
href={socialsData.linkedIn}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaLinkedinIn aria-label='LinkedIn' />
</a>
)}
{socialsData.instagram && (
<a
href={socialsData.instagram}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaInstagram aria-label='Instagram' />
</a>
)}
{socialsData.medium && (
<a
href={socialsData.medium}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaMediumM aria-label='Medium' />
</a>
)}
{socialsData.blogger && (
<a
href={socialsData.blogger}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaBloggerB aria-label='Blogger' />
</a>
)}
{socialsData.youtube && (
<a
href={socialsData.youtube}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaYoutube aria-label='YouTube' />
</a>
)}
{socialsData.reddit && (
<a
href={socialsData.reddit}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaRedditAlien aria-label='Reddit' />
</a>
)}
{socialsData.stackOverflow && (
<a
href={socialsData.stackOverflow}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaStackOverflow aria-label='Stack Overflow' />
</a>
)}
{socialsData.codepen && (
<a
href={socialsData.codepen}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaCodepen aria-label='CodePen' />
</a>
)}
{socialsData.gitlab && (
<a
href={socialsData.gitlab}
target='_blank'
rel='noreferrer'
className={classes.socialIcon}
>
<FaGitlab aria-label='GitLab' />
</a>
)}
</div>
</div>
</div>
</div>
<img
src={theme.contactsimg}
alt='contacts'
className='contacts--img'
/>
</div>
);
}
Example #24
| Source File: Layout.jsx From Next.js-Mongodb-Authentication-App with MIT License | 4 votes |
|
export default function Layout({ children }) {
const [user, { mutate }] = useUser();
const [loading, isLoading] = useState(false);
const router = useRouter();
const handleLogout = async () => {
isLoading(true);
await fetch('/api/auth', {
method: 'DELETE',
});
// set the user state to null
mutate(null);
isLoading(false);
router.push('/')
};
return (
<>
<Head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</Head>
<header>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Nextjs Auth</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<Link class="nav-link" href="/"><a style={{ color: '#949585' }}>Home</a></Link>
</li>
<li>
<a class="nav-link" data-bs-toggle="modal" data-bs-target="#exampleModal">
About
</a>
</li>
</ul>
{user && <button className='btn btn-primary' onClick={handleLogout}>Logout</button>}
</div>
</div>
</nav>
</header>
<main className='d-flex justify-content-center align-items-center'>
<div className="container mx-auto my-3 h-100">
<div className="row">
<div className="col-sm-12">
{children}
</div>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">About</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div className='row' style={{ flexDirection: 'column' }}>
<div className='col text-center'>
<img src="/Images/Me.jpg" width="200px" className="rounded mx-auto img-fluid" />
<h2 className='mt-3'>I am Tushar Saxena</h2>
</div>
<div className='col text-center'>
<div className="" style={{ fontSize: '2rem' }}>
<a href="https://github.com/tsaxena4k" target="_blank"><FaGithub /> </a>
<a href="https://www.facebook.com/tushar.saxena.56232/" target="_blank"><FaFacebook /> </a>
<a href="https://www.linkedin.com/in/tushar-saxena-94b742184/" target="_blank"><FaLinkedin /> </a>
<a href="https://www.instagram.com/tsaxena4k/" target="_blank"><FaInstagram /> </a>
</div>
<hr />
<div className="mt-3">
<p><strong>I was just doing Frontend Development a few months ago, was enjoying building personalised UI/UX templates with React and different styling options like materialize css, material UI ,Sass and what not.
Though I was aware that Frontend was just not enough for me I had to start with Backend any day now, but like everyone else struggled with motivation.
<br /><br />For me that day of motivation came in with a college project that a team of three has to work on.As a start I switched to <a href="https://nextjs.org/" target="_blank">Next.js</a> and that was really smooth,
then I worked with nodejs,building API,Mongodb and all that Backend stuff.<br />But I struggled putting all of these things together to build a Login~Signup Authentication for our project.I watched every
single video on youtube for the topic but failed to get things working.This was the start to my backend journey and it was quite what I thought it would be like.
<br /><br />After alot of research and all came to know about <a href="http://www.passportjs.org/">passport.js</a> and here we are with things working. Thanks to <a href="https://hoangvvo.com/" target="_blank">Hoang</a>,his blogs helped me alot and finally
I completed my first backend task.<br />I do realise after all of this that there might be people like me trying hard to make there first Authentication backend to work.
So I decided to put this simple working model up for those who are seeking hard for it.<br /><br />I hope it helped you and I know there are tons of bugs and incomplete parts in the code I'll be working on that,
to know more check out the <a href="https://github.com/tsaxena4k" target="_blank">github repository</a> for the same.</strong></p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</main>
<style jsx>{`
.container{
height:85vh;
}
main{
min-height:85vh;
}
`}</style>
</>
);
}
Example #25
| 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>
)
