Completed initial CAD package guides, tweaked initial code import

app/web/src/components/CadPackage/CadPackage.tsx

@@ -1,43 +1,63 @@
-export type CadPackageType = 'openscad' | 'cadquery' | 'jscad'
+export type CadPackageType = 'openscad' | 'cadquery' | 'jscad' | 'INIT'
 
-export const ideTypeNameMap: { [key in CadPackageType]: string } = {
-  openscad: 'OpenSCAD',
-  cadquery: 'CadQuery',
-  jscad: 'JSCAD',
+interface CadPackageConfig {
+  label: string
+  buttonClasses: string
+  dotClasses: string
 }
 
+export const cadPackageConfigs: { [key in CadPackageType]: CadPackageConfig } =
+  {
+    openscad: {
+      label: 'OpenSCAD',
+      buttonClasses: 'bg-yellow-800',
+      dotClasses: 'bg-yellow-200',
+    },
+    cadquery: {
+      label: 'CadQuery',
+      buttonClasses: 'bg-ch-blue-700',
+      dotClasses: 'bg-blue-800',
+    },
+    jscad: {
+      label: 'JSCAD',
+      buttonClasses: 'bg-ch-purple-500',
+      dotClasses: 'bg-yellow-300',
+    },
+    INIT: {
+      label: '',
+      buttonClasses: '',
+      dotClasses: '',
+    },
+  }
+
 interface CadPackageProps {
   cadPackage: CadPackageType
   className?: string
   dotClass?: string
+  onClick?: any
 }
 
 const CadPackage = ({
   cadPackage,
   className = '',
   dotClass = 'w-5 h-5',
+  onClick,
 }: CadPackageProps) => {
-  const cadName = ideTypeNameMap[cadPackage] || ''
-  const isOpenScad = cadPackage === 'openscad'
-  const isCadQuery = cadPackage === 'cadquery'
-  const isJsCad = cadPackage === 'jscad'
+  const cadPackageConfig = cadPackageConfigs[cadPackage]
+
   return (
-    <div
+    <button
+      onClick={onClick}
       className={
-        `grid grid-flow-col-dense items-center gap-2 text-gray-100 ${
-          isOpenScad && 'bg-yellow-800'
-        } ${isCadQuery && 'bg-ch-blue-700'} ${
-          isJsCad && 'bg-ch-purple-500'
-        } bg-opacity-30 ` + className
+        `grid grid-flow-col-dense items-center gap-2 text-gray-100 bg-opacity-30 hover:bg-opacity-80 ${cadPackageConfig.buttonClasses} ` +
+        className
       }
     >
       <div
-        className={`${isOpenScad && 'bg-yellow-200'} ${
-          isCadQuery && 'bg-blue-800'
-        } ${isJsCad && 'bg-yellow-300'} ${dotClass} rounded-full`}
+        className={`${cadPackageConfig.dotClasses} ${dotClass} rounded-full`}
       />
-      <div>{cadName}</div>
-    </div>
+      {cadPackageConfig.label}
+    </button>
   )
 }