Marie Helene Hansen

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^7.8.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/App.jsx

@@ -1,6 +1,8 @@
 import { useState } from 'react'
 
 import initialEmails from './data/emails'
+import Emails from './components/Emails'
+import ViewEmail from './components/ViewEmail'
 
 import './styles/App.css'
 
@@ -9,9 +11,10 @@ const getReadEmails = emails => emails.filter(email => !email.read)
 const getStarredEmails = emails => emails.filter(email => email.starred)
 
 function App() {
-  const [emails, setEmails] = useState(initialEmails)
+  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)
@@ -41,10 +44,13 @@ function App() {
   if (currentTab === 'starred')
     filteredEmails = getStarredEmails(filteredEmails)
 
+  // left-menu Gmail logo make inbox/index button
   return (
     <div className="app">
       <header className="header">
-        <div className="left-menu">
+        <div className="left-menu" 
+          role='button'
+          onClick={() => console.log('Div clicked!')}>
           <svg className="menu-icon" focusable="false" viewBox="0 0 24 24">
             <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
           </svg>
@@ -87,37 +93,23 @@ 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>
+      <main className='emails'>
+      {selectedEmail ? (
+          <ViewEmail
+            email={selectedEmail}
+            goBack={() => setSelectedEmail(null)}
+          />
+        ) : (
+          <Emails
+            emails={filteredEmails}
+            toggleRead={toggleRead}
+            toggleStar={toggleStar}
+            viewEmail={setSelectedEmail}
+          />
+        )}
+        </main>
     </div>
   )
 }
 
-export default App
+export default App;

src/components/Email.jsx

@@ -0,0 +1,34 @@
+function Email({ index, email, toggleRead, toggleStar, viewEmail }) {
+
+    return (
+        <>
+            <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 = "email-info" onClick={viewEmail}>
+                <div className="sender">{email.sender}</div>
+                <div className="title">{email.title}</div>
+              </div>
+            </li>
+        </>
+    )
+}
+
+export default Email;

src/components/Emails.jsx

@@ -0,0 +1,22 @@
+import Email from './Email'
+
+function Emails({ emails = [], toggleRead, toggleStar, viewEmail }) {
+    return (
+        <>
+            <main className="emails">
+                <ul>
+                {emails.map((email, index) => (
+                    <Email 
+                    key={index} 
+                    email={email} 
+                    toggleRead={toggleRead} 
+                    toggleStar={toggleStar}
+                    viewEmail={() => viewEmail(email)} />
+                ))}
+                </ul>
+            </main>
+        </>
+    )
+}
+
+export default Emails;

src/components/ViewEmail.jsx

@@ -0,0 +1,95 @@
+import flaticonWelcomeImage from '../assets/images/flaticon-welcome-image.png'
+import backArrow from '../assets/icons/back-arrow.png'
+import downloadButton from '../assets/icons/download-button.png'
+import rateStarButton from '../assets/icons/rate-star-button.png'
+import rubbishButton from '../assets/icons/rubbish-bin-delete-button.png'
+
+import '../styles/Mail.css'
+
+function ViewEmail({ email, goBack }) {
+
+    return (
+        <>
+            <main className="email-view">
+                <nav className="email-toolbar">
+                <ul>
+                    <li>
+                        <img role='button'
+                        onClick={goBack} src={backArrow} alt="reply button" />
+
+                    </li>
+                    <li>
+                    <img className="icon" src={backArrow} alt="reply button" />
+                    </li>
+                    <li>
+                    <img className="icon" src={downloadButton} alt="archive button" />
+                    </li>
+                    <li>
+                    <img className="icon" src={rubbishButton} alt="delete button" />
+                    </li>
+                </ul>
+                <div className="space"></div>
+                <div>
+                    <p>1 of 25</p>
+                    <button>&lt;</button>
+                    <button>&gt;</button>
+                </div>
+                </nav>
+                <article className="email-content">
+                <div className="title">
+                    <h1>{email.title}</h1>
+                </div>
+                <header className="email-content--header">
+                    <div className="avatar"></div>
+                    <div className="email-info">
+                    <div className="sender-info">
+                        <h2>{email.sender}</h2>
+                        <em>&lt;{email.sender}@email.com&gt;</em>
+                    </div>
+                    <div className="user-info">
+                        <p>
+                        to me <em>&lt;[email protected]&gt;</em>
+                        </p>
+                    </div>
+                    </div>
+                    <div className="date-info">
+                    <p>17 March 2021, 09:33</p>
+                    </div>
+                    <div className="email-action-icons">
+                    <ul>
+                        <li>
+                        <img className="icon" src={backArrow} alt="reply button" />
+                        </li>
+                        <li>
+                        <img
+                            className="icon"
+                            src={rateStarButton}
+                            alt="star button"
+                        />
+                        </li>
+                        <li>
+                        <img
+                            className="icon"
+                            src={rubbishButton}
+                            alt="delete button"
+                        />
+                        </li>
+                    </ul>
+                    </div>
+                </header>
+                <section className="email-body">
+                    <div className="content">
+                    <img src={flaticonWelcomeImage} alt="Flaticon welcome message" />
+                    </div>
+                </section>
+                <section className="email-actions">
+                    <button>Reply</button>
+                    <button>Forward</button>
+                </section>
+                </article>
+            </main>
+        </>
+    );
+}
+
+export default ViewEmail;

src/main.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
-import './styles/index.css'
+import './styles/App.css'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>

src/styles/App.css

@@ -1,3 +1,10 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: sans-serif;
+}
+
 .app {
   height: 100vh;