marshallmurphy

...
        <Button
          width='130px'
          color='#000'
        >
          SUBMIT
        </Button>
      </Flex>

      // map over array & display text

marshallmurphy

const App = () => {
  const [todos, setTodos] = useState([]);

  const addTodo = (e) => {
    e.preventDefault();
    if (e.target[0].value.length > 0) {
      const todo = e.target[0].value;
      const newTodos = [...todos];
      newTodos.unshift(todo);
      setTodos(newTodos);

marshallmurphy

const App = () => {
  const [todos, setTodos] = useState([]);

  const addTodo = (e) => {
    // add todo to the todos array here
  }

  return (
    <Flex
      backgroundColor='#282c34'

marshallmurphy

const App = () => {
  return (
    <Flex
      backgroundColor='#282c34'
      height='100vh'
      alignItems='center'
      pt='2rem'
      flexDirection='column'
    >
      <Heading

marshallmurphy

const App = () => {
  return (
    <Flex
      backgroundColor='#282c34'
      height='100vh'
      alignItems='center'
      pt='2rem'
      flexDirection='column'
    >
      <Heading

marshallmurphy

import React, { useState } from 'react';
import {
  Heading,
  Text,
  Flex,
  Box,
  Button
} from 'rebass';

import {

marshallmurphy

import React from 'react';

const App = () => {
  return (
    <div>
      todos
    </div>
  );
}

marshallmurphy

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

marshallmurphy

global.THREE = require("three");
require("three/examples/js/controls/OrbitControls");

const canvasSketch = require("canvas-sketch");

const settings = {
  animate: true,
  context: "webgl",
  scaleToView: true
};

marshallmurphy

//...
// LIGHTING
const light = new THREE.PointLight("white", 1.25);
light.position.set(0, 0, 0);
scene.add(light);

// illuminate the sun
createSpotlights(scene);		// call the function and pass in our scene

// HELPERS