import React from "react"; import styled from "styled-components"; import { GoLocation, GoGlobe, GoMarkGithub, GoBriefcase, GoMail, GoCalendar, GoPackage, GoCode } from "react-icons/go"; import LanguageContext from "../contexts/LanguageContext"; import Button from "./Button"; const ProfileSection = styled.section` padding: 2rem 6rem; padding-bottom: 0rem; display: flex; flex-direction: column; @media only screen and (max-width: 900px) { padding: 1.5rem 2rem; } `; const UserContainer = styled.div` height: 100%; padding: 2rem 0; display: flex; flex-direction: column; align-items: center; @media only screen and (max-width: 600px) { padding-top: 10rem; } `; const UserInfoDiv = styled.div` display: flex; justify-content: center; background-color: ${p => p.theme.cardColor}; padding: 4rem; border-radius: 5px; box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.2); & ul li { font-size: 1.8rem; padding: 0.3rem 0; } & ul li h1 { font-size: 3rem; font-weight: 400; } & ul li:last-of-type { padding-top: 0.8rem; } & ul li a { text-decoration: none; &:link, &:visited { color: #0098f0; } &:hover, &:active { text-decoration: underline; } } @media only screen and (max-width: 600px) { flex-direction: column; align-items: center; padding: 3rem 4rem; & ul li { text-align: center; } } @media only screen and (max-width: 500px) { width: 100%; padding: 3rem 2rem; } `; const ProfileImgDiv = styled.div` margin-right: 2.5rem; position: relative; height: 200px; width: 100px; @media only screen and (max-width: 600px) { margin-right: 0; margin-bottom: 2.5rem; width: 100%; height: 100px; } & img { position: absolute; top: 0; left: -10rem; vertical-align: middle; text-align: center; border-radius: 2px; @media only screen and (max-width: 600px) { top: -10rem; right: 0; left: 0; margin: 0 auto; } } `; const DetailList = styled.ul` margin-top: 3rem; border-radius: 5px; background-color: ${p => p.theme.cardColor}; padding: 2rem 4rem; box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.2); @media only screen and (max-width: 600px) { padding: 3rem 4rem; } @media only screen and (max-width: 500px) { width: 100%; } & ul li { text-align: center; } & ul li span a button { font-weight: 500; } `; const FlexContainer = styled.div` display: flex; @media only screen and (max-width: 600px) { flex-direction: column; justify-content: center; } `; const LocationDiv = styled.div` @media only screen and (max-width: 600px) { padding-top: 0.6rem; } `; const IconSpan = styled.span` display: ${(p) => (p.available ? "inline" : "none")}; margin-right: ${(p) => (p.company ? "1.5rem" : "0")}; & svg { vertical-align: middle; margin-bottom: 4px; } & a button svg { margin-bottom: 0; } @media only screen and (max-width: 600px) { margin-right: 0; } `; const Span = styled.span` & svg { vertical-align: middle; margin-bottom: 3px; } margin-right: 0.5rem; `; const Profile = (props) => { const { avatar_url, email, html_url, login, company, location, blog, name, public_repos, created_at, } = props.userData; let website = blog; if (blog && blog.slice(0, 4) !== "http") { website = `http://${blog}`; } const date = new Date(created_at); const joinedDate = date.toDateString().split(" ").slice(1).join(" "); // console.log(props.userData); return ( <ProfileSection> <UserContainer> <UserInfoDiv> <ProfileImgDiv> <img src={avatar_url} width='200px' alt='avatar' /> </ProfileImgDiv> <ul> <li> <h1>{name}</h1> </li> <li> <FlexContainer> <div> {/* If available = true then only show the component */} <IconSpan available={company} company> <GoBriefcase /> {company} </IconSpan> </div> <LocationDiv> <IconSpan available={location}> <GoLocation /> {location} </IconSpan> </LocationDiv> </FlexContainer> </li> <li> <IconSpan available={email}> <GoMail /> {email} </IconSpan> </li> <li> <IconSpan available={website}> <GoGlobe />{" "} <a href={website} target='_blank' rel='noopener noreferrer'> {blog} </a> </IconSpan> </li> <li> <IconSpan available={html_url}> <a href={html_url} target='_blank' rel='noopener noreferrer'> <Button> <GoMarkGithub /> @{login} </Button> </a> </IconSpan> </li> </ul> </UserInfoDiv> <DetailList> <ul> <li> <Span><GoCalendar /></Span> Joined github on {joinedDate}</li> <li> <Span><GoPackage /></Span> Since have created {public_repos} projects</li> <LanguageContext.Consumer> {(context) => { const langCount = context.length; return ( <li> <Span><GoCode /></Span> Using {langCount} different languages </li> ); }} </LanguageContext.Consumer> </ul> </DetailList> </UserContainer> </ProfileSection> ); }; export default Profile;