feat: containers work

package.json

@@ -7,9 +7,11 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "firebase": "^7.14.0",
     "normalize.css": "^8.0.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",
     "styled-components": "^5.1.0"
   },

src/App.js

@@ -1,6 +1,24 @@
 import React from 'react';
-import { Home } from './pages/home';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { Home, Browse, Signin, Signup } from './pages';
 
 export function App() {
-  return <Home />;
+  return (
+    <Router>
+      <Switch>
+        <Route path="/signin">
+          <Signin />
+        </Route>
+        <Route path="/signup">
+          <Signup />
+        </Route>
+        <Route path="/browse">
+          <Browse />
+        </Route>
+        <Route path="/">
+          <Home />
+        </Route>
+      </Switch>
+    </Router>
+  );
 }

src/components/header/Header.js

@@ -1,8 +1,14 @@
-import React from 'react';
-import { Container, Frame, Button, Logo } from './styles/Header';
+import React, { useContext, createContext } from 'react';
+import { Container, Frame, Link, Logo } from './styles/Header';
 
-export function Header({ children, ...restProps }) {
-  return <Frame {...restProps}>{children}</Frame>;
+export const LinkContext = createContext();
+
+export function Header({ to, children, ...restProps }) {
+  return (
+    <LinkContext.Provider value={{ to }}>
+      <Frame {...restProps}>{children}</Frame>
+    </LinkContext.Provider>
+  );
 }
 
 Header.Frame = function HeaderFrame({ children, ...restProps }) {
@@ -13,6 +19,12 @@ Header.Logo = function HeaderLogo({ ...restProps }) {
   return <Logo {...restProps} />;
 };
 
-Header.Button = function HeaderButton({ children, ...restProps }) {
-  return <Button {...restProps}>{children}</Button>;
+Header.Link = function HeaderButton({ children, ...restProps }) {
+  const { to } = useContext(LinkContext);
+
+  return (
+    <Link to={to} {...restProps}>
+      {children}
+    </Link>
+  );
 };

src/components/header/styles/Header.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { Link as ReachRouterLink } from 'react-router-dom';
 
 export const Frame = styled.div`
   display: flex;
@@ -10,20 +11,24 @@ export const Container = styled.section`
   display: flex;
   margin: 0 3.5rem;
   height: 4rem;
-  padding: 23px 0;
+  padding: 18px 0;
   justify-content: space-between;
+  align-items: center;
 `;
 
-export const Button = styled.button`
+export const Link = styled(ReachRouterLink)`
+  display: block;
   background-color: #e50914;
   width: 84px;
-  height: 34px;
+  height: fit-content;
   color: white;
   border: 0;
   font-size: 15px;
   border-radius: 3px;
-  padding: 7px 17px;
+  padding: 8px 17px;
   cursor: pointer;
+  text-decoration: none;
+  box-sizing: border-box;
 
   &:hover {
     background: #f40612;
@@ -35,7 +40,7 @@ export const Logo = styled.img`
   width: 108px;
 
   @media (min-width: 1449px) {
-    height: 36px;
-    width: 134px;
+    height: 45px;
+    width: 167px;
   }
 `;

src/containers/base.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Header, Feature, Form, Footer } from '../components';
+import logo from '../logo.svg';
+
+export function BaseContainer({ children }) {
+  return (
+    <>
+      <Header>
+        <Header.Frame>
+          <Header.Logo src={logo} alt="Netflix" />
+          <Header.Link to="/signin">Sign In</Header.Link>
+        </Header.Frame>
+
+        <Feature>
+          <Feature.Title>
+            Unlimited films, TV programmes and more.
+          </Feature.Title>
+          <Feature.SubTitle>
+            Watch anywhere. Cancel at any time.
+          </Feature.SubTitle>
+          <Form>
+            <Form.Input placeholder="Email address" />
+            <Form.Button>Try it now</Form.Button>
+            <Form.Break />
+            <Form.Text>
+              Ready to watch? Enter your email to create or restart your
+              membership.
+            </Form.Text>
+          </Form>
+        </Feature>
+      </Header>
+
+      {children}
+
+      <Footer>
+        <Footer.Title>Questions? Contact us.</Footer.Title>
+        <Footer.Break />
+        <Footer.Row>
+          <Footer.Column>
+            <Footer.Link href="#">FAQ</Footer.Link>
+            <Footer.Link href="#">Investor Relations</Footer.Link>
+            <Footer.Link href="#">Ways to Watch</Footer.Link>
+            <Footer.Link href="#">Corporate Information</Footer.Link>
+            <Footer.Link href="#">Netflix Originals</Footer.Link>
+          </Footer.Column>
+
+          <Footer.Column>
+            <Footer.Link href="#">Help Centre</Footer.Link>
+            <Footer.Link href="#">Jobs</Footer.Link>
+            <Footer.Link href="#">Terms of Use</Footer.Link>
+            <Footer.Link href="#">Contact Us</Footer.Link>
+          </Footer.Column>
+
+          <Footer.Column>
+            <Footer.Link href="#">Account</Footer.Link>
+            <Footer.Link href="#">Redeem gift cards</Footer.Link>
+            <Footer.Link href="#">Privacy</Footer.Link>
+            <Footer.Link href="#">Speed Test</Footer.Link>
+          </Footer.Column>
+
+          <Footer.Column>
+            <Footer.Link href="#">Media Centre</Footer.Link>
+            <Footer.Link href="#">Buy gift cards</Footer.Link>
+            <Footer.Link href="#">Cookie Preferences</Footer.Link>
+            <Footer.Link href="#">Legal Notices</Footer.Link>
+          </Footer.Column>
+        </Footer.Row>
+        <Footer.Break />
+        <Footer.Text>Netflix United Kingdom</Footer.Text>
+      </Footer>
+    </>
+  );
+}

src/containers/faqs.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Accordion, Form } from '../components';
+
+const faqs = [
+  {
+    id: 1,
+    header: 'What is Netflix?',
+    body:
+      "Netflix is a streaming service that offers a wide variety of award-winning TV programmes, films, anime, documentaries and more – on thousands of internet-connected devices.\n\nYou can watch as much as you want, whenever you want, without a single advert – all for one low monthly price. There's always something new to discover, and new TV programmes and films are added every week!",
+  },
+  {
+    id: 2,
+    header: 'How much does Netflix cost?',
+    body:
+      'Watch Netflix on your smartphone, tablet, smart TV, laptop or streaming device, all for one low fixed monthly fee. Plans start from £5.99 a month. No extra costs or contracts.',
+  },
+  {
+    id: 3,
+    header: 'Where can I watch?',
+    body:
+      "Watch anywhere, anytime, on an unlimited number of devices. Sign in with your Netflix account to watch instantly on the web at netflix.com from your personal computer or on any internet-connected device that offers the Netflix app, including smart TVs, smartphones, tablets, streaming media players and game consoles.\n\nYou can also download your favourite programmes with the iOS, Android, or Windows 10 app. Use downloads to watch while you're on the go and without an internet connection. Take Netflix with you anywhere.",
+  },
+  {
+    id: 4,
+    header: 'How do I cancel?',
+    body:
+      'Netflix is flexible. There are no annoying contracts and no commitments. You can easily cancel your account online in two clicks. There are no cancellation fees – start or stop your account at any time.',
+  },
+  {
+    id: 5,
+    header: 'What can I watch on Netflix?',
+    body:
+      'Netflix has an extensive library of feature films, documentaries, TV programmes, anime, award-winning Netflix originals, and more. Watch as much as you want, any time you want.',
+  },
+];
+
+export function FaqsContainer() {
+  return (
+    <Accordion>
+      <Accordion.Title>Frequently Asked Questions</Accordion.Title>
+      <Accordion.Frame>
+        {faqs.map((item) => (
+          <Accordion.Item key={item.id}>
+            <Accordion.Header>{item.header}</Accordion.Header>
+            <Accordion.Body>{item.body}</Accordion.Body>
+          </Accordion.Item>
+        ))}
+      </Accordion.Frame>
+
+      <Form>
+        <Form.Input placeholder="Email address" />
+        <Form.Button>Try it now</Form.Button>
+        <Form.Break />
+        <Form.Text>
+          Ready to watch? Enter your email to create or restart your membership.
+        </Form.Text>
+      </Form>
+    </Accordion>
+  );
+}

src/containers/index.js

@@ -0,0 +1,4 @@
+import { BaseContainer } from './base';
+import { FaqsContainer } from './faqs';
+
+export { BaseContainer, FaqsContainer };

src/firebase.js

@@ -0,0 +1,15 @@
+import firebase from 'firebase/app';
+import 'firebase/firestore';
+import 'firebase/auth';
+
+const firebaseConfig = firebase.initializeApp({
+  apiKey: 'AIzaSyDAU60M2FDHNsYt9uGMpRezw3FGVIX6Jrs',
+  authDomain: 'netflix-c8ae9.firebaseapp.com',
+  databaseURL: 'https://netflix-c8ae9.firebaseio.com',
+  projectId: 'netflix-c8ae9',
+  storageBucket: 'netflix-c8ae9.appspot.com',
+  messagingSenderId: '590575805931',
+  appId: '1:590575805931:web:f809092b6cd55306fa25ae',
+});
+
+export { firebaseConfig as firebase };

src/App.css → src/globalStyles.js

@@ -1,8 +1,11 @@
-html, body {
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyles = createGlobalStyle`
+  html, body {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: #000000;
   color: #333333;
   font-size: 16px;
-}
+}`;

src/index.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { App } from './App';
 import 'normalize.css';
+import { GlobalStyles } from './globalStyles';
+import { App } from './App';
 
 ReactDOM.render(
   <React.StrictMode>
+    <GlobalStyles />
     <App />
   </React.StrictMode>,
   document.getElementById('root')

src/pages/browse.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function Browse() {
+  return <p>Browse...</p>;
+}