inital port of code base

.babelrc

@@ -0,0 +1,49 @@
+{
+  "env": {
+    "development": {
+      "presets": ["next/babel"],
+      "plugins": [
+        [
+          "styled-components",
+          {
+            "ssr": true,
+            "displayName": true
+          }
+        ]
+      ]
+    },
+    "production": {
+      "presets": ["next/babel"],
+      "plugins": [
+        [
+          "styled-components",
+          {
+            "ssr": true,
+            "displayName": true
+          }
+        ]
+      ]
+    },
+    "test": {
+      "presets": [
+        [
+          "next/babel",
+          {
+            "preset-env": {
+              "modules": "commonjs"
+            }
+          }
+        ]
+      ],
+      "plugins": [
+        [
+          "styled-components",
+          {
+            "ssr": true,
+            "displayName": true
+          }
+        ]
+      ]
+    }
+  }
+}

.eslintignore

@@ -0,0 +1,2 @@
+/.next/**
+/node_modules/**

.eslintrc.json

@@ -0,0 +1,17 @@
+{
+  "extends": ["airbnb", "plugin:prettier/recommended", "prettier/react"],
+  "parser": "babel-eslint",
+  "parserOptions": { "ecmaVersion": 8 },
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "node": true,
+    "es6": true,
+    "jest": true
+  },
+  "rules": {
+    "max-len": "off",
+    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }]
+  },
+  "plugins": ["jest", "react-hooks", "prettier"]
+}

.gitignore

@@ -1,61 +1,20 @@
-# Logs
-logs
+# logs
 *.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+npm-debug.log
+yarn-debug.log
+yarn-error.log
 
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
+# npm
 node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
 .npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
 *.tgz
 
-# Yarn Integrity file
+#yarn
 .yarn-integrity
 
-# dotenv environment variables file
-.env
+# macos
+.DS_Store
 
-# next.js build output
+# projects
+.env
 .next

.node-version

@@ -0,0 +1 @@
+v10.15.0

.nowignore

@@ -0,0 +1,2 @@
+.env
+node_modules/

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 80,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all"
+}

README.md

@@ -0,0 +1 @@
+# THATConference.com

components/ContentSection.js

@@ -0,0 +1,91 @@
+import styled from 'styled-components';
+import { below } from '../utilities/breakpoint';
+
+const Container = styled.div`
+  padding: 5rem;
+  background-color: ${props =>
+    props.color ? props.theme.colors[props.color] : props.theme.colors.white};
+  position: relative;
+  display: block;
+  overflow: hidden;
+  width: 100vw;
+
+  ${below.xsmall`
+    padding: 5rem 1rem;
+  `}
+`;
+
+const DetailContainer = styled.div`
+  margin: auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+
+  ${below.med`
+    flex-direction: column;
+    text-align: center;
+    max-width: 700px;
+    align-items: center;
+
+    img {
+      margin: 1rem 0;
+    }
+  `};
+`;
+
+const ContainerInner = styled.div`
+  margin: auto;
+  max-width: 90rem;
+
+  ${below.xsmall`
+    max-width: 30rem;
+  `}
+`;
+
+const Title = styled.h2`
+  font-size: 4rem;
+  text-align: center;
+  margin-top: 0;
+  line-height: 1.2;
+  font-family: 'Great Vibes', cursive;
+  margin-bottom: ${props => (props.subtitle ? '0' : '3rem')};
+
+  .normal {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    font-size: 2.8rem;
+  }
+
+  .highlight {
+    color: ${({ theme }) => theme.colors.orange};
+  }
+
+  ${below.med`
+    margin-bottom: 1rem;
+  `};
+`;
+
+const Subtitle = styled.h3`
+  font-size: 1.5rem;
+  text-align: center;
+  margin-top: 0;
+  margin-bottom: 0;
+  text-transform: uppercase;
+  font-weight: 400;
+  position: relative;
+  top: -0.8rem;
+`;
+
+const ContentSection = props => {
+  return (
+    <Container color={props.color}>
+      <ContainerInner>
+        <Title subtitle={props.subtitle}>{props.title}</Title>
+        {props.subtitle && <Subtitle>{props.subtitle}</Subtitle>}
+        <DetailContainer>{props.children}</DetailContainer>
+      </ContainerInner>
+    </Container>
+  );
+};
+
+export default ContentSection;

components/FeaturedDishes.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { useQuery } from '@apollo/react-hooks';
+import { gql } from 'apollo-boost';
+import styled from 'styled-components';
+import ContentSection from './ContentSection';
+import { below } from '../utilities/breakpoint';
+
+const FoodImage = styled.img`
+  height: 160px;
+  max-width: 250px;
+  object-fit: cover;
+
+  ${below.med`
+    margin: 0;
+  `};
+`;
+
+const FeaturedDish = styled.div`
+  margin: 0 1.3rem;
+  max-width: 25rem;
+  ${below.med`
+    flex-direction: column;
+  `};
+`;
+
+const Name = styled.p`
+  line-height: 1;
+  margin: 0;
+  font-weight: 600;
+  text-transform: uppercase;
+`;
+
+const Description = styled.p`
+  margin-top: 1.2rem;
+  line-height: 1.8;
+`;
+
+const GET_MENU_FEATURED = gql`
+  query getMenuFeatured {
+    menu(isFeatured: true) {
+      name
+      description
+      imageUrl
+    }
+  }
+`;
+
+const FeaturedDishes = ({ className }) => {
+  const context =
+    process.env.NODE_ENV === 'development'
+      ? { context: { uri: 'http://localhost:3000/api' } }
+      : {};
+
+  const { loading, error, data } = useQuery(GET_MENU_FEATURED, context);
+
+  if (loading) return null;
+  if (error) return null;
+
+  return (
+    <ContentSection title="Featured Dishes" color="light">
+      <div className={className}>
+        {data.menu.map(i => (
+          <FeaturedDish>
+            <FoodImage src={i.imageUrl} />
+            <Name>{i.name}</Name>
+            <Description>{i.description}</Description>
+          </FeaturedDish>
+        ))}
+      </div>
+    </ContentSection>
+  );
+};
+
+export default styled(FeaturedDishes)`
+  display: flex;
+  justify-content: center;
+  text-align: center;
+
+  ${below.med`
+    flex-direction: column;
+  `};
+`;