From cf582215288b20b01d8358c1e0094cbb88f9de68 Mon Sep 17 00:00:00 2001
From: Your Name <kerem-1034003>
Date: Thu, 28 Aug 2025 14:34:47 +0200
Subject: [PATCH 1/2] core

---
 src/App.jsx               | 33 ++++++---------------------------
 src/components/Email.jsx  | 28 ++++++++++++++++++++++++++++
 src/components/Emails.jsx | 18 ++++++++++++++++++
 3 files changed, 52 insertions(+), 27 deletions(-)
 create mode 100644 src/components/Email.jsx
 create mode 100644 src/components/Emails.jsx

diff --git a/src/App.jsx b/src/App.jsx
index c902699..25e06a2 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,6 +3,7 @@ import { useState } from 'react'
 import initialEmails from './data/emails'
 
 import './styles/App.css'
+import Emails from './components/Emails'
 
 const getReadEmails = emails => emails.filter(email => !email.read)
 
@@ -88,33 +89,11 @@ function App() {
         </ul>
       </nav>
       <main className="emails">
-        <ul>
-          {filteredEmails.map((email, index) => (
-            <li
-              key={index}
-              className={`email ${email.read ? 'read' : 'unread'}`}
-            >
-              <div className="select">
-                <input
-                  className="select-checkbox"
-                  type="checkbox"
-                  checked={email.read}
-                  onChange={() => toggleRead(email)}
-                />
-              </div>
-              <div className="star">
-                <input
-                  className="star-checkbox"
-                  type="checkbox"
-                  checked={email.starred}
-                  onChange={() => toggleStar(email)}
-                />
-              </div>
-              <div className="sender">{email.sender}</div>
-              <div className="title">{email.title}</div>
-            </li>
-          ))}
-        </ul>
+        <Emails
+          emails={filteredEmails}
+          toggleRead={toggleRead}
+          toggleStar={toggleStar}
+        />
       </main>
     </div>
   )
diff --git a/src/components/Email.jsx b/src/components/Email.jsx
new file mode 100644
index 0000000..f6c1dc7
--- /dev/null
+++ b/src/components/Email.jsx
@@ -0,0 +1,28 @@
+import Emails from "./Emails.jsx"
+
+function Email({ email, toggleRead, toggleStar }) {
+    return (
+        <li className={`email ${email.read ? "read" : "unread"}`}>
+            <div className="select">
+                <input
+                    className="select-checkbox"
+                    type="checkbox"
+                    checked={email.read}
+                    onChange={() => toggleRead(email)}
+                />
+            </div>
+            <div className="star">
+                <input
+                    className="star-checkbox"
+                    type="checkbox"
+                    checked={email.starred}
+                    onChange={() => toggleStar(email)}
+                />
+            </div>
+            <div className="sender">{email.sender}</div>
+            <div className="title">{email.title}</div>
+        </li>
+    )
+}
+
+export default Email
\ No newline at end of file
diff --git a/src/components/Emails.jsx b/src/components/Emails.jsx
new file mode 100644
index 0000000..341d0ec
--- /dev/null
+++ b/src/components/Emails.jsx
@@ -0,0 +1,18 @@
+import Email from "./Email.jsx"
+
+function Emails({ emails, toggleRead, toggleStar }) {
+    return (
+        <ul>
+            {emails.map((email) => (
+                <Email
+                    key={email.id}
+                    email={email}
+                    toggleRead={toggleRead}
+                    toggleStar={toggleStar}
+                />
+            ))}
+        </ul>
+    )
+}
+
+export default Emails

From 1d51c6566ad916335d36c58d49e4d5de5f68a3ba Mon Sep 17 00:00:00 2001
From: Your Name <kerem-1034003>
Date: Thu, 28 Aug 2025 16:24:29 +0200
Subject: [PATCH 2/2] exstension 1

---
 src/App.jsx                  | 21 ++++++++++++++++-----
 src/components/Email.jsx     | 28 ++++++++++++++++++----------
 src/components/EmailView.jsx | 12 ++++++++++++
 src/components/Emails.jsx    |  3 ++-
 4 files changed, 48 insertions(+), 16 deletions(-)
 create mode 100644 src/components/EmailView.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 25e06a2..62af8c0 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,6 +4,7 @@ import initialEmails from './data/emails'
 
 import './styles/App.css'
 import Emails from './components/Emails'
