forked from wesbos/Advanced-React
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
21 changed files
with
514 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import Nav from './Nav'; | ||
|
|
||
| const Header = () => ( | ||
| <div> | ||
| <div className="bar"> | ||
| <a href="">Sick Fits</a> | ||
| <Nav /> | ||
| </div> | ||
| <div className="sub-bar"> | ||
| <p>Search</p> | ||
| </div> | ||
| <div>Cart</div> | ||
| </div> | ||
| ); | ||
|
|
||
| export default Header; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import Head from 'next/head'; | ||
|
|
||
| const Meta = () => ( | ||
| <Head> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <meta charSet="utf-8" /> | ||
| <link rel="shortcut icon" href="/static/favicon.png" /> | ||
| <link rel="stylesheet" type="text/css" href="/static/nprogress.css" /> | ||
| <title>Sick Fits!</title> | ||
| </Head> | ||
| ); | ||
|
|
||
| export default Meta; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import Link from 'next/link'; | ||
|
|
||
| const Nav = () => ( | ||
| <div> | ||
| <Link href="/sell"> | ||
| <a>Sell!</a> | ||
| </Link> | ||
| <Link href="/"> | ||
| <a>Home!</a> | ||
| </Link> | ||
| </div> | ||
| ); | ||
|
|
||
| export default Nav; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import React, { Component } from 'react'; | ||
| import Header from '../components/Header'; | ||
| import Meta from '../components/Meta'; | ||
|
|
||
| class Page extends Component { | ||
| render() { | ||
| return ( | ||
| <div> | ||
| <Meta /> | ||
| <Header /> | ||
| {this.props.children} | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default Page; |
47 changes: 47 additions & 0 deletions
47
stepped-solutions/05/frontend/components/styles/CartStyles.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import styled from 'styled-components'; | ||
|
|
||
| const CartStyles = styled.div` | ||
| padding: 20px; | ||
| position: relative; | ||
| background: white; | ||
| position: fixed; | ||
| height: 100%; | ||
| top: 0; | ||
| right: 0; | ||
| width: 40%; | ||
| min-width: 500px; | ||
| bottom: 0; | ||
| transform: translateX(100%); | ||
| transition: all 0.3s; | ||
| box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2); | ||
| z-index: 5; | ||
| display: grid; | ||
| grid-template-rows: auto 1fr auto; | ||
| ${props => props.open && `transform: translateX(0);`}; | ||
| header { | ||
| border-bottom: 5px solid ${props => props.theme.black}; | ||
| margin-bottom: 2rem; | ||
| padding-bottom: 2rem; | ||
| } | ||
| footer { | ||
| border-top: 10px double ${props => props.theme.black}; | ||
| margin-top: 2rem; | ||
| padding-top: 2rem; | ||
| display: grid; | ||
| grid-template-columns: auto auto; | ||
| align-items: center; | ||
| font-size: 3rem; | ||
| font-weight: 900; | ||
| p { | ||
| margin: 0; | ||
| } | ||
| } | ||
| ul { | ||
| margin: 0; | ||
| padding: 0; | ||
| list-style: none; | ||
| overflow: scroll; | ||
| } | ||
| `; | ||
|
|
||
| export default CartStyles; |
13 changes: 13 additions & 0 deletions
13
stepped-solutions/05/frontend/components/styles/CloseButton.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import styled from 'styled-components'; | ||
|
|
||
| const CloseButton = styled.button` | ||
| background: black; | ||
| color: white; | ||
| font-size: 3rem; | ||
| border: 0; | ||
| position: absolute; | ||
| z-index: 2; | ||
| right: 0; | ||
| `; | ||
|
|
||
| export default CloseButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import styled, { keyframes } from 'styled-components'; | ||
|
|
||
| const loading = keyframes` | ||
| from { | ||
| background-position: 0 0; | ||
| /* rotate: 0; */ | ||
| } | ||
| to { | ||
| background-position: 100% 100%; | ||
| /* rotate: 360deg; */ | ||
| } | ||
| `; | ||
|
|
||
| const Form = styled.form` | ||
| box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.05); | ||
| background: rgba(0, 0, 0, 0.02); | ||
| border: 5px solid white; | ||
| padding: 20px; | ||
| font-size: 1.5rem; | ||
| line-height: 1.5; | ||
| font-weight: 600; | ||
| label { | ||
| display: block; | ||
| margin-bottom: 1rem; | ||
| } | ||
| input, | ||
| textarea, | ||
| select { | ||
| width: 100%; | ||
| padding: 0.5rem; | ||
| font-size: 1rem; | ||
| border: 1px solid black; | ||
| &:focus { | ||
| outline: 0; | ||
| border-color: ${props => props.theme.red}; | ||
| } | ||
| } | ||
| button, | ||
| input[type='submit'] { | ||
| width: auto; | ||
| background: red; | ||
| color: white; | ||
| border: 0; | ||
| font-size: 2rem; | ||
| font-weight: 600; | ||
| padding: 0.5rem 1.2rem; | ||
| } | ||
| fieldset { | ||
| border: 0; | ||
| padding: 0; | ||
| &[disabled] { | ||
| opacity: 0.5; | ||
| } | ||
| &::before { | ||
| height: 10px; | ||
| content: ''; | ||
| display: block; | ||
| background-image: linear-gradient(to right, #ff3019 0%, #e2b04a 50%, #ff3019 100%); | ||
| } | ||
| &[aria-busy='true']::before { | ||
| background-size: 50% auto; | ||
| animation: ${loading} 0.5s linear infinite; | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| Form.displayName = 'Form'; | ||
|
|
||
| export default Form; |
39 changes: 39 additions & 0 deletions
39
stepped-solutions/05/frontend/components/styles/ItemStyles.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import styled from 'styled-components'; | ||
|
|
||
| const Item = styled.div` | ||
| background: white; | ||
| border: 1px solid ${props => props.theme.offWhite}; | ||
| box-shadow: ${props => props.theme.bs}; | ||
| position: relative; | ||
| display: flex; | ||
| flex-direction: column; | ||
| img { | ||
| width: 100%; | ||
| height: 400px; | ||
| object-fit: cover; | ||
| } | ||
| p { | ||
| font-size: 12px; | ||
| line-height: 2; | ||
| font-weight: 300; | ||
| flex-grow: 1; | ||
| padding: 0 3rem; | ||
| font-size: 1.5rem; | ||
| } | ||
| .buttonList { | ||
| display: grid; | ||
| width: 100%; | ||
| border-top: 1px solid ${props => props.theme.lightgrey}; | ||
| grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); | ||
| grid-gap: 1px; | ||
| background: ${props => props.theme.lightgrey}; | ||
| & > * { | ||
| background: white; | ||
| border: 0; | ||
| font-size: 1rem; | ||
| padding: 1rem; | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| export default Item; |
64 changes: 64 additions & 0 deletions
64
stepped-solutions/05/frontend/components/styles/NavStyles.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import styled from 'styled-components'; | ||
|
|
||
| const NavStyles = styled.ul` | ||
| margin: 0; | ||
| padding: 0; | ||
| display: flex; | ||
| justify-self: end; | ||
| font-size: 2rem; | ||
| a, | ||
| button { | ||
| padding: 1rem 3rem; | ||
| display: flex; | ||
| align-items: center; | ||
| position: relative; | ||
| text-transform: uppercase; | ||
| font-weight: 900; | ||
| font-size: 1em; | ||
| background: none; | ||
| border: 0; | ||
| cursor: pointer; | ||
| @media (max-width: 700px) { | ||
| font-size: 10px; | ||
| padding: 0 10px; | ||
| } | ||
| &:before { | ||
| content: ''; | ||
| width: 2px; | ||
| background: ${props => props.theme.lightgrey}; | ||
| height: 100%; | ||
| left: 0; | ||
| position: absolute; | ||
| transform: skew(-20deg); | ||
| top: 0; | ||
| bottom: 0; | ||
| } | ||
| &:after { | ||
| height: 2px; | ||
| background: red; | ||
| content: ''; | ||
| width: 0; | ||
| position: absolute; | ||
| transform: translateX(-50%); | ||
| transition: width 0.4s; | ||
| transition-timing-function: cubic-bezier(1, -0.65, 0, 2.31); | ||
| left: 50%; | ||
| margin-top: 2rem; | ||
| } | ||
| &:hover, | ||
| &:focus { | ||
| outline: none; | ||
| &:after { | ||
| width: calc(100% - 60px); | ||
| } | ||
| } | ||
| } | ||
| @media (max-width: 1300px) { | ||
| border-top: 1px solid ${props => props.theme.lightgrey}; | ||
| width: 100%; | ||
| justify-content: center; | ||
| font-size: 1.5rem; | ||
| } | ||
| `; | ||
|
|
||
| export default NavStyles; |
44 changes: 44 additions & 0 deletions
44
stepped-solutions/05/frontend/components/styles/OrderItemStyles.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import styled from 'styled-components'; | ||
|
|
||
| const OrderItemStyles = styled.li` | ||
| box-shadow: ${props => props.theme.bs}; | ||
| list-style: none; | ||
| padding: 2rem; | ||
| border: 1px solid ${props => props.theme.offWhite}; | ||
| h2 { | ||
| border-bottom: 2px solid red; | ||
| margin-top: 0; | ||
| margin-bottom: 2rem; | ||
| padding-bottom: 2rem; | ||
| } | ||
| .images { | ||
| display: grid; | ||
| grid-gap: 10px; | ||
| grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); | ||
| margin-top: 1rem; | ||
| img { | ||
| height: 200px; | ||
| object-fit: cover; | ||
| width: 100%; | ||
| } | ||
| } | ||
| .order-meta { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fit, minmax(20px, 1fr)); | ||
| display: grid; | ||
| grid-gap: 1rem; | ||
| text-align: center; | ||
| & > * { | ||
| margin: 0; | ||
| background: rgba(0, 0, 0, 0.03); | ||
| padding: 1rem 0; | ||
| } | ||
| strong { | ||
| display: block; | ||
| margin-bottom: 1rem; | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| export default OrderItemStyles; |
38 changes: 38 additions & 0 deletions
38
stepped-solutions/05/frontend/components/styles/OrderStyles.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import styled from 'styled-components'; | ||
|
|
||
| const OrderStyles = styled.div` | ||
| max-width: 1000px; | ||
| margin: 0 auto; | ||
| border: 1px solid ${props => props.theme.offWhite}; | ||
| box-shadow: ${props => props.theme.bs}; | ||
| padding: 2rem; | ||
| border-top: 10px solid red; | ||
| & > p { | ||
| display: grid; | ||
| grid-template-columns: 1fr 5fr; | ||
| margin: 0; | ||
| border-bottom: 1px solid ${props => props.theme.offWhite}; | ||
| span { | ||
| padding: 1rem; | ||
| &:first-child { | ||
| font-weight: 900; | ||
| text-align: right; | ||
| } | ||
| } | ||
| } | ||
| .order-item { | ||
| border-bottom: 1px solid ${props => props.theme.offWhite}; | ||
| display: grid; | ||
| grid-template-columns: 300px 1fr; | ||
| align-items: center; | ||
| grid-gap: 2rem; | ||
| margin: 2rem 0; | ||
| padding-bottom: 2rem; | ||
| img { | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: cover; | ||
| } | ||
| } | ||
| `; | ||
| export default OrderStyles; |
Oops, something went wrong.