Register / Login modal

voting

package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "@tailwindcss/vite": "^4.1.16",
         "react": "^19.1.1",
-        "react-dom": "^19.1.1"
+        "react-dom": "^19.1.1",
+        "react-router-dom": "^7.9.4"
       },
       "devDependencies": {
         "@eslint/js": "^9.36.0",
@@ -2208,6 +2209,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3500,6 +3510,44 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.9.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.4.tgz",
+      "integrity": "sha512-SD3G8HKviFHg9xj7dNODUKDFgpG4xqD5nhyd0mYoB5iISepuZAvzSr8ywxgxKJ52yRzf/HWtVHc9AWwoTbljvA==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.9.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.9.4.tgz",
+      "integrity": "sha512-f30P6bIkmYvnHHa5Gcu65deIXoA2+r3Eb6PJIAddvsT9aGlchMatJ51GgpU470aSqRRbFX22T70yQNUGuW3DfA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.9.4"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3602,6 +3650,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",

package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.1.16",
     "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react-dom": "^19.1.1",
+    "react-router-dom": "^7.9.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",

src/App.css

@@ -1,42 +1,2 @@
-#root {
+@import "tailwindcss";
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

src/App.tsx

@@ -1,33 +1,17 @@
 import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
 import './App.css'
+import Navbar from './components/Layout/Navbar/Navbar'
+
 
 function App() {
   const [count, setCount] = useState(0)
-
   return (
     <>
-      <div>
+
-        <a href="https://vite.dev" target="_blank">
+    
-          <img src={viteLogo} className="logo" alt="Vite logo" />
+
-        </a>
+
-        <a href="https://react.dev" target="_blank">
+
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
     </>
   )
 }

src/components/Auth/LoginModal.tsx

@@ -0,0 +1,80 @@
+import { useState } from "react";
+
+type LoginModalProps = {
+  onClose: () => void;
+  onLogin: (email: string, password: string) => void;
+  onRegister: (username: string, email: string, password: string) => void;
+};
+
+export default function LoginModal({ onClose, onLogin, onRegister }: LoginModalProps) {
+  const [isRegister, setIsRegister] = useState(false);
+  const [username, setUsername] =useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleSubmit = () => {
+    if (isRegister) {
+      if (!username || !email || !password) return;
+      onRegister(username, email, password);
+    } else {
+      if (!email || !password) return;
+      onLogin(email, password);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-black/60">
+      <div className="bg-background text-text p-8 rounded-2xl w-96 shadow-xl relative">
+        <button onClick={onClose} className="absolute top-3 right-3 text-text-muted hover:text-text">×</button>
+        <h2 className="text-xl font-semibold mb-6 text-center">
+          {isRegister ? "Kayıt Ol" : "Giriş Yap"}
+        </h2>
+
+        {isRegister && (
+          <input
+            type="text"
+            placeholder="Kullanıcı adı"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            className="w-full mb-3 p-3 rounded bg-surface border border-neutral-700 text-text placeholder-text-muted"
+          />
+        )}
+
+        <input
+          type="email"
+          placeholder="E-posta"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="w-full mb-3 p-3 rounded bg-surface border border-neutral-700 text-text placeholder-text-muted"
+        />
+
+        <input
+          type="password"
+          placeholder="Şifre"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          className="w-full mb-5 p-3 rounded bg-surface border border-neutral-700 text-text placeholder-text-muted"
+        />
+
+        <div className="flex justify-center">
+          <button
+            onClick={handleSubmit}
+            className="bg-primary hover:bg-primary-hover text-white font-medium px-6 py-2 rounded"
+          >
+            {isRegister ? "Kayıt Ol" : "Giriş Yap"}
+          </button>
+        </div>
+
+        <p className="text-sm text-center text-text-muted mt-5">
+          {isRegister ? "Zaten hesabın var mı?" : "Hesabın yok mu?"}
+          <button
+            onClick={() => setIsRegister(!isRegister)}
+            className="text-primary hover:underline ml-1"
+          >
+            {isRegister ? "Giriş Yap" : "Kayıt Ol"}
+          </button>
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/Layout/Footer.tsx

@@ -0,0 +1,9 @@
+export default function Footer() {
+  return (
+    <footer className="bg-surface border-t border-zinc-800">
+      <div className="max-w-6xl mx-auto px-6 py-4 text-center text-sm text-text-muted">
+        © {new Date().getFullYear()} DealHeat. All rights reserved.
+      </div>
+    </footer>
+  );
+}

src/components/Layout/Navbar/Navbar.tsx

@@ -0,0 +1,28 @@
+import UserInfo from "./UserInfo";
+
+export default function Navbar() {
+  return (
+    // Dış katman: arka plan tam genişlikte
+    <nav className="bg-surface">
+      {/* İç katman: içeriği ortala ve sınırlı genişlikte tut */}
+      <div className=" mx-auto flex justify-between items-center px-6 py-3">
+        
+        {/* Sol kısım: logo + menü */}
+        <div className="flex items-center gap-15">
+          {/* Logo */}
+          <div className="text-primary font-bold text-xl">DealHeat</div>
+
+          {/* Menü */}
+          <ul className="flex gap-6 text-text items-center">
+            <li><a href="#" className="hover:text-primary transition-colors font-semibold">Anasayfa</a></li>
+            <li><a href="#" className="hover:text-primary transition-colors font-semibold">Fırsatlar</a></li>
+            <li><a href="#" className="hover:text-primary transition-colors font-semibold">İletişim</a></li>
+          </ul>
+        </div>
+
+        {/* Sağ kısım: kullanıcı bilgisi */}
+        <UserInfo />
+      </div>
+    </nav>
+  );
+}

src/components/Layout/Navbar/UserInfo.tsx

@@ -0,0 +1,93 @@
+import { useState, useEffect } from "react";
+import LoginModal from "../../Auth/LoginModal";
+
+type User = {
+  id: number;
+  username: string;
+  email?: string;
+  avatarUrl?: string;
+};
+
+export default function UserInfo() {
+  const [user, setUser] = useState<User | null>(null);
+  const [showModal, setShowModal] = useState(false);
+
+  useEffect(() => {
+    const storedUser = localStorage.getItem("user");
+    if (storedUser) setUser(JSON.parse(storedUser));
+  }, []);
+  const handleRegister = async (username: string, email: string, password: string) => {
+    const res = await fetch("http://localhost:3000/api/auth/register", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ username, email, password }),
+    });
+    const data = await res.json();
+    // ...
+  };
+  const handleLogin = async (email: string, password: string) => {
+    try {
+      const res = await fetch("http://localhost:3000/api/auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password }),
+      });
+      const data = await res.json();
+
+      if (res.ok) {
+        localStorage.setItem("token", data.token);
+        localStorage.setItem("user", JSON.stringify(data.user));
+        setUser(data.user);
+        setShowModal(false);
+      } else {
+        alert(data.message || "Giriş başarısız");
+      }
+    } catch {
+      alert("Sunucu hatası");
+    }
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem("token");
+    localStorage.removeItem("user");
+    setUser(null);
+  };
+
+  return (
+    <div className="flex items-center gap-3">
+      {user ? (
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2">
+            <img
+              src={user.avatarUrl || "https://via.placeholder.com/32"}
+              alt={user.username}
+              className="w-8 h-8 rounded-full"
+            />
+            <span className="font-medium text-white">{user.username}</span>
+          </div>
+          <button
+            onClick={handleLogout}
+            className="bg-gray-700 text-white px-3 py-1 rounded hover:bg-gray-600 text-sm"
+          >
+            Çıkış yap
+          </button>
+        </div>
+      ) : (
+        <button
+          onClick={() => setShowModal(true)}
+          className="bg-orange-600 text-white px-4 py-2 rounded-md hover:bg-orange-700 transition-colors"
+        >
+          Giriş yap
+        </button>
+      )}
+
+      {showModal && (
+        <LoginModal
+          onClose={() => setShowModal(false)}
+          onLogin={handleLogin}
+          onRegister={handleRegister}
+        />
+      )}
+    </div>
+  );
+}

