feat: add react-smart-conditional dependency and implement theme button styles; enhance routing and product display functionality

Author: M3hTi

package-lock.json

@@ -15,7 +15,8 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-icons": "^5.5.0",
-    "react-router-dom": "^7.4.1"
+    "react-router-dom": "^7.4.1",
+    "react-smart-conditional": "^1.0.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

package.json

@@ -662,6 +662,35 @@ header {
   font-weight: 500;
 }
 
+/* Theme Button Styles */
+.theme-btn {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  background-color: #fff;
+  border: 2px solid #e3e3e3;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+  z-index: 1000;
+  transition: all 0.3s ease;
+}
+
+.theme-btn:hover {
+  transform: scale(1.1);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
+}
+
+.theme-btn span {
+  line-height: 1;
+}
+
 @media screen and (max-width: 550px) {
   .product-detail {
     display: flex;

src/App.css

@@ -6,14 +6,22 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 import CheckOut from "./pages/CheckOut";
 import NotFound from "./pages/NotFound";
 import Product from "./pages/Product";
+import { useProducts } from "./hooks/useProducts";
 
 function App() {
+  const { products, status } = useProducts();
   return (
     <>
       <BrowserRouter>
         <Routes>
-          <Route path="/" element={<HomePage />} />
-          <Route path="/product" element={<Product />} />
+          <Route
+            path="/"
+            element={<HomePage products={products} status={status} />}
+          />
+          <Route
+            path="/product/:id"
+            element={<Product products={products} />}
+          />
           <Route path="/login" element={<Login />} />
           <Route path="/checkout" element={<CheckOut />} />
           <Route path="*" element={<NotFound />} />

src/App.jsx

@@ -2,6 +2,7 @@ import Carousel from "./Carousel";
 import ProductDisplay from "./ProductDisplay";
 import Loader from "./Loader";
 import Error from "./Error";
+import Theme from "./Theme";
 
 function Body({ products, status, onAdd }) {
   return (
@@ -12,6 +13,7 @@ function Body({ products, status, onAdd }) {
         <ProductDisplay products={products} onAdd={onAdd} />
       )}
       {status === "error" && <Error  />}
+      <Theme />
     </div>
   );
 }

src/components/Body.jsx

@@ -6,7 +6,7 @@ import { useRef, useState } from "react";
 import { Link } from "react-router-dom";
 
 function Product({ productObj, onAdd }) {
-  const { image, name, priceCents } = productObj;
+  const { image, name, priceCents, id } = productObj;
 
   const [selectValue, setSelectValue] = useState(1);
   const [userRating, setUserRating] = useState(0);
@@ -81,9 +81,7 @@ function Product({ productObj, onAdd }) {
         </div>
         <div className="btn-container">
           <button className="preview-btn">
-            <Link to="/product" state={{ product: productObj }}>
-              preview product
-            </Link>
+            <Link to={`/product/${id}`}>product preview</Link>
           </button>
           <button className="buy-button" onClick={handleBuy}>
             Buy

src/components/Product.jsx

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+import { useState } from "react";
+import { Show } from "react-smart-conditional";
+
+function Theme() {
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("Dark-mode");
+  }, [isDark]);
+  return (
+    <button className="theme-btn" onClick={() => setIsDark((s) => !s)}>
+      <Show>
+        <Show.If condition={isDark} as={"span"}>
+          ☀️
+        </Show.If>
+        <Show.Else>🌙</Show.Else>
+      </Show>
+    </button>
+  );
+}
+
+export default Theme;

src/components/Theme.jsx

@@ -1,11 +1,12 @@
 import { useState } from "react";
-import { useProducts } from "../hooks/useProducts";
+
 
 import Header from "../components/Header";
 import Body from "../components/Body";
 
-function HomePage() {
-  const { products, status } = useProducts();
+
+function HomePage({products, status}) {
+  
   const [shoppingCart, setShoppingCart] = useState([]);
   const [query, setQuery] = useState("");
 

src/pages/HomePage.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import Header from "../components/Header";
 import { NavLink } from "react-router-dom";
+import Theme from "../components/Theme";
 
 function Login() {
   const [email, setEmail] = useState("");
@@ -58,6 +59,7 @@ function Login() {
           </button>
         </div>
       </div>
+      <Theme />
     </div>
   );
 }

src/pages/Login.jsx

@@ -1,13 +1,16 @@
-import { Link, useLocation } from "react-router-dom";
+import { Navigate, useNavigate, useParams } from "react-router-dom";
 import Header from "../components/Header";
+import Theme from "../components/Theme";
 
-function Product() {
-  const location = useLocation();
-  const {
-    product: { image, name, priceCents },
-  } = location.state;
+function Product({ products }) {
+  const { id } = useParams();
+  const navigate = useNavigate()
 
-  console.log(image, name, priceCents);
+  const matchProduct = products.find((product) => product.id === id);
+
+  // console.log(matchProduct);
+
+  const { image, name, priceCents } = matchProduct;
 
   return (
     <>
@@ -28,12 +31,11 @@ function Product() {
             </span>
           </div>
           <div>
-            <button>
-              <Link to="/">Return To Products</Link>
-            </button>
+            <button onClick={() => navigate(-1)}>back to products</button>
           </div>
         </div>
       </div>
+      <Theme />
     </>
   );
 }