From 6c6b1d097f802e0749fce76f0fcbd472355129be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hans=20Jakob=20H=C3=A5land?=
 <Hans.Jakob.Haland@no.experis.com>
Date: Thu, 28 Aug 2025 11:51:19 +0200
Subject: [PATCH 1/2] Adds emails component for listing emails

---
 src/App.jsx               | 31 ++-----------------------------
 src/components/Email.jsx  | 11 +++++++++++
 src/components/Emails.jsx | 39 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 29 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..8e54f50 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)
 
@@ -87,35 +88,7 @@ function App() {
           </li>
         </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>
-      </main>
+        <Emails emails={filteredEmails}toggleRead={toggleRead} toggleStar={toggleStar}/>
     </div>
   )
 }
diff --git a/src/components/Email.jsx b/src/components/Email.jsx
new file mode 100644
index 0000000..7d05ce9
--- /dev/null
+++ b/src/components/Email.jsx
@@ -0,0 +1,11 @@
+import {useState} from "react";
+
+const Email = () => {
+    const [read, setRead] = useState(false);
+    const [starred, setStarred] = useState(false);
+    return (
+        <>
+        
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/components/Emails.jsx b/src/components/Emails.jsx
new file mode 100644
index 0000000..4936a1a
--- /dev/null
+++ b/src/components/Emails.jsx
@@ -0,0 +1,39 @@
+
+const Emails = ({emails, toggleRead, toggleStar}) => {
+
+    return (
+        <>
+        <main className="emails">
+            <ul>
+            {emails.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>
+        </main>
+        </>
+    )
+}
+
+export default Emails;
\ No newline at end of file

From 673a1a49c7780cce60a8c89e246ad37f25171631 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hans=20Jakob=20H=C3=A5land?=
 <Hans.Jakob.Haland@no.experis.com>
Date: Thu, 28 Aug 2025 11:58:45 +0200
Subject: [PATCH 2/2] Adds email component

---
 src/components/Email.jsx  | 29 +++++++++++++++++++++++------
 src/components/Emails.jsx | 20 ++------------------
 2 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/components/Email.jsx b/src/components/Email.jsx
index 7d05ce9..e8c5ea0 100644
--- a/src/components/Email.jsx
+++ b/src/components/Email.jsx
@@ -1,11 +1,28 @@
-import {useState} from "react";
 
-const Email = () => {
-    const [read, setRead] = useState(false);
-    const [starred, setStarred] = useState(false);
+const Email = ({email, toggleRead, toggleStar}) => {
+
     return (
         <>
-        
+            <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>
         </>
     )
-}
\ No newline at end of file
+}
+
+export default Email;
\ No newline at end of file
diff --git a/src/components/Emails.jsx b/src/components/Emails.jsx
index 4936a1a..e5490ac 100644
--- a/src/components/Emails.jsx
+++ b/src/components/Emails.jsx
@@ -1,3 +1,4 @@
+import Email from "./Email";
 
 const Emails = ({emails, toggleRead, toggleStar}) => {
 
@@ -10,24 +11,7 @@ const Emails = ({emails, toggleRead, toggleStar}) => {
                 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>
+                <Email index={index} email={email} toggleRead={toggleRead} toggleStar={toggleStar}/>
                 </li>
             ))}
             </ul>