prop structure for getting nodeType in node form

complexdatacollective · Sep 24, 2024 · 79e3f81 · 79e3f81
1 parent 922eb20
commit 79e3f81
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/components/interview/icons/LucideAddNode.tsx b/components/interview/icons/LucideAddNode.tsx
@@ -5,6 +5,7 @@ import type { LucideProps } from 'lucide-react';
 import dynamicIconImports from 'lucide-react/dynamicIconImports';
 import { Circle } from 'lucide-react';
 
+// do we need a fallback for this?
 const fallback = <Circle size={60} />;
 
 type IconProps = {

diff --git a/components/interview/interfaces/name-generator/NameGenerator.tsx b/components/interview/interfaces/name-generator/NameGenerator.tsx
@@ -10,6 +10,7 @@ import { cn } from '~/lib/utils';
 import { interfaceWrapperClasses } from '../../ui/SimpleShell';
 import { withOnboardingWizard } from '~/components/onboard-wizard/withOnboardingWizard';
 import { type InterviewStage } from '../../ui/InterviewShell';
+import { TNodeType } from '~/schemas/protocol/codebook/entities';
 
 const demoPrompts = [
   {
@@ -75,6 +76,11 @@ const demoNodes = [
   },
 ];
 
+const demoNodeType = {
+  color: 'seq-node-1',
+  icon: 'school',
+} as TNodeType;
+
 function NameGenerator(_props: InterviewStage) {
   return (
     <div className={cn(interfaceWrapperClasses, 'flex grow flex-col gap-4')}>
@@ -85,7 +91,7 @@ function NameGenerator(_props: InterviewStage) {
           <NodeList items={demoNodes} />
         </div>
       </div>
-      <QuickNodeForm />
+      <QuickNodeForm nodeType={demoNodeType} />
     </div>
   );
 }

diff --git a/components/interview/interfaces/name-generator/QuickNodeForm.tsx b/components/interview/interfaces/name-generator/QuickNodeForm.tsx
@@ -5,8 +5,9 @@
 import { useState } from 'react';
 import ActionButton from '~/components/interview/ActionButton';
 import Node from '~/components/Node';
+import type { TNodeType } from '~/schemas/protocol/codebook/entities';
 
-export default function QuickNodeForm() {
+export default function QuickNodeForm({ nodeType }: { nodeType: TNodeType }) {
   const [showForm, setShowForm] = useState(false);
 
   return (
@@ -27,7 +28,10 @@ export default function QuickNodeForm() {
       )}
       {!showForm && (
         <div className="mr-8" id="data-wizard-task-step-3">
-          <ActionButton onClick={() => setShowForm(true)} icon="backpack" />
+          <ActionButton
+            onClick={() => setShowForm(true)}
+            icon={nodeType.icon}
+          />
         </div>
       )}
     </div>