From 348d2e0a01ecafce981d4c35be72bc175c3ae4ac Mon Sep 17 00:00:00 2001
From: Frank Johnson <frankjohnson1993@gmail.com>
Date: Sun, 19 Sep 2021 17:02:21 -0400
Subject: [PATCH] Made CadPackage component support button or div

---
 .../src/components/CadPackage/CadPackage.tsx   | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/app/web/src/components/CadPackage/CadPackage.tsx b/app/web/src/components/CadPackage/CadPackage.tsx
index e8f95ed..73dce8d 100644
--- a/app/web/src/components/CadPackage/CadPackage.tsx
+++ b/app/web/src/components/CadPackage/CadPackage.tsx
@@ -46,19 +46,27 @@ const CadPackage = ({
   const cadPackageConfig = cadPackageConfigs[cadPackage]
 
   return (
-    <button
+    <ButtonOrDiv
       onClick={onClick}
       className={
-        `grid grid-flow-col-dense items-center gap-2 text-gray-100 bg-opacity-30 ${
-          onClick && ' hover:bg-opacity-80 '
-        } ${cadPackageConfig?.buttonClasses} ` + className
+        `grid grid-flow-col-dense items-center gap-2 text-gray-100 bg-opacity-30 
+         ${cadPackageConfig?.buttonClasses} ` + className
       }
     >
       <div
         className={`${cadPackageConfig?.dotClasses} ${dotClass} rounded-full`}
       />
       {cadPackageConfig?.label}
-    </button>
+    </ButtonOrDiv>
+  )
+}
+
+// Returns a proper button if an onClick handler is passed in, or a div
+// if the element is meant to be a simple badge
+function ButtonOrDiv({ onClick, className, children }) {
+  return (onClick
+    ? <button className={className + ' hover:bg-opacity-80'} onClick={ onClick }>{ children }</button>
+    : <div className={className}>{ children }</div>
   )
 }