learnreact.com: extract YouTube.Embed component

J8088 · Jan 27, 2020 · 9caf5a1 · 9caf5a1
1 parent 511d263
commit 9caf5a1
Show file tree

Hide file tree

Showing 11 changed files with 33 additions and 80 deletions.
diff --git a/learnreact.com/components/youtube.js b/learnreact.com/components/youtube.js
@@ -0,0 +1,13 @@
+export function Embed({ src = "", ...props }) {
+  return (
+    <iframe
+      width="560"
+      height="315"
+      frameborder="0"
+      allow="autoplay; encrypted-media"
+      allowfullscreen
+      src={src}
+      {...props}
+    ></iframe>
+  );
+}
diff --git a/learnreact.com/pages/lessons/react-function-componentns-use-props.mdx b/learnreact.com/pages/lessons/react-function-componentns-use-props.mdx
@@ -1,4 +1,5 @@
 import { Index } from "../courses/function-components.mdx";
+import * as YouTube from "../../components/youtube";
 
 <Head>
   <title>Learn React | Function Components > Use Props</title>
@@ -8,12 +9,5 @@ import { Index } from "../courses/function-components.mdx";
 
 ## Use Props
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/JiFii5qySI0"
-  frameborder="0"
-  allow="autoplay; encrypted-media"
-  allowfullscreen
-></iframe>
+<YouTube.Embed src="https://www.youtube.com/embed/JiFii5qySI0" />
 <Index />
diff --git a/...act.com/pages/lessons/react-function-components-declare-function-components.mdx b/...act.com/pages/lessons/react-function-components-declare-function-components.mdx
@@ -1,4 +1,5 @@
 import { Index } from "../courses/function-components.mdx";
+import * as YouTube from "../../components/youtube";
 
 <Head>
   <title>Learn React | Function Components > Declare Function Components</title>
@@ -8,12 +9,5 @@ import { Index } from "../courses/function-components.mdx";
 
 ## Declare Function Components
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/3A_KwTXZFkI"
-  frameborder="0"
-  allow="autoplay; encrypted-media"
-  allowfullscreen
-></iframe>
+<YouTube.Embed src="https://www.youtube.com/embed/3A_KwTXZFkI" />
 <Index />
diff --git a/...es/lessons/react-function-components-define-components-with-arrow-functions.mdx b/...es/lessons/react-function-components-define-components-with-arrow-functions.mdx
@@ -1,4 +1,5 @@
 import { Index } from "../courses/function-components.mdx";
+import * as YouTube from "../../components/youtube";
 
 <Head>
   <title>
@@ -10,12 +11,5 @@ import { Index } from "../courses/function-components.mdx";
 
 ## Define Components with Arrow Functions
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/3A_KwTXZFkI"
-  frameborder="0"
-  allow="autoplay; encrypted-media"
-  allowfullscreen
-></iframe>
+<YouTube.Embed src="https://www.youtube.com/embed/3A_KwTXZFkI" />
 <Index />
diff --git a/learnreact.com/pages/lessons/react-function-components-get-started.mdx b/learnreact.com/pages/lessons/react-function-components-get-started.mdx
@@ -1,4 +1,5 @@
 import { Index } from "../courses/function-components.mdx";
+import * as YouTube from "../../components/youtube";
 
 <Head>
   <title>Learn React | Function Components > Get Started</title>
@@ -8,12 +9,5 @@ import { Index } from "../courses/function-components.mdx";
 
 ## Get Started
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/Y-_-KhMx0qU"
-  frameborder="0"
-  allow="autoplay; encrypted-media"
-  allowfullscreen
-></iframe>
+<YouTube.Embed src="https://www.youtube.com/embed/Y-_-KhMx0qU" />
 <Index />
diff --git a/learnreact.com/pages/lessons/react-function-components-use-defaultprops.mdx b/learnreact.com/pages/lessons/react-function-components-use-defaultprops.mdx
@@ -1,4 +1,5 @@
 import { Index } from "../courses/function-components.mdx";
+import * as YouTube from "../../components/youtube";
 
 <Head>
   <title>Learn React | Function Components > Use defaultProps</title>
