update comparisons page
This commit is contained in:
parent
a0e68beb5d
commit
f00635ef7c
|
@ -26,24 +26,23 @@ const ApartmentAddress = styled.p`
|
||||||
const TransportSection = styled.div`
|
const TransportSection = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 9px;
|
margin-top: 9px;
|
||||||
|
& p {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #A9A9A9;
|
||||||
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
const TransportIcon = styled.div`
|
const TransportIcon = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 96px;
|
width: fit-content;
|
||||||
height: 32px;
|
height: 38px;
|
||||||
border: 2px solid #A9A9A9;
|
border: 1px solid #A9A9A9;
|
||||||
border-radius: 20px;
|
border-radius: 16px;
|
||||||
|
margin-right: 8px;
|
||||||
margin-left: 9px;
|
padding-right: 8px;
|
||||||
`
|
|
||||||
|
|
||||||
const TransportTime = styled.p`
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #A9A9A9;
|
|
||||||
`
|
`
|
||||||
|
|
||||||
const ButtonContact = styled.button`
|
const ButtonContact = styled.button`
|
||||||
|
@ -66,11 +65,11 @@ const BlockApartment = function (props) {
|
||||||
<TransportSection>
|
<TransportSection>
|
||||||
<TransportIcon>
|
<TransportIcon>
|
||||||
<SVGIcon src='/images/icons/bus.svg' width={20} height={21} />
|
<SVGIcon src='/images/icons/bus.svg' width={20} height={21} />
|
||||||
<TransportTime>{props.results.timeToBus} мин</TransportTime>
|
<p>{props.results.timeToBus} мин</p>
|
||||||
</TransportIcon>
|
</TransportIcon>
|
||||||
<TransportIcon>
|
<TransportIcon>
|
||||||
<SVGIcon src='/images/icons/train.svg' width={18} height={20} />
|
<SVGIcon src='/images/icons/train.svg' width={18} height={20} />
|
||||||
<TransportTime>{props.results.timeToTrain} мин</TransportTime>
|
<p>{props.results.timeToTrain} мин</p>
|
||||||
</TransportIcon>
|
</TransportIcon>
|
||||||
</TransportSection>
|
</TransportSection>
|
||||||
<ButtonContact>Показать контакты</ButtonContact>
|
<ButtonContact>Показать контакты</ButtonContact>
|
||||||
|
|
|
@ -64,6 +64,11 @@ const Indicator = styled.p`
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
`
|
`
|
||||||
|
|
||||||
|
const ColumnAbout = styled.div`
|
||||||
|
width: 20%;
|
||||||
|
text-align: center;
|
||||||
|
`
|
||||||
|
|
||||||
const ComparisonsApartmentsList = () => {
|
const ComparisonsApartmentsList = () => {
|
||||||
const [apartmentsComparisons, setApartmentsComparisons] = useState([])
|
const [apartmentsComparisons, setApartmentsComparisons] = useState([])
|
||||||
const [totalPages, setTotalPages] = useState(0);
|
const [totalPages, setTotalPages] = useState(0);
|
||||||
|
@ -115,12 +120,12 @@ const ComparisonsApartmentsList = () => {
|
||||||
<AboutTitle>Санузел</AboutTitle>
|
<AboutTitle>Санузел</AboutTitle>
|
||||||
</div>
|
</div>
|
||||||
{apartmentsComparisons.map((apartament, index) =>
|
{apartmentsComparisons.map((apartament, index) =>
|
||||||
<div>
|
<ColumnAbout>
|
||||||
<AboutTitle>{apartament.rooms}</AboutTitle>
|
<AboutTitle>{apartament.rooms === 0 ? "Гостинка" : (apartament.rooms)}</AboutTitle>
|
||||||
<AboutTitle>{apartament.floor} из {apartament.floorHouse}</AboutTitle>
|
<AboutTitle>{apartament.floor} из {apartament.floorHouse}</AboutTitle>
|
||||||
<AboutTitle>{apartament.perimetrs} м²</AboutTitle>
|
<AboutTitle>{apartament.perimetrs} м²</AboutTitle>
|
||||||
<Indicator>{apartament.isBathroom ? '✓' : '—'}</Indicator>
|
<Indicator>{apartament.isBathroom ? '✓' : '—'}</Indicator>
|
||||||
</div>
|
</ColumnAbout>
|
||||||
)}
|
)}
|
||||||
</AboutSection>
|
</AboutSection>
|
||||||
|
|
||||||
|
@ -142,7 +147,7 @@ const ComparisonsApartmentsList = () => {
|
||||||
<AboutTitle>Свежий ремонт</AboutTitle>
|
<AboutTitle>Свежий ремонт</AboutTitle>
|
||||||
</div>
|
</div>
|
||||||
{apartmentsComparisons.map((apartament, index) =>
|
{apartmentsComparisons.map((apartament, index) =>
|
||||||
<div>
|
<ColumnAbout>
|
||||||
<Indicator>{apartament.isFurniture ? '✓' : '—'}</Indicator>
|
<Indicator>{apartament.isFurniture ? '✓' : '—'}</Indicator>
|
||||||
<Indicator>{apartament.isInternet ? '✓' : '—'}</Indicator>
|
<Indicator>{apartament.isInternet ? '✓' : '—'}</Indicator>
|
||||||
<Indicator>{apartament.isTelevision ? '✓' : '—'}</Indicator>
|
<Indicator>{apartament.isTelevision ? '✓' : '—'}</Indicator>
|
||||||
|
@ -152,7 +157,7 @@ const ComparisonsApartmentsList = () => {
|
||||||
<Indicator>{apartament.isChild ? '✓' : '—'}</Indicator>
|
<Indicator>{apartament.isChild ? '✓' : '—'}</Indicator>
|
||||||
<Indicator>{apartament.isAnimal ? '✓' : '—'}</Indicator>
|
<Indicator>{apartament.isAnimal ? '✓' : '—'}</Indicator>
|
||||||
<Indicator>{apartament.isFreshRepair ? '✓' : '—'}</Indicator>
|
<Indicator>{apartament.isFreshRepair ? '✓' : '—'}</Indicator>
|
||||||
</div>
|
</ColumnAbout>
|
||||||
)}
|
)}
|
||||||
</AboutSection>
|
</AboutSection>
|
||||||
|
|
||||||
|
@ -171,14 +176,14 @@ const ComparisonsApartmentsList = () => {
|
||||||
<AboutTitle>Охрана или консьерж</AboutTitle>
|
<AboutTitle>Охрана или консьерж</AboutTitle>
|
||||||
</div>
|
</div>
|
||||||
{apartmentsComparisons.map((apartament, index) =>
|
{apartmentsComparisons.map((apartament, index) =>
|
||||||
<div>
|
<ColumnAbout>
|
||||||
<AboutTitle>{apartament.ceilingHeight} м</AboutTitle>
|
<AboutTitle>{apartament.ceilingHeight} м</AboutTitle>
|
||||||
<AboutTitle>{apartament.floorHouse}</AboutTitle>
|
<AboutTitle>{apartament.floorHouse}</AboutTitle>
|
||||||
<Indicator>{apartament.isElevator ? '✓' : '—'}</Indicator>
|
<Indicator>{apartament.isElevator ? '✓' : '—'}</Indicator>
|
||||||
<Indicator>{apartament.isGarbageChute ? '✓' : '—'}</Indicator>
|
<Indicator>{apartament.isGarbageChute ? '✓' : '—'}</Indicator>
|
||||||
<Indicator>{apartament.isParking ? '✓' : '—'}</Indicator>
|
<Indicator>{apartament.isParking ? '✓' : '—'}</Indicator>
|
||||||
<Indicator>{apartament.isConcierge ? '✓' : '—'}</Indicator>
|
<Indicator>{apartament.isConcierge ? '✓' : '—'}</Indicator>
|
||||||
</div>
|
</ColumnAbout>
|
||||||
)}
|
)}
|
||||||
</AboutSection>
|
</AboutSection>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -14,6 +14,13 @@ const TitleSection = styled.section`
|
||||||
const TitleSectionLeftAndRight = styled.div`
|
const TitleSectionLeftAndRight = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
& h2 {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
margin-left: 31px;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ButtonBack = styled.button`
|
const ButtonBack = styled.button`
|
||||||
|
@ -29,12 +36,6 @@ const ButtonBack = styled.button`
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Title = styled.h2`
|
|
||||||
margin-left: 31px;
|
|
||||||
font-size: 24px;
|
|
||||||
color: #222;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ButtonPreviousAndNext = styled.button`
|
const ButtonPreviousAndNext = styled.button`
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -59,7 +60,7 @@ const PaginatedTitle = function ({title, totalPages, page, changePage}) {
|
||||||
Вернуться назад
|
Вернуться назад
|
||||||
</ButtonBack>
|
</ButtonBack>
|
||||||
</Link>
|
</Link>
|
||||||
<Title>{title}</Title>
|
<h2>{title}</h2>
|
||||||
</TitleSectionLeftAndRight>
|
</TitleSectionLeftAndRight>
|
||||||
|
|
||||||
<TitleSectionLeftAndRight>
|
<TitleSectionLeftAndRight>
|
||||||
|
|
Loading…
Reference in New Issue