\n )\n })}\n \n )\n}\n\nSocial.propTypes = {\n links: PropTypes.arrayOf(\n PropTypes.shape({\n followers_count: PropTypes.number,\n id: PropTypes.number,\n url: PropTypes.string.isRequired,\n views_count: PropTypes.number,\n })\n ),\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nimport { tc } from '@owl-nest/localize'\nimport { Icon } from '@ulule/owl-kit-components'\n\nimport { distanceInWordsToNow } from '$utils/date'\nimport { userShape } from '$utils/prop-types'\n\nimport * as S from '../styles'\n\nexport const Location = ({ profile, owner }) => (\n \n {profile && profile.location && (\n \n \n {profile && profile.location}\n \n )}\n {/* need to put @ with screen name s*/}\n \n {tc('Registered %(duration)s ago', { duration: distanceInWordsToNow(+new Date(owner && owner.date_joined)) })}\n \n \n)\n\nLocation.propTypes = {\n owner: userShape,\n profile: userShape,\n}\n","import React from 'react'\n\nimport * as plume from '@ulule/owl-kit-components/next'\nimport * as S from '../styles'\n\ntype InformationProps = {\n label: {\n color: plume.RoleTagProps['backgroundColor']\n name: string\n }\n owner?: {\n fullname: string\n }\n}\n\nexport function Information({ owner, label }: InformationProps) {\n return (\n \n {owner?.fullname}\n {!!label && {label.name}}\n \n )\n}\n\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nexport const Button = ({ url, svg, text, cls }) => (\n \n {svg}\n \n {text}\n \n \n)\n\nButton.propTypes = {\n cls: PropTypes.string,\n svg: PropTypes.object,\n text: PropTypes.string,\n url: PropTypes.string\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nexport const ButtonAction = ({ url, svg, text, action, cls = null }) => (\n \n {svg}\n {\n event.preventDefault()\n action()\n return false\n }}\n >\n {text}\n \n \n)\n\nButtonAction.propTypes = {\n cls: PropTypes.string,\n svg: PropTypes.element,\n text: PropTypes.string,\n action: PropTypes.func,\n url: PropTypes.string\n}\n","import { styled } from 'next-yak'\nimport { FONTS, COLORS, Title5, RegularText, PrimaryLink } from '@ulule/owl-kit-components'\n\nexport const SubtleText = styled.span`\n font-size: 13px;\n color: #999;\n font-family: ${FONTS.PRIMARY_FONT};\n`\n\nexport const TabsContainer = styled.div`\n width: 100%;\n\n a {\n color: ${COLORS.TEXT_PRIMARY};\n text-decoration: none;\n }\n`\n\nexport const AdminButton = styled.div`\n position: absolute;\n right: 20px;\n`\n\nexport const ModalTitle = styled(Title5)`\n text-align: center;\n margin-bottom: 15px;\n`\n\nexport const ModalContent = styled.div`\n p {\n text-align: center;\n }\n`\n\nexport const ModalActions = styled.div`\n margin-top: 30px;\n`\n\nexport const ModalText = styled(RegularText)`\n display: block;\n font-size: 15px;\n line-height: 22px;\n margin-bottom: 20px;\n`\n\nexport const CloseAction = styled(PrimaryLink)`\n display: block;\n font-size: 13px;\n line-height: 16px;\n color: ${COLORS.TEXT_PRIMARY};\n text-decoration: none;\n text-align: center;\n margin-top: 20px;\n`\n","import React from 'react'\n\nimport PropTypes from 'prop-types'\n\nimport { t, tc } from '@owl-nest/localize'\nimport { ClassicModal, CallToAction } from '@ulule/owl-kit-components'\n\nimport * as S from './styles'\n\nexport const Modal = ({ isOpen, handleClose, action, isBanned }) => (\n \n \n
\n {!isBanned && {t('Ban this user')}}\n {isBanned && {t('User Banned')}}\n \n {!isBanned ? (\n \n {tc(\n `Be careful, you will ban this user permanently. This action is irreversible.[br]\n The following actions will happen:[br][br]\n - Blocking the user account[br]\n - Deletion of all comments posted by this account[br][br]\n The user will not be informed and will no longer be able to connect to his Ulule account.`,\n {\n br: \n }\n )}\n \n ) : (\n \n {tc(`This user has been banned.`, {\n br: \n })}\n \n )}\n \n \n {!isBanned ? (\n \n {t('Confirm ban')}\n {t('Cancel')}\n \n ) : (\n {\n document.location.reload(false)\n }}\n >\n {t('Close')}\n \n )}\n \n
\n \n \n)\n\nModal.propTypes = {\n isOpen: PropTypes.bool,\n handleClose: PropTypes.func,\n action: PropTypes.func,\n isBanned: PropTypes.bool\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { connect } from 'react-redux'\n\nimport SponsorshipTracker from '$components/SponsorshipTracker/SponsorshipTracker'\nimport { userShape } from '$utils/prop-types'\n\nconst Avatar = ({ pictureUrl, innerRef }) => \n\nconst PartnerAvatar = ({ pictureUrl, userId }) => (\n \n \n \n)\n\nconst ProfileAvatar = ({ profile, userId, successAvatar, getNewAvatar }) => {\n const avatar = profile && profile.getAvatar && profile.getAvatar('180x180')\n const pictureUrl = successAvatar ? getNewAvatar('180x180') : avatar\n const isPartner = profile && profile.labels && !!profile.labels['official']\n\n if (isPartner) {\n return \n }\n\n return \n}\n\nProfileAvatar.propTypes = {\n getNewAvatar: PropTypes.func,\n profile: userShape,\n successAvatar: PropTypes.bool,\n userId: PropTypes.number.isRequired\n}\n\nconst mapStateToProps = state => ({\n successAvatar: state.profile.successAvatar,\n getNewAvatar: state.profile.getAvatar\n})\n\nexport default connect(mapStateToProps)(ProfileAvatar)\n","import React, { useState } from 'react'\n\nimport PropTypes from 'prop-types'\nimport MediaQuery from 'react-responsive'\n\nimport { t } from '@owl-nest/localize'\nimport { styled } from 'next-yak'\nimport { Icon, COLORS, FONTS } from '@ulule/owl-kit-components'\nimport { rem } from '$utils/styles'\n\nimport { Social } from './Social'\nimport { Location } from './Locations'\nimport { Information } from './Information'\nimport { Hover } from './Hover'\nimport { Button } from './Button'\nimport { ButtonAction } from './ButtonAction'\nimport { Modal } from './Modal'\nimport ProfileAvatar from './ProfileAvatar'\n\nimport { userShape } from '$utils/prop-types'\n\nconst TabsItem = styled.div`\n margin-bottom: 10px;\n`\n\nconst IconContainer = styled.span`\n color: #bdbdbd;\n height: 12px;\n`\n\nconst IconCloseContainer = styled(IconContainer)`\n top: -1px;\n position: relative;\n`\n\nconst IconEditContainer = styled(IconContainer)`\n top: -1px;\n position: relative;\n`\n\nconst ButtonContainer = styled.div`\n display: flex;\n align-items: center;\n`\n\nconst ButtonContainerAction = styled.div`\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n\n a {\n font-family: ${FONTS.PRIMARY_FONT};\n font-size: 13px;\n font-weight: 500;\n line-height: 1.4;\n text-decoration: none;\n margin-left: ${() => rem(8)};\n margin-right: ${() => rem(20)};\n color: ${COLORS.PRIMARY_RED_500};\n\n &:hover {\n color: ${COLORS.PRIMARY_RED_700};\n }\n }\n`\n\nconst NavSocial = ({ isOwner, currentUser, owner, isReachable }) => {\n return (\n