diff --git a/assets/icons/back-arrow.png b/assets/icons/back-arrow.png new file mode 100644 index 0000000..77bf292 Binary files /dev/null and b/assets/icons/back-arrow.png differ diff --git a/assets/icons/download-button.png b/assets/icons/download-button.png new file mode 100644 index 0000000..ddb5a11 Binary files /dev/null and b/assets/icons/download-button.png differ diff --git a/assets/icons/rate-star-button.png b/assets/icons/rate-star-button.png new file mode 100644 index 0000000..16d6722 Binary files /dev/null and b/assets/icons/rate-star-button.png differ diff --git a/assets/icons/rubbish-bin-delete-button.png b/assets/icons/rubbish-bin-delete-button.png new file mode 100644 index 0000000..7090fb1 Binary files /dev/null and b/assets/icons/rubbish-bin-delete-button.png differ diff --git a/assets/images/flaticon-welcome-image.png b/assets/images/flaticon-welcome-image.png new file mode 100644 index 0000000..698c431 Binary files /dev/null and b/assets/images/flaticon-welcome-image.png differ diff --git a/package-lock.json b/package-lock.json index d603209..267051b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,12 +43,15 @@ } }, "node_modules/@babel/code-frame": { - "version": "7.22.13", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz", + "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==", "dev": true, "license": "MIT", "dependencies": { - "@babel/highlight": "^7.22.13", - "chalk": "^2.4.2" + "@babel/helper-validator-identifier": "^7.27.1", + "js-tokens": "^4.0.0", + "picocolors": "^1.1.1" }, "engines": { "node": ">=6.9.0" @@ -211,7 +214,9 @@ } }, "node_modules/@babel/helper-string-parser": { - "version": "7.22.5", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz", + "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==", "dev": true, "license": "MIT", "engines": { @@ -219,7 +224,9 @@ } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.22.20", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz", + "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==", "dev": true, "license": "MIT", "engines": { @@ -235,35 +242,28 @@ } }, "node_modules/@babel/helpers": { - "version": "7.23.2", + "version": "7.28.3", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.3.tgz", + "integrity": "sha512-PTNtvUQihsAsDHMOP5pfobP8C6CM4JWXmP8DrEIt46c3r2bf87Ua1zoqevsMo9g+tWDwgWrFP5EIxuBx5RudAw==", "dev": true, "license": "MIT", "dependencies": { - "@babel/template": "^7.22.15", - "@babel/traverse": "^7.23.2", - "@babel/types": "^7.23.0" + "@babel/template": "^7.27.2", + "@babel/types": "^7.28.2" }, "engines": { "node": ">=6.9.0" } }, - "node_modules/@babel/highlight": { - "version": "7.22.20", + "node_modules/@babel/parser": { + "version": "7.28.3", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.3.tgz", + "integrity": "sha512-7+Ey1mAgYqFAx2h0RuoxcQT5+MlG3GTV0TQrgr7/ZliKsm/MNDxVVutlWaziMq7wJNAz8MTqz55XLpWvva6StA==", "dev": true, "license": "MIT", "dependencies": { - "@babel/helper-validator-identifier": "^7.22.20", - "chalk": "^2.4.2", - "js-tokens": "^4.0.0" + "@babel/types": "^7.28.2" }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/parser": { - "version": "7.23.0", - "dev": true, - "license": "MIT", "bin": { "parser": "bin/babel-parser.js" }, @@ -300,13 +300,15 @@ } }, "node_modules/@babel/template": { - "version": "7.22.15", + "version": "7.27.2", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz", + "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==", "dev": true, "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.22.13", - "@babel/parser": "^7.22.15", - "@babel/types": "^7.22.15" + "@babel/code-frame": "^7.27.1", + "@babel/parser": "^7.27.2", + "@babel/types": "^7.27.1" }, "engines": { "node": ">=6.9.0" @@ -333,13 +335,14 @@ } }, "node_modules/@babel/types": { - "version": "7.23.0", + "version": "7.28.2", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.2.tgz", + "integrity": "sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==", "dev": true, "license": "MIT", "dependencies": { - "@babel/helper-string-parser": "^7.22.5", - "@babel/helper-validator-identifier": "^7.22.20", - "to-fast-properties": "^2.0.0" + "@babel/helper-string-parser": "^7.27.1", + "@babel/helper-validator-identifier": "^7.27.1" }, "engines": { "node": ">=6.9.0" @@ -661,17 +664,6 @@ "node": ">=8" } }, - "node_modules/ansi-styles": { - "version": "3.2.1", - "dev": true, - "license": "MIT", - "dependencies": { - "color-convert": "^1.9.0" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/argparse": { "version": "2.0.1", "dev": true, @@ -798,7 +790,9 @@ "license": "MIT" }, "node_modules/brace-expansion": { - "version": "1.1.11", + "version": "1.1.12", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz", + "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==", "dev": true, "license": "MIT", "dependencies": { @@ -877,32 +871,6 @@ ], "license": "CC-BY-4.0" }, - "node_modules/chalk": { - "version": "2.4.2", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/color-convert": { - "version": "1.9.3", - "dev": true, - "license": "MIT", - "dependencies": { - "color-name": "1.1.3" - } - }, - "node_modules/color-name": { - "version": "1.1.3", - "dev": true, - "license": "MIT" - }, "node_modules/concat-map": { "version": "0.0.1", "dev": true, @@ -914,7 +882,9 @@ "license": "MIT" }, "node_modules/cross-spawn": { - "version": "7.0.3", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dev": true, "license": "MIT", "dependencies": { @@ -1151,14 +1121,6 @@ "node": ">=6" } }, - "node_modules/escape-string-regexp": { - "version": "1.0.5", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.8.0" - } - }, "node_modules/eslint": { "version": "8.52.0", "dev": true, @@ -1521,6 +1483,21 @@ "dev": true, "license": "ISC" }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/function-bind": { "version": "1.1.2", "dev": true, @@ -1667,14 +1644,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/has-flag": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=4" - } - }, "node_modules/has-property-descriptors": { "version": "1.0.1", "dev": true, @@ -2234,7 +2203,9 @@ "license": "MIT" }, "node_modules/nanoid": { - "version": "3.3.6", + "version": "3.3.11", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", + "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", "dev": true, "funding": [ { @@ -2451,7 +2422,9 @@ "license": "MIT" }, "node_modules/picocolors": { - "version": "1.0.0", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", "dev": true, "license": "ISC" }, @@ -2644,7 +2617,9 @@ } }, "node_modules/rollup": { - "version": "3.29.4", + "version": "3.29.5", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz", + "integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==", "dev": true, "license": "MIT", "bin": { @@ -2875,17 +2850,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/supports-color": { - "version": "5.5.0", - "dev": true, - "license": "MIT", - "dependencies": { - "has-flag": "^3.0.0" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/supports-preserve-symlinks-flag": { "version": "1.0.0", "dev": true, @@ -2902,14 +2866,6 @@ "dev": true, "license": "MIT" }, - "node_modules/to-fast-properties": { - "version": "2.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=4" - } - }, "node_modules/type-check": { "version": "0.4.0", "dev": true, @@ -3045,7 +3001,9 @@ } }, "node_modules/vite": { - "version": "4.5.0", + "version": "4.5.14", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.14.tgz", + "integrity": "sha512-+v57oAaoYNnO3hIu5Z/tJRZjq5aHM2zDve9YZ8HngVHbhk66RStobhb1sqPMIPEleV6cNKYK4eGrAbE9Ulbl2g==", "dev": true, "license": "MIT", "dependencies": { diff --git a/src/App.jsx b/src/App.jsx index c902699..77e184e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -4,6 +4,12 @@ import initialEmails from './data/emails' import './styles/App.css' +import Emails from './components/emails' +import Email from './components/email' +import Header from './components/Hearder' +import NavBar from './components/NavBar' +// import ShowMail from './components/ShowMail' + const getReadEmails = emails => emails.filter(email => !email.read) const getStarredEmails = emails => emails.filter(email => email.starred) @@ -43,81 +49,12 @@ function App() { return (
-
-
- - - - - gmail logo -
- -
- -
-
- -
- -
+
+ + + {/* */}
) } -export default App +export default App \ No newline at end of file diff --git a/src/components/Email.jsx b/src/components/Email.jsx new file mode 100644 index 0000000..1716fc3 --- /dev/null +++ b/src/components/Email.jsx @@ -0,0 +1,33 @@ +import React from 'react' + +function Email({email, index, toggleStar, toggleRead}) { + return ( + <> +
  • +
    + toggleRead(email) } + /> +
    +
    + toggleStar(email)} + /> +
    +
    {email.title}
    +
    {email.sender}
    +
    • + + ) +} + +export default Email diff --git a/src/components/Emails.jsx b/src/components/Emails.jsx new file mode 100644 index 0000000..61d2cc6 --- /dev/null +++ b/src/components/Emails.jsx @@ -0,0 +1,17 @@ +import React from 'react' +import Email from './Email' + +function Emails(props) { + return ( +
    + +
    + ) +} + +export default Emails + diff --git a/src/components/Hearder.jsx b/src/components/Hearder.jsx new file mode 100644 index 0000000..7203b09 --- /dev/null +++ b/src/components/Hearder.jsx @@ -0,0 +1,24 @@ +import React from 'react' + +function Hearder() { + return ( +
    +
    + + + + + gmail logo +
    + +
    + +
    +
    + ) +} + +export default Hearder diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx new file mode 100644 index 0000000..a2c4338 --- /dev/null +++ b/src/components/NavBar.jsx @@ -0,0 +1,36 @@ +import React from 'react' + +function NavBar(props) { + return ( + + ) +} + +export default NavBar diff --git a/src/components/ShowMail.jsx b/src/components/ShowMail.jsx new file mode 100644 index 0000000..2fc5d6a --- /dev/null +++ b/src/components/ShowMail.jsx @@ -0,0 +1,86 @@ +import React from 'react' +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 flaticonWelcomeImage from './assets/images/flaticon-welcome-image.png' + +function ShowMail() { + return ( +
    + +
    +
    +

    Welcome to Flaticon

    +
    +
    +
    +
    +
    +

    Freepik Company

    + <no-reply@freepik.com> +
    +
    +

    + to me <nicolas@boolean.co.uk> +

    +
    +
    +
    +

    17 March 2021, 09:33

    +
    +
    +
      +
    • + reply button +
      • +
    • + star button +
      • +
    • + delete button +
      • +
    +
    +
    +
    +
    + Flaticon welcome message +
    +
    +
    + + +
    +
    +
    + ) +} + +export default ShowMail