add icons, filterSlice

src/components/Car/Car.jsx

@@ -58,19 +58,3 @@ export const Car = ({ car }) => {
  </CarItem>
  );
 };
-
-// {
-// Object.entries(car.details).map(([key, value]) => {
-// return value === 0 ? (
-// <div style={{ display: "none" }} key={uid()}></div>
-// ) : (
-// <TagContainer key={uid()}>
-// {/* <Icon /> */}
-// <TagText>
-// {defineTabs(key, value)}{" "}
-// {key === "airConditioner" ? convertString(key) : key}
-// </TagText>
-// </TagContainer>
-// );
-// });
-// }

src/components/Car/Car.styled.js

@@ -29,15 +29,18 @@ export const CarImage = styled.div`
 export const HeadInfocontainer = styled.div`
  display: flex;
  justify-content: space-between;
+ margin-bottom: 8px;
 `;
 
 export const PriceContainer = styled.div`
  display: flex;
  gap: 10px;
+ /* margin-bottom: 24px; */
 `;
 export const HeadInfo = styled.p`
  font-size: ${(p) => p.theme.fonts.bigSize};
  line-height: 30px;
+
  font-weight: ${(p) => p.theme.fonts.bold};
 `;
 
@@ -53,6 +56,7 @@ export const Desctiption = styled.p`
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
+ margin-top: 23px;
 
  color: ${(p) => p.theme.colors.grey};
 `;
@@ -64,8 +68,8 @@ export const TagsContainer = styled.div`
 
  height: 96px;
  overflow: hidden;
- margin-top: 32px;
- margin-bottom: 32px;
+ margin-top: 24px;
+ margin-bottom: 24px;
 `;
 
 export const ShowMoreBtn = styled.button`

src/components/CarModal/CarModal.jsx

@@ -3,6 +3,7 @@ import Modal from "react-modal";
 import { CarImage } from "../Car/Car.styled";
 import { uid } from "uid";
 import {
+ CloseModal,
  ImagesList,
  ModalDescription,
  ModalLocationAndRating,
@@ -13,6 +14,7 @@ import {
 } from "./CarModal.styled";
 import { FeaturesPopUp } from "../FeaturesPopUp/FeaturesPopUp";
 import { ReviewsPopUp } from "../ReviewsPopUp/ReviewsPopUp";
+import { Icon } from "../Icon/Icon";
 
 const customStyles = {
  overlay: {
@@ -72,6 +74,9 @@ export const CarModal = ({ modalIsOpen, closeModal, car }) => {
  contentLabel="Car Modal"
  >
  <div>
+ <CloseModal onClick={() => closeModal()}>
+ <Icon width={32} height={32} iconId={"close"} />
+ </CloseModal>
  <ModalName>{car.name}</ModalName>
  <ModalLocationAndRating>
  <p>

src/components/CarModal/CarModal.styled.js

@@ -1,5 +1,15 @@
 import styled, { keyframes } from "styled-components";
 
+export const CloseModal = styled.button`
+ position: absolute;
+
+ top: 40px;
+ right: 40px;
+
+ border: none;
+ background-color: transparent;
+`;
+
 export const ModalName = styled.p`
  font-size: ${(p) => p.theme.fonts.bigSize};
  line-height: 30px;

src/components/Details/Details.jsx

@@ -1,8 +1,9 @@
 import { uid } from "uid";
 import { TagContainer, TagText } from "./Details.styled";
+import { Icon } from "../Icon/Icon";
 
 export const Details = ({ details }) => {
- const defineTabs = (tab, value) => {
+ const defineTabsValue = (tab, value) => {
  if (tab === "beds") {
  return value;
  } else if (tab === "hob") {
@@ -13,6 +14,15 @@ export const Details = ({ details }) => {
  return value === 1 ? "" : value;
  };
 
+ const defineTabs = (tab, value) => {
+ if (tab === "beds") {
+ return value === 1 ? "bed" : tab;
+ } else if (tab === "airConditioner") {
+ return convertString(tab);
+ }
+ return tab;
+ };
+
  const convertString = (string) => {
  const firstPart = string.charAt(0).toUpperCase() + string.slice(1, 3);
  const secondPart = string.slice(3).toLowerCase();
@@ -25,10 +35,13 @@ export const Details = ({ details }) => {
  <div style={{ display: "none" }} key={uid()}></div>
  ) : (
  <TagContainer key={uid()}>
- {/* <Icon /> */}
+ <Icon
+ width={20}
+ height={20}
+ iconId={key === "bathroom" ? "toilet" : key.toLowerCase()}
+ />
  <TagText>
- {defineTabs(key, value)}{" "}
- {key === "airConditioner" ? convertString(key) : key}
+ {defineTabsValue(key, value)} {defineTabs(key, value)}
  </TagText>
  </TagContainer>
  );

src/components/Details/Details.styled.js

@@ -1,6 +1,8 @@
 import styled from "styled-components";
 
 export const TagContainer = styled.div`
+ display: flex;
+ gap: 8px;
  padding: 12px 18px;
  background-color: ${(p) => p.theme.colors.mainWhite};
  border-radius: ${(p) => p.theme.radius.lg};

src/components/FilterButton/FilterButton.jsx

@@ -1,10 +1,13 @@
+import { useState } from "react";
 import { Icon } from "../Icon/Icon";
 import {
  ButtonContentContainer,
  FilterButtonStyled,
 } from "./FilterButton.styled";
 
 export const FilterButton = ({ id, iconType, text }) => {
+ const [isSelected, setIsSelected] = useState(false);
+
  return (
  <FilterButtonStyled onClick={() => console.log(text)}>
  <ButtonContentContainer>

src/components/FilterButton/FilterButton.styled.js

@@ -13,9 +13,18 @@ export const FilterButtonStyled = styled.button`
  line-height: 20px;
  font-weight: 500;
 
- border: 1px solid rgba(16, 24, 40, 0.2);
+ border: 1px solid ${(p) => p.theme.colors.borderColor};
  border-radius: ${(p) => p.theme.radius.sm};
  background-color: transparent;
+ transition: border ${(p) => p.theme.transition.transitionDurAndFunc};
+
+ &:hover {
+ border: 1px solid ${(p) => p.theme.colors.red};
+ }
+
+ &.isSelected {
+ border: 1px solid ${(p) => p.theme.colors.red};
+ }
 `;
 
 export const ButtonContentContainer = styled.div`

src/redux/cars/carsSlice.js

@@ -2,7 +2,7 @@ import { createSlice } from "@reduxjs/toolkit";
 import { fetchCars } from "./operations";
 
 const carsSlice = createSlice({
- name: "contacts",
+ name: "cars",
  initialState: {
  cars: [],
  isLoading: false,

src/redux/filter/filterSlice.js

@@ -0,0 +1,13 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const filterSlice = createSlice({
+ name: "filter",
+ initialState: {
+ inputValue: "",
+ equipment: [],
+ type: [],
+ },
+ reducers: {},
+});
+
+export const filterReducer = filterSlice.reducer;

src/redux/store.js

@@ -1,8 +1,10 @@
 import { configureStore } from "@reduxjs/toolkit";
 import { carsReducer } from "./cars/carsSlice";
+import { filterReducer } from "./filter/filterSlice";
 
 export const store = configureStore({
  reducer: {
  cars: carsReducer,
+ filter: filterReducer,
  },
 });

src/theme.js

@@ -35,3 +35,4 @@ export const theme = {
 // ${p => p.theme.colors.red}
 // ${p => p.theme.radius.sm}
 // ${p => p.theme.fonts.bigSize}
+// ${p => p.theme.transition.transitionDurAndFunc}