Add installation, demo picker

site/src/components/Layout.js

@@ -8,7 +8,10 @@ export default function Layout({ children }) {
   return (
     <div>
       <Header />
-      <div className={styles.install}></div>
+      <div className={styles.install}>
+        <h3>Installation</h3>
+        <code>npm install @joeattardi/emoji-button</code>
+      </div>
       {children}
     </div>
   );

site/src/components/Layout.module.css

@@ -1,8 +1,26 @@
 .install {
   background: var(--brand-color);
   color: #ffffff;
-  padding: 1rem;
+  padding: 0.5rem;
   display: flex;
   flex-direction: row;
   justify-content: center;
+  align-items: center;
 }
+
+.install h3 {
+  font-family: Lobster, cursive;
+  font-size: 1.5rem;
+}
+
+.install > * {
+  margin: 0.5rem;
+}
+
+.install code {
+  background: #000000;
+  color: #ffffff;
+  padding: 0.5rem;
+  border-radius: 5px;
+  font-family: Menlo, 'Courier New' ,Courier, monospace;
+}

site/src/pages/index.js

@@ -1,11 +1,31 @@
-import React from 'react';
+import React, { useRef, useState, useEffect } from 'react';
+
+import { EmojiButton } from '@joeattardi/emoji-button';
 
 import Layout from '../components/Layout';
 
 export default function Home() {
+  const buttonRef = useRef();
+  const [picker, setPicker] = useState(null);
+
+  useEffect(() => {
+    setPicker(
+      new EmojiButton({
+        theme: 'auto',
+        position: 'bottom-end'
+      })
+    );
+  }, []);
+
+  function togglePicker() {
+    picker.togglePicker(buttonRef.current);
+  }
+
   return (
     <Layout>
-      
+      <button ref={buttonRef} onClick={togglePicker}>
+        😎
+      </button>
     </Layout>
   );
 }