Catalog style

OlenaIa · Nov 28, 2023 · 1e05642 · 1e05642
1 parent df308c1
commit 1e05642
Show file tree

Hide file tree

Showing 11 changed files with 431 additions and 72 deletions.
diff --git a/assets/sprite.svg → src/assets/sprite.svg b/assets/sprite.svg → src/assets/sprite.svg
diff --git a/src/components/CarItem/CarItem.jsx b/src/components/CarItem/CarItem.jsx
@@ -1,20 +1,51 @@
+import { Button, CarCard, CarItemStyle, DescriptItem, DescriptList, DescriptListWrap, DescriptionWrap, Heart, Img, ImgWrap, Span, TitleH3, TitleWrap } from "./CarItem.styled";
+import sprite from '../../assets/sprite.svg';
 
 
 export const CarItem = ({car}) => {
-    const { id, make, model, year, img, rentalPrice, rentalCompany, type, fudnctionalities, address } = car;
+    const { id, make, model, year, img, rentalPrice, rentalCompany, type, functionalities, address, mileage, engineSize } = car;
+    const cityCountry = address.split(', ').slice(-2);
+    console.log('cityCountry', cityCountry);
 
     return (
-        <>
-          <li key={id}>
-                    <img src={img ?
-                        img :
-                        'https://www.braasco.com//ASSETS/IMAGES/ITEMS/ZOOM/no_image.jpeg'}
-                        alt={make} width="200" height="200" />
-                    <div>
-                        <h3>{make}</h3>
-                        <p>{model}</p>
-                    </div>
-                </li>  
-        </>
+          <CarItemStyle key={id}>
+                    <CarCard>
+                        <ImgWrap>
+                            <Img src={img ?
+                                img :
+                                'https://www.braasco.com//ASSETS/IMAGES/ITEMS/ZOOM/no_image.jpeg'}
+                        alt={make} />
+                    <Heart
+            //   fill="red"
+            //   stroke="var(--color-text-button-and-back)"
+            >
+              <use href={`${sprite}#icon-heart`} />
+            </Heart>
+                        </ImgWrap>
+                        <DescriptionWrap>
+                    <TitleWrap>
+                        <TitleH3>
+                            {make}<Span> {model}</Span>, {year}
+                        </TitleH3>
+                        <p>{rentalPrice}</p>
+                    </TitleWrap>
+                    <DescriptListWrap>
+                        <DescriptList>
+                            <DescriptItem>{cityCountry[0]}</DescriptItem>
+                            <DescriptItem>{cityCountry[1]}</DescriptItem>
+    <DescriptItem>{rentalCompany}</DescriptItem>
+                        </DescriptList>
+                        <DescriptList>
+                            <DescriptItem>{type}</DescriptItem>
+                        <DescriptItem>{engineSize}</DescriptItem>
+                                            <DescriptItem>{mileage}</DescriptItem>
+
+                            <DescriptItem>{functionalities[0]}</DescriptItem>
+                        </DescriptList>
+                    </DescriptListWrap>
+                </DescriptionWrap>
+                    </CarCard>
+            <Button>Learn more</Button>
+                </CarItemStyle>  
     )
 }
