| const ProfileStats = (props) => { | const ProfileStats = (props) => { | ||||
| const { t } = useTranslation(); | const { t } = useTranslation(); | ||||
| return ( | return ( | ||||
| <ProfileStatsContainer> | |||||
| <ProfileStatsContainer className={props.className}> | |||||
| <ProfileStatsGrid> | <ProfileStatsGrid> | ||||
| <StatsItem variant="subtitle2"> | <StatsItem variant="subtitle2"> | ||||
| <b>{props.profile?.statistics?.publishes?.count}</b> | <b>{props.profile?.statistics?.publishes?.count}</b> | ||||
| ProfileStats.propTypes = { | ProfileStats.propTypes = { | ||||
| profile: PropTypes.object, | profile: PropTypes.object, | ||||
| percentOfSucceededExchanges: PropTypes.number, | percentOfSucceededExchanges: PropTypes.number, | ||||
| className: PropTypes.string, | |||||
| }; | }; | ||||
| export default ProfileStats; | export default ProfileStats; |
| @media screen and (max-width: 600px) { | @media screen and (max-width: 600px) { | ||||
| margin-left: 0; | margin-left: 0; | ||||
| margin-top: 228px; | |||||
| margin-top: 310px; | |||||
| svg { | svg { | ||||
| width: 14px; | width: 14px; |
| ProfileHeader, | ProfileHeader, | ||||
| ProfileHeaderIconContainer, | ProfileHeaderIconContainer, | ||||
| ProfileHeaderText, | ProfileHeaderText, | ||||
| ProfileMiniStats, | |||||
| } from "./ProfileMini.styled"; | } from "./ProfileMini.styled"; | ||||
| import { useSelector } from "react-redux"; | import { useSelector } from "react-redux"; | ||||
| import { selectOffer } from "../../store/selectors/offersSelectors"; | import { selectOffer } from "../../store/selectors/offersSelectors"; | ||||
| if (offer?.offer?.userId?.toString() === userId?.toString()) return true; | if (offer?.offer?.userId?.toString() === userId?.toString()) return true; | ||||
| return false; | return false; | ||||
| }, [offer, userId]); | }, [offer, userId]); | ||||
| console.log(offer); | |||||
| return ( | return ( | ||||
| <> | <> | ||||
| {isLoadingOfferContent || isLoadingOfferContent === undefined ? ( | {isLoadingOfferContent || isLoadingOfferContent === undefined ? ( | ||||
| isMyProfile={isMyProfile} | isMyProfile={isMyProfile} | ||||
| singleOffer | singleOffer | ||||
| /> | /> | ||||
| <ProfileMiniStats | |||||
| profile={offer.companyData} | |||||
| percentOfSucceededExchanges={ | |||||
| offer.companyData?.statistics?.exchanges?.total | |||||
| } | |||||
| /> | |||||
| </ProfileHeader> | </ProfileHeader> | ||||
| )} | )} | ||||
| </> | </> |
| import { Box } from "@mui/system"; | import { Box } from "@mui/system"; | ||||
| import { Typography } from "@mui/material"; | import { Typography } from "@mui/material"; | ||||
| import selectedTheme from "../../themes"; | import selectedTheme from "../../themes"; | ||||
| import ProfileStats from "../Cards/ProfileCard/ProfileStats/ProfileStats"; | |||||
| export const ProfileHeader = styled(Box)` | export const ProfileHeader = styled(Box)` | ||||
| margin-top: 60px; | margin-top: 60px; | ||||
| font-size: 12px; | font-size: 12px; | ||||
| } | } | ||||
| `; | `; | ||||
| export const ProfileMiniStats = styled(ProfileStats)` | |||||
| position: relative; | |||||
| width: 100%; | |||||
| margin-left: 0; | |||||
| margin-top: -1rem; | |||||
| margin-bottom: 36px; | |||||
| border-radius: 0 0 4px 4px; | |||||
| border: 1px solid ${selectedTheme.colors.primaryPurple}; | |||||
| @media (max-width: 600px) { | |||||
| width: 92%; | |||||
| } | |||||
| `; |
| border: 1px solid ${selectedTheme.colors.borderNormal}; | border: 1px solid ${selectedTheme.colors.borderNormal}; | ||||
| overflow-y: auto; | overflow-y: auto; | ||||
| overflow-x: hidden; | overflow-x: hidden; | ||||
| max-height: ${(props) => (props.isProfileReviews ? "70vh" : "43vh")}; | |||||
| max-height: ${(props) => (props.isProfileReviews ? "70vh" : "39vh")}; | |||||
| /* overflow-y: auto; */ | /* overflow-y: auto; */ | ||||
| &::-webkit-scrollbar { | &::-webkit-scrollbar { |