From b5622cdfb414639da95673b503041f75161bfaf1 Mon Sep 17 00:00:00 2001 From: gabrielprmartins Date: Thu, 12 Jan 2023 21:43:28 -0300 Subject: [PATCH 01/10] initial commit --- assets/arrow.js | 21 ++ assets/global.js | 18 ++ assets/logo-getnews.js | 26 +++ assets/search.js | 23 +++ components/AboutSection/index.js | 39 ++++ components/AboutSection/styles.js | 21 ++ components/Feed/index.js | 16 ++ components/Feed/styles.js | 12 ++ components/Header/index.js | 48 +++++ components/Header/styles.js | 48 +++++ components/News/index.js | 40 ++++ components/News/styles.js | 83 ++++++++ components/Search/index.js | 15 ++ components/Search/styles.js | 41 ++++ package.json | 3 +- pages/_app.js | 14 +- pages/_document.js | 22 +++ pages/about.js | 7 + pages/index.js | 18 +- pages/pricing.js | 5 + styles/global.js | 49 +++++ yarn.lock | 310 +++++++++++++++++++++++++++++- 22 files changed, 866 insertions(+), 13 deletions(-) create mode 100644 assets/arrow.js create mode 100644 assets/global.js create mode 100644 assets/logo-getnews.js create mode 100644 assets/search.js create mode 100644 components/AboutSection/index.js create mode 100644 components/AboutSection/styles.js create mode 100644 components/Feed/index.js create mode 100644 components/Feed/styles.js create mode 100644 components/Header/index.js create mode 100644 components/Header/styles.js create mode 100644 components/News/index.js create mode 100644 components/News/styles.js create mode 100644 components/Search/index.js create mode 100644 components/Search/styles.js create mode 100644 pages/_document.js create mode 100644 pages/about.js create mode 100644 pages/pricing.js create mode 100644 styles/global.js diff --git a/assets/arrow.js b/assets/arrow.js new file mode 100644 index 00000000..f6dbd516 --- /dev/null +++ b/assets/arrow.js @@ -0,0 +1,21 @@ +import React from "react"; + +const Arrow = (props) => ( + + + +); + +export default Arrow; diff --git a/assets/global.js b/assets/global.js new file mode 100644 index 00000000..87dc2948 --- /dev/null +++ b/assets/global.js @@ -0,0 +1,18 @@ +import * as React from "react"; + +const Global = (props) => ( + + + +); + +export default Global; diff --git a/assets/logo-getnews.js b/assets/logo-getnews.js new file mode 100644 index 00000000..f4767fd3 --- /dev/null +++ b/assets/logo-getnews.js @@ -0,0 +1,26 @@ +import React from "react"; + +const LogoGetNews = (props) => ( + + + + + +); + +export default LogoGetNews; diff --git a/assets/search.js b/assets/search.js new file mode 100644 index 00000000..a5082dad --- /dev/null +++ b/assets/search.js @@ -0,0 +1,23 @@ +import * as React from "react"; + +const SearchIcon = (props) => ( + + + + + + + + + + + +); + +export default SearchIcon; diff --git a/components/AboutSection/index.js b/components/AboutSection/index.js new file mode 100644 index 00000000..1eea1125 --- /dev/null +++ b/components/AboutSection/index.js @@ -0,0 +1,39 @@ +import { Section, Title, Paragraph } from "./styles"; + +const AboutSection = () => { + return ( +
+ About + + It is a long established fact that a reader will be distracted by the + readable content of a page when looking at its layout. The point of + using Lorem Ipsum is that it has a more-or-less normal distribution of + letters, as opposed to using 'Content here, content here', making it + look like readable English. + + + It is a long established fact that a reader will be distracted by the + readable content of a page when looking at its layout. The point of + using Lorem Ipsum is that it has a more-or-less normal distribution of + letters, as opposed to using 'Content here, content here', making it + look like readable English of a page when looking at its layout. The + point of using Lorem Ipsum is that it has a more-or-less normal + distribution of letters of a page when looking at its layout. The point + of using Lorem Ipsum is that it has a more-or-less normal distribution + of letters. + + + It is a long established fact that a reader will be distracted by the + readable content. + + + It is a long established fact that a reader will be distracted by the + readable content of a page when looking at its layout. The point of + using Lorem Ipsum is that it has a more-or-less normal distribution of + letters.. + +
+ ); +}; + +export default AboutSection; diff --git a/components/AboutSection/styles.js b/components/AboutSection/styles.js new file mode 100644 index 00000000..5c7d157c --- /dev/null +++ b/components/AboutSection/styles.js @@ -0,0 +1,21 @@ +import styled from "styled-components"; + +export const Section = styled.section` + padding: 0 2rem; + border-left: 5px solid var(--blue); +`; + +export const Title = styled.h1` + color: var(--blue); + font-size: 2rem; + margin-bottom: 1rem; +`; + +export const Paragraph = styled.p` + color: var(--black); + line-height: 1.5; + font-size: 1rem; + & + p { + margin-top: 1rem; + } +`; diff --git a/components/Feed/index.js b/components/Feed/index.js new file mode 100644 index 00000000..84ee6213 --- /dev/null +++ b/components/Feed/index.js @@ -0,0 +1,16 @@ +import News from "../News/index"; +import { FeedSection } from "./styles"; + +const Feed = () => { + return ( + + + + + + + + ); +}; + +export default Feed; diff --git a/components/Feed/styles.js b/components/Feed/styles.js new file mode 100644 index 00000000..b91b3185 --- /dev/null +++ b/components/Feed/styles.js @@ -0,0 +1,12 @@ +import styled from "styled-components"; + +export const FeedSection = styled.section` + margin-top: 3rem; + display: flex; + align-items: center; + flex-direction: column; + gap: 2rem; + @media screen and (max-width: 500px) { + margin-top: 2rem; + } +`; diff --git a/components/Header/index.js b/components/Header/index.js new file mode 100644 index 00000000..847c846c --- /dev/null +++ b/components/Header/index.js @@ -0,0 +1,48 @@ +import React from "react"; +import Link from "next/link"; +import { useRouter } from "next/router"; + +import { HeaderContainer, NavList, NavItem } from "./styles"; +import LogoGetNews from "../../assets/logo-getnews"; +import Global from "../../assets/global"; + +const Header = () => { + const router = useRouter(); + + return ( + + + + + + ); +}; + +export default Header; diff --git a/components/Header/styles.js b/components/Header/styles.js new file mode 100644 index 00000000..e86319fb --- /dev/null +++ b/components/Header/styles.js @@ -0,0 +1,48 @@ +import styled from "styled-components"; + +export const HeaderContainer = styled.header` + background-color: var(--blue); + padding: 0 2rem; + display: flex; + align-items: center; + justify-content: space-between; + @media screen and (max-width: 730px) { + padding: 0.5rem 2rem 0 2rem; + display: grid; + } + & > label { + grid-column: 2; + grid-row: 1; + } +`; + +export const NavList = styled.nav` + display: flex; + align-items: center; + @media screen and (max-width: 730px) { + padding-top: 0.5rem; + grid-column: 1 / -1; + justify-content: space-between; + } +`; + +export const NavItem = styled.li` + & > a { + display: block; + padding: 2rem 2.5rem; + height: 1.5rem; + color: var(--white); + } + + & > a:hover, + & > a.active { + background-color: var(--blue-100); + } + + @media screen and (max-width: 730px) { + & > a { + border-radius: 0.5rem; + padding: 1rem 1.5rem; + } + } +`; diff --git a/components/News/index.js b/components/News/index.js new file mode 100644 index 00000000..caf6098b --- /dev/null +++ b/components/News/index.js @@ -0,0 +1,40 @@ +import { + NewsContainer, + Image, + Title, + Paragraph, + FlexDiv, + Link, +} from "./styles"; +import Arrow from "../../assets/arrow"; + +const News = () => { + return ( + + Teste +
+ + Here’s how this company turns diesel buses into electric buses + + + Kleanbus, which just completed its first prototype vehicle, strips + diesel engines out of five- to 10-year-old buses and replaces them + with electric powertrains.\n more…\nThe post Here’s how this company + turns diesel buses into electric buses appeared first on E… + + + 20/05/2021 • 16h36 + + Full Story + + + +
+ + ); +}; + +export default News; diff --git a/components/News/styles.js b/components/News/styles.js new file mode 100644 index 00000000..4ed27022 --- /dev/null +++ b/components/News/styles.js @@ -0,0 +1,83 @@ +import styled from "styled-components"; + +export const NewsContainer = styled.div` + display: grid; + grid-template-columns: auto 1fr; + gap: 2rem; + background-color: var(--white-100); + box-shadow: var(--shadow-news); + padding: 2rem; + border-radius: 1rem; + @media screen and (max-width: 680px) { + display: flex; + flex-direction: column; + align-items: center; + padding: 2rem 1.5rem; + } +`; + +export const Image = styled.img` + border-radius: 1rem; + object-fit: cover; + max-width: 16rem; + height: 13rem; + @media screen and (max-width: 680px) { + height: auto; + } +`; + +export const Title = styled.h2` + font-size: 1.35rem; + color: var(--black-100); + line-height: 1.2; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +`; + +export const Paragraph = styled.p` + margin: 1rem 0; + font-size: 0.9rem; + color: var(--black-100); + line-height: 1.5; + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +`; + +export const FlexDiv = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + & > span { + font-size: 0.845rem; + color: var(--gray); + } + @media screen and (max-width: 384px) { + & > span { + font-size: 0.745rem; + color: var(--gray); + } + } +`; + +export const Link = styled.a` + padding: 0.5rem 1.5rem; + display: flex; + align-items: center; + gap: 0.4rem; + font-weight: bold; + color: var(--blue); + transition: 0.2s; + &:hover { + gap: 1rem; + } + @media screen and (max-width: 384px) { + padding: 0.5rem 1rem; + font-size: 0.9rem; + } +`; diff --git a/components/Search/index.js b/components/Search/index.js new file mode 100644 index 00000000..f2996758 --- /dev/null +++ b/components/Search/index.js @@ -0,0 +1,15 @@ +import { SearchContainer, Button, Input } from "./styles"; +import SearchIcon from "../../assets/search"; + +const Search = () => { + return ( + + + + + ); +}; + +export default Search; diff --git a/components/Search/styles.js b/components/Search/styles.js new file mode 100644 index 00000000..cc590e40 --- /dev/null +++ b/components/Search/styles.js @@ -0,0 +1,41 @@ +import styled from "styled-components"; + +export const SearchContainer = styled.div` + display: grid; + grid-template-columns: 1fr; + margin-top: 1rem; + position: relative; +`; + +export const Input = styled.input` + padding: 1rem 7rem 1rem 2rem; + border: none; + border-radius: 0.5rem; + background-color: var(--white-100); + box-shadow: var(--shadow); + transition: 0.2s; + outline: none; + &:hover, + &:focus { + box-shadow: var(--shadow-hover); + } + &:placeholder { + color: var(--black-100); + } +`; + +export const Button = styled.button` + background-color: var(--blue); + border: none; + border-radius: 0.5rem; + position: absolute; + right: 0; + height: 100%; + padding: 0 2rem; + cursor: pointer; + &:hover, + &:active, + &:focus { + background-color: var(--blue-100); + } +`; diff --git a/package.json b/package.json index d6d970b0..0e5f7bfa 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ "dependencies": { "next": "13.0.6", "react": "18.2.0", - "react-dom": "18.2.0" + "react-dom": "18.2.0", + "styled-components": "^5.3.6" }, "devDependencies": { "eslint": "8.29.0", diff --git a/pages/_app.js b/pages/_app.js index 23d1ca6c..764946e2 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,6 +1,16 @@ +import Header from "../components/Header/index"; +import { GlobalStyle, Main } from "../styles/global"; function MyApp({ Component, pageProps }) { - return + return ( + <> +
+ +
+ +
+ + ); } -export default MyApp +export default MyApp; diff --git a/pages/_document.js b/pages/_document.js new file mode 100644 index 00000000..afb12eaa --- /dev/null +++ b/pages/_document.js @@ -0,0 +1,22 @@ +import { Html, Head, Main, NextScript } from "next/document"; + +const Document = () => { + return ( + + + + + + + +
+ + + + ); +}; + +export default Document; diff --git a/pages/about.js b/pages/about.js new file mode 100644 index 00000000..bec33fee --- /dev/null +++ b/pages/about.js @@ -0,0 +1,7 @@ +import AboutSection from "../components/AboutSection/index"; + +const About = () => { + return ; +}; + +export default About; diff --git a/pages/index.js b/pages/index.js index f80b4ce2..04345d86 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,8 +1,14 @@ +import Search from "../components/Search/index"; +import Feed from "../components/Feed/index"; +import { MainTitle } from "../styles/global"; -export default function Home() { +const Home = () => { return ( -
-

Hello, World!

-
- ) -} + <> + Explore News and Stand Awake! + + + + ); +}; +export default Home; diff --git a/pages/pricing.js b/pages/pricing.js new file mode 100644 index 00000000..6bf97279 --- /dev/null +++ b/pages/pricing.js @@ -0,0 +1,5 @@ +const Pricing = () => { + return

Pricing

; +}; + +export default Pricing; diff --git a/styles/global.js b/styles/global.js new file mode 100644 index 00000000..d95a8cbc --- /dev/null +++ b/styles/global.js @@ -0,0 +1,49 @@ +import styled from "styled-components"; +import { createGlobalStyle } from "styled-components"; + +export const GlobalStyle = createGlobalStyle` + * { + margin: 0; + padding: 0; + font-family: 'Mulish', sans-serif; + list-style: none; + text-decoration: none; + } + + img { + display: block; + max-width: 100%; + height: auto; + } + + :root { + --black: #273053; + --black-100: #3E4A79; + --gray: #889297; + --blue: #3E64FF; + --blue-100: #597AFF; + --white: #FFFFFF; + --white-100: #F8F9FF; + --shadow: 0px 18px 50px rgba(62, 100, 255, 0.1); + --shadow-hover: rgba(62, 100, 255, .45) 0px 25px 20px -20px; + --shadow-news: 0px 18px 20px rgba(62, 100, 255, 0.1); + } +`; + +export const Main = styled.div` + margin: 2rem auto; + max-width: 45rem; + padding: 1.25rem; + @media screen and (max-width: 500px) { + margin: 1rem auto; + } +`; + +export const MainTitle = styled.h1` + font-size: 2.5rem; + text-align: center; + color: var(--blue); + @media screen and (max-width: 410px) { + font-size: 1.8rem; + } +`; diff --git a/yarn.lock b/yarn.lock index 904d3d1c..030a8ee7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,87 @@ # yarn lockfile v1 +"@babel/code-frame@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a" + integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q== + dependencies: + "@babel/highlight" "^7.18.6" + +"@babel/generator@^7.20.7": + version "7.20.7" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.20.7.tgz#f8ef57c8242665c5929fe2e8d82ba75460187b4a" + integrity sha512-7wqMOJq8doJMZmP4ApXTzLxSr7+oO2jroJURrVEp6XShrQUObV8Tq/D0NCcoYg2uHqUrjzO0zwBjoYzelxK+sw== + dependencies: + "@babel/types" "^7.20.7" + "@jridgewell/gen-mapping" "^0.3.2" + jsesc "^2.5.1" + +"@babel/helper-annotate-as-pure@^7.16.0": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb" + integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA== + dependencies: + "@babel/types" "^7.18.6" + +"@babel/helper-environment-visitor@^7.18.9": + version "7.18.9" + resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be" + integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg== + +"@babel/helper-function-name@^7.19.0": + version "7.19.0" + resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz#941574ed5390682e872e52d3f38ce9d1bef4648c" + integrity sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w== + dependencies: + "@babel/template" "^7.18.10" + "@babel/types" "^7.19.0" + +"@babel/helper-hoist-variables@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678" + integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q== + dependencies: + "@babel/types" "^7.18.6" + +"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.0": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e" + integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA== + dependencies: + "@babel/types" "^7.18.6" + +"@babel/helper-split-export-declaration@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075" + integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA== + dependencies: + "@babel/types" "^7.18.6" + +"@babel/helper-string-parser@^7.19.4": + version "7.19.4" + resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63" + integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw== + +"@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1": + version "7.19.1" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2" + integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w== + +"@babel/highlight@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf" + integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g== + dependencies: + "@babel/helper-validator-identifier" "^7.18.6" + chalk "^2.0.0" + js-tokens "^4.0.0" + +"@babel/parser@^7.20.7": + version "7.20.7" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.7.tgz#66fe23b3c8569220817d5feb8b9dcdc95bb4f71b" + integrity sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg== + "@babel/runtime-corejs3@^7.10.2": version "7.20.6" resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.20.6.tgz#63dae945963539ab0ad578efbf3eff271e7067ae" @@ -17,6 +98,62 @@ dependencies: regenerator-runtime "^0.13.11" +"@babel/template@^7.18.10": + version "7.20.7" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8" + integrity sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw== + dependencies: + "@babel/code-frame" "^7.18.6" + "@babel/parser" "^7.20.7" + "@babel/types" "^7.20.7" + +"@babel/traverse@^7.4.5": + version "7.20.12" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.12.tgz#7f0f787b3a67ca4475adef1f56cb94f6abd4a4b5" + integrity sha512-MsIbFN0u+raeja38qboyF8TIT7K0BFzz/Yd/77ta4MsUsmP2RAnidIlwq7d5HFQrH/OZJecGV6B71C4zAgpoSQ== + dependencies: + "@babel/code-frame" "^7.18.6" + "@babel/generator" "^7.20.7" + "@babel/helper-environment-visitor" "^7.18.9" + "@babel/helper-function-name" "^7.19.0" + "@babel/helper-hoist-variables" "^7.18.6" + "@babel/helper-split-export-declaration" "^7.18.6" + "@babel/parser" "^7.20.7" + "@babel/types" "^7.20.7" + debug "^4.1.0" + globals "^11.1.0" + +"@babel/types@^7.18.6", "@babel/types@^7.19.0", "@babel/types@^7.20.7": + version "7.20.7" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.7.tgz#54ec75e252318423fc07fb644dc6a58a64c09b7f" + integrity sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg== + dependencies: + "@babel/helper-string-parser" "^7.19.4" + "@babel/helper-validator-identifier" "^7.19.1" + to-fast-properties "^2.0.0" + +"@emotion/is-prop-valid@^1.1.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83" + integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg== + dependencies: + "@emotion/memoize" "^0.8.0" + +"@emotion/memoize@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f" + integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA== + +"@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== + "@eslint/eslintrc@^1.3.3": version "1.3.3" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.3.tgz#2b044ab39fdfa75b4688184f9e573ce3c5b0ff95" @@ -51,6 +188,38 @@ resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45" integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA== +"@jridgewell/gen-mapping@^0.3.2": + version "0.3.2" + resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9" + integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A== + dependencies: + "@jridgewell/set-array" "^1.0.1" + "@jridgewell/sourcemap-codec" "^1.4.10" + "@jridgewell/trace-mapping" "^0.3.9" + +"@jridgewell/resolve-uri@3.1.0": + version "3.1.0" + resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78" + integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w== + +"@jridgewell/set-array@^1.0.1": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72" + integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw== + +"@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.10": + version "1.4.14" + resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24" + integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw== + +"@jridgewell/trace-mapping@^0.3.9": + version "0.3.17" + resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985" + integrity sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g== + dependencies: + "@jridgewell/resolve-uri" "3.1.0" + "@jridgewell/sourcemap-codec" "1.4.14" + "@next/env@13.0.6": version "13.0.6" resolved "https://registry.yarnpkg.com/@next/env/-/env-13.0.6.tgz#3fcab11ffbe95bff127827d9f7f3139bc5e6adff" @@ -247,6 +416,13 @@ ansi-regex@^5.0.1: resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304" integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ== +ansi-styles@^3.2.1: + version "3.2.1" + resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d" + integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA== + dependencies: + color-convert "^1.9.0" + ansi-styles@^4.1.0: version "4.3.0" resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937" @@ -329,6 +505,22 @@ axobject-query@^2.2.0: resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be" integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA== +"babel-plugin-styled-components@>= 1.12.0": + version "2.0.7" + resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086" + integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA== + dependencies: + "@babel/helper-annotate-as-pure" "^7.16.0" + "@babel/helper-module-imports" "^7.16.0" + babel-plugin-syntax-jsx "^6.18.0" + lodash "^4.17.11" + picomatch "^2.3.0" + +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 sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw== + balanced-match@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee" @@ -362,11 +554,25 @@ callsites@^3.0.0: resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73" integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ== +camelize@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3" + integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ== + caniuse-lite@^1.0.30001406: version "1.0.30001439" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001439.tgz#ab7371faeb4adff4b74dad1718a6fd122e45d9cb" integrity sha512-1MgUzEkoMO6gKfXflStpYgZDlFM7M/ck/bgfVCACO5vnAf0fXoNVHdWtqGU+MYca+4bL9Z5bpOVmR33cWW9G2A== +chalk@^2.0.0: + version "2.4.2" + resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" + integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== + dependencies: + ansi-styles "^3.2.1" + escape-string-regexp "^1.0.5" + supports-color "^5.3.0" + chalk@^4.0.0: version "4.1.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" @@ -380,6 +586,13 @@ client-only@0.0.1: resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1" integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA== +color-convert@^1.9.0: + version "1.9.3" + resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" + integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== + dependencies: + color-name "1.1.3" + color-convert@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3" @@ -387,6 +600,11 @@ color-convert@^2.0.1: dependencies: color-name "~1.1.4" +color-name@1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" + integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw== + color-name@~1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" @@ -411,6 +629,20 @@ cross-spawn@^7.0.2, cross-spawn@^7.0.3: shebang-command "^2.0.0" which "^2.0.1" +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 sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg== + +css-to-react-native@^3.0.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.1.0.tgz#e783474149997608986afcff614405714a8fe1ac" + integrity sha512-AryfkFA29b4I3vG7N4kxFboq15DxwSXzhXM37XNEjwJMgjYIc8BcqfiprpAqX0zadI5PMByEIwAMzXxk5Vcc4g== + dependencies: + camelize "^1.0.0" + css-color-keywords "^1.0.0" + postcss-value-parser "^4.0.2" + damerau-levenshtein@^1.0.8: version "1.0.8" resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7" @@ -430,7 +662,7 @@ debug@^3.2.7: dependencies: ms "^2.1.1" -debug@^4.1.1, debug@^4.3.2, debug@^4.3.4: +debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4: version "4.3.4" resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865" integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ== @@ -536,6 +768,11 @@ es-to-primitive@^1.2.1: is-date-object "^1.0.1" is-symbol "^1.0.2" +escape-string-regexp@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" + integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg== + escape-string-regexp@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34" @@ -904,6 +1141,11 @@ glob@^7.1.3: once "^1.3.0" path-is-absolute "^1.0.0" +globals@^11.1.0: + version "11.12.0" + resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" + integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== + globals@^13.15.0: version "13.19.0" resolved "https://registry.yarnpkg.com/globals/-/globals-13.19.0.tgz#7a42de8e6ad4f7242fbcca27ea5b23aca367b5c8" @@ -966,6 +1208,11 @@ has-bigints@^1.0.1, has-bigints@^1.0.2: resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa" integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ== +has-flag@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" + integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw== + has-flag@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b" @@ -997,6 +1244,13 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" +hoist-non-react-statics@^3.0.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== + dependencies: + react-is "^16.7.0" + ignore@^5.2.0: version "5.2.1" resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.1.tgz#c2b1f76cb999ede1502f3a226a9310fdfe88d46c" @@ -1163,7 +1417,7 @@ js-sdsl@^4.1.4: resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.2.0.tgz#278e98b7bea589b8baaf048c20aeb19eb7ad09d0" integrity sha512-dyBIzQBDkCqCu+0upx25Y2jGdbTGxE9fshMsCdK0ViOongpV+n5tXRcZY9v7CaVQ79AGS9KA1KHtojxiM7aXSQ== -"js-tokens@^3.0.0 || ^4.0.0": +"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== @@ -1175,6 +1429,11 @@ js-yaml@^4.1.0: dependencies: argparse "^2.0.1" +jsesc@^2.5.1: + version "2.5.2" + resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4" + integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA== + json-schema-traverse@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660" @@ -1232,6 +1491,11 @@ lodash.merge@^4.6.2: resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== +lodash@^4.17.11: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" + integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== + loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" @@ -1460,11 +1724,16 @@ picocolors@^1.0.0: resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== -picomatch@^2.3.1: +picomatch@^2.3.0, picomatch@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== +postcss-value-parser@^4.0.2: + version "4.2.0" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" + integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== + postcss@8.4.14: version "8.4.14" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf" @@ -1506,7 +1775,7 @@ react-dom@18.2.0: loose-envify "^1.1.0" scheduler "^0.23.0" -react-is@^16.13.1: +react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -1607,6 +1876,11 @@ semver@^7.3.7: dependencies: lru-cache "^6.0.0" +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@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea" @@ -1692,6 +1966,22 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig== +styled-components@^5.3.6: + version "5.3.6" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.6.tgz#27753c8c27c650bee9358e343fc927966bfd00d1" + integrity sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@babel/traverse" "^7.4.5" + "@emotion/is-prop-valid" "^1.1.0" + "@emotion/stylis" "^0.8.4" + "@emotion/unitless" "^0.7.4" + babel-plugin-styled-components ">= 1.12.0" + css-to-react-native "^3.0.0" + hoist-non-react-statics "^3.0.0" + shallowequal "^1.1.0" + supports-color "^5.5.0" + styled-jsx@5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.0.tgz#4a5622ab9714bd3fcfaeec292aa555871f057563" @@ -1699,6 +1989,13 @@ styled-jsx@5.1.0: dependencies: client-only "0.0.1" +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== + dependencies: + has-flag "^3.0.0" + supports-color@^7.1.0: version "7.2.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da" @@ -1737,6 +2034,11 @@ tiny-glob@^0.2.9: globalyzer "0.1.0" globrex "^0.1.2" +to-fast-properties@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e" + integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog== + to-regex-range@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4" From 412d7877041c69459b65ec2b89e1fc8b078c29ec Mon Sep 17 00:00:00 2001 From: gabrielprmartins Date: Fri, 13 Jan 2023 17:20:33 -0300 Subject: [PATCH 02/10] feat: add page styles and new components --- assets/moon.js | 18 +++++++ assets/plan-icon.js | 26 +++++++++ assets/sun.js | 18 +++++++ components/AboutSection/index.js | 4 +- components/AboutSection/styles.js | 15 ------ components/Footer/index.js | 11 ++++ components/Footer/styles.js | 9 ++++ components/Header/index.js | 7 ++- components/Header/styles.js | 3 +- components/PlanBox/index.js | 38 ++++++++++++++ components/PlanBox/styles.js | 81 +++++++++++++++++++++++++++++ components/PricingSection/index.js | 23 ++++++++ components/PricingSection/styles.js | 17 ++++++ components/ThemeButton/index.js | 28 ++++++++++ components/ThemeButton/styles.js | 16 ++++++ pages/_app.js | 2 + pages/index.js | 4 +- pages/pricing.js | 4 +- styles/global.js | 28 +++++++--- 19 files changed, 320 insertions(+), 32 deletions(-) create mode 100644 assets/moon.js create mode 100644 assets/plan-icon.js create mode 100644 assets/sun.js create mode 100644 components/Footer/index.js create mode 100644 components/Footer/styles.js create mode 100644 components/PlanBox/index.js create mode 100644 components/PlanBox/styles.js create mode 100644 components/PricingSection/index.js create mode 100644 components/PricingSection/styles.js create mode 100644 components/ThemeButton/index.js create mode 100644 components/ThemeButton/styles.js diff --git a/assets/moon.js b/assets/moon.js new file mode 100644 index 00000000..ac0b950b --- /dev/null +++ b/assets/moon.js @@ -0,0 +1,18 @@ +import React from "react"; + +const Moon = (props) => ( + + + +); + +export default Moon; diff --git a/assets/plan-icon.js b/assets/plan-icon.js new file mode 100644 index 00000000..8ee9294b --- /dev/null +++ b/assets/plan-icon.js @@ -0,0 +1,26 @@ +import React from "react"; + +const PlanIcon = (props) => ( + + + + + +); + +export default PlanIcon; diff --git a/assets/sun.js b/assets/sun.js new file mode 100644 index 00000000..320358e8 --- /dev/null +++ b/assets/sun.js @@ -0,0 +1,18 @@ +import React from "react"; + +const Sun = (props) => ( + + + +); + +export default Sun; diff --git a/components/AboutSection/index.js b/components/AboutSection/index.js index 1eea1125..2eeb0670 100644 --- a/components/AboutSection/index.js +++ b/components/AboutSection/index.js @@ -1,4 +1,6 @@ -import { Section, Title, Paragraph } from "./styles"; +import { Section } from "./styles"; + +import { Title, Paragraph } from "../../styles/global"; const AboutSection = () => { return ( diff --git a/components/AboutSection/styles.js b/components/AboutSection/styles.js index 5c7d157c..3c248069 100644 --- a/components/AboutSection/styles.js +++ b/components/AboutSection/styles.js @@ -4,18 +4,3 @@ export const Section = styled.section` padding: 0 2rem; border-left: 5px solid var(--blue); `; - -export const Title = styled.h1` - color: var(--blue); - font-size: 2rem; - margin-bottom: 1rem; -`; - -export const Paragraph = styled.p` - color: var(--black); - line-height: 1.5; - font-size: 1rem; - & + p { - margin-top: 1rem; - } -`; diff --git a/components/Footer/index.js b/components/Footer/index.js new file mode 100644 index 00000000..57a8661a --- /dev/null +++ b/components/Footer/index.js @@ -0,0 +1,11 @@ +import { FooterContainer } from "./styles"; + +const Footer = () => { + return ( + +

Project created for web developer vacancy by Gabriel Pereira

+ + ); +}; + +export default Footer; diff --git a/components/Footer/styles.js b/components/Footer/styles.js new file mode 100644 index 00000000..b74ebe49 --- /dev/null +++ b/components/Footer/styles.js @@ -0,0 +1,9 @@ +import styled from "styled-components"; + +export const FooterContainer = styled.footer` + background-color: var(--blue); + padding: 2rem; + & > p { + color: var(--white); + } +`; diff --git a/components/Header/index.js b/components/Header/index.js index 847c846c..1087786b 100644 --- a/components/Header/index.js +++ b/components/Header/index.js @@ -2,9 +2,11 @@ import React from "react"; import Link from "next/link"; import { useRouter } from "next/router"; +import ThemeButton from "../ThemeButton/index"; import { HeaderContainer, NavList, NavItem } from "./styles"; import LogoGetNews from "../../assets/logo-getnews"; import Global from "../../assets/global"; +import Moon from "../../assets/moon"; const Header = () => { const router = useRouter(); @@ -37,10 +39,7 @@ const Header = () => { - + ); }; diff --git a/components/Header/styles.js b/components/Header/styles.js index e86319fb..3c4e917d 100644 --- a/components/Header/styles.js +++ b/components/Header/styles.js @@ -35,7 +35,8 @@ export const NavItem = styled.li` } & > a:hover, - & > a.active { + & > a.active, + & > a:focus { background-color: var(--blue-100); } diff --git a/components/PlanBox/index.js b/components/PlanBox/index.js new file mode 100644 index 00000000..841036c7 --- /dev/null +++ b/components/PlanBox/index.js @@ -0,0 +1,38 @@ +import { + PlanContainer, + PlanIconContainer, + Title, + Overview, + PriceContainer, + Price, + Paragraph, + Button, +} from "./styles"; +import PlanIcon from "../../assets/plan-icon"; + +const PlanBox = (props) => { + return ( + + + {props.icon.map((a) => ( + + ))} + + {props.title} + + + {props.overview} News +
+ Per Mounth + + + USD $ + {props.price} + /mo + + {props.text ? {props.text} : ""} + + + ); +}; + +export default PlanBox; diff --git a/components/PlanBox/styles.js b/components/PlanBox/styles.js new file mode 100644 index 00000000..2cd8f348 --- /dev/null +++ b/components/PlanBox/styles.js @@ -0,0 +1,81 @@ +import styled from "styled-components"; + +export const PlanContainer = styled.div` + padding: 2rem; + background-color: var(--white-100); + box-shadow: var(--shadow-hover); + border-radius: 1rem; + display: flex; + flex-direction: column; + justify-content: center; +`; + +export const PlanIconContainer = styled.div` + margin: -3rem 0 1rem; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +`; + +export const Title = styled.h2` + font-size: 1.8rem; + color: var(--black); + text-align: center; + margin-bottom: 1.25rem; + padding-bottom: 0.8rem; + border-bottom: 2px solid var(--white-200); +`; + +export const Overview = styled.div` + font-size: 1.25rem; + line-height: 1.4; + text-align: center; + font-weight: bold; + color: var(--black); + & > span { + font-size: 1.65rem; + color: var(--blue); + } +`; + +export const PriceContainer = styled.div` + display: flex; + justify-content: center; + margin: 2rem 0; + font-size: 0.875rem; + color: var(--gray); + & > span:last-child { + align-self: flex-end; + } +`; + +export const Price = styled.div` + font-size: 3rem; + font-weight: bold; + color: var(--blue); +`; + +export const Paragraph = styled.p` + font-size: 1.145rem; + color: var(--black); + margin-bottom: 2rem; + text-align: center; +`; + +export const Button = styled.button` + font-size: 1.25rem; + color: var(--white); + font-weight: bold; + background-color: var(--blue); + border: none; + border-radius: 0.6rem; + box-shadow: var(--shadow); + padding: 0.6rem 2rem; + cursor: pointer; + transition: 0.2s; + &:hover { + background-color: var(--blue-100); + box-shadow: var(--shadow-hover); + } +`; diff --git a/components/PricingSection/index.js b/components/PricingSection/index.js new file mode 100644 index 00000000..86632d64 --- /dev/null +++ b/components/PricingSection/index.js @@ -0,0 +1,23 @@ +import { Section, PlansContainer } from "./styles"; +import { Title } from "../../styles/global"; +import PlanBox from "../../components/PlanBox/index"; + +const PricingSection = () => { + return ( +
+ Plans to Get More News + + + + +
+ ); +}; + +export default PricingSection; diff --git a/components/PricingSection/styles.js b/components/PricingSection/styles.js new file mode 100644 index 00000000..848f77cb --- /dev/null +++ b/components/PricingSection/styles.js @@ -0,0 +1,17 @@ +import styled from "styled-components"; + +export const Section = styled.section``; + +export const PlansContainer = styled.div` + display: grid; + grid-template-columns: repeat(2, 1fr); + align-items: center; + justify-content: center; + gap: 2rem; + margin-top: 2rem; + @media screen and (max-width: 600px) { + display: flex; + gap: 2.5rem; + flex-direction: column; + } +`; diff --git a/components/ThemeButton/index.js b/components/ThemeButton/index.js new file mode 100644 index 00000000..051fba24 --- /dev/null +++ b/components/ThemeButton/index.js @@ -0,0 +1,28 @@ +import { useState, useEffect } from "react"; + +import Moon from "../../assets/moon"; +import Sun from "../../assets/sun"; +import { Button } from "./styles"; + +const ThemeButton = () => { + const [active, setActive] = useState(false); + + useEffect(() => { + console.log(active); + }, [active]); + + return ( + + ); +}; + +export default ThemeButton; diff --git a/components/ThemeButton/styles.js b/components/ThemeButton/styles.js new file mode 100644 index 00000000..7aaf2d2a --- /dev/null +++ b/components/ThemeButton/styles.js @@ -0,0 +1,16 @@ +import styled from "styled-components"; + +export const Button = styled.label` + cursor: pointer; + display: block; + padding: 2rem 2.5rem; + height: 1.5rem; + height: 1.5rem; + &:hover, + &:focus { + background-color: var(--blue-100); + } + & > input { + display: none; + } +`; diff --git a/pages/_app.js b/pages/_app.js index 764946e2..d3f69fda 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,4 +1,5 @@ import Header from "../components/Header/index"; +import Footer from "../components/Footer/index"; import { GlobalStyle, Main } from "../styles/global"; function MyApp({ Component, pageProps }) { @@ -9,6 +10,7 @@ function MyApp({ Component, pageProps }) {
+