- 👋 Hey, + 👋 Hey, {user?.name}
Enter your email and password to sign in!
- Keep me logged In -
+ Keep me logged In +
+
Already have an account?{" "} { {footerItems.map((item, i) => ( - + { { label: "We Offer", path: "#weOffer" }, { label: "Clients", path: "#clients" }, ]; - + const location = useLocation(); // const { colorMode, toggleColorMode } = useColorMode(); const { isOpen, onOpen, onClose } = useDisclosure(); @@ -77,7 +77,7 @@ const Header: React.FC = () => { {headerItems.map((item, i) => ( - + { Signin @@ -116,7 +116,7 @@ const Header: React.FC = () => { Signup @@ -135,18 +135,14 @@ const Header: React.FC = () => { > diff --git a/frontend/src/components/home/bikes/bikeDetails.component.tsx b/frontend/src/components/home/bikes/bikeDetails.component.tsx index 84e570a..7566316 100644 --- a/frontend/src/components/home/bikes/bikeDetails.component.tsx +++ b/frontend/src/components/home/bikes/bikeDetails.component.tsx @@ -65,6 +65,14 @@ const BikeDetails = ({ isOpen, onClose, bike }: Model) => { > {bike.status} + + {bike.Park.name} + @@ -76,7 +84,7 @@ const BikeDetails = ({ isOpen, onClose, bike }: Model) => { { colorScheme="teal" onClick={handleBooking} > - Booking Now + Book now diff --git a/frontend/src/components/home/bikes/cardBike.component.tsx b/frontend/src/components/home/bikes/cardBike.component.tsx index 8a5f22a..d0118b5 100644 --- a/frontend/src/components/home/bikes/cardBike.component.tsx +++ b/frontend/src/components/home/bikes/cardBike.component.tsx @@ -23,6 +23,10 @@ export type Bike = { location: string; price: number; park_id: number; + image: string; + Park: { + name: string; + }; }; const CardBike = ({ bike }: { bike: Bike }) => { @@ -41,29 +45,33 @@ const CardBike = ({ bike }: { bike: Bike }) => { setLiked(!liked)} - className={`text-gray-600 absolute top-2 right-2 w-5 h-5 cursor-pointer ${ - liked && + className={`text-gray-600 absolute top-2 right-2 w-5 h-5 cursor-pointer ${liked && "text-red-500 berder-red-600 text-opacity-100 drop-shadow-lg" - }`} + }`} /> - + {bike.model} - - Best choice for women + + {bike?.Park?.name} + {/* + + {bike.id % 2 === 0 ? 'Best choice for men' : 'Best choice for women'} + + */} diff --git a/frontend/src/components/home/bikes/swiperBikes.component.tsx b/frontend/src/components/home/bikes/swiperBikes.component.tsx index e995ff2..9f76750 100644 --- a/frontend/src/components/home/bikes/swiperBikes.component.tsx +++ b/frontend/src/components/home/bikes/swiperBikes.component.tsx @@ -1,39 +1,56 @@ -import { Heading, Box, Center, Flex } from "@chakra-ui/react"; +import { Heading, Box, Center, Flex, Select } from "@chakra-ui/react"; import { Reveal } from "../../motion/reveal.component"; import { useEffect, useRef, useState } from "react"; import axios from "../../../apis/axios"; import { Swiper, SwiperSlide } from "swiper/react"; import { Swiper as SwiperCore } from "swiper/types"; - -// Import Swiper styles -import "swiper/css"; -import "swiper/css/pagination"; - -import "../../../index.css"; - -// import required modules import CardBike from "./cardBike.component"; import { HiArrowLeft, HiArrowRight } from "react-icons/hi2"; const SwiperBikes = () => { - const [bikes, setBikes] = useState<[]>([]); - const swiperRef = useRef(); + const [bikes, setBikes] = useState([]); + const [parks, setParks] = useState([]); + const [selectedParkId, setSelectedParkId] = useState("all"); + const swiperRef = useRef(null); + const [, setSlideIndex] = useState(0); + useEffect(() => { + axios + .get("/parks/open") + .then((response) => { + setParks(response.data); + }) + .catch((error) => { + console.error("Error fetching parks:", error); + }); + }, []); useEffect(() => { + let url = "/bikes/status/available/20"; + if (selectedParkId !== "all") { + url = `/bikes/park/${selectedParkId}/available`; + } + axios - .get("/bikes") + .get(url) .then((response) => { setBikes(response.data); }) .catch((error) => { console.error("Error fetching bikes:", error); }); - }, []); + }, [selectedParkId]); + + const handleParkChange = (event:any) => { + const parkId = event.target.value; + setSelectedParkId(parkId); + }; + return ( { clipPath={"circle(25% at 54% 74%)"} /> - + - + What we offer @@ -65,7 +78,36 @@ const SwiperBikes = () => { - + + + + + All Parks + {parks.map((park:any) => ( + + {park.name} + + ))} + + + + + { }, }} spaceBetween={18} - onBeforeInit={(swiper) => { + onSlideChange={(swiper) => { + setSlideIndex(swiper.activeIndex); + }} + onBeforeInit={(swiper:any) => { swiperRef.current = swiper; }} className="mySwiper" > - {bikes.map((bike, i) => { - return ( - - - - ); - })} + {bikes.map((bike, i) => ( + + + + ))} - - + swiperRef.current?.slidePrev()} - > - - - + swiperRef.current?.slideNext()} - > - -