From 6d8e944b01f6b48b9314ba73bfc46e6da758323f Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Sun, 9 Jan 2022 07:15:15 -0800
Subject: [PATCH] Add buzzwords link

---
 src/components/index/ActionButtons.js | 79 +++++++++++++++------------
 tailwind.config.js                    |  1 +
 2 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/src/components/index/ActionButtons.js b/src/components/index/ActionButtons.js
index f8d0ad4..db365c3 100644
--- a/src/components/index/ActionButtons.js
+++ b/src/components/index/ActionButtons.js
@@ -5,43 +5,54 @@ import { Link } from "gatsby";
 const getButtonClasses = (isClient) =>
   classnames(
     "z-20 rounded-md text-md inline-block px-2 py-1 mt-1 md:py-2 md:px-3 md:my-1 mr-2 text-md hover:underline",
-    isClient 
-      ? 'text-muted-light bg-muted-dark hover:bg-muted blurred-or-opaque-bg-2'
-      : 'text-gray-200'
+    isClient
+      ? "text-muted-light bg-muted-dark hover:bg-muted blurred-or-opaque-bg-2"
+      : "text-gray-200"
   );
 
 const ActionButtons = ({ isClient, image, shuffleImage }) => (
-  <div className="flex mx-6 mb-6">
-    <Link
-      className={getButtonClasses(isClient, "muted")}
-      id="image-link"
-      title="view image details"
-      to={`/photogallery/${image.base}/`}
-    >
-      <span className="icon-offset">
-        <ion-icon name="image"></ion-icon>
-      </span>
-    </Link>
-    <button
-      className={getButtonClasses(isClient, "muted")}
-      id="shuffle-button"
-      onClick={() => {
-        shuffleImage(image);
-      }}
-      title="shuffle image"
-      type="button"
-    >
-      <span className="icon-offset">
-        <ion-icon name="shuffle"></ion-icon>
-      </span>
-    </button>
-    <Link
-      className={getButtonClasses(isClient, "muted")}
-      id="photogallery-link"
-      to="/photogallery/"
-    >
-      Photography Gallery
-    </Link>
+  <div className="flex flex-col">
+    <div className="p-4 m-4 bg-buzzwordsPrimary bg-opacity-50 rounded-xl flex flex-col text-center">
+      <h3>Try the game I&apos;m making!</h3>
+      <a
+        className={getButtonClasses(isClient)}
+        href="https://buzzwords.gg"
+      >
+        Buzzwords
+      </a>
+    </div>
+    <div className="flex mx-6 mb-6">
+      <Link
+        className={getButtonClasses(isClient, "muted")}
+        id="image-link"
+        title="view image details"
+        to={`/photogallery/${image.base}/`}
+      >
+        <span className="icon-offset">
+          <ion-icon name="image"></ion-icon>
+        </span>
+      </Link>
+      <button
+        className={getButtonClasses(isClient, "muted")}
+        id="shuffle-button"
+        onClick={() => {
+          shuffleImage(image);
+        }}
+        title="shuffle image"
+        type="button"
+      >
+        <span className="icon-offset">
+          <ion-icon name="shuffle"></ion-icon>
+        </span>
+      </button>
+      <Link
+        className={getButtonClasses(isClient, "muted")}
+        id="photogallery-link"
+        to="/photogallery/"
+      >
+        Photography Gallery
+      </Link>
+    </div>
   </div>
 );
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 5593160..056b526 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -39,6 +39,7 @@ module.exports = {
         'huge-2': 'max(7.8vw, 120px)'
       },
       colors: {
+        buzzwordsPrimary: '#F6C54B',
         vibrant: {
           DEFAULT: ({ opacityVariable, opacityValue }) => {
             if (opacityValue !== undefined) {