Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | import styled from "styled-components"; import { Flex, Pill, Text } from "rimble-ui"; import { Facebook, LinkedIn, Medium, TwitterBird, YouTube } from "./Icons"; import { baseColors, colors, fonts } from "../../themes"; import { LinkedId } from "../../types"; export const ExpiredPill: React.FunctionComponent = () => { return ( <Pill color="danger" cursor="pointer" fontFamily={fonts.sansSerif} height={4} px={5}> <Text.span fontSize={0} color={colors.danger.base}> Expired </Text.span> </Pill> ); }; const PillImg = styled.div` align-items: center; background-color: ${baseColors.white}; border: 1px solid ${colors.nearWhite}; border-radius: 50%; display: flex; height: 22px; justify-content: center; overflow: hidden; width: 22px; `; export interface PillWithImgProps { icon?: JSX.Element; text: string; [key: string]: any; } export const PillWithImg: React.FunctionComponent<PillWithImgProps> = (props) => { return ( <Flex alignItems="center" bg={colors.nearWhite} borderRadius={4} fontFamily={fonts.sansSerif} height={4} justifyContent={props.icon ? "flex-start" : "center"} > {props.icon ? ( <> <PillImg>{props.icon}</PillImg> <Text color={baseColors.black} fontSize={0} pl={2} pr={3}> {props.text} </Text> </> ) : ( <Text color={baseColors.black} fontSize={0} px={3}> {props.text} </Text> )} </Flex> ); }; const StyledLink = styled.a` margin-right: 16px; text-decoration: none; `; export interface SocialPillsProps { linkedId: LinkedId; } export const SocialPills: React.FunctionComponent<SocialPillsProps> = (props) => { const { linkedId } = props; return ( <> {linkedId.platform === "Facebook" ? ( <StyledLink href={linkedId.proofUrl} target="_blank"> <PillWithImg icon={<Facebook size="22" />} text={linkedId.linkedId} /> </StyledLink> ) : linkedId.platform === "LinkedIn" ? ( <StyledLink href={linkedId.proofUrl} target="_blank"> <PillWithImg icon={<LinkedIn size="22" />} text={linkedId.linkedId} /> </StyledLink> ) : linkedId.platform === "Medium" ? ( <StyledLink href={linkedId.proofUrl} target="_blank"> <PillWithImg icon={<Medium size="22" />} text={linkedId.linkedId} /> </StyledLink> ) : linkedId.platform === "Twitter" ? ( <StyledLink href={linkedId.proofUrl} target="_blank"> <PillWithImg icon={<TwitterBird size={18} />} text={linkedId.linkedId} /> </StyledLink> ) : linkedId.platform === "Youtube" ? ( <StyledLink href={linkedId.proofUrl} target="_blank"> <PillWithImg icon={<YouTube size={20} />} text={linkedId.linkedId} /> </StyledLink> ) : ( <StyledLink href={linkedId.proofUrl} target="_blank"> <PillWithImg text={linkedId.linkedId} /> </StyledLink> )} </> ); }; |