react_minta

2026-03-18 00:01:04 +01:00
parent 28bd7661f5
commit 8b8c08be1b
15 changed files with 655 additions and 0 deletions
@@ -0,0 +1,37 @@
+import { NavLink } from "react-router-dom";
+import { useTheme } from "../context/ThemeContext";
+
+const navItems = [
+  { to: "/", label: "Fooldal" },
+  { to: "/termekek", label: "Termekek" },
+  { to: "/kapcsolat", label: "Kapcsolat" }
+];
+
+function Layout({ children }) {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <div className={`app-shell ${theme}`}>
+      <header className="topbar">
+        <h1>React Frontend Minta</h1>
+        <nav>
+          {navItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}
+            >
+              {item.label}
+            </NavLink>
+          ))}
+        </nav>
+        <button className="theme-button" onClick={toggleTheme}>
+          Tema: {theme === "light" ? "Vilagos" : "Sotet"}
+        </button>
+      </header>
+      <main className="page-content">{children}</main>
+    </div>
+  );
+}
+
+export default Layout;
@@ -0,0 +1,18 @@
+import { Link } from "react-router-dom";
+
+function ProductCard({ product, onAddToCart }) {
+  return (
+    <article className="product-card">
+      <img src={product.image} alt={product.title} loading="lazy" />
+      <h3>{product.title}</h3>
+      <p className="category">{product.category}</p>
+      <p className="price">{product.price.toFixed(2)} USD</p>
+      <div className="card-actions">
+        <button onClick={() => onAddToCart(product)}>Kosarba</button>
+        <Link to={`/termekek/${product.id}`}>Reszletek</Link>
+      </div>
+    </article>
+  );
+}
+
+export default ProductCard;