@@ -8,12 +9,5 @@ import { Index } from "../courses/function-components.mdx";
 
 ## Use defaultProps
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/Uo5C-PX-h1k"
-  frameborder="0"
-  allow="autoplay; encrypted-media"
-  allowfullscreen
-></iframe>
+<YouTube.Embed src="https://www.youtube.com/embed/Uo5C-PX-h1k" />
 <Index />
diff --git a/...ct.com/pages/lessons/react-function-components-use-destructuring-assignment.mdx b/...ct.com/pages/lessons/react-function-components-use-destructuring-assignment.mdx
@@ -1,4 +1,5 @@
 import { Index } from "../courses/function-components.mdx";
+import * as YouTube from "../../components/youtube";
 
 <Head>
   <title>
@@ -10,12 +11,5 @@ import { Index } from "../courses/function-components.mdx";
 
 ## Use Destructuring Assignment
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/b_9FUiXM9_g"
-  frameborder="0"
-  allow="autoplay; encrypted-media"
-  allowfullscreen
-></iframe>
+<YouTube.Embed src="https://www.youtube.com/embed/b_9FUiXM9_g" />
 <Index />
diff --git a/learnreact.com/pages/lessons/react-function-components-use-dynamic-tag-names.mdx b/learnreact.com/pages/lessons/react-function-components-use-dynamic-tag-names.mdx
@@ -1,4 +1,5 @@
 import { Index } from "../courses/function-components.mdx";
+import * as YouTube from "../../components/youtube";
 
 <Head>
   <title>Learn React | Function Components > Use Dynamic Tag Names</title>
@@ -8,12 +9,5 @@ import { Index } from "../courses/function-components.mdx";
 
 ## Use Dynamic Tag Names
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/T7tb2nrQZ9Q"
-  frameborder="0"
-  allow="autoplay; encrypted-media"
-  allowfullscreen
-></iframe>
+<YouTube.Embed src="https://www.youtube.com/embed/T7tb2nrQZ9Q" />
 <Index />
diff --git a/...ct-function-components-use-object-rest-properties-and-jsx-spread-attributes.mdx b/...ct-function-components-use-object-rest-properties-and-jsx-spread-attributes.mdx
@@ -1,4 +1,5 @@
 import { Index } from "../courses/function-components.mdx";
+import * as YouTube from "../../components/youtube";
 
 <Head>
   <title>
@@ -11,12 +12,5 @@ import { Index } from "../courses/function-components.mdx";
 
 ## Use Object Rest Properties and JSX Spread Attributes
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/GcxXpP0lBXo"
-  frameborder="0"
-  allow="autoplay; encrypted-media"
-  allowfullscreen
-></iframe>
+<YouTube.Embed src="https://www.youtube.com/embed/GcxXpP0lBXo" />
 <Index />
diff --git a/learnreact.com/pages/lessons/react-function-components-use-proptypes.mdx b/learnreact.com/pages/lessons/react-function-components-use-proptypes.mdx
@@ -1,4 +1,5 @@
 import { Index } from "../courses/function-components.mdx";
+import * as YouTube from "../../components/youtube";
 
 <Head>
   <title>Learn React | Function Components > Use propTypes</title>
@@ -8,12 +9,5 @@ import { Index } from "../courses/function-components.mdx";
 
 ## Use propTypes
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/oty7VGcXK44"
-  frameborder="0"
-  allow="autoplay; encrypted-media"
-  allowfullscreen
-></iframe>
+<YouTube.Embed src="https://www.youtube.com/embed/oty7VGcXK44" />
 <Index />
diff --git a/learnreact.com/pages/lessons/react-function-components-use-ref-callbacks.mdx b/learnreact.com/pages/lessons/react-function-components-use-ref-callbacks.mdx
@@ -1,4 +1,5 @@
 import { Index } from "../courses/function-components.mdx";
+import * as YouTube from "../../components/youtube";
 
 <Head>
   <title>Learn React | Function Components > Use ref callbacks</title>
@@ -8,12 +9,5 @@ import { Index } from "../courses/function-components.mdx";
 
 ## Use ref callbacks
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/mfv6Bse2Egg"
-  frameborder="0"
-  allow="autoplay; encrypted-media"
-  allowfullscreen
-></iframe>
+<YouTube.Embed src="https://www.youtube.com/embed/mfv6Bse2Egg" />
 <Index />