From c4e678c0141014a6afe2a9f023d417291cc9e6b9 Mon Sep 17 00:00:00 2001 From: alfredo-pacheco Date: Fri, 19 Feb 2021 20:16:35 -0700 Subject: [PATCH 1/3] Header base structure --- package.json | 6 +- src/components/Layout/Header/Header.jsx | 26 +++ src/components/Layout/Header/Header.styled.js | 47 +++++ src/components/Layout/Header/index.js | 1 + src/components/Layout/Layout.component.jsx | 11 +- src/components/Layout/Layout.styled.js | 21 ++ src/components/Layout/Layout.styles.css | 9 - src/{index.js => index.jsx} | 0 yarn.lock | 186 +++++++++++++++++- 9 files changed, 292 insertions(+), 15 deletions(-) create mode 100644 src/components/Layout/Header/Header.jsx create mode 100644 src/components/Layout/Header/Header.styled.js create mode 100644 src/components/Layout/Header/index.js create mode 100644 src/components/Layout/Layout.styled.js delete mode 100644 src/components/Layout/Layout.styles.css rename src/{index.js => index.jsx} (100%) diff --git a/package.json b/package.json index 5bc0e0d0d..7b5387cb8 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ "react-dom": "^16.13.1", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", - "react-scripts": "3.4.3" + "react-scripts": "3.4.3", + "styled-components": "^5.2.1" }, "scripts": { "start": "react-scripts start", @@ -57,5 +58,8 @@ "hooks": { "pre-commit": "lint-staged" } + }, + "resolutions": { + "styled-components": "^5" } } diff --git a/src/components/Layout/Header/Header.jsx b/src/components/Layout/Header/Header.jsx new file mode 100644 index 000000000..3f025d753 --- /dev/null +++ b/src/components/Layout/Header/Header.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { Col, HeaderContainer, Search, Space, Switch, User } from './Header.styled'; + +const Header = () => { + return ( + + Header + + + + + + + + + theme switch placeholder + + + + user login placeholder + + + ); +}; + +export default Header; diff --git a/src/components/Layout/Header/Header.styled.js b/src/components/Layout/Header/Header.styled.js new file mode 100644 index 000000000..851b9c3e9 --- /dev/null +++ b/src/components/Layout/Header/Header.styled.js @@ -0,0 +1,47 @@ +import styled from 'styled-components'; + +const Col = styled.div` + display: flex; + flex-direction: column; + margin: 0 10px; +`; + +const HeaderContainer = styled.div` + display: flex; + flex-direction: row; + height: 70px; + align-items: center; + padding: 5px; + border: 3px solid gray; +`; + +const Search = styled.input` + background-color: lightyellow; + border: 0; + display: flex; + height: 1.8rem; + padding: 5px; +`; + +const Space = styled.div` + display: flex; + flex: 1; +`; + +const Switch = styled.span` + height: 40px; + background-color: springgreen; + display: flex; + justify-content: center; + align-items: center; +`; + +const User = styled.span` + height: 40px; + background-color: springgreen; + display: flex; + justify-content: center; + align-items: center; +`; + +export { Col, HeaderContainer, Search, Space, Switch, User }; diff --git a/src/components/Layout/Header/index.js b/src/components/Layout/Header/index.js new file mode 100644 index 000000000..579f1ac23 --- /dev/null +++ b/src/components/Layout/Header/index.js @@ -0,0 +1 @@ +export { default } from './Header'; diff --git a/src/components/Layout/Layout.component.jsx b/src/components/Layout/Layout.component.jsx index b82ea3517..fdc373ed0 100644 --- a/src/components/Layout/Layout.component.jsx +++ b/src/components/Layout/Layout.component.jsx @@ -1,9 +1,14 @@ import React from 'react'; - -import './Layout.styles.css'; +import Header from './Header'; +import { Content, MainContainer } from './Layout.styled'; function Layout({ children }) { - return
{children}
; + return ( + +
This is the header
+ {children} + + ); } export default Layout; diff --git a/src/components/Layout/Layout.styled.js b/src/components/Layout/Layout.styled.js new file mode 100644 index 000000000..434fc9b18 --- /dev/null +++ b/src/components/Layout/Layout.styled.js @@ -0,0 +1,21 @@ +import styled from 'styled-components'; + +const MainContainer = styled.div` + display: flex; + flex-direction: column; + flex: 1; + width: 100vw; + height: 100vh; + background-color: lightgray; + /* background-color: #0f0f0f; */ +`; + +const Content = styled.div` + display: flex; + flex: 1; + flex-direction: column; + justify-content: space-around; + align-items: stretch; +`; + +export { MainContainer, Content }; diff --git a/src/components/Layout/Layout.styles.css b/src/components/Layout/Layout.styles.css deleted file mode 100644 index e873b7c07..000000000 --- a/src/components/Layout/Layout.styles.css +++ /dev/null @@ -1,9 +0,0 @@ -.container { - width: 100vw; - height: 100vh; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-top: -3rem; -} diff --git a/src/index.js b/src/index.jsx similarity index 100% rename from src/index.js rename to src/index.jsx diff --git a/yarn.lock b/yarn.lock index 0530c750a..775e2a891 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16,6 +16,13 @@ dependencies: "@babel/highlight" "^7.10.4" +"@babel/code-frame@^7.12.13": + version "7.12.13" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.13.tgz#dcfc826beef65e75c50e21d3837d7d95798dd658" + integrity sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g== + dependencies: + "@babel/highlight" "^7.12.13" + "@babel/compat-data@^7.10.4", "@babel/compat-data@^7.11.0", "@babel/compat-data@^7.9.0": version "7.11.0" resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.11.0.tgz#e9f73efe09af1355b723a7f39b11bad637d7c99c" @@ -78,6 +85,22 @@ jsesc "^2.5.1" source-map "^0.6.1" +"@babel/generator@^7.12.17": + version "7.12.17" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.12.17.tgz#9ef1dd792d778b32284411df63f4f668a9957287" + integrity sha512-DSA7ruZrY4WI8VxuS1jWSRezFnghEoYEFrZcw9BizQRmOZiUsiHl59+qEARGPqPikwA/GPTyRCi7isuCK/oyqg== + dependencies: + "@babel/types" "^7.12.17" + jsesc "^2.5.1" + source-map "^0.5.0" + +"@babel/helper-annotate-as-pure@^7.0.0": + version "7.12.13" + resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.13.tgz#0f58e86dfc4bb3b1fcd7db806570e177d439b6ab" + integrity sha512-7YXfX5wQ5aYM/BOlbSccHDbuXXFPxeoUmfWtz8le2yTkTZc+BxsiEnENFoi2SlmA8ewDkG2LgIMIVzzn2h8kfw== + dependencies: + "@babel/types" "^7.12.13" + "@babel/helper-annotate-as-pure@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3" @@ -167,6 +190,15 @@ "@babel/template" "^7.10.4" "@babel/types" "^7.10.4" +"@babel/helper-function-name@^7.12.13": + version "7.12.13" + resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz#93ad656db3c3c2232559fd7b2c3dbdcbe0eb377a" + integrity sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA== + dependencies: + "@babel/helper-get-function-arity" "^7.12.13" + "@babel/template" "^7.12.13" + "@babel/types" "^7.12.13" + "@babel/helper-get-function-arity@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz#98c1cbea0e2332f33f9a4661b8ce1505b2c19ba2" @@ -174,6 +206,13 @@ dependencies: "@babel/types" "^7.10.4" +"@babel/helper-get-function-arity@^7.12.13": + version "7.12.13" + resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz#bc63451d403a3b3082b97e1d8b3fe5bd4091e583" + integrity sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg== + dependencies: + "@babel/types" "^7.12.13" + "@babel/helper-hoist-variables@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.10.4.tgz#d49b001d1d5a68ca5e6604dda01a6297f7c9381e" @@ -188,6 +227,13 @@ dependencies: "@babel/types" "^7.11.0" +"@babel/helper-module-imports@^7.0.0": + version "7.12.13" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz#ec67e4404f41750463e455cc3203f6a32e93fcb0" + integrity sha512-NGmfvRp9Rqxy0uHSSVP+SRIW1q31a7Ji10cLBcqSDUngGentY4FRiHOFZFE1CLU5eiL0oE8reH7Tg1y99TDM/g== + dependencies: + "@babel/types" "^7.12.13" + "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.8.3": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz#4c5c54be04bd31670a7382797d75b9fa2e5b5620" @@ -269,11 +315,23 @@ dependencies: "@babel/types" "^7.11.0" +"@babel/helper-split-export-declaration@^7.12.13": + version "7.12.13" + resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz#e9430be00baf3e88b0e13e6f9d4eaf2136372b05" + integrity sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg== + dependencies: + "@babel/types" "^7.12.13" + "@babel/helper-validator-identifier@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2" integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw== +"@babel/helper-validator-identifier@^7.12.11": + version "7.12.11" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed" + integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw== + "@babel/helper-wrap-function@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.10.4.tgz#8a6f701eab0ff39f765b5a1cfef409990e624b87" @@ -302,11 +360,25 @@ chalk "^2.0.0" js-tokens "^4.0.0" +"@babel/highlight@^7.12.13": + version "7.12.13" + resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.12.13.tgz#8ab538393e00370b26271b01fa08f7f27f2e795c" + integrity sha512-kocDQvIbgMKlWxXe9fof3TQ+gkIPOUSEYhJjqUjvKMez3krV7vbzYCDq39Oj11UAVK7JqPVGQPlgE85dPNlQww== + dependencies: + "@babel/helper-validator-identifier" "^7.12.11" + chalk "^2.0.0" + js-tokens "^4.0.0" + "@babel/parser@^7.1.0", "@babel/parser@^7.10.4", "@babel/parser@^7.11.5", "@babel/parser@^7.4.3", "@babel/parser@^7.7.0", "@babel/parser@^7.9.0": version "7.11.5" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.11.5.tgz#c7ff6303df71080ec7a4f5b8c003c58f1cf51037" integrity sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q== +"@babel/parser@^7.12.13", "@babel/parser@^7.12.17": + version "7.12.17" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.17.tgz#bc85d2d47db38094e5bb268fc761716e7d693848" + integrity sha512-r1yKkiUTYMQ8LiEI0UcQx5ETw5dpTLn9wijn9hk6KkTtOK95FndDN10M+8/s6k/Ymlbivw0Av9q4SlgF80PtHg== + "@babel/plugin-proposal-async-generator-functions@^7.10.4", "@babel/plugin-proposal-async-generator-functions@^7.8.3": version "7.10.5" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.10.5.tgz#3491cabf2f7c179ab820606cec27fed15e0e8558" @@ -1124,6 +1196,15 @@ "@babel/parser" "^7.10.4" "@babel/types" "^7.10.4" +"@babel/template@^7.12.13": + version "7.12.13" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327" + integrity sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA== + dependencies: + "@babel/code-frame" "^7.12.13" + "@babel/parser" "^7.12.13" + "@babel/types" "^7.12.13" + "@babel/traverse@^7.1.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.11.5", "@babel/traverse@^7.4.3", "@babel/traverse@^7.7.0", "@babel/traverse@^7.9.0": version "7.11.5" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.11.5.tgz#be777b93b518eb6d76ee2e1ea1d143daa11e61c3" @@ -1139,6 +1220,21 @@ globals "^11.1.0" lodash "^4.17.19" +"@babel/traverse@^7.4.5": + version "7.12.17" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.17.tgz#40ec8c7ffb502c4e54c7f95492dc11b88d718619" + integrity sha512-LGkTqDqdiwC6Q7fWSwQoas/oyiEYw6Hqjve5KOSykXkmFJFqzvGMb9niaUEag3Rlve492Mkye3gLw9FTv94fdQ== + dependencies: + "@babel/code-frame" "^7.12.13" + "@babel/generator" "^7.12.17" + "@babel/helper-function-name" "^7.12.13" + "@babel/helper-split-export-declaration" "^7.12.13" + "@babel/parser" "^7.12.17" + "@babel/types" "^7.12.17" + debug "^4.1.0" + globals "^11.1.0" + lodash "^4.17.19" + "@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.11.5", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.7.0", "@babel/types@^7.9.0": version "7.11.5" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.11.5.tgz#d9de577d01252d77c6800cee039ee64faf75662d" @@ -1148,6 +1244,15 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" +"@babel/types@^7.12.13", "@babel/types@^7.12.17": + version "7.12.17" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.17.tgz#9d711eb807e0934c90b8b1ca0eb1f7230d150963" + integrity sha512-tNMDjcv/4DIcHxErTgwB9q2ZcYyN0sUfgGKUK/mm1FJK7Wz+KstoEekxrl/tBiNDgLK1HGi+sppj1An/1DR4fQ== + dependencies: + "@babel/helper-validator-identifier" "^7.12.11" + lodash "^4.17.19" + to-fast-properties "^2.0.0" + "@cnakazawa/watch@^1.0.3": version "1.0.4" resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a" @@ -1166,6 +1271,28 @@ resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18" integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg== +"@emotion/is-prop-valid@^0.8.8": + version "0.8.8" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" + integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== + dependencies: + "@emotion/memoize" "0.7.4" + +"@emotion/memoize@0.7.4": + version "0.7.4" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" + integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== + +"@emotion/stylis@^0.8.4": + version "0.8.5" + resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" + integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== + +"@emotion/unitless@^0.7.4": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" + integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== + "@hapi/address@2.x.x": version "2.1.4" resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5" @@ -2390,6 +2517,21 @@ babel-plugin-named-asset-import@^0.3.6: resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz#c9750a1b38d85112c9e166bf3ef7c5dbc605f4be" integrity sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA== +"babel-plugin-styled-components@>= 1": + version "1.12.0" + resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz#1dec1676512177de6b827211e9eda5a30db4f9b9" + integrity sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA== + dependencies: + "@babel/helper-annotate-as-pure" "^7.0.0" + "@babel/helper-module-imports" "^7.0.0" + babel-plugin-syntax-jsx "^6.18.0" + lodash "^4.17.11" + +babel-plugin-syntax-jsx@^6.18.0: + version "6.18.0" + resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" + integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY= + babel-plugin-syntax-object-rest-spread@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5" @@ -2837,6 +2979,11 @@ camelcase@5.3.1, camelcase@^5.0.0, camelcase@^5.3.1: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320" integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== +camelize@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b" + integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs= + caniuse-api@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0" @@ -3416,6 +3563,11 @@ css-blank-pseudo@^0.1.4: dependencies: postcss "^7.0.5" +css-color-keywords@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" + integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU= + css-color-names@0.0.4, css-color-names@^0.0.4: version "0.0.4" resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" @@ -3487,6 +3639,15 @@ css-select@^2.0.0: domutils "^1.7.0" nth-check "^1.0.2" +css-to-react-native@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756" + integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ== + dependencies: + camelize "^1.0.0" + css-color-keywords "^1.0.0" + postcss-value-parser "^4.0.2" + css-tree@1.0.0-alpha.37: version "1.0.0-alpha.37" resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22" @@ -5348,7 +5509,7 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.1.0: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -9868,6 +10029,11 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" +shallowequal@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" + integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== + shebang-command@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea" @@ -10391,6 +10557,22 @@ style-loader@0.23.1: loader-utils "^1.1.0" schema-utils "^1.0.0" +styled-components@^5.2.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.1.tgz#6ed7fad2dc233825f64c719ffbdedd84ad79101a" + integrity sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@babel/traverse" "^7.4.5" + "@emotion/is-prop-valid" "^0.8.8" + "@emotion/stylis" "^0.8.4" + "@emotion/unitless" "^0.7.4" + babel-plugin-styled-components ">= 1" + css-to-react-native "^3.0.0" + hoist-non-react-statics "^3.0.0" + shallowequal "^1.1.0" + supports-color "^5.5.0" + stylehacks@^4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5" @@ -10405,7 +10587,7 @@ supports-color@^2.0.0: resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc= -supports-color@^5.3.0: +supports-color@^5.3.0, supports-color@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== From f1b0e63a6d6f23cb8a2cff35844271be45a811ac Mon Sep 17 00:00:00 2001 From: alfredo-pacheco Date: Fri, 19 Feb 2021 22:40:35 -0700 Subject: [PATCH 2/3] Home displaying videos from mock data --- package.json | 1 + src/components/Layout/Header/Header.styled.js | 1 + src/components/Layout/Layout.styled.js | 4 - src/global.css | 45 - src/{index.jsx => index.js} | 9 +- src/pages/Home/Home.page.jsx | 56 +- src/pages/Home/Home.styled.js | 37 + src/pages/Home/Home.styles.css | 8 - src/pages/Home/youtube-videos-mock.json | 856 ++++++++++++++++++ yarn.lock | 7 +- 10 files changed, 929 insertions(+), 95 deletions(-) rename src/{index.jsx => index.js} (51%) create mode 100644 src/pages/Home/Home.styled.js delete mode 100644 src/pages/Home/Home.styles.css create mode 100644 src/pages/Home/youtube-videos-mock.json diff --git a/package.json b/package.json index 7b5387cb8..d76219029 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "react-scripts": "3.4.3", + "sanitize.css": "^12.0.1", "styled-components": "^5.2.1" }, "scripts": { diff --git a/src/components/Layout/Header/Header.styled.js b/src/components/Layout/Header/Header.styled.js index 851b9c3e9..36417a10a 100644 --- a/src/components/Layout/Header/Header.styled.js +++ b/src/components/Layout/Header/Header.styled.js @@ -13,6 +13,7 @@ const HeaderContainer = styled.div` align-items: center; padding: 5px; border: 3px solid gray; + background-color: lightgray; `; const Search = styled.input` diff --git a/src/components/Layout/Layout.styled.js b/src/components/Layout/Layout.styled.js index 434fc9b18..f8fe36b8a 100644 --- a/src/components/Layout/Layout.styled.js +++ b/src/components/Layout/Layout.styled.js @@ -4,10 +4,6 @@ const MainContainer = styled.div` display: flex; flex-direction: column; flex: 1; - width: 100vw; - height: 100vh; - background-color: lightgray; - /* background-color: #0f0f0f; */ `; const Content = styled.div` diff --git a/src/global.css b/src/global.css index 4feb3c75e..b22351001 100644 --- a/src/global.css +++ b/src/global.css @@ -3,51 +3,6 @@ html { line-height: 1.6; font-weight: 400; font-family: sans-serif; - box-sizing: border-box; scroll-behavior: smooth; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } - -*, -*::before, -*::after { - box-sizing: inherit; -} - -body { - margin: 0; - padding: 0; - text-rendering: optimizeLegibility; - background-image: linear-gradient( - 120deg, - #eea2a2 0, - #bbc1bf 19%, - #57c6e1 42%, - #b49fda 79%, - #7ac5d8 100% - ); - background-size: 400% 400%; - background-position: var(--bg-position); - transition: background-position 2s ease; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.separator::before { - content: '•'; - color: white; - padding: 0.4rem; -} - -a { - text-decoration: none; - font-weight: bold; - color: white; -} - -a:active { - color: blueviolet; -} - -hr { -} diff --git a/src/index.jsx b/src/index.js similarity index 51% rename from src/index.jsx rename to src/index.js index b93eaa337..85ae52f85 100644 --- a/src/index.jsx +++ b/src/index.js @@ -2,11 +2,8 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App'; +import 'sanitize.css'; import './global.css'; -ReactDOM.render( - - - , - document.getElementById('root') -); +const app = React.createElement(App); +ReactDOM.render(app, document.getElementById('root')); diff --git a/src/pages/Home/Home.page.jsx b/src/pages/Home/Home.page.jsx index 08d1dd5c0..498140430 100644 --- a/src/pages/Home/Home.page.jsx +++ b/src/pages/Home/Home.page.jsx @@ -1,38 +1,32 @@ -import React, { useRef } from 'react'; -import { Link, useHistory } from 'react-router-dom'; +import React from 'react'; -import { useAuth } from '../../providers/Auth'; -import './Home.styles.css'; +import { + Title, + VideosContainer, + VideoCard, + VideoPreview, + VideoDescription, + VideoTitle, +} from './Home.styled'; +import mockData from './youtube-videos-mock.json'; function HomePage() { - const history = useHistory(); - const sectionRef = useRef(null); - const { authenticated, logout } = useAuth(); - - function deAuthenticate(event) { - event.preventDefault(); - logout(); - history.push('/'); - } - return ( -
-

