add styles

Nikolaus-B · Mar 21, 2024 · d7ad574 · d7ad574
1 parent 88d241f
commit d7ad574
Show file tree

Hide file tree

Showing 8 changed files with 191 additions and 26 deletions.
diff --git a/src/components/Car/Car.jsx b/src/components/Car/Car.jsx
@@ -1,5 +1,18 @@
 import { uid } from "uid";
 import { Icon } from "../Icon/Icon";
+import {
+ CarImage,
+ CarItem,
+ Desctiption,
+ HeadInfo,
+ HeadInfocontainer,
+ LocationAndRating,
+ PriceContainer,
+ ShowMoreBtn,
+ TagContainer,
+ TagText,
+ TagsContainer,
+} from "./Car.styled";
 
 export const Car = ({ car }) => {
  const defineTabs = (tab, value) => {
@@ -14,43 +27,51 @@ export const Car = ({ car }) => {
  };
 
  return (
- <li>
- <img
+ <CarItem>
+ <CarImage
+ $bgImage={
+ car.gallery[0] ||
+ "https://t4.ftcdn.net/jpg/04/70/29/97/360_F_470299797_UD0eoVMMSUbHCcNJCdv2t8B2g1GVqYgs.jpg"
+ }
+ ></CarImage>
+ {/* <CarImage
  src={
  car.gallery[0] ||
  "https://t4.ftcdn.net/jpg/04/70/29/97/360_F_470299797_UD0eoVMMSUbHCcNJCdv2t8B2g1GVqYgs.jpg"
  }
  alt="car image"
- />
+ /> */}
  <div>
- <div>
- <p>{car.name}</p>
- <p>€{car.price}.00</p>
- <Icon width={24} height={24} iconId={"heart"} />
- </div>
- <div>
+ <HeadInfocontainer>
+ <HeadInfo>{car.name}</HeadInfo>
+ <PriceContainer>
+ <HeadInfo>€{car.price}.00</HeadInfo>
+ <Icon width={24} height={24} iconId={"heart"} />
+ </PriceContainer>
+ </HeadInfocontainer>
+ <LocationAndRating>
  <p>
  {car.rating} <span>{car.reviews.length || 0} Reviews</span>
  </p>
  <p>{car.location}</p>
- </div>
- <p>{car.description}</p>
- <div>
+ </LocationAndRating>
+ <Desctiption>{car.description}</Desctiption>
+ <TagsContainer>
  {Object.entries(car.details).map(([key, value]) => {
  return value === 0 ? (
  <div style={{ display: "none" }} key={uid()}></div>
  ) : (
- <div key={uid()}>
+ <TagContainer key={uid()}>
  {/* <Icon /> */}
- <p style={{ color: "red" }}>
+ <TagText>
  {defineTabs(key, value)} {key}
- </p>
- </div>
+ </TagText>
+ </TagContainer>
  );
  })}
- </div>
- <button>Show more</button>
+ </TagsContainer>
+ <ShowMoreBtn>Show more</ShowMoreBtn>
  </div>
- </li>
+ </CarItem>
  );
 };
diff --git a/src/components/Car/Car.styled.js b/src/components/Car/Car.styled.js
@@ -0,0 +1,92 @@
+import styled from "styled-components";
+
+// const getImage = (props) => props.$bgImage;
+
+export const CarItem = styled.li`
+ display: flex;
+ gap: 24px;
+
+ width: 888px;
+ height: 358px;
+ padding: 24px;
+
+ border: 1px solid ${(p) => p.theme.colors.borderColor};
+ border-radius: 20px;
+`;
+
+export const CarImage = styled.div`
+ width: 100%;
+ height: 310px;
+
+ border-radius: 10px;
+ background-image: url(${(props) => props.$bgImage});
+ background-size: auto 100%;
+ background-repeat: no-repeat;
+ background-position: center;
+ overflow: hidden;
+`;
+
+export const HeadInfocontainer = styled.div`
+ display: flex;
+ justify-content: space-between;
+`;
+
+export const PriceContainer = styled.div`
+ display: flex;
+ gap: 10px;
+`;
+export const HeadInfo = styled.p`
+ font-size: 24px;
+ line-height: 30px;
+ font-weight: 600;
+`;
+
+export const LocationAndRating = styled.div`
+ display: flex;
+ gap: 16px;
+`;
+
+export const Desctiption = styled.p`
+ width: 525px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ color: ${(p) => p.theme.colors.grey};
+`;
+
+export const TagsContainer = styled.div`
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+
+ height: 96px;
+ overflow: hidden;
+ margin-top: 32px;
+ margin-bottom: 32px;
+`;
+
+export const TagContainer = styled.div`
+ padding: 12px 18px;
+ background-color: ${(p) => p.theme.colors.mainWhite};
+ border-radius: 100px;
+`;
+
+export const TagText = styled.p`
+ line-height: 20px;
+ background-color: ${(p) => p.theme.colors.mainWhite};
+`;
+
+export const ShowMoreBtn = styled.button`
+ width: 166px;
+ height: 56px;
+
+ background-color: ${(p) => p.theme.colors.red};
+ border-radius: 200px;
+ border: none;
+ color: ${(p) => p.theme.colors.buttonText};
+ transition: background-color ${(p) => p.theme.transition.transitionDurAndFunc};
+ &:hover {
+ background-color: ${(p) => p.theme.colors.hoverColor};
+ }
+`;
diff --git a/src/components/CarsList/CarsList.jsx b/src/components/CarsList/CarsList.jsx
@@ -1,17 +1,19 @@
 import { useSelector } from "react-redux";
 import { selectCars } from "../../redux/cars/carsSelectors";
 import { Car } from "../Car/Car";
+import { CarList, ListContainer, LoadMore } from "./CarsList.styled";
 
 export const CarsList = () => {
  const cars = useSelector(selectCars);
 
  return (
- <div>
- <ul>
+ <ListContainer>
+ <CarList>
  {cars.map((car) => {
  return <Car key={car.id} car={car.car} />;
  })}
- </ul>
- </div>
+ </CarList>
+ <LoadMore>Load more</LoadMore>
+ </ListContainer>
  );
 };
diff --git a/src/components/CarsList/CarsList.styled.js b/src/components/CarsList/CarsList.styled.js
@@ -0,0 +1,30 @@
+import styled from "styled-components";
+
+export const ListContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 50px;
+`;
+
+export const CarList = styled.ul`
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+`;
+
+export const LoadMore = styled.button`
+ width: 145px;
+ height: 56px;
+
+ margin: 0 auto;
+
+ background-color: transparent;
+ border: 1px solid ${(p) => p.theme.colors.loadMoreBorderColor};
+ border-radius: 200px;
+
+ transition: border ${(p) => p.theme.transition.transitionDurAndFunc};
+
+ &:hover {
+ border: 1px solid ${(p) => p.theme.colors.red};
+ }
+`;
diff --git a/src/components/FilterButton/FilterButton.styled.js b/src/components/FilterButton/FilterButton.styled.js
@@ -2,14 +2,17 @@ import styled from "styled-components";
 
 export const FilterButtonStyled = styled.button`
  display: flex;
- flex-direction: column;
  justify-content: center;
  align-items: center;
- gap: 5px;
 
+ padding: 18px;
  max-width: 128px;
  height: 95px;
 
+ font-size: 16px;
+ line-height: 20px;
+ font-weight: 500;
+
  border: 1px solid rgba(16, 24, 40, 0.2);
  border-radius: 10px;
  background-color: transparent;
@@ -20,5 +23,6 @@ export const ButtonContentContainer = styled.div`
  flex-direction: column;
  justify-content: center;
  align-items: center;
- flex-grow: 1;
+ gap: 5px;
+ max-width: 80px;
 `;
diff --git a/src/components/Filters/Filters.styled.js b/src/components/Filters/Filters.styled.js
@@ -54,4 +54,10 @@ export const SearchButton = styled.button`
  border-radius: 200px;
  border: none;
  color: ${(p) => p.theme.colors.buttonText};
+
+ transition: background-color ${(p) => p.theme.transition.transitionDurAndFunc};
+
+ &:hover {
+ background-color: ${(p) => p.theme.colors.hoverColor};
+ }
 `;
diff --git a/src/components/GlobalStyle.jsx b/src/components/GlobalStyle.jsx
@@ -90,5 +90,9 @@ button {
  margin: 0 auto;
  padding: 100px 64px;
  max-width: 1440px;
+ display: flex;
+ gap: 64px;
 }
+
+
 `;
diff --git a/src/theme.js b/src/theme.js
@@ -3,16 +3,22 @@ export const theme = {
  dark: "#101828",
  grey: "#475467",
  red: "#E44848",
+ hoverColor: "#D84343",
  yellow: "#FFC531",
  mainWhite: "#F2F4F7",
  white: "#F7F7F7",
  buttonText: "#FFFFFF",
+ borderColor: "rgba(16, 24, 40, 0.2)",
+ loadMoreBorderColor: "rgba(71, 84, 103, 0.2)",
  },
  radius: {
  sm: "4px",
  md: "8px",
  lg: "16px",
  },
+ transition: {
+ transitionDurAndFunc: "250ms cubic-bezier(0.4, 0, 0.2, 1)",
+ },
 };
 
 // ${p => p.theme.colors.white}