src/components/MainScreen/ListedDeal.tsx

@@ -0,0 +1,52 @@
+type ListedDealProps = {
+  deal: {
+    id: number;
+    title: string;
+    description: string;
+    image: string;
+    price: number;
+    upvotes?: number;
+    comments?: number;
+  };
+};
+
+
+
+export default function ListedDeal({ deal }: ListedDealProps) {
+  return (
+    <div className="flex gap-4 bg-surface p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
+      {/* Görsel */}
+      <div className="w-32 h-32 flex-shrink-0">
+        <img
+          src={deal.image}
+          alt={deal.title}
+          className="w-full h-full object-cover rounded-md"
+        />
+      </div>
+
+      {/* İçerik */}
+      <div className="flex flex-col justify-between flex-1">
+        <div>
+          <h2 className="text-lg font-semibold text-text hover:text-primary cursor-pointer">
+            {deal.title}
+          </h2>
+          <p className="text-sm text-text-muted line-clamp-2 mt-1">
+            {deal.description}
+          </p>
+        </div>
+
+        {/* Alt bilgi */}
+        <div className="flex items-center justify-between mt-3">
+          <span className="text-primary font-bold text-base">
+            {deal.price.toLocaleString()} ₺
+          </span>
+
+          <div className="flex items-center gap-3 text-sm text-text-muted">
+            <span>🔥 {deal.upvotes ?? 0}</span>
+            <span>💬 {deal.comments ?? 0}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Shared/DealCardMain.tsx

@@ -0,0 +1,125 @@
+import { useState, useEffect } from "react";
+
+type DealCardProps = {
+  id: number;
+  image: string;
+  title: string;
+  price: string;
+  store: string;
+  postedBy: string;
+  score: number;
+  comments: number;
+  postedAgo: string;
+};
+
+export default function DealCardMain({
+  id,
+  image,
+  title,
+  price,
+  store,
+  postedBy,
+  score,
+  comments,
+  postedAgo,
+}: DealCardProps) {
+  const [currentScore, setCurrentScore] = useState<number>(score);
+  const [voting, setVoting] = useState(false);
+
+  // dışarıdan gelen score güncellenirse state'i de güncelle
+  useEffect(() => {
+    setCurrentScore(score);
+  }, [score]);
+
+  const handleVote = async (type: "UP" | "DOWN") => {
+    const token = localStorage.getItem("token");
+    if (!token) {
+      alert("Giriş yapmalısın");
+      return;
+    }
+
+    setVoting(true);
+    try {
+      const res = await fetch("http://localhost:3000/api/deal-votes", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ dealId: id, voteType: type }),
+      });
+
+      const data = await res.json();
+      if (res.ok && typeof data.score === "number") {
+        setCurrentScore(data.score);
+      } else {
+        alert(data.error || "Oy gönderilemedi");
+      }
+    } catch (err) {
+      console.error("Vote error:", err);
+      alert("Sunucu hatası");
+    } finally {
+      setVoting(false);
+    }
+  };
+
+  return (
+    <div className="flex bg-surface p-4 rounded-xl hover:shadow-md transition mb-5">
+      <div className="w-42 h-42 flex-shrink-0">
+        <img
+          src={image}
+          alt={title}
+          className="w-full h-full rounded-md object-scale-down"
+        />
+      </div>
+
+      <div className="flex flex-col justify-between flex-1 ml-4">
+        <div>
+          <div className="flex justify-between items-center text-l text-text-muted">
+            <span className="flex items-center gap-2">
+              <button
+                disabled={voting}
+                onClick={() => handleVote("UP")}
+                className="text-green-600 font-bold text-lg"
+              >
+                ▲
+              </button>
+              <span>{currentScore ?? 0}°</span>
+              <button
+                disabled={voting}
+                onClick={() => handleVote("DOWN")}
+                className="text-red-600 font-bold text-lg"
+              >
+                ▼
+              </button>
+            </span>
+            <span>Posted {postedAgo}</span>
+          </div>
+
+          <h2 className="text-xl font-semibold text-text mt-1 hover:text-primary cursor-pointer">
+            {title}
+          </h2>
+
+          <div className="flex items-center gap-2 mt-1">
+            <span className="text-primary font-bold text-xl">{price}</span>
+            <span className="text-sm text-text-muted">{store}</span>
+          </div>
+
+          <p className="text-sm text-text-muted mt-1 line-clamp-2">
+            {postedBy} tarafından paylaşıldı.
+          </p>
+        </div>
+
+        <div className="flex justify-between items-center mt-3">
+          <div className="flex gap-4 text-sm text-text-muted">
+            <span>💬 {comments}</span>
+            <span>🔗 Paylaş</span>
+          </div>
+          <button className="bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90">
+            Fırsatı kap
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/global.css

@@ -0,0 +1,19 @@
+@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap');
+
+@import "tailwindcss";
+
+@theme {
+  --color-background: #121212;
+  --color-surface: #1E1E1E;
+  --color-primary: #FF6B00;
+  --color-primary-hover: #E65A00;
+  --color-accent: #FFD166;
+  --color-text: #FFFFFF;
+  --color-text-muted: #B3B3B3;
+  --color-success: #00C851;
+  --color-danger: #FF4444;
+}
+
+body {
+  @apply bg-background text-text font-sans;
+}

src/index.css

@@ -1,68 +0,0 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

src/layouts/HomeLayout.tsx

@@ -0,0 +1,19 @@
+export default function PageLayout({
+  children,
+  sidebar,
+}: {
+  children: React.ReactNode
+  sidebar?: React.ReactNode
+}) {
+  return (
+    <div className="max-w-[1400px] mx-auto px-4 py-8 grid grid-cols-1 lg:grid-cols-4 gap-6">
+      {/* SOL: 3/4 - deal listesi */}
+      <div className="lg:col-span-3">{children}</div>
+
+      {/* SAĞ: 1/4 - isteğe bağlı alan */}
+      <aside className="hidden lg:block bg-surface/50 rounded-lg p-4">
+        {sidebar}
+      </aside>
+    </div>
+  )
+}

src/layouts/MainLayout.tsx

@@ -0,0 +1,35 @@
+import Navbar from "../components/Layout/Navbar/Navbar";
+import Footer from "../components/Layout/Footer";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function MainLayout({ children }: Props) {
+  return (
+    <div className="min-h-screen flex flex-col bg-background text-text">
+
+      {/* NAVBAR - tam genişlikte arka plan, ortalı içerik */}
+      <div className="bg-surface">
+        <div className="max-w-[1400px] mx-auto px-4">
+          <Navbar />
+        </div>
+      </div>
+
+      {/* ANA İÇERİK */}
+      <main className="flex-1 bg-background">
+        <div className="max-w-[1400px] mx-auto px-4 ">
+          {children}
+        </div>
+      </main>
+
+      {/* FOOTER - tam genişlikte arka plan, ortalı içerik */}
+      <div className="bg-surface border-t border-zinc-800">
+        <div className="max-w-[1400px] mx-auto px-4 py-4">
+          <Footer />
+        </div>
+      </div>
+
+    </div>
+  );
+}

src/main.tsx

@@ -1,10 +1,15 @@
-import { StrictMode } from 'react'
+import React from "react";
-import { createRoot } from 'react-dom/client'
+import ReactDOM from "react-dom/client";
-import './index.css'
+import { BrowserRouter, Routes, Route } from "react-router-dom"; // <-- Burası önemli
-import App from './App.tsx'
+import HomePage from "./pages/HomePage";
+import "./global.css";
 
-createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
-  <StrictMode>
+  <React.StrictMode>
-    <App />
+    <BrowserRouter>
-  </StrictMode>,
+      <Routes>
-)
+        <Route path="/" element={<HomePage />} />
+      </Routes>
+    </BrowserRouter>
+  </React.StrictMode>
+);

