Merge branch 'main' into deploy

src/App.js

@@ -1,15 +1,16 @@
 import app from "./styles/App.module.css";
 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 
+import AppHeader from "./components/AppHeader";
+import PageNotFound from "./pages/PageNotFound";
 import UseCallback from "./pages/UseCallback";
 import UseContext from "./pages/UseContext";
 import UseEffect from "./pages/UseEffect";
+import UseId from "./pages/UseId";
 import UseMemo from "./pages/UseMemo";
 import UseReducer from "./pages/UseReducer";
 import UseRef from "./pages/UseRef";
-import PageNotFound from "./pages/PageNotFound";
 import UseState from "./pages/UseState";
-import AppHeader from "./components/AppHeader";
 
 export default function App() {
   // Determine the correct base URL based on the environment (local or GitHub Pages)
@@ -36,6 +37,9 @@ export default function App() {
             {/* UseEffect Route */}
             <Route path="useEffect" element={<UseEffect />} />
 
+            {/* UseId Route */}
+            <Route path="useId" element={<UseId />} />
+
             {/* UseMemo Route */}
             <Route path="useMemo" element={<UseMemo />} />
 

src/components/AppHeader.jsx

@@ -37,9 +37,7 @@ export default function AppHeader() {
             useCustom
           </option>
           <option value="/useEffect">useEffect</option>
-          <option value="/useId" disabled>
-            useId
-          </option>
+          <option value="/useId">useId</option>
           <option value="/useMemo">useMemo</option>
           <option value="/useReducer">useReducer</option>
           <option value="/useRef">useRef</option>

src/components/EmailForm.jsx

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import util from "../styles/Util.module.css";
+
+export default () => {
+  const [email, setEmail] = useState("");
+  const [hover, setHover] = useState(false);
+
+  const emailInputStyle = {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    display: "block",
+    fontSize: "1.5rem",
+    fontWeight: "bold",
+    cursor: "pointer",
+    color: hover ? "#fbda61" : "#FFFFFF",
+  };
+
+  const labelStyle = {
+    cursor: "pointer",
+  };
+
+  const handleChange = (e) => {
+    setEmail(e.target.value);
+  };
+
+  return (
+    <>
+      <div
+        style={emailInputStyle}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+      >
+        <label htmlFor="email" style={labelStyle}>
+          Email
+        </label>
+        <input
+          id="email"
+          type="email"
+          value={email}
+          onChange={handleChange}
+          required
+          className={util["input"]}
+        />
+      </div>
+    </>
+  );
+};

src/pages/UseCallback.jsx

@@ -5,9 +5,6 @@ import util from "../styles/Util.module.css";
 import Button from "../components/Button";
 import List from "../components/List";
 
-// Create a context for theme
-export const ThemeContext = React.createContext();
-
 // Default component function
 export default () => {
   // Create state for number and darkTheme using useState hook

src/pages/UseId.jsx

@@ -0,0 +1,46 @@
+// Import necessary packages, styles, and components
+import info from "../styles/Info.module.css";
+import React, { useState } from "react";
+import util from "../styles/Util.module.css";
+import EmailForm from "../components/EmailForm";
+
+// Default component function
+export default () => {
+  // Create state for number and darkTheme using useState hook
+  const [number, setNumber] = useState(() => 0);
+
+  const style = {
+    color: "#fbda61",
+  };
+
+  return (
+    <>
+      {/* Header and Explanation about useId */}
+      <h1 className={util["header-1"]}>- useId -</h1>
+      <h2 className={`${info["info"]} ${info["border-bottom"]}`}>
+        <span>useId</span> is a React hook that generates a unique id for a
+        component or HTML element. This hook is useful when you need to assign
+        unique identifiers to elements, especially for accessibility purposes
+        such as linking labels with form controls. When the component
+        re-renders, the <span>useId</span> hook ensures the same unique id is
+        returned, maintaining consistency across re-renders. This approach helps
+        in avoiding the re-generation of ids, thereby maintaining the
+        association between elements and improving overall accessibility and
+        functionality.
+      </h2>
+
+      {/*  */}
+      <EmailForm />
+      <h2
+        className={`${info["info"]} ${info["border-top"]} ${info["border-bottom"]}`}
+      >
+        By clicking on the <b style={style}>"Email"</b> text{" "}
+        <b style={style}>below</b>, the corresponding input field{" "}
+        <b style={style}> above </b> is activated. This interaction is made
+        possible because both input fields share the same id, generated by the{" "}
+        <span>useId</span> hook.
+      </h2>
+      <EmailForm />
+    </>
+  );
+};