diff --git a/public/images/compass.png b/public/images/compass.png new file mode 100644 index 0000000..0615ec3 Binary files /dev/null and b/public/images/compass.png differ diff --git a/public/images/view_from_window.png b/public/images/view_from_window.png new file mode 100644 index 0000000..b4cf281 Binary files /dev/null and b/public/images/view_from_window.png differ diff --git a/src/components/favoritesPage/FavoriteApartmentCard.tsx b/src/components/favoritesPage/FavoriteApartmentCard.tsx new file mode 100644 index 0000000..f8a00a1 --- /dev/null +++ b/src/components/favoritesPage/FavoriteApartmentCard.tsx @@ -0,0 +1,64 @@ +import { ILayoutCard } from "../../types/layoutCard"; +import Button from "../Button"; +import BookingIcon from "../icons/BookingIcon"; +import HeartIcon from "../icons/Heart"; + +interface FavoriteAppartmentCardProps { + card: ILayoutCard; +} + +const FavoriteAppartmentCard = ({ card }: FavoriteAppartmentCardProps) => { + const { + roveHome, + floorEnd, + floorStart, + wing, + units, + apartmentType, + square, + cost, + } = card; + + return ( +
+
+
+

+ Rove Home {roveHome} +

+
+

{wing}

+
+

+ Floor {floorStart}-{floorEnd} +

+
+

+ Floor {floorStart}-{floorEnd} +

+
+
+
+
+ +
+
+
+

+ {apartmentType}, {square} Sqft +

+

AED {cost}

+
+
+
+ ); +}; + +export default FavoriteAppartmentCard; diff --git a/src/components/icons/BookingIcon.tsx b/src/components/icons/BookingIcon.tsx new file mode 100644 index 0000000..3ba9fbc --- /dev/null +++ b/src/components/icons/BookingIcon.tsx @@ -0,0 +1,20 @@ +const BookingIcon = () => { + return ( + + + + ); +}; + +export default BookingIcon; diff --git a/src/components/icons/FiltersIcon.tsx b/src/components/icons/FiltersIcon.tsx new file mode 100644 index 0000000..210ec2e --- /dev/null +++ b/src/components/icons/FiltersIcon.tsx @@ -0,0 +1,44 @@ +const FiltersIcon = () => { + return ( + + + + + + + + + ); +}; + +export default FiltersIcon; diff --git a/src/components/icons/TrashIcon.tsx b/src/components/icons/TrashIcon.tsx new file mode 100644 index 0000000..014d8cf --- /dev/null +++ b/src/components/icons/TrashIcon.tsx @@ -0,0 +1,24 @@ +const TrashIcon = () => { + return ( + + + + + ); +}; + +export default TrashIcon; diff --git a/src/components/searchApartment/ApartmentLayout.tsx b/src/components/searchApartment/ApartmentLayout.tsx new file mode 100644 index 0000000..48a3cc2 --- /dev/null +++ b/src/components/searchApartment/ApartmentLayout.tsx @@ -0,0 +1,34 @@ +import { useState } from "react"; +import { ISwitchLabel } from "../../types/switchLabel"; +import SwitchToggle from "../SwitchToggle"; + +const apartmentLayouts: ISwitchLabel[] = [ + { id: "1", label: "Layout" }, + { id: "2", label: "On the floor" }, +]; + +const ApartmentLayout = () => { + const [currentLabel, setCurrentLabel] = useState(apartmentLayouts[0]); + const handleOnSwitchClick = (label: ISwitchLabel) => { + setCurrentLabel(label); + }; + return ( +
+ +
+ +
+ +
+ ); +}; + +export default ApartmentLayout; diff --git a/src/components/searchApartment/ApartmentSidebar.tsx b/src/components/searchApartment/ApartmentSidebar.tsx new file mode 100644 index 0000000..06d6259 --- /dev/null +++ b/src/components/searchApartment/ApartmentSidebar.tsx @@ -0,0 +1,65 @@ +import Button from "../Button"; + +const ApartmentSidebar = () => { + return ( +
+
+

+

+ View from window +

+ +
+
+

+ Parameters +

+
+
+

Complex

+

ROVE Home Marasi Drive

+
+
+

Section

+

East Wing

+
+
+

Floor

+

11

+
+
+

Number

+

213

+
+
+

Size

+

609 Sqft

+
+
+
+
+

+ AED 1,668,888 +

+
+
+
+
+ ); +}; + +export default ApartmentSidebar; diff --git a/src/components/searchApartment/ButtonPanel.tsx b/src/components/searchApartment/ButtonPanel.tsx new file mode 100644 index 0000000..7c42ad0 --- /dev/null +++ b/src/components/searchApartment/ButtonPanel.tsx @@ -0,0 +1,33 @@ +import { useNavigate } from "react-router-dom"; +import Button from "../Button"; +import HeartIcon from "../icons/Heart"; +import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon"; + +const ButtonPanel = () => { + const navigate = useNavigate(); + + const handleOnBackClick = () => { + navigate(-1); + }; + + return ( +
+
+
+
+ ); +}; + +export default ButtonPanel; diff --git a/src/components/searchParticularApartmentsPage/ApartmentCard.tsx b/src/components/searchParticularApartmentsPage/ApartmentCard.tsx index 067e7c1..467a307 100644 --- a/src/components/searchParticularApartmentsPage/ApartmentCard.tsx +++ b/src/components/searchParticularApartmentsPage/ApartmentCard.tsx @@ -1,9 +1,17 @@ import Button from "../Button"; import HeartIcon from "../icons/Heart"; +import { useNavigate } from "react-router-dom"; const ApartmentCard = () => { + const navigate = useNavigate(); + const handleOnCardClick = () => { + navigate("1"); + }; return ( -
+

diff --git a/src/main.tsx b/src/main.tsx index bd39249..08e41c1 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -9,6 +9,7 @@ import ComplexWing from "./pages/ComplexWing"; import Search from "./pages/Search"; import SearchParticularApartments from "./pages/SearchParticularApartments"; import SearchApartment from "./pages/SearchApartment"; +import Favorites from "./pages/Favorites"; const router = createBrowserRouter([ { @@ -47,6 +48,10 @@ const router = createBrowserRouter([ path: "/search/:apartmentType/:apartmentId", element: , }, + { + path: "/favorites", + element: , + }, ], }, ]); diff --git a/src/pages/Favorites.tsx b/src/pages/Favorites.tsx new file mode 100644 index 0000000..9155a44 --- /dev/null +++ b/src/pages/Favorites.tsx @@ -0,0 +1,204 @@ +import { useState, useEffect } from "react"; +import { sortCardBy } from "../calc/sortCard"; +import Button from "../components/Button"; +import Footer from "../components/Footer"; +import FiltersIcon from "../components/icons/FiltersIcon"; +import TrashIcon from "../components/icons/TrashIcon"; +import SortButton from "../components/searchPage/SortButton"; +import { initialSortList } from "../consts/initialSearchPage"; +import { ILayoutCard } from "../types/layoutCard"; +import FavoriteAppartmentCard from "../components/favoritesPage/FavoriteApartmentCard"; + +const favoriteCards: ILayoutCard[] = [ + { + id: "1", + roveHome: "Marasi Drive", + apartmentType: "Studio Flex", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 10488888, + square: 619, + }, + { + id: "2", + roveHome: "Marasi Drive", + apartmentType: "1 Bedroom", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 1668888, + square: 619, + }, + { + id: "3", + roveHome: "Marasi Drive", + apartmentType: "1 Bedroom", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 1668888, + square: 609, + }, + { + id: "4", + roveHome: "Marasi Drive", + apartmentType: "1 Bedroom", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 1138888, + square: 609, + }, + { + id: "5", + roveHome: "Marasi Drive", + apartmentType: "Studio Flex", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 10488888, + square: 609, + }, + { + id: "6", + roveHome: "Marasi Drive", + apartmentType: "1 Bedroom", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 1668888, + square: 609, + }, + { + id: "7", + roveHome: "Marasi Drive", + apartmentType: "1 Bedroom", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 1668888, + square: 609, + }, + { + id: "8", + roveHome: "Marasi Drive", + apartmentType: "1 Bedroom", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 1138888, + square: 609, + }, + { + id: "9", + roveHome: "Marasi Drive", + apartmentType: "Studio Flex", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 10488888, + square: 609, + }, + { + id: "10", + roveHome: "Marasi Drive", + apartmentType: "1 Bedroom", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 1668888, + square: 609, + }, + { + id: "11", + roveHome: "Marasi Drive", + apartmentType: "1 Bedroom", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 1668888, + square: 609, + }, + { + id: "12", + roveHome: "Marasi Drive", + apartmentType: "1 Bedroom", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 1138888, + square: 609, + }, +]; + +const Favorites = () => { + const [sortList, setSortList] = useState(initialSortList); + const [cards, setCards] = useState(favoriteCards); + + const handleOnSortClick = (sortId: string) => { + const updatedSortList = sortList.map((sort) => { + const isSelected = sort.id === sortId; + return { ...sort, isSelected: isSelected }; + }); + setSortList(updatedSortList); + }; + + useEffect(() => { + const sortedCards = sortCardBy(sortList, favoriteCards); + + setCards(sortedCards); + }, [sortList]); + + return ( +

+
+
+
+
+

Units

+

145

+
+
+
+
+ +
+
+
+
+ {cards.map((card) => ( + + ))} +
+
+
+
+ ); +}; + +export default Favorites; diff --git a/src/pages/SearchApartment.tsx b/src/pages/SearchApartment.tsx index 61d95c3..a40d12f 100644 --- a/src/pages/SearchApartment.tsx +++ b/src/pages/SearchApartment.tsx @@ -1,51 +1,19 @@ -import { useState } from "react"; -import Button from "../components/Button"; import Footer from "../components/Footer"; -import SwitchToggle from "../components/SwitchToggle"; -import HeartIcon from "../components/icons/Heart"; -import LeftArrowSliderIcon from "../components/icons/LeftArrowSliderIcon"; -import { ISwitchLabel } from "../types/switchLabel"; - -const apartmentLayouts: ISwitchLabel[] = [ - { id: "1", label: "Layout" }, - { id: "2", label: "On the floor" }, -]; +import ButtonPanel from "../components/searchApartment/ButtonPanel"; +import ApartmentLayout from "../components/searchApartment/ApartmentLayout"; +import ApartmentSidebar from "../components/searchApartment/ApartmentSidebar"; const SearchApartment = () => { - const [currentLabel, setCurrentLabel] = useState(apartmentLayouts[0]); - const handleOnSwitchClick = (label: ISwitchLabel) => { - setCurrentLabel(label); - }; return (
-
-
-
-
-
-
-
- -
- -
-
+
+
+ + +
+
+
-