refactor logic for determining icon

complexdatacollective · Sep 24, 2024 · 428a7d9 · 428a7d9
1 parent 5a23fbb
commit 428a7d9
Showing 1 changed file with 12 additions and 6 deletions.
diff --git a/components/interview/ActionButton.tsx b/components/interview/ActionButton.tsx
@@ -3,6 +3,17 @@ import MenuNewSessionIcon from './icons/menu-new-session.svg.react';
 import AddNode from './icons/LucideAddNode';
 import type { NodeIcon } from '~/schemas/protocol/codebook/entities';
 
+const renderIcon = (icon: NodeIcon) => {
+  switch (icon) {
+    case 'add-a-person':
+      return <AddAPersonIcon />;
+    case 'add-a-place':
+      return <div>Place</div>; // TODO: implement add-a-place icon
+    default:
+      return <AddNode iconName={icon} />;
+  }
+};
+
 export default function ActionButton({
   onClick,
   icon,
@@ -13,12 +24,7 @@ export default function ActionButton({
   return (
     <button onClick={onClick} className="relative flex h-40 w-40">
       <div className="absolute inset-0 flex items-center justify-center rounded-full">
-        {icon === 'add-a-person' && <AddAPersonIcon />}
-        {/* TODO: implement add-a-place icon */}
-
-        {icon !== 'add-a-person' && icon !== 'add-a-place' && (
-          <AddNode iconName={icon} />
-        )}
+        {renderIcon(icon)}
       </div>
       <div className="absolute right-0 top-3 flex h-16 w-16 items-center justify-center rounded-full bg-muted p-5">
         <MenuNewSessionIcon />