| BlockIcon, | BlockIcon, | ||||
| ButtonsContainer, | ButtonsContainer, | ||||
| BlockLabelIcon, | BlockLabelIcon, | ||||
| MessageButton, | |||||
| MessageIcon, | |||||
| // MessageButton, | |||||
| // MessageIcon, | |||||
| ProfileInfoAndContactContainer, | ProfileInfoAndContactContainer, | ||||
| } from "./ProfileCard.styled"; | } from "./ProfileCard.styled"; | ||||
| import PersonOutlineIcon from "@mui/icons-material/PersonOutline"; | import PersonOutlineIcon from "@mui/icons-material/PersonOutline"; | ||||
| </RemoveButton> | </RemoveButton> | ||||
| </> | </> | ||||
| )} | )} | ||||
| {isMyProfile || props.isAdmin ? ( | |||||
| <EditButton | |||||
| onClick={() => setEditProfileModal(true)} | |||||
| isAdmin={props.isAdmin} | |||||
| > | |||||
| <EditIcon /> | |||||
| </EditButton> | |||||
| ) : ( | |||||
| <MessageButton> | |||||
| <MessageIcon /> | |||||
| </MessageButton> | |||||
| )} | |||||
| {isMyProfile || | |||||
| (props.isAdmin && ( | |||||
| <EditButton | |||||
| onClick={() => setEditProfileModal(true)} | |||||
| isAdmin={props.isAdmin} | |||||
| > | |||||
| <EditIcon /> | |||||
| </EditButton> | |||||
| ))} | |||||
| </ButtonsContainer> | </ButtonsContainer> | ||||
| <ProfileInfoContainer> | <ProfileInfoContainer> | ||||
| <ProfileInfoAndContactContainer> | <ProfileInfoAndContactContainer> |
| const MarketPlace = (props) => { | const MarketPlace = (props) => { | ||||
| const [isGrid, setIsGrid] = useState(false); | const [isGrid, setIsGrid] = useState(false); | ||||
| const offers = props.offers; | const offers = props.offers; | ||||
| console.log("MARKETPLACE") | |||||
| console.log("MARKETPLACE"); | |||||
| return ( | return ( | ||||
| <MarketPlaceContainer> | <MarketPlaceContainer> | ||||
| <Header | <Header |
| import { Box, Typography } from "@mui/material"; | import { Box, Typography } from "@mui/material"; | ||||
| import styled from "styled-components"; | import styled from "styled-components"; | ||||
| import {ReactComponent as HalfLogo} from "../../../../assets/images/svg/half-logo.svg" | |||||
| import { ReactComponent as HalfLogo } from "../../../../assets/images/svg/half-logo.svg"; | |||||
| import selectedTheme from "../../../../themes"; | import selectedTheme from "../../../../themes"; | ||||
| export const NoProfileOffersContainer = styled(Box)` | export const NoProfileOffersContainer = styled(Box)` | ||||
| text-align: center; | |||||
| background-color: white; | |||||
| height: 340px; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| border-radius: 4px; | |||||
| ` | |||||
| text-align: center; | |||||
| background-color: white; | |||||
| height: 340px; | |||||
| width: 100%; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| border-radius: 4px; | |||||
| `; | |||||
| export const NoProfileOffersIcon = styled(HalfLogo)` | export const NoProfileOffersIcon = styled(HalfLogo)` | ||||
| margin-top: 85px; | |||||
| text-align: center; | |||||
| width: 100%; | |||||
| ` | |||||
| margin-top: 85px; | |||||
| text-align: center; | |||||
| width: 100%; | |||||
| `; | |||||
| export const NoProfileOffersMainText = styled(Typography)` | export const NoProfileOffersMainText = styled(Typography)` | ||||
| font-family: ${selectedTheme.fonts.textFont}; | |||||
| font-weight: 700; | |||||
| font-size: 24px; | |||||
| text-align: center; | |||||
| color: ${selectedTheme.colors.primaryPurple}; | |||||
| margin-top: 10px; | |||||
| line-height: 33px; | |||||
| ` | |||||
| font-family: ${selectedTheme.fonts.textFont}; | |||||
| font-weight: 700; | |||||
| font-size: 24px; | |||||
| text-align: center; | |||||
| color: ${selectedTheme.colors.primaryPurple}; | |||||
| margin-top: 10px; | |||||
| line-height: 33px; | |||||
| `; | |||||
| export const NoProfileOffersAltText = styled(Typography)` | export const NoProfileOffersAltText = styled(Typography)` | ||||
| font-family: ${selectedTheme.fonts.textFont}; | |||||
| font-size: 16px; | |||||
| color: ${selectedTheme.colors.primaryGrayText}; | |||||
| text-align: center; | |||||
| margin-top: 9px; | |||||
| line-height: 22px; | |||||
| ` | |||||
| font-family: ${selectedTheme.fonts.textFont}; | |||||
| font-size: 16px; | |||||
| color: ${selectedTheme.colors.primaryGrayText}; | |||||
| text-align: center; | |||||
| margin-top: 9px; | |||||
| line-height: 22px; | |||||
| `; |
| <NoProfileOffers /> | <NoProfileOffers /> | ||||
| ) | ) | ||||
| ) : ( | ) : ( | ||||
| <OffersScroller hideArrows> | |||||
| {offersToShow.map((item) => ( | |||||
| <OfferCard | |||||
| isAdmin={props.isAdmin} | |||||
| vertical | |||||
| isMyOffer={props.isMyProfile || props.isAdmin} | |||||
| offer={item} | |||||
| key={JSON.stringify(item)} | |||||
| pinned={item.pinned} | |||||
| messageUser={messageUser} | |||||
| /> | |||||
| ))} | |||||
| <OffersScroller hideArrows noOffers> | |||||
| {offersToShow.length !== 0 ? ( | |||||
| offersToShow.map((item) => ( | |||||
| <OfferCard | |||||
| isAdmin={props.isAdmin} | |||||
| vertical | |||||
| isMyOffer={props.isMyProfile || props.isAdmin} | |||||
| offer={item} | |||||
| key={JSON.stringify(item)} | |||||
| pinned={item.pinned} | |||||
| messageUser={messageUser} | |||||
| /> | |||||
| )) | |||||
| ) : ( | |||||
| <NoProfileOffers /> | |||||
| )} | |||||
| </OffersScroller> | </OffersScroller> | ||||
| )} | )} | ||||
| </OffersContainer> | </OffersContainer> |
| @media (max-width: 600px) { | @media (max-width: 600px) { | ||||
| padding: 0; | padding: 0; | ||||
| width: calc(100vw - 36px); | width: calc(100vw - 36px); | ||||
| margin: 34px ${props => props.isAdmin ? "18px" : "0"}; | |||||
| margin-bottom: ${props => !props.isAdmin && '0'} | |||||
| margin: 34px ${(props) => (props.isAdmin ? "18px" : "0")}; | |||||
| margin-bottom: ${(props) => !props.isAdmin && "0"}; | |||||
| } | } | ||||
| `; | `; | ||||
| export const OffersContainer = styled(Box)` | export const OffersContainer = styled(Box)` | ||||
| `; | `; | ||||
| export const OffersScroller = styled(HorizontalScroller)` | export const OffersScroller = styled(HorizontalScroller)` | ||||
| height: 400px; | height: 400px; | ||||
| width: 100%; | |||||
| ${(props) => props.noOffers && `width: 100%;`} | |||||
| margin-left: 0; | margin-left: 0; | ||||
| & div { | & div { | ||||
| margin-left: 0; | margin-left: 0; |
| } | } | ||||
| }, [selectedOffer?.offer]); | }, [selectedOffer?.offer]); | ||||
| useEffect(() => { | |||||
| window.scrollTo({ top: 0, behaviour: "smooth" }); | |||||
| }, []); | |||||
| return ( | return ( | ||||
| <ItemDetailsPageContainer> | <ItemDetailsPageContainer> | ||||
| <ItemDetailsLayout | <ItemDetailsLayout |