From d3806f7d5b810a350b31bda73af51fc9f751d506 Mon Sep 17 00:00:00 2001
From: Ben Phelps <ben@phelps.io>
Date: Mon, 12 Sep 2022 11:55:01 +0300
Subject: [PATCH] better handle non-clickable service tiles

---
 src/components/services/item.jsx | 63 ++++++++++++++++++++------------
 1 file changed, 39 insertions(+), 24 deletions(-)

diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index df0caf677..11bc56d2d 100644
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -22,43 +22,58 @@ function resolveIcon(icon) {
 }
 
 export default function Item({ service }) {
+  const handleOnClick = () => {
+    if (service.href && service.href !== "#") {
+      window.open(service.href, "_blank").focus();
+    }
+  };
+
+  const hasLink = service.href && service.href !== "#";
+
   return (
     <li key={service.name}>
       <Disclosure>
         <div
           className={`${
-            service.href && service.href !== "#" ? "cursor-pointer " : "cursor-default "
+            hasLink ? "cursor-pointer " : " "
           }transition-all h-15 mb-3 p-1 rounded-md font-medium text-theme-700 hover:text-theme-700/70 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-black/10 dark:shadow-black/20 bg-white/50 hover:bg-theme-300/20 dark:bg-white/10 dark:hover:bg-white/20 backdrop-blur-md`}
         >
-          <div className="flex">
-            {service.icon && (
+          <div className="flex select-none">
+            {service.icon &&
+              (hasLink ? (
+                <button
+                  type="button"
+                  onClick={handleOnClick}
+                  className="flex-shrink-0 flex items-center justify-center w-12 "
+                >
+                  <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
+                </button>
+              ) : (
+                <div className="flex-shrink-0 flex items-center justify-center w-12 ">
+                  <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
+                </div>
+              ))}
+
+            {hasLink ? (
               <button
                 type="button"
-                onClick={() => {
-                  if (service.href && service.href !== "#") {
-                    window.open(service.href, "_blank").focus();
-                  }
-                }}
-                className="flex-shrink-0 flex items-center justify-center w-12 "
+                onClick={handleOnClick}
+                className="flex-1 flex items-center justify-between rounded-r-md "
               >
-                <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
+                <div className="flex-1 px-2 py-2 text-sm text-left">
+                  {service.name}
+                  <p className="text-theme-500 dark:text-theme-400 text-xs font-extralight">{service.description}</p>
+                </div>
               </button>
+            ) : (
+              <div className="flex-1 flex items-center justify-between rounded-r-md ">
+                <div className="flex-1 px-2 py-2 text-sm text-left">
+                  {service.name}
+                  <p className="text-theme-500 dark:text-theme-400 text-xs font-extralight">{service.description}</p>
+                </div>
+              </div>
             )}
 
-            <button
-              type="button"
-              onClick={() => {
-                if (service.href && service.href !== "#") {
-                  window.open(service.href, "_blank").focus();
-                }
-              }}
-              className="flex-1 flex items-center justify-between rounded-r-md "
-            >
-              <div className="flex-1 px-2 py-2 text-sm text-left">
-                {service.name}
-                <p className="text-theme-500 dark:text-theme-400 text-xs font-extralight">{service.description}</p>
-              </div>
-            </button>
             {service.container && (
               <Disclosure.Button
                 as="div"