first stage of signup page

package.json

@@ -25,6 +25,7 @@
     "react-chartjs-2": "^5.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.1",
     "react-router": "^6.17.0",
     "react-router-dom": "^6.17.0",
     "react-swipeable-list": "^1.9.3",

src/App.jsx

@@ -6,6 +6,7 @@ import AboutUsPage from './pages/AboutUsPage/AboutUsPage';
 import TutorialPage from './components/TutorialPage/TutorialPage';
 import ShareSpoonfull from './pages/ShareSpoonfull/ShareSpoonfull';
 import Navbar from './components/Navbar/Navbar';
+import SignUpPage from './pages/SignUpPage/SignUpPage';
 import "@fontsource/lato";
 import "@fontsource/lato/400.css";
 import "@fontsource/lato/700.css";
@@ -112,6 +113,7 @@ function App() {
         <Route path="/faq" element={<FAQ />} />
         <Route path="/aboutus" element={<AboutUsPage />} />
         <Route path="/sharespoonfull" element={<ShareSpoonfull />} />
+        <Route path="/signup" element={<SignUpPage />} />
       </Routes>
     </BrowserRouter>
   )

src/components/InputField/InputField.jsx

@@ -0,0 +1,22 @@
+/* eslint-disable react/prop-types */
+import { useForm } from "react-hook-form";
+
+const InputField = ({ name, label, type }) => {
+  const { register } = useForm();
+
+  return (
+    <div className="mt-4">
+      <label>{label}</label>
+      <input
+        {...register(name, {
+          required: true,
+          message: "This field is required",
+        })}
+        className="text-body w-full h-12 mt-2 p-4 rounded border-border border"
+        type={type}
+      />
+    </div>
+  );
+};
+
+export default InputField;