add a simple way to share your best streak

Closes #18

components/button.tsx

@@ -1,16 +1,21 @@
 import React from "react";
+import classNames from "classnames";
 import styles from "../styles/button.module.scss";
 
 interface Props {
+  minimal?: boolean;
   onClick: () => void;
   text: string;
 }
 
 export default function Button(props: Props) {
-  const { onClick, text } = props;
+  const { minimal = false, onClick, text } = props;
 
   return (
-    <button onClick={onClick} className={styles.button}>
+    <button
+      onClick={onClick}
+      className={classNames(styles.button, { [styles.minimal]: minimal })}
+    >
       {text}
     </button>
   );

components/game-over.tsx

@@ -10,6 +10,8 @@ interface Props {
   score: number;
 }
 
+const defaultShareText = "Share";
+
 export default function GameOver(props: Props) {
   const { highscore, resetGame, score } = props;
 
@@ -19,6 +21,18 @@ export default function GameOver(props: Props) {
     config: { duration: 500 },
   });
 
+  const [shareText, setShareText] = React.useState(defaultShareText);
+
+  const share = React.useCallback(() => {
+    navigator?.clipboard.writeText(
+      `🏛️ wikitrivia.tomjwatson.com\n\nStreak: ${score}\nBest Streak: ${highscore}`
+    );
+    setShareText("Copied");
+    setTimeout(() => {
+      setShareText(defaultShareText);
+    }, 2000);
+  }, [highscore, score]);
+
   return (
     <animated.div style={animProps} className={styles.gameOver}>
       <div className={styles.scoresWrapper}>
@@ -29,7 +43,10 @@ export default function GameOver(props: Props) {
           <Score score={highscore} title="Best streak" />
         </div>
       </div>
-      <Button onClick={resetGame} text="Play again!" />
+      <div className={styles.buttons}>
+        <Button onClick={resetGame} text="Play again" />
+        <Button onClick={share} text={shareText} minimal />
+      </div>
     </animated.div>
   );
 }

components/instructions.tsx

@@ -19,7 +19,7 @@ export default function Instructions(props: Props) {
         <div className={styles.highscoreWrapper}>
           <Score score={highscore} title="Best streak" />
         </div>
-        <Button onClick={start} text="Start game!" />
+        <Button onClick={start} text="Start game" />
         <div className={styles.about}>
           <div>
             All data sourced from{" "}

styles/button.module.scss

@@ -10,8 +10,15 @@
   text-transform: uppercase;
   font-weight: 700;
   font-style: italic;
+  white-space: nowrap;
+  width: 140px;
 
   &:hover {
     filter: brightness(1.3);
   }
+
+  &.minimal {
+    background: none;
+    border: 2px solid $primary;
+  }
 }

styles/game-over.module.scss

@@ -20,4 +20,14 @@
       }
     }
   }
+
+  .buttons {
+    display: flex;
+
+    > button {
+      &:not(:last-child) {
+        margin-right: 10px;
+      }
+    }
+  }
 }