diff --git a/src/components/CarItem/CarItem.styled.js b/src/components/CarItem/CarItem.styled.js
@@ -0,0 +1,241 @@
+import styled from 'styled-components';
+
+export const CarItemStyle = styled.li`
+    display: flex;
+    width: 100%;
+        width: 150px;
+
+    flex-basis: calc((100% - 1*16px) / 2);
+    /* height: 426px; */
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+
+    gap: 16px;
+    /* flex-shrink: 0; */
+
+  @media screen and (min-width: 768px) {
+    flex-basis: calc((100% - 2*20px) / 3);
+    gap: 20px;
+       width: 209px;
+
+  }
+
+  @media screen and (min-width: 1440px) {
+    width: 274px;
+    height: 426px;
+    gap: 28px;
+    flex-basis: calc((100% - 3*29px) / 4);
+  }
+`;
+
+export const CarCard = styled.div`
+    display: flex;
+    width: 100%;
+    /* height: 426px; */
+    flex-direction: column;
+    align-items: flex-start;
+        justify-content: space-between;
+
+    gap: 8px;
+
+  @media screen and (min-width: 768px) {
+    gap: 10px;
+  }
+
+  @media screen and (min-width: 1440px) {
+    height: 354px;
+    gap: 14px;
+  }
+`;
+
+export const ImgWrap = styled.div`
+    position: relative;
+    display: block;
+    overflow: hidden;  
+    width: 100%;
+    /* width: 150px; */
+    height: 146px;
+    object-fit: cover;
+    border-radius: 14px;
+
+  @media screen and (min-width: 768px) {
+   /* width: 209px; */
+    height: 204px;
+  }
+
+  @media screen and (min-width: 1440px) {
+    /* width: 274px; */
+    height: 268px;
+  }
+`;
+
+export const Img = styled.img`
+    position: absolute;
+    top: 0;
+    right: -37px;
+    height: 146px;
+    background: linear-gradient(180deg, rgba(18, 20, 23, 0.50) 2.5%, rgba(18, 20, 23, 0.00) 41.07%), #F3F3F2;
+
+  @media screen and (min-width: 768px) {
+    height: 204px;
+    right: -50px;
+  }
+
+  @media screen and (min-width: 1440px) {
+    right: -65px;
+    height: 268px;
+  }
+`;
+
+export const Heart = styled.svg`
+position: absolute;
+top: 14px;
+right: 14px;
+  /* width: ${(props) => props.size || '20px'};
+  height: ${(props) => props.size || '20px'}; */
+  fill: ${(props) => props.fill || 'none'};
+  stroke: ${(props) => props.stroke || 'var(--color-text-button-and-back)'};
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  /* transition: stroke 0.3s var(--timing-function);
+  &:hover,
+  &:focus {
+    stroke: var(--color-main-one);
+  } */
+`;
+
+export const DescriptionWrap = styled.div`
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: 8px;
+
+  @media screen and (min-width: 768px) {
+  
+  }
+
+  @media screen and (min-width: 1440px) {
+  
+  }
+`;
+
+export const TitleWrap = styled.div`
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    justify-content: space-between;
+font-size: 12px;
+font-weight: 500;
+align-items: center;
+
+  @media screen and (min-width: 768px) {
+    font-size: 14px;
+
+  }
+
+  @media screen and (min-width: 1440px) {
+  font-size: 16px;
+  }
+`;
+
+export const TitleH3 = styled.h3`
+font-size: inherit;
+font-weight: inherit;
+
+  @media screen and (min-width: 768px) {
+
+  }
+
+  @media screen and (min-width: 1440px) {
+  }
+`;
+export const Span = styled.span`
+color: var(--color-text-loadmore);
+
+  @media screen and (min-width: 768px) {
+
+  }
+
+  @media screen and (min-width: 1440px) {
+  }
+`;
+export const DescriptListWrap = styled.div`
+display: flex;
+height: 36px;
+gap: 4px;
+flex-direction: column;
+
+  @media screen and (min-width: 768px) {
+  }
+
+  @media screen and (min-width: 1440px) {
+  }
+`;
+export const DescriptList = styled.ul`
+display: flex;
+height: 18px;
+
+column-gap: 6px;
+color: var(--color-text-second);
+flex-wrap: nowrap;
+overflow: hidden;
+
+  @media screen and (min-width: 768px) {
+  }
+
+  @media screen and (min-width: 1440px) {
+  }
+`;
+
+export const DescriptItem = styled.li`
+display: flex;
+
+/* color: var(--color-text-second); */
+&:not(:last-child) {
+
+
+&:after {
+    display: block;
+    height: 16px;
+    width: 1px;
+background-color: rgba(18, 20, 23, 0.10);
+margin-left: 6px;
+content: '';
+
+}}
+  @media screen and (min-width: 768px) {
+  }
+
+  @media screen and (min-width: 1440px) {
+  }
+`;
+
+export const Button = styled.button`
+display: flex;
+width: 100%;
+height: 44px;
+padding: 12px;
+justify-content: center;
+align-items: center;
+flex-shrink: 0;
+border: none;
+border-radius: 12px;
+background: var(--color-button);
+color: var(--color-text-button-and-back);
+font-size: 14px;
+font-weight: 600;
+line-height: 1.4;
+
+&:hover,
+&:focus {
+   background: var(--color-button-hover);
+}
+
+  @media screen and (min-width: 768px) {
+  }
+
+  @media screen and (min-width: 1440px) {
+  }
+`;
diff --git a/src/components/CarsList/CarsList.jsx b/src/components/CarsList/CarsList.jsx
@@ -1,14 +1,49 @@
+import { Loader } from "Loader/Loader";
 import { CarItem } from "components/CarItem/CarItem";
-import { useSelector } from "react-redux";
-import { selectCars } from "redux/selectors";
+import { Container, Section } from "pages/Page.styled";
+import { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getCarsThunk, getFirstCarsThunk } from "redux/cars/fetchCar";
+import { selectCars, selectIsLoading } from "redux/selectors";
+import { CarsListStyle, LoadMore } from "./CarsList.styled";
 
 export const CarsList = () => {
     const cars = useSelector(selectCars);
-console.log('cars in List', cars);
+    console.log('cars in List', cars);
+    const isLoading = useSelector(selectIsLoading);
+    const dispatch = useDispatch();
+    console.log(cars.length);
+    const [isLoadMore, setIsLoadMore] = useState(false);
+
+    // useEffect(() => {
+    //     setLoad(false);
+    // }, [])
+
+    useEffect(() => {
+        dispatch(getFirstCarsThunk())
+    }, [dispatch]);
+
+    const onClickLoadMore = () => {
+        dispatch(getCarsThunk());
+        setIsLoadMore(true);
+    }
+
 
     return (
-        <ul>
-            {cars?.map((car) => <CarItem car={car} key={car.id}/>)}
-        </ul>
+        <Section>
+            <Container>
+                {isLoading && <Loader />}
+                {(cars?.length > 0) && (<>
+                    <CarsListStyle>
+                    {cars?.map((car) =>
+                        <CarItem car={car} key={car.id} />
+                    )}
+                </CarsListStyle>
+                    <LoadMore onClick={onClickLoadMore} display={isLoadMore ? 'none' : 'block'}>Load more</LoadMore>
+                </>
+)}
+
+            </Container>
+        </Section>
     )
-}
+};