+import EmailView from './components/EmailView'
 
 const getReadEmails = emails => emails.filter(email => !email.read)
 
@@ -13,6 +14,7 @@ function App() {
   const [emails, setEmails] = useState(initialEmails)
   const [hideRead, setHideRead] = useState(false)
   const [currentTab, setCurrentTab] = useState('inbox')
+  const [selectedEmail, setSelectedEmail] = useState(null)
 
   const unreadEmails = emails.filter(email => !email.read)
   const starredEmails = emails.filter(email => email.starred)
@@ -89,12 +91,21 @@ function App() {
         </ul>
       </nav>
       <main className="emails">
-        <Emails
-          emails={filteredEmails}
-          toggleRead={toggleRead}
-          toggleStar={toggleStar}
-        />
+        {selectedEmail ? (
+          <EmailView
+            email={selectedEmail}
+            goBack={() => setSelectedEmail(null)}
+          />
+        ) : (
+          <Emails
+            emails={filteredEmails}
+            toggleRead={toggleRead}
+            toggleStar={toggleStar}
+            openEmail={setSelectedEmail}
+          />
+        )}
       </main>
+
     </div>
   )
 }
diff --git a/src/components/Email.jsx b/src/components/Email.jsx
index f6c1dc7..fed37b2 100644
--- a/src/components/Email.jsx
+++ b/src/components/Email.jsx
@@ -1,28 +1,36 @@
-import Emails from "./Emails.jsx"
-
-function Email({ email, toggleRead, toggleStar }) {
+function Email({ email, toggleRead, toggleStar, openEmail }) {
     return (
         <li className={`email ${email.read ? "read" : "unread"}`}>
             <div className="select">
                 <input
-                    className="select-checkbox"
                     type="checkbox"
+                    className="select-checkbox"
                     checked={email.read}
-                    onChange={() => toggleRead(email)}
+                    onChange={(e) => {
+                        e.stopPropagation();
+                        toggleRead(email);
+                    }}
                 />
             </div>
+
             <div className="star">
                 <input
-                    className="star-checkbox"
                     type="checkbox"
+                    className="star-checkbox"
                     checked={email.starred}
-                    onChange={() => toggleStar(email)}
+                    onChange={(e) => {
+                        e.stopPropagation();
+                        toggleStar(email);
+                    }}
                 />
             </div>
-            <div className="sender">{email.sender}</div>
-            <div className="title">{email.title}</div>
+
+            <div className="email-info" onClick={openEmail}>
+                <div className="sender">{email.sender}</div>
+                <div className="title">{email.title}</div>
+            </div>
         </li>
     )
 }
 
-export default Email
\ No newline at end of file
+export default Email
diff --git a/src/components/EmailView.jsx b/src/components/EmailView.jsx
new file mode 100644
index 0000000..ff7ffad
--- /dev/null
+++ b/src/components/EmailView.jsx
@@ -0,0 +1,12 @@
+function EmailView({ email, goBack }) {
+    return (
+        <div className="email-view">
+            <button onClick={goBack}>Back</button>
+            <h2>{email.title}</h2>
+            <p><strong>From:</strong> {email.sender}</p>
+            <p>{email.body || "No content available"}</p>
+        </div>
+    )
+}
+
+export default EmailView
diff --git a/src/components/Emails.jsx b/src/components/Emails.jsx
index 341d0ec..54afa71 100644
--- a/src/components/Emails.jsx
+++ b/src/components/Emails.jsx
@@ -1,6 +1,6 @@
 import Email from "./Email.jsx"
 
-function Emails({ emails, toggleRead, toggleStar }) {
+function Emails({ emails, toggleRead, toggleStar, openEmail }) {
     return (
         <ul>
             {emails.map((email) => (
@@ -9,6 +9,7 @@ function Emails({ emails, toggleRead, toggleStar }) {
                     email={email}
                     toggleRead={toggleRead}
                     toggleStar={toggleStar}
+                    openEmail={() => openEmail(email)}
                 />
             ))}
         </ul>