New Add Car Button Component

frontend/src/components/AddCarButton.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import AddCar from "../pages/AddCar";
+import { DriverWithVandC } from "../types/datatypes";
+
+const AddCarButton = ({
+  activeSection,
+  driver,
+  vehicleModalActive,
+  setVehicleModalActive,
+}: {
+  activeSection: string;
+  driver: DriverWithVandC;
+  vehicleModalActive: boolean;
+  setVehicleModalActive: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
+  const handleAddVehicle = () => {
+    setVehicleModalActive(true);
+  };
+  return (
+    <>
+      {activeSection === "vehicle" && (
+        <button
+          onClick={handleAddVehicle}
+          className="flex bg-buttongreen text-white py-3 px-5 hover:bg-[#33471a] font-syke-regular transition-colors rounded-md justify-center items-center font-bold text-md mt-3 w-auto self-end">
+          Add Vehicle
+        </button>
+      )}
+      {vehicleModalActive && (
+        <AddCar
+          driver_id={driver.id!}
+          license_number={driver.license_number!}
+          setVehicleModalActive={setVehicleModalActive}
+        />
+      )}
+    </>
+  );
+};
+
+export default AddCarButton;

frontend/src/pages/HomePage.tsx

@@ -59,7 +59,7 @@ const HomePage = () => {
 
             {/* Typewriter animation */}
             <div className="relative text-white text-lg overflow-hidden h-12">
-              <p className="inline-block whitespace-nowrap border-r-2 border-textgreen pr-2 animate-typewriter">
+              <p className="inline-block whitespace-nowrap border-r-2 border-textgreen pr-2 animate-typewriter break-word">
                 Thank you for registering as a driver. Our team is reviewing
                 your details to validate your registration.
               </p>

frontend/src/pages/ViewProfile.tsx

@@ -9,7 +9,7 @@ import useGetDriver from "../hooks/driver-hooks/useGetDriver";
 import { AuthContextType } from "../types/user.types";
 import useAuth from "../hooks/context-hooks/useAuth";
 import Loading from "../components/Loading";
-import AddCar from "./AddCar";
+import AddCarButton from "../components/AddCarButton";
 
 const ViewProfile = () => {
   const { driverId } = useParams<{ driverId: string }>();
@@ -18,10 +18,6 @@ const ViewProfile = () => {
   const { auth }: AuthContextType = useAuth();
   const [vehicleModalActive, setVehicleModalActive] = useState<boolean>(false);
 
-  const handleAddVehicle = () => {
-    setVehicleModalActive(true);
-  };
-
   if (loading) {
     return <Loading loading={loading} />;
   }
@@ -76,26 +72,13 @@ const ViewProfile = () => {
             <ViolationList violations={driver.violations!} />
           )}
         </div>
-        {activeSection === "vehicle" && (
-          <button
-            onClick={handleAddVehicle}
-            className="flex bg-buttongreen text-white py-3 px-5 hover:bg-[#33471a] font-syke-regular transition-colors rounded-md justify-center items-center font-bold text-md mt-3 w-auto self-end">
-            Add Vehicle
-          </button>
-        )}
-        {activeSection === "violation" && (
-          <button className="flex bg-buttongreen text-white py-3 px-5 hover:bg-[#33471a] font-syke-regular transition-colors rounded-md justify-center items-center font-bold text-md mt-3 w-auto self-end">
-            Add Violation
-          </button>
-        )}
-      </div>
-      {vehicleModalActive && (
-        <AddCar
-          driver_id={driverId!}
-          license_number={driver.license_number!}
+        <AddCarButton
+          activeSection={activeSection}
+          driver={driver}
+          vehicleModalActive={vehicleModalActive}
           setVehicleModalActive={setVehicleModalActive}
         />
-      )}
+      </div>
     </div>
   );
 };