blood home page toggled

shahidmonowarr · Dec 29, 2022 · 9693992 · 9693992
1 parent bfd77b7
commit 9693992
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 32 deletions.
diff --git a/src/App.js b/src/App.js
@@ -10,8 +10,11 @@ import AboutUs from "./Optional/AboutUs";
 import Faq from "./Optional/Faq";
 import PrivacyPolicy from "./Optional/PrivacyPolicy";
 import Reviews from "./Pages/AllReviews/Reviews/Reviews";
-import AvailableBlood from "./Pages/BloodsPage/AvailableDonor/AvailableDonor";
+import { default as AvailableBlood, default as AvailableDonor } from "./Pages/BloodsPage/AvailableDonor/AvailableDonor";
+import BloodDonate from "./Pages/BloodsPage/BloodDonate/BloodDonate";
 import BloodHome from "./Pages/BloodsPage/BloodHome/BloodHome";
+import BloodPatient from "./Pages/BloodsPage/BloodPatient/BloodPatient";
+import Guidelines from "./Pages/BloodsPage/Guidelines/Guidelines";
 import CheckOut from "./Pages/CheckOut/CheckOut/CheckOut";
 import AllCourses from "./Pages/CoursesPage/AllCourses/AllCourses";
 import CourseDetails from "./Pages/CoursesPage/CourseDetails/CourseDetails";
@@ -128,6 +131,18 @@ function App() {
           <Route path="faq" element={<Faq />} />
           <Route path="privacyPolicy" element={<PrivacyPolicy/>} />
           <Route path="blood" element={<BloodHome/>} />
+          <Route
+            path="blood"
+            element={
+              <BloodHome/>
+            }
+          > 
+            <Route index element={<AvailableDonor/>}></Route>
+            <Route path="availableDonor" element={<AvailableDonor/>}></Route>
+            <Route path="bloodDonate" element={<BloodDonate/>}></Route>
+            <Route path="bloodPatient" element={<BloodPatient/>}></Route>
+            <Route path="guidelines" element={<Guidelines/>}></Route>
+          </Route>
           <Route path="*" element={<NotFound />} />
         </Routes>
         <Footer />

diff --git a/src/Pages/BloodsPage/BloodHome/BloodHome.js b/src/Pages/BloodsPage/BloodHome/BloodHome.js
@@ -1,8 +1,6 @@
 import React from "react";
 import { Button, ButtonGroup, Container } from "react-bootstrap";
-import BloodDonate from "../BloodDonate/BloodDonate";
-import BloodPatient from "../BloodPatient/BloodPatient";
-import Guidelines from "../Guidelines/Guidelines";
+import { Link, Outlet } from "react-router-dom";
 
 const BloodHome = () => {
   return (
@@ -16,23 +14,41 @@ const BloodHome = () => {
         </p>
         <Container>
           <ButtonGroup className="flex-wrap" aria-label="Basic example">
-            <Button className="mx-2 my-2 rounded-3" variant="secondary" o>
-              Available Donor
-            </Button>
-            <Button className="mx-2 my-2 rounded-3" variant="secondary">
-              Donate Blood
-            </Button>
-            <Button className="mx-2 my-2 rounded-3" variant="secondary">
-              Request Blood
-            </Button>
-            <Button className="mx-2 my-2 rounded-3" variant="secondary">
-              Guidelines
-            </Button>
+            <Link
+              to="/blood/availableDonor"
+              style={{ textDecoration: "none", color: "white" }}
+            >
+              <Button className="mx-2 my-2 rounded-3" variant="secondary" o>
+                Available Donor
+              </Button>
+            </Link>
+            <Link
+              to="/blood/bloodDonate"
+              style={{ textDecoration: "none", color: "white" }}
+            >
+              <Button className="mx-2 my-2 rounded-3" variant="secondary">
+                Donate Blood
+              </Button>
+            </Link>
+            <Link
+              to="/blood/bloodPatient"
+              style={{ textDecoration: "none", color: "white" }}
+            >
+              <Button className="mx-2 my-2 rounded-3" variant="secondary">
+                Request Blood
+              </Button>
+            </Link>
+            <Link
+              to="/blood/guidelines"
+              style={{ textDecoration: "none", color: "white" }}
+            >
+              <Button className="mx-2 my-2 rounded-3" variant="secondary">
+                Guidelines
+              </Button>
+            </Link>
           </ButtonGroup>
         </Container>
-        <BloodDonate/>
-        <BloodPatient/>
-        <Guidelines/>
+        <Outlet></Outlet>
       </Container>
     </>
   );

diff --git a/src/Pages/BloodsPage/BloodRequest/BloodRequest.js b/src/Pages/BloodsPage/BloodRequest/BloodRequest.js
diff --git a/src/Pages/BloodsPage/Guidelines/Guidelines.js b/src/Pages/BloodsPage/Guidelines/Guidelines.js
@@ -4,7 +4,7 @@ import { Card, Container } from "react-bootstrap";
 const Guidelines = () => {
   return (
     <Container>
-      <Card className="text-start mx-auto col-sm-6 col-md-6 col-lg-8">
+      <Card className="text-start my-5 mx-auto col-sm-6 col-md-6 col-lg-8">
         <Card.Body>
           <Card.Title
             style={{ textTransform: "uppercase", fontWeight: "bold" }}
@@ -93,7 +93,7 @@ const Guidelines = () => {
             sufficient supply of blood available for those in need.
           </Card.Text>
           <Card.Text>
-            In conclusion, donating blood is a simple and selfless act that can
+            <strong>In conclusion,</strong> donating blood is a simple and selfless act that can
             save the lives of countless people. If you are eligible to donate,
             consider making an appointment to give blood today. You never know
             when you or someone you love may need a blood transfusion, and by