eview and adjust categories with stakeholders", "Prioritize within each category", "Create implementation plan based on priorities" ] } ]; const FrameworkSelection = ({ frameworks, onSelectFramework, selectedFramework }) => { return (

Select a Framework

); }; const FrameworkDetails = ({ framework }) => { return (

{framework.name}

{framework.description}

); }; const ImplementationGuide = ({ framework, currentStep, onNextStep, onPrevStep }) => { const [stepNotes, setStepNotes] = useState(''); const handleNotesChange = (e) => { setStepNotes(e.target.value); }; return (

Implementation Guide

Step {currentStep + 1}: {framework.steps[currentStep]}

</div>
      <div className="button-container flex justify-between">
        <button
          onClick={onPrevStep}
          disabled={currentStep === 0}
          className="px-4 py-2 bg-blue-500 text-white rounded disabled:bg-gray-300"
        >
          Previous Step
        </button>
        <button
          onClick={onNextStep}
          disabled={currentStep === framework.steps.length - 1}
          className="px-4 py-2 bg-blue-500 text-white rounded disabled:bg-gray-300"
        >
          Next Step
        </button>
      </div>
    </div>
  );
};

const App = () => {
  const [selectedFramework, setSelectedFramework] = useState(null);
  const [implementationStage, setImplementationStage] = useState(0);

const handleFrameworkSelect = (framework) => {
    setSelectedFramework(framework);
    setImplementationStage(0);
  };

const handleNextStep = () => {
    if (implementationStage < selectedFramework.steps.length - 1) {
      setImplementationStage(implementationStage + 1);
    }
  };

const handlePrevStep = () => {
    if (implementationStage > 0) {
      setImplementationStage(implementationStage - 1);
    }
  };

return (
    <div className="app max-w-3xl mx-auto p-4">
      <header className="app-header text-center mb-8">
        <h1 className="text-3xl font-bold">Product Framework Assistant</h1>
      </header>
      <main className="app-main space-y-8">
        <FrameworkSelection
          frameworks={frameworks}
          onSelectFramework={handleFrameworkSelect}
          selectedFramework={selectedFramework}
        />
        {selectedFramework && (
          <>
            <FrameworkDetails framework={selectedFramework} />
            <ImplementationGuide
              framework={selectedFramework}
              currentStep={implementationStage}
              onNextStep={handleNextStep}
              onPrevStep={handlePrevStep}
            />
          </>
        )}
      </main>
    </div>
  );
};

export default App;
</content>
</artifact>5:["$L20",["$","div",null,{"className":"container px-8 mt-4","children":["$","nav",null,{"aria-label":"breadcrumb","children":["$","ol",null,{"className":"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5","children":[["$","li",null</article></body></html>

Product Framework Assistant React App