Repository: novuhq/novu
File: apps/dashboard/src/components/welcome/inbox-framework-guide.tsx (TypeScript)

Code before:
                  Manual
                </TabsTrigger>
              </TabsList>
              <div className="relative mt-2 overflow-hidden pl-0">
                <AnimatePresence mode="wait">
                  {installationMethod === 'cli' && (
                    <motion.div
                      key="cli"
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      exit={{ opacity: 0 }}
                      transition={{ duration: 0.15 }}
                      className="w-full"
                    >
                      <FrameworkCliInstructions framework={selectedFramework as CliFramework} />
                    </motion.div>
                  )}
                  {installationMethod === 'manual' && (
                    <motion.div
                      key="manual"
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      exit={{ opacity: 0 }}
                      transition={{ duration: 0.15 }}
                      className="w-full"
                    >
                      <FrameworkInstructions framework={selectedFramework as ManualFramework} />
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>
            </Tabs>
          </div>
        ) : (
          <div className="relative mt-2 overflow-hidden pl-0">
            <motion.div
              key="manual"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.15 }}
              className="w-full"
            >
              <FrameworkInstructions framework={selectedFramework as ManualFramework} />
            </motion.div>
          </div>
        )}
      </motion.div>
    </>
  );
}


Review comment (refactor):
the only difference is key prop here, so let's not duplicate the code but do it like:
```
<AnimatePresence mode="wait">
                  <motion.div
                      key={installationMethod}
                      {...fadeIn}
                      className="w-full"
                    >
                      <FrameworkCliInstructions framework={selectedFramework} />
                    </motion.div>
                </AnimatePresence>
```

Code after:
              </Tabs>
            </div>
            <div className="relative overflow-hidden pl-0">
              <AnimatePresence mode="wait">
                <motion.div key={installationMethod} {...fadeIn} className="w-full">
                  {installationMethod === 'cli' ? (
                    <FrameworkCliInstructions framework={selectedFramework as Framework} />
                  ) : (
                    <FrameworkInstructions framework={selectedFramework as Framework} />
                  )}
                </motion.div>
              </AnimatePresence>
            </div>
          </div>
        ) : (
          <div className="relative mt-2 overflow-hidden pl-0">
            <motion.div key="manual" {...fadeIn} className="w-full">
              <FrameworkInstructions framework={selectedFramework as Framework} />
            </motion.div>
          </div>
        )}
      </motion.div>
    </>
  );
}