Okan ozdemir

src/App.jsx

@@ -4,35 +4,37 @@ import Diary from "./Diary/Diary";
 import GramCalc from "./Diary/GramCalc";
 import Login from "./Login/Login";
 import Register from "./Register/Registration";
-
+import Modal from "./Modal";
 
 function ProtectedRoute({ isAuth, children }) {
   if (!isAuth) return <Navigate to="/login" replace />;
   return children;
 }
 
-
-import MainPage from "./MainPage/MainPage"; 
-
 export default function App() {
-  const [view, setView] = useState("main"); 
+  const [isAuth, setIsAuth] = useState(false);
+  const navigate = useNavigate();
   const [products, setProducts] = useState([]);
-  const [date, setDate] = useState(new Date());
-  const [dailyRate, setDailyRate] = useState(2800);
+  const [date] = useState(new Date());
+  const [dailyRate] = useState(2800);
+  const [showModal, setShowModal] = useState(true);
 
   // ---- Auth ----
+  // eslint-disable-next-line no-unused-vars
   const handleLogin = async ({ email, password }) => {
-    // backend 
+    // backend
     setIsAuth(true);
     navigate("/diary", { replace: true });
   };
 
+  // eslint-disable-next-line no-unused-vars
   const handleRegister = async ({ name, email, password }) => {
     // signup
     setIsAuth(true);
     navigate("/diary", { replace: true });
   };
 
+  // eslint-disable-next-line no-unused-vars
   const handleLogout = () => {
     setIsAuth(false);
     navigate("/login", { replace: true });
@@ -41,86 +43,51 @@ export default function App() {
   // ---- Diary/GramCalc ----
   const handleAdd = (item) => {
     setProducts((prev) => [...prev, item]);
-    navigate("/diary"); 
+    navigate("/diary");
   };
 
   const handleDelete = (index) => {
     setProducts((prev) => prev.filter((_, i) => i !== index));
   };
-  const handleOpenAdd = () => navigate("/add");
-  const handleBackToDiary = () => navigate("/diary");
-  const handleExit = () => navigate("/diary");
-  const handleMenuClick = () => console.log("menu");
-
-  return (
-    <Routes>
-      {/* Login & Register */}
-      <Route
-        path="/login"
-        element={
-          <Login
-            onSubmit={handleLogin}
-            onSwitchTab={(tab) =>
-              tab === "register" ? navigate("/register") : null
-            }
-          />
-        }
-      />
-      <Route
-        path="/register"
-        element={
-          <Register
-            onSubmit={handleRegister}
-            onSwitchTab={(tab) => (tab === "login" ? navigate("/login") : null)}
-          />
-        }
-      />
 
-      {/* Diary korumalı */}
-      <Route
-        path="/diary"
-        element={
-          <ProtectedRoute isAuth={isAuth}>
-            <Diary
-              products={products}
-              date={date}
-              dailyRate={dailyRate}
-              onBack={handleBackToDiary}
-              onExit={handleLogout}
-              onMenuClick={handleMenuClick}
-              onAddClick={handleOpenAdd} 
-              onAdd={handleAdd} 
-              onDelete={handleDelete}
-              onDateChange={setDate}
-            />
-          </ProtectedRoute>
-        }
-      />
-
-      {/* GramCalc (modal sayfası) korumalı */}
-      <Route
-        path="/add"
-        element={
-          <ProtectedRoute isAuth={isAuth}>
-            <GramCalc
-              title="Nic"
-              onMenuClick={handleMenuClick}
-              onBack={handleBackToDiary}
-              onExit={handleExit}
-              onAdd={handleAdd}
-              pending={false}
-            />
-          </ProtectedRoute>
-        }
-      />
+  const handleBack = () => navigate("/diary");
+  const handleExit = () => navigate("/login");
+  const handleMenuClick = () => {
+    console.log("menu");
+  };
 
-      {/* Kök ve 404 yönlendirmeleri */}
-      <Route
-        path="/"
-        element={<Navigate to={isAuth ? "/diary" : "/login"} replace />}
-      />
-      <Route path="*" element={<Navigate to="/" replace />} />
-    </Routes>
+  return (
+    <>
+      <Routes>
+        <Route path="/login" element={<Login onLogin={handleLogin} />} />
+        <Route path="/register" element={<Register onRegister={handleRegister} />} />
+        <Route
+          path="/diary"
+          element={
+            <ProtectedRoute isAuth={isAuth}>
+              <Diary
+                products={products}
+                date={date}
+                dailyRate={dailyRate}
+                onBack={handleBack}
+                onExit={handleExit}
+                onMenuClick={handleMenuClick}
+                onAdd={handleAdd}
+                onDelete={handleDelete}
+              />
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="/"
+          element={<Navigate to={isAuth ? "/diary" : "/login"} replace />}
+        />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+      <Modal isOpen={showModal} onClose={() => setShowModal(false)}>
+        <p>Modal çalışıyor</p>
+      </Modal>
+    </>
   );
 }
 

src/DailyCalorieIntake.jsx

@@ -0,0 +1,13 @@
+import styles from './DailyCalorieIntake.module.css';
+
+const DailyCalorieIntake = ({ calories }) => {
+  return (
+    <div className={styles.content}>
+      <h3>Your recommended daily calorie intake is:</h3>
+      <p className={styles.calories}>{calories} kcal</p>
+      <p>Based on your data, this is the amount of calories you should consume daily to reach your desired weight.</p>
+    </div>
+  );
+};
+
+export default DailyCalorieIntake;

src/DailyCalorieIntake.module.css

@@ -0,0 +1,36 @@
+.content {
+  padding: 1.5rem;
+  background: #264061;
+  color: white;
+  text-align: center;
+  font-family: Verdana, sans-serif;
+}
+
+.calories {
+  font-size: 24px;
+  font-weight: bold;
+  color: #f47c2e;
+  margin: 1rem 0;
+}
+
+/* Tablet */
+@media (min-width: 768px) {
+  .content {
+    padding: 2rem;
+  }
+
+  .calories {
+    font-size: 28px;
+  }
+}
+
+/* Desktop */
+@media (min-width: 1024px) {
+  .content {
+    padding: 2.5rem;
+  }
+
+  .calories {
+    font-size: 32px;
+  }
+}

src/Logo.jsx

@@ -0,0 +1,35 @@
+import { useNavigate } from 'react-router-dom';
+import mobilLogo from "./assets/logo.png";
+import tabletLogo from "./assets/logo.png";
+
+const Logo = ({ className }) => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate('/diary');
+  };
+
+  return (
+    <picture onClick={handleClick} style={{ cursor: 'pointer' }}>
+      {/* 1200px+ için */}
+      <source
+        media="(min-width: 1200px)"
+        srcSet={tabletLogo}
+      />
+      {/* 768px+ için */}
+      <source
+        media="(min-width: 768px)"
+        srcSet={tabletLogo}
+      />
+      {/* Default: mobil */}
+      <img
+        src={mobilLogo}
+        alt="SlimMom"
+        className={className}
+        decoding="async"
+      />
+    </picture>
+  );
+};
+
+export default Logo;

src/Logo.module.css

@@ -0,0 +1,18 @@
+.logo {
+  width: auto;
+  height: 28px;
+  opacity: 1;
+  image-rendering: crisp-edges;
+  filter: contrast(1.1) brightness(1.05);
+}
+
+/* Mobil için daha küçük */
+@media (max-width: 767px) {
+  .logo {
+    width: auto;
+    height: 28px;
+    opacity: 1;
+    image-rendering: crisp-edges;
+    filter: contrast(1.1) brightness(1.05);
+  }
+}