added the t.hanks component to the end of the presentation

examples/slides/src/components/App.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Link from './Link';
+import Thanks from './Thanks';
 import Slideshow, { Slide } from './Slideshow';
 import Code from './Code';
 import { getFunction, getBlockAfter } from '../helpers/functions';
@@ -175,12 +176,7 @@ export default class App extends React.Component {
         ],
       },
       {
-        title: 't.hanks',
-        children: [
-          <Link to="https://github.com/nickav/react">
-            https://github.com/nickav/react
-          </Link>,
-        ],
+        children: [<Thanks />],
       },
     ];
 

examples/slides/src/components/Thanks.css

@@ -0,0 +1,13 @@
+.thanks-container {
+  margin-top: 10px;
+}
+.thanks-row {
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+}
+
+.thanks__img {
+  max-width: 100%;
+  max-height: 100%;
+}

examples/slides/src/components/Thanks.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import Link from './Link';
+import './Thanks.css';
+import meme from '../assets/tomhanksmeme.jpg';
+
+export default class Thanks extends React.Component {
+  static MAX_HANKS = 40;
+
+  constructor() {
+    super();
+    this.state.message = 'T.hanks';
+    this.state.numOfHanks = 1;
+  }
+
+  clickHandler = () => {
+    if (this.state.numOfHanks < Thanks.MAX_HANKS) {
+      this.setState({
+        message: 'T.hanks a lot!',
+        numOfHanks: this.state.numOfHanks * 2,
+      });
+    }
+  };
+
+  render() {
+    const HanksByRow = [];
+    for (let i = 1; i <= this.state.numOfHanks; i++) {
+      const currHanksRow = [];
+      for (let j = 1; j <= this.state.numOfHanks; j *= 2) {
+        currHanksRow.push(
+          tHanksMeme({
+            key: i,
+            onClick: () => {
+              this.clickHandler();
+            },
+          })
+        );
+      }
+      HanksByRow.push(currHanksRow);
+    }
+
+    return (
+      <div class="thanks-component">
+        <h1>{this.state.message}</h1>
+        <Link to="https://github.com/nickav/react">
+          https://github.com/nickav/react
+        </Link>
+        <div class="thanks-container">
+          {HanksByRow.map((row) => (
+            <div class="thanks-row">{row}</div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
+
+const tHanksMeme = (props) => (
+  <div class="thanks__image-wrapper">
+    <img
+      src={meme}
+      alt="t.hanks meme of tom hanks"
+      class="thanks__img"
+      {...props}
+    />
+  </div>
+);

examples/slides/webpack.config.js

@@ -29,6 +29,10 @@ module.exports = {
         test: /\.(css)$/,
         use: ['style-loader', 'css-loader'],
       },
+      {
+        test: /\.(png|jpg)$/,
+        use: ['url-loader'],
+      },
     ],
   },
   resolve: {

package.json

@@ -28,6 +28,7 @@
     "css-loader": "^2.1.1",
     "raw-loader": "^2.0.0",
     "style-loader": "^0.23.1",
+    "url-loader": "^2.0.0",
     "webpack": "^4.32.2",
     "webpack-cli": "^3.3.2",
     "webpack-dev-server": "^3.4.1"