add vecel

src/components/Car/Car.jsx

@@ -18,7 +18,7 @@ import { useDispatch } from "react-redux";
 import { toggleFavourite } from "../../redux/cars/carsSlice";
 import { useIsFavourite } from "../../hooks/useIsFavourite";
 
-export const Car = ({ car }) => {
+export const Car = ({ car, hidden }) => {
  const [modalIsOpen, setIsOpen] = useState(false);
  const dispatch = useDispatch();
 
@@ -37,7 +37,7 @@ export const Car = ({ car }) => {
  const isFavourite = useIsFavourite(car._id);
 
  return (
- <CarItem>
+ <CarItem className={hidden ? "hidden" : ""}>
  <CarImage
  $bgImage={
  car.gallery[0] ||

src/components/Car/Car.styled.js

@@ -1,6 +1,22 @@
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
 
-// const getImage = (props) => props.$bgImage;
+const fadeIn = keyframes`
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+`;
+
+const fadeOut = keyframes`
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+`;
 
 export const CarItem = styled.li`
  display: flex;
@@ -12,6 +28,23 @@ export const CarItem = styled.li`
 
  border: 1px solid ${(p) => p.theme.colors.borderColor};
  border-radius: ${(p) => p.theme.radius.md};
+
+ animation: ${fadeIn} 0.5s ease;
+
+ &.hidden {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ bottom: -100px;
+ margin: -1px;
+ border: 0;
+ padding: 0;
+
+ opacity: 0;
+ animation: ${fadeOut} 0.5s ease;
+
+ pointer-events: none;
+ }
 `;
 
 export const CarImage = styled.div`

src/components/CarsList/CarsList.jsx

@@ -5,20 +5,20 @@ import { CarList, ListContainer, LoadMore } from "./CarsList.styled";
 import { useState } from "react";
 
 export const CarsList = () => {
- const [visibleCars, setVisibleCars] = useState(4); // Локальний стан для кількості відображених елементів
+ const [visibleCars, setVisibleCars] = useState(4);
  const filteredCars = useSelector(selectFilteredCars);
 
  const loadMore = () => {
- setVisibleCars((prevVisibleCars) => prevVisibleCars + 4); // Збільшуємо кількість відображених елементів на 4
+ setVisibleCars((prevVisibleCars) => prevVisibleCars + 4);
  };
 
- const allCarsDisplayed = visibleCars >= filteredCars.length; // Перевіряємо, чи всі елементи вже відображені
+ const allCarsDisplayed = visibleCars >= filteredCars.length;
 
  return (
  <ListContainer>
  <CarList>
- {filteredCars.slice(0, visibleCars).map((car) => (
- <Car key={car.id} car={car.car} />
+ {filteredCars.map((car, index) => (
+ <Car key={car.id} car={car.car} hidden={index >= visibleCars} />
  ))}
  </CarList>
  {!allCarsDisplayed && (
@@ -29,18 +29,3 @@ export const CarsList = () => {
  </ListContainer>
  );
 };
-
-// export const CarsList = () => {
-// const filteredCars = useSelector(selectFilteredCars);
-
-// return (
-// <ListContainer>
-// <CarList>
-// {filteredCars.map((car) => {
-// return <Car key={car.id} car={car.car} />;
-// })}
-// </CarList>
-// <LoadMore>Load more</LoadMore>
-// </ListContainer>
-// );
-// };

src/components/GlobalStyle.jsx

@@ -80,7 +80,7 @@ button {
  margin: -1px;
  border: 0;
  padding: 0;
-
+ opacity: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);

vercel.json

@@ -0,0 +1,3 @@
+{
+ "rewrites": [{ "source": "/(.*)", "destination": "/" }]
+}