Merge branch 'main' into deploy

.github/workflows/deploy.yml

@@ -30,6 +30,8 @@ jobs:
         run: npm i
 
       - name: Build
+        env:
+          NODE_ENV: "production"
         run: npm run build
 
       - name: Deploy

src/App.css

@@ -13,39 +13,114 @@ body {
 .App-logo {
   animation: App-logo-spin infinite 20s linear;
   height: 50px;
-
 }
 
 @keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-  border-bottom: 3px solid #ffffff;
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 1em;
-  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 10px;
+  background-color: #282c34;
+  color: #fff;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+}
+
+.header-content h1 {
+  font-size: 24px;
+  margin: 0;
+}
+
+.logo-title {
+  display: flex;
+  align-items: center;
+}
+
+.App-logo {
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
 }
 
 .header-selector {
-  margin: 20px;
-  color: white;
-  background-color: #282c34;
+  background-color: #61dafb;
+  color: #282c34;
+  border: none;
+  padding: 10px;
   border-radius: 5px;
-  padding: 10px 20px;
-  font-size: 18px;
-  cursor: pointer;
-  border: 2px solid #61DAFB;
+  font-size: 1.2em;
+  outline: none;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   cursor: pointer;
 }
 
+/* Media query for mobile responsiveness */
+@media screen and (max-width: 600px) {
+  .logo-title {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .header-content h1  {
+    font-size: 18px;
+  }
+}
+
+h1 {
+  font-size: 36px;
+  font-weight: normal;
+  margin: 0;
+  margin-top: 20px;
+  color: #61dafb;
+}
+
+.info-style {
+  font-size: 24px;
+  font-weight: normal;
+  line-height: 1.5;
+  color: #ffffff;
+  margin: 20px;
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 10px;
+  padding-bottom: 10px;
+}
+
+.border-top {
+  padding-top: 20px;
+  border-top: 5px solid #61dafb;
+}
+
+.border-bottom {
+  padding-bottom: 20px;
+  border-bottom: 5px solid #61dafb;
+}
+
+.info-style span {
+  font-weight: bold;
+  color: #61dafb;
+}
+
+@media screen and (max-width: 600px) {
+  .info-style {
+    font-size: 18px;
+    margin: 10px;
+  }
+}
+
 .button-style {
   margin: 5px;
   margin-top: 20px;
@@ -55,10 +130,9 @@ body {
   padding: 10px 20px;
   font-size: 18px;
   cursor: pointer;
-  border: 2px solid #61DAFB;
+  border: 2px solid #61dafb;
 }
 
-
 .active-button-style {
   margin: 5px;
   margin-top: 20px;
@@ -68,22 +142,5 @@ body {
   padding: 10px 20px;
   font-size: 18px;
   cursor: pointer;
-  border: 2px solid #FBDA61;
-}
-
-.info-style {
-  font-size: 24px;
-  font-weight: normal;
-  line-height: 1.5;
-  color: #FFFFFF;
-  margin: 20px;
-  max-width: 800px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.info-style span {
-  font-weight: bold;
-  color: #61DAFB;
-}
-
+  border: 2px solid #fbda61;
+}

src/App.js

@@ -9,11 +9,14 @@ 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.tsx";
+import AppHeader from "./components/AppHeader";
 
 export default function App() {
+  // Determine the correct base URL based on the environment (local or GitHub Pages)
+  const baseUrl = process.env.NODE_ENV === "production" ? "/react-hooks" : "";
+
   return (
-    <BrowserRouter>
+    <BrowserRouter basename={baseUrl}>
       <div className="App">
         <AppHeader />
         <Routes>

src/components/AppHeader.tsx → src/components/AppHeader.jsx

@@ -18,9 +18,12 @@ export default function AppHeader() {
 
   return (
     <div className="App-header">
-      <img src={logo} className="App-logo" alt="logo" />
-      <h1>React Hooks</h1>
-
+      <div className="header-content">
+        <div className="logo-title">
+          <img src={logo} className="App-logo" alt="logo" />
+          <h1>React Hooks</h1>
+        </div>
+      </div>
       <select
         className="header-selector"
         onChange={handleRouteChange}

src/pages/PageNotFound.jsx

@@ -6,15 +6,15 @@ const NotFound = () => {
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-
+    marginTop: "100px",
     color: "#333",
   };
 
   const headingStyle = {
     fontSize: "48px",
     fontWeight: "bold",
     marginBottom: "20px",
-    color: "#db0007",
+    color: "#e74c3c",
   };
 
   const paragraphStyle = {

src/pages/UseEffect.jsx

@@ -21,7 +21,8 @@ export default () => {
 
   return (
     <>
-      <h2 className="info-style">
+      <h1>useEffect</h1>
+      <h2 className="info-style border-bottom">
         <span>"useEffect"</span> is a React hook that allows you to perform side
         effects in
         <span> functional components</span>, such as fetching data, subscribing

src/pages/UseMemo.jsx

@@ -45,20 +45,20 @@ export default () => {
     fontWeight: "bold",
     borderRadius: "5px",
     border: "2px solid #61DAFB",
-    margin: "20px",
+    marginTop: "20px",
+    marginLeft: "auto",
+    marginRight: "auto",
+    maxWidth: "800px",
   };
 
   return (
     <>
-      <h2 className="info-style">
+      <h1>useMemo</h1>
+      <h2 className="info-style border-bottom">
         <span>useMemo</span> is a React hook that memorizes the result of a
         function and returns the cached result when the function is called with
         the same inputs, optimizing performance by avoiding unnecessary
         re-computations.
-        <br></br> <br></br>
-        When updating the theme, the background colors change quickly because
-        the number value is taken from <span> memory</span>. However, when
-        changing the number, the component takes a bit of time to re-render.
       </h2>
       {/* Input field to change the number */}
       <input
@@ -76,6 +76,12 @@ export default () => {
       </button>
       {/* Display the doubled number with the dynamically applied theme */}
       <div style={themeStyles}>Double the input: {doubleNumber}</div>
+
+      <h2 className="info-style border-top">
+        When updating the theme, the background colors change quickly because
+        the number value is taken from <span> memory</span>. However, when
+        changing the number, the component takes a bit of time to re-render.
+      </h2>
     </>
   );
 };

src/pages/UseState.jsx

@@ -40,7 +40,8 @@ export default () => {
 
   return (
     <>
-      <h2 className="info-style">
+      <h1>useState</h1>
+      <h2 className="info-style border-bottom">
         <span>useState</span> is a crucial React hook for managing state in
         <span> functional components</span>, enabling dynamic and interactive
         user interfaces through simple initialization and updates.