Hello stranger!

- {authenticated ? ( - <> -

Good to have you back

- - - ← logout - - - show me something cool → - - - ) : ( - let me in → - )} -
+ <> + Title + + {mockData.items + .filter((item) => item.id.kind === 'youtube#video') + .map((item) => ( + + + {item.snippet.title} + + {item.snippet.description} + + ))} + + ); } diff --git a/src/pages/Home/Home.styled.js b/src/pages/Home/Home.styled.js new file mode 100644 index 000000000..c24442398 --- /dev/null +++ b/src/pages/Home/Home.styled.js @@ -0,0 +1,37 @@ +import styled from 'styled-components'; + +const Title = styled.h1` + text-align: center; + font-size: 30px; +`; +const VideosContainer = styled.div` + display: flex; + flex-wrap: wrap; + justify-content: center; + align-self: center; + max-width: 1400px; +`; + +const VideoCard = styled.div` + display: flex; + flex-direction: column; + padding: 5px; + border: 1px solid gray; + width: 250px; + height: 280px; + margin: 10px; +`; + +const VideoPreview = styled.img``; + +const VideoTitle = styled.h2` + font-size: 15px; + margin: 5px 0; +`; + +const VideoDescription = styled.p` + font-size: 11px; + margin: 0; +`; + +export { Title, VideosContainer, VideoCard, VideoPreview, VideoTitle, VideoDescription }; diff --git a/src/pages/Home/Home.styles.css b/src/pages/Home/Home.styles.css deleted file mode 100644 index 5e0a702c3..000000000 --- a/src/pages/Home/Home.styles.css +++ /dev/null @@ -1,8 +0,0 @@ -.homepage { - text-align: center; -} - -.homepage h1 { - font-size: 3rem; - letter-spacing: -2px; -} diff --git a/src/pages/Home/youtube-videos-mock.json b/src/pages/Home/youtube-videos-mock.json new file mode 100644 index 000000000..ae429cd94 --- /dev/null +++ b/src/pages/Home/youtube-videos-mock.json @@ -0,0 +1,856 @@ +{ + "kind": "youtube#searchListResponse", + "etag": "LRviZfd_p3HDDD2uBk5Qv7zaEQU", + "nextPageToken": "CBkQAA", + "regionCode": "MX", + "pageInfo": { + "totalResults": 2323, + "resultsPerPage": 25 + }, + "items": [ + { + "kind": "youtube#searchResult", + "etag": "_PVKwNJf_qw9nukFeRFOtQ837o0", + "id": { + "kind": "youtube#channel", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg" + }, + "snippet": { + "publishedAt": "2014-09-27T01:39:18Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Wizeline", + "description": "Wizeline transforms how teams build technology. Its customers accelerate the delivery of innovative products with proven solutions, which combine Wizeline's ...", + "thumbnails": { + "default": { + "url": "https://yt3.ggpht.com/ytc/AAUvwnighSReQlmHl_S_vSfvnWBAG5Cw4A0YxtE0tm5OpQ=s88-c-k-c0xffffffff-no-rj-mo" + }, + "medium": { + "url": "https://yt3.ggpht.com/ytc/AAUvwnighSReQlmHl_S_vSfvnWBAG5Cw4A0YxtE0tm5OpQ=s240-c-k-c0xffffffff-no-rj-mo" + }, + "high": { + "url": "https://yt3.ggpht.com/ytc/AAUvwnighSReQlmHl_S_vSfvnWBAG5Cw4A0YxtE0tm5OpQ=s800-c-k-c0xffffffff-no-rj-mo" + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "upcoming", + "publishTime": "2014-09-27T01:39:18Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "erqeM78PZDWIBe8qOGHGM2WdSE8", + "id": { + "kind": "youtube#video", + "videoId": "nmXMgqjQzls" + }, + "snippet": { + "publishedAt": "2019-09-30T23:54:32Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Video Tour | Welcome to Wizeline Guadalajara", + "description": "Follow Hector Padilla, Wizeline Director of Engineering, for a lively tour of our office. In 2018, Wizeline opened its stunning new office in Guadalajara, Jalisco, ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/nmXMgqjQzls/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/nmXMgqjQzls/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/nmXMgqjQzls/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2019-09-30T23:54:32Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "7VY0u60YdqamyHOCAufd7r6qTsQ", + "id": { + "kind": "youtube#video", + "videoId": "HYyRZiwBWc8" + }, + "snippet": { + "publishedAt": "2019-04-18T18:48:04Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Wizeline Guadalajara | Bringing Silicon Valley to Mexico", + "description": "Wizeline continues to offer a Silicon Valley culture in burgeoning innovation hubs like Mexico and Vietnam. In 2018, our Guadalajara team moved into a ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/HYyRZiwBWc8/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/HYyRZiwBWc8/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/HYyRZiwBWc8/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2019-04-18T18:48:04Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "by0t_nrT2TB-IQkQpgSWUVUwpKI", + "id": { + "kind": "youtube#video", + "videoId": "Po3VwR_NNGk" + }, + "snippet": { + "publishedAt": "2019-03-05T03:52:55Z", + "channelId": "UCXmAOGwFYxIq5qrScJeeV4g", + "title": "Wizeline hace sentir a empleados como en casa", + "description": "En el 2014, Bismarck fundó Wizeline, compañía tecnológica que trabaja con los corporativos ofreciendo una plataforma para que desarrollen software de forma ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/Po3VwR_NNGk/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/Po3VwR_NNGk/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/Po3VwR_NNGk/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "El Economista TV", + "liveBroadcastContent": "none", + "publishTime": "2019-03-05T03:52:55Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "9-Ag8hUNYBLTjuli6eECa5GXV1Y", + "id": { + "kind": "youtube#video", + "videoId": "7PtYNO6g7eI" + }, + "snippet": { + "publishedAt": "2019-04-12T20:00:45Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "We Are Wizeline", + "description": "Engineering a better tomorrow. Wizeline is a global software development company that helps its clients solve their biggest challenges with design and ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/7PtYNO6g7eI/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/7PtYNO6g7eI/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/7PtYNO6g7eI/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2019-04-12T20:00:45Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "pVQGVs72zHvpgl0ewNKX2DTOH6w", + "id": { + "kind": "youtube#video", + "videoId": "YuW0CE_8i1I" + }, + "snippet": { + "publishedAt": "2018-12-13T21:51:39Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Wizeline Thrives in Mexico City", + "description": "Our vibrant Mexico City office is home to agile software engineers, talented UX designers, and brilliant data scientists. Learn about the rich history of Mexico City.", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/YuW0CE_8i1I/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/YuW0CE_8i1I/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/YuW0CE_8i1I/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2018-12-13T21:51:39Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "HlSqzTYW4HGFDNAOPCs6nIRXdq8", + "id": { + "kind": "youtube#video", + "videoId": "CHzlSGRvWPs" + }, + "snippet": { + "publishedAt": "2017-03-08T22:41:43Z", + "channelId": "UCUsm-fannqOY02PNN67C0KA", + "title": "Wizeline", + "description": "El plan de Wizeline, una empresa de inteligencia artificial, para ayudar a crecer la comunidad de ciencia de datos en CDMX y todo el país, a través de cursos ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/CHzlSGRvWPs/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/CHzlSGRvWPs/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/CHzlSGRvWPs/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Noticieros Televisa", + "liveBroadcastContent": "none", + "publishTime": "2017-03-08T22:41:43Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "S1Ewc2IMjGC1VE5mH3AryZ43IPQ", + "id": { + "kind": "youtube#video", + "videoId": "cjO2fJy8asM" + }, + "snippet": { + "publishedAt": "2018-09-25T17:45:19Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "A Day in the Life of an Engineering Manager at Wizeline", + "description": "Fernando Espinoza shares his experience working as an engineering manager at Wizeline and mentoring other engineers. Learn about Fernando's passions ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/cjO2fJy8asM/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/cjO2fJy8asM/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/cjO2fJy8asM/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2018-09-25T17:45:19Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "jZZv6Ufu43kg1KzFlBOWDVKfPkY", + "id": { + "kind": "youtube#video", + "videoId": "zClI9OjgKXM" + }, + "snippet": { + "publishedAt": "2020-04-24T20:22:17Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Wizeline Technical Writing Academy | Featuring Eduardo Ocejo", + "description": "", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/zClI9OjgKXM/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/zClI9OjgKXM/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/zClI9OjgKXM/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2020-04-24T20:22:17Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "z5o2tIUROuWNZU5-1pzMPjoqQC8", + "id": { + "kind": "youtube#video", + "videoId": "8bz9R61oY5o" + }, + "snippet": { + "publishedAt": "2019-09-26T15:28:46Z", + "channelId": "UCUP6qv-_EIL0hwTsJaKYnvw", + "title": "Silicon Valley en México", + "description": "Empresas de Silicon Valley buscan establecerse en México por el gran talento que hay en nuestro país. Es una investigación de Roberto Domínguez.", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/8bz9R61oY5o/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/8bz9R61oY5o/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/8bz9R61oY5o/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Azteca Noticias", + "liveBroadcastContent": "none", + "publishTime": "2019-09-26T15:28:46Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "Q4bqsw7kAYe6PV1sh494TQ-UJ8c", + "id": { + "kind": "youtube#video", + "videoId": "7dJFraOqcoQ" + }, + "snippet": { + "publishedAt": "2019-07-02T17:40:20Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Why Wizeline? featuring Juan Pablo Villa in Mexico City", + "description": "Juan Pablo, known as Gianpa at Wizeline, is a software engineer in our Mexico City office. Gianpa focuses on Android apps, is an integral part of our culture, ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/7dJFraOqcoQ/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/7dJFraOqcoQ/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/7dJFraOqcoQ/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2019-07-02T17:40:20Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "cXSMV8jX2lv1ue3UUnbW3xCmIU4", + "id": { + "kind": "youtube#video", + "videoId": "w-Qwc_XJrWc" + }, + "snippet": { + "publishedAt": "2020-12-31T16:26:44Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Wizeline's 2020 Year in Review", + "description": "There's no doubt that 2020 has been an unprecedented year. However, amidst all the chaos, we achieved remarkable growth in various areas of our business.", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/w-Qwc_XJrWc/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/w-Qwc_XJrWc/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/w-Qwc_XJrWc/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2020-12-31T16:26:44Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "j9q9-dcRhTRDr0MCkJUMKdYt7u8", + "id": { + "kind": "youtube#video", + "videoId": "rjir_cHTl5w" + }, + "snippet": { + "publishedAt": "2019-04-29T20:37:26Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Why Wizeline? featuring Hugo Lopez in Mexico City", + "description": "", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/rjir_cHTl5w/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/rjir_cHTl5w/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/rjir_cHTl5w/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2019-04-29T20:37:26Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "MYfT5K8aZNvalrm2RR_HtylFffc", + "id": { + "kind": "youtube#video", + "videoId": "DcFK1x3NHGY" + }, + "snippet": { + "publishedAt": "2016-09-01T18:02:11Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Why Wizeline? (We're Hiring in Mexico!)", + "description": "A quick look at why people join Wizeline, what motivates us as a team and what it's like to work in our Guadalajara office. Learn more and apply here: ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/DcFK1x3NHGY/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/DcFK1x3NHGY/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/DcFK1x3NHGY/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2016-09-01T18:02:11Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "8dssV5QkZWEMmoo4DIq0k27aoIg", + "id": { + "kind": "youtube#video", + "videoId": "3BzYWAqZgFw" + }, + "snippet": { + "publishedAt": "2019-07-02T17:45:28Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Why Wizeline? featuring Oswaldo Herrera in Mexico City", + "description": "Oswaldo is a software engineering in Wizeline's Mexico City office. He joined Wizeline because of the camaraderie and deep sense of commitment of our teams.", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/3BzYWAqZgFw/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/3BzYWAqZgFw/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/3BzYWAqZgFw/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2019-07-02T17:45:28Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "FMbfPlflDyPx4UgcA42igb97xlk", + "id": { + "kind": "youtube#video", + "videoId": "3KVFmT-Tp2w" + }, + "snippet": { + "publishedAt": "2019-02-11T17:55:19Z", + "channelId": "UCd6MoB9NC6uYN2grvUNT-Zg", + "title": "Caso de Éxito AWS: Wizeline [Spanish]", + "description": "Central de socios de APN - https://amzn.to/2S7tIXM Fundada en 2014, Wizeline es una compañía joven e innovadora que nació en la nube para ofrecer soporte ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/3KVFmT-Tp2w/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/3KVFmT-Tp2w/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/3KVFmT-Tp2w/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Amazon Web Services", + "liveBroadcastContent": "none", + "publishTime": "2019-02-11T17:55:19Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "0ww3Jk-j4d4TMsFNL213EhE0gGg", + "id": { + "kind": "youtube#video", + "videoId": "aKuPmY2m1Ro" + }, + "snippet": { + "publishedAt": "2019-12-27T20:47:29Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Wizeline's 2019 Year in Review", + "description": "", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/aKuPmY2m1Ro/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/aKuPmY2m1Ro/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/aKuPmY2m1Ro/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2019-12-27T20:47:29Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "8q-ajUMnXZm4gQzfSIiyrG2tA7A", + "id": { + "kind": "youtube#video", + "videoId": "24sTHUyWhRM" + }, + "snippet": { + "publishedAt": "2016-10-05T00:03:32Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "[1 of 2] Wizeline CEO shares career lessons from Google", + "description": "Founder & CEO Bismarck Lepe on growth opportunities at Wizeline and his career-path experience as an early Google employee. Join our team!", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/24sTHUyWhRM/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/24sTHUyWhRM/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/24sTHUyWhRM/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2016-10-05T00:03:32Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "4QA9Eisz9-HncD9EENUm0LV7hXI", + "id": { + "kind": "youtube#video", + "videoId": "IxGc1gSqB3A" + }, + "snippet": { + "publishedAt": "2021-02-04T17:45:11Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Wizeline Data Engineering featuring Tania Reyes", + "description": "Tania discovered her interest in Big Data while working at Wizeline and took Wizeline Academy courses to skill up and join the data team. Now, she works on ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/IxGc1gSqB3A/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/IxGc1gSqB3A/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/IxGc1gSqB3A/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2021-02-04T17:45:11Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "5_OftJlDpcfykudIpO7nn92Pq6s", + "id": { + "kind": "youtube#video", + "videoId": "NP1gAnbeNno" + }, + "snippet": { + "publishedAt": "2019-11-12T20:45:18Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Wizeline Querétaro | Mexico's New Knowledge Economy (We're hiring!)", + "description": "A small but mighty (and growing) team, the Queretaro crew has taken ownership of growing the office and brand, speaking at university events, hosting tech ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/NP1gAnbeNno/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/NP1gAnbeNno/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/NP1gAnbeNno/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2019-11-12T20:45:18Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "0XmhUGwmJNRilJR1S6VgOmdO9ho", + "id": { + "kind": "youtube#video", + "videoId": "F6Krwu6lUc8" + }, + "snippet": { + "publishedAt": "2020-10-23T04:15:31Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Miriam Godinez | Women in Leadership at Wizeline", + "description": "Science and technology always caught Miriam's attention. One of her ultimate goals as a Senior Engineer Manager and Lead from the Mobile Team at Wizeline ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/F6Krwu6lUc8/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/F6Krwu6lUc8/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/F6Krwu6lUc8/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2020-10-23T04:15:31Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "mM9qAwvNhFKGUv6mCIamuWVo0NE", + "id": { + "kind": "youtube#video", + "videoId": "RFq7gfvhtCk" + }, + "snippet": { + "publishedAt": "2020-05-23T00:11:23Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Welcome Back to Wizeline Vietnam | Extended Version", + "description": "Thanks to swift government action, the COVID-19 situation in Vietnam has reached a point where businesses are able to return to work and reopen offices.", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/RFq7gfvhtCk/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/RFq7gfvhtCk/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/RFq7gfvhtCk/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2020-05-23T00:11:23Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "sVz5aNJZHehOf7qJCTLOLh1V40M", + "id": { + "kind": "youtube#video", + "videoId": "E1Vq_A3WKK8" + }, + "snippet": { + "publishedAt": "2017-12-09T18:46:07Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "How does Wizeline work?", + "description": "Wizeline builds teams with a mix of technical and non-technical talent to deliver better products, faster. Learn more about our consulting services: ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/E1Vq_A3WKK8/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/E1Vq_A3WKK8/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/E1Vq_A3WKK8/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2017-12-09T18:46:07Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "kiG9Z-CXE-mbZVBeom4qLurWb4w", + "id": { + "kind": "youtube#video", + "videoId": "ZmkslANDz0Q" + }, + "snippet": { + "publishedAt": "2019-12-18T19:22:44Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "12 Wishes from Wizeline | Happy Holidays 2019", + "description": "", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/ZmkslANDz0Q/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/ZmkslANDz0Q/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/ZmkslANDz0Q/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2019-12-18T19:22:44Z" + } + }, + { + "kind": "youtube#searchResult", + "etag": "bzZZYb96wT_IQHNp5sXm3VDUbXA", + "id": { + "kind": "youtube#video", + "videoId": "Nss3EmTDD3s" + }, + "snippet": { + "publishedAt": "2017-12-08T18:13:27Z", + "channelId": "UCPGzT4wecuWM0BH9mPiulXg", + "title": "Why Wizeline?", + "description": "Hear from our employees directly about what excites them about their roles here at Wizeline. Wizeline wants to hire the best and the brightest to accelerate their ...", + "thumbnails": { + "default": { + "url": "https://i.ytimg.com/vi/Nss3EmTDD3s/default.jpg", + "width": 120, + "height": 90 + }, + "medium": { + "url": "https://i.ytimg.com/vi/Nss3EmTDD3s/mqdefault.jpg", + "width": 320, + "height": 180 + }, + "high": { + "url": "https://i.ytimg.com/vi/Nss3EmTDD3s/hqdefault.jpg", + "width": 480, + "height": 360 + } + }, + "channelTitle": "Wizeline", + "liveBroadcastContent": "none", + "publishTime": "2017-12-08T18:13:27Z" + } + } + ] +} diff --git a/yarn.lock b/yarn.lock index 775e2a891..104f2309d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9834,6 +9834,11 @@ sanitize.css@^10.0.0: resolved "https://registry.yarnpkg.com/sanitize.css/-/sanitize.css-10.0.0.tgz#b5cb2547e96d8629a60947544665243b1dc3657a" integrity sha512-vTxrZz4dX5W86M6oVWVdOVe72ZiPs41Oi7Z6Km4W5Turyz28mrXSJhhEBZoRtzJWIv3833WKVwLSDWWkEfupMg== +sanitize.css@^12.0.1: + version "12.0.1" + resolved "https://registry.yarnpkg.com/sanitize.css/-/sanitize.css-12.0.1.tgz#f20369357557ba2b41d7278eeb3ea691a3bee514" + integrity sha512-QbusSBnWHaRBZeTxsJyknwI0q+q6m1NtLBmB76JfW/rdVN7Ws6Zz70w65+430/ouVcdNVT3qwrDgrM6PaYyRtw== + sass-loader@8.0.2: version "8.0.2" resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-8.0.2.tgz#debecd8c3ce243c76454f2e8290482150380090d" @@ -10557,7 +10562,7 @@ style-loader@0.23.1: loader-utils "^1.1.0" schema-utils "^1.0.0" -styled-components@^5.2.1: +styled-components@^5, styled-components@^5.2.1: version "5.2.1" resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.1.tgz#6ed7fad2dc233825f64c719ffbdedd84ad79101a" integrity sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ== From ff5457121dbb88c42366e870ed6b81e96c45d3d1 Mon Sep 17 00:00:00 2001 From: alfredo-pacheco Date: Fri, 19 Feb 2021 23:02:33 -0700 Subject: [PATCH 3/3] Remove unecessary code --- src/components/App/App.component.jsx | 7 ----- src/components/Fortune/Fortune.component.jsx | 12 ------- src/components/Fortune/Fortune.styles.css | 5 --- src/components/Fortune/index.js | 1 - src/components/Layout/Header/Header.jsx | 4 --- src/components/Layout/Header/Header.styled.js | 2 +- src/pages/Home/Home.page.jsx | 10 +++--- src/pages/Home/Home.styled.js | 18 ++++++++--- src/pages/Secret/Secret.page.jsx | 24 -------------- src/pages/Secret/index.js | 1 - src/utils/hooks/useFortune.js | 31 ------------------- 11 files changed, 21 insertions(+), 94 deletions(-) delete mode 100644 src/components/Fortune/Fortune.component.jsx delete mode 100644 src/components/Fortune/Fortune.styles.css delete mode 100644 src/components/Fortune/index.js delete mode 100644 src/pages/Secret/Secret.page.jsx delete mode 100644 src/pages/Secret/index.js delete mode 100644 src/utils/hooks/useFortune.js diff --git a/src/components/App/App.component.jsx b/src/components/App/App.component.jsx index e372d6849..813b622ae 100644 --- a/src/components/App/App.component.jsx +++ b/src/components/App/App.component.jsx @@ -5,9 +5,6 @@ import AuthProvider from '../../providers/Auth'; import HomePage from '../../pages/Home'; import LoginPage from '../../pages/Login'; import NotFound from '../../pages/NotFound'; -import SecretPage from '../../pages/Secret'; -import Private from '../Private'; -import Fortune from '../Fortune'; import Layout from '../Layout'; import { random } from '../../utils/fns'; @@ -41,14 +38,10 @@ function App() { - - - - diff --git a/src/components/Fortune/Fortune.component.jsx b/src/components/Fortune/Fortune.component.jsx deleted file mode 100644 index fdd00219c..000000000 --- a/src/components/Fortune/Fortune.component.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -import { useFortune } from '../../utils/hooks/useFortune'; -import './Fortune.styles.css'; - -function Fortune() { - const { fortune } = useFortune(); - - return {fortune} ; -} - -export default Fortune; diff --git a/src/components/Fortune/Fortune.styles.css b/src/components/Fortune/Fortune.styles.css deleted file mode 100644 index 360014874..000000000 --- a/src/components/Fortune/Fortune.styles.css +++ /dev/null @@ -1,5 +0,0 @@ -.fortune { - position: fixed; - bottom: 0; - right: 0; -} diff --git a/src/components/Fortune/index.js b/src/components/Fortune/index.js deleted file mode 100644 index 3e887bf31..000000000 --- a/src/components/Fortune/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Fortune.component'; diff --git a/src/components/Layout/Header/Header.jsx b/src/components/Layout/Header/Header.jsx index 3f025d753..6ee24cb0b 100644 --- a/src/components/Layout/Header/Header.jsx +++ b/src/components/Layout/Header/Header.jsx @@ -5,17 +5,13 @@ const Header = () => { return ( Header - - - theme switch placeholder - user login placeholder diff --git a/src/components/Layout/Header/Header.styled.js b/src/components/Layout/Header/Header.styled.js index 36417a10a..7c1dbe762 100644 --- a/src/components/Layout/Header/Header.styled.js +++ b/src/components/Layout/Header/Header.styled.js @@ -12,7 +12,7 @@ const HeaderContainer = styled.div` height: 70px; align-items: center; padding: 5px; - border: 3px solid gray; + border-bottom: 3px solid darkgray; background-color: lightgray; `; diff --git a/src/pages/Home/Home.page.jsx b/src/pages/Home/Home.page.jsx index 498140430..25bf0d19c 100644 --- a/src/pages/Home/Home.page.jsx +++ b/src/pages/Home/Home.page.jsx @@ -7,22 +7,24 @@ import { VideoPreview, VideoDescription, VideoTitle, + VideoContent, } from './Home.styled'; import mockData from './youtube-videos-mock.json'; function HomePage() { return ( <> - Title + Mini-Challenge 1 {mockData.items .filter((item) => item.id.kind === 'youtube#video') .map((item) => ( - {item.snippet.title} - - {item.snippet.description} + + {item.snippet.title} + {item.snippet.description} + ))} diff --git a/src/pages/Home/Home.styled.js b/src/pages/Home/Home.styled.js index c24442398..04068d055 100644 --- a/src/pages/Home/Home.styled.js +++ b/src/pages/Home/Home.styled.js @@ -15,15 +15,17 @@ const VideosContainer = styled.div` const VideoCard = styled.div` display: flex; flex-direction: column; - padding: 5px; - border: 1px solid gray; width: 250px; - height: 280px; margin: 10px; + border: 1px solid lightgray; `; const VideoPreview = styled.img``; +const VideoContent = styled.div` + padding: 10px; +`; + const VideoTitle = styled.h2` font-size: 15px; margin: 5px 0; @@ -34,4 +36,12 @@ const VideoDescription = styled.p` margin: 0; `; -export { Title, VideosContainer, VideoCard, VideoPreview, VideoTitle, VideoDescription }; +export { + Title, + VideosContainer, + VideoCard, + VideoPreview, + VideoContent, + VideoTitle, + VideoDescription, +}; diff --git a/src/pages/Secret/Secret.page.jsx b/src/pages/Secret/Secret.page.jsx deleted file mode 100644 index bb9df9b2d..000000000 --- a/src/pages/Secret/Secret.page.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; - -function SecretPage() { - return ( -
- 
-        welcome, voyager...
-         ← go back
-
-