put non-essential functionality for lecture in separate file

Author: bradwestfall

subjects/08-Render-Props/lecture.js

@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
+import getHeaderStyle from './utils/getHeaderStyle';
 
 document.body.style.background = `
   linear-gradient(135deg,
@@ -11,24 +12,7 @@ document.body.style.background = `
   )
 `;
 
-const getHeaderStyle = y => {
-  const pin = y >= 100;
-  const top = -y / 2;
-  return {
-    textTransform: "uppercase",
-    textAlign: "center",
-    width: "100%",
-    margin: 0,
-    position: "fixed",
-    top: pin ? "0px" : `${top + 50}px`,
-    textShadow: pin
-      ? `0px ${(y - 100) / 5}px ${Math.min(
-          (y - 100) / 10,
-          20
-        )}px rgba(0, 0, 0, 0.5)`
-      : "none"
-  };
-};
+
 
 class App extends React.Component {
   state = { y: 0 };

subjects/08-Render-Props/utils/getHeaderStyle.js

@@ -0,0 +1,18 @@
+export default function(y) {
+  const pin = y >= 100;
+  const top = -y / 2;
+  return {
+    textTransform: "uppercase",
+    textAlign: "center",
+    width: "100%",
+    margin: 0,
+    position: "fixed",
+    top: pin ? "0px" : `${top + 50}px`,
+    textShadow: pin
+      ? `0px ${(y - 100) / 5}px ${Math.min(
+          (y - 100) / 10,
+          20
+        )}px rgba(0, 0, 0, 0.5)`
+      : "none"
+  };
+};