src/pages/DealsPage.tsx

@@ -0,0 +1,10 @@
+import { useEffect, useState } from "react";
+import MainLayout from "../layouts/MainLayout";
+import PageLayout from "../layouts/HomeLayout";
+
+export default function DealsPage() {
+  const [deals, setDeals] = useState([]);
+
+
+
+}

src/pages/HomePage.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+import MainLayout from "../layouts/MainLayout";
+import HomeLayout from "../layouts/HomeLayout";
+import DealCardMain from "../components/Shared/DealCardMain";
+
+type Deal = {
+  id: number;
+  title: string;
+  description: string;
+  url: string;
+  imageUrl: string;
+  price: number;
+  score:number;
+  createdAt: string;
+  user?: { username: string };
+};
+
+
+export default function Home() {
+  const [deals, setDeals] = useState<Deal[]>([]);
+
+  useEffect(() => {
+    async function fetchDeals() {
+      try {
+        const res = await fetch("http://localhost:3000/api/deals");
+        const data = await res.json();
+        setDeals(data);
+      } catch (err) {
+        console.error("Error fetching deals:", err);
+      }
+    }
+    fetchDeals();
+  }, []);
+
+  return (
+    <MainLayout>
+      <HomeLayout>
+        {deals.map((deal) => (
+        <DealCardMain
+          key={deal.id}
+          id={deal.id} // <-- eksik olan bu satır
+          image={deal.imageUrl}
+          title={deal.title}
+          price={`${deal.price}₺`}
+          store={new URL(deal.url).hostname}
+          postedBy={deal.user?.username || "unknown"}
+          score={deal.score}
+          comments={0}
+          postedAgo={new Date(deal.createdAt).toLocaleDateString("tr-TR")}
+        />
+
+        ))}
+      </HomeLayout>
+    </MainLayout>
+  );
+}