kerem yildiz

src/App.jsx

@@ -3,6 +3,8 @@ import { useState } from 'react'
 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)
 
@@ -12,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)
@@ -88,34 +91,21 @@ 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>
+        {selectedEmail ? (
+          <EmailView
+            email={selectedEmail}
+            goBack={() => setSelectedEmail(null)}
+          />
+        ) : (
+          <Emails
+            emails={filteredEmails}
+            toggleRead={toggleRead}
+            toggleStar={toggleStar}
+            openEmail={setSelectedEmail}
+          />
+        )}
       </main>
+
     </div>
   )
 }

src/components/Email.jsx

@@ -0,0 +1,36 @@
+function Email({ email, toggleRead, toggleStar, openEmail }) {
+    return (
+        <li className={`email ${email.read ? "read" : "unread"}`}>
+            <div className="select">
+                <input
+                    type="checkbox"
+                    className="select-checkbox"
+                    checked={email.read}
+                    onChange={(e) => {
+                        e.stopPropagation();
+                        toggleRead(email);
+                    }}
+                />
+            </div>
+
+            <div className="star">
+                <input
+                    type="checkbox"
+                    className="star-checkbox"
+                    checked={email.starred}
+                    onChange={(e) => {
+                        e.stopPropagation();
+                        toggleStar(email);
+                    }}
+                />
+            </div>
+
+            <div className="email-info" onClick={openEmail}>
+                <div className="sender">{email.sender}</div>
+                <div className="title">{email.title}</div>
+            </div>
+        </li>
+    )
+}
+
+export default Email

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

src/components/Emails.jsx

@@ -0,0 +1,19 @@
+import Email from "./Email.jsx"
+
+function Emails({ emails, toggleRead, toggleStar, openEmail }) {
+    return (
+        <ul>
+            {emails.map((email) => (
+                <Email
+                    key={email.id}
+                    email={email}
+                    toggleRead={toggleRead}
+                    toggleStar={toggleStar}
+                    openEmail={() => openEmail(email)}
+                />
+            ))}
+        </ul>
+    )
+}
+
+export default Emails