<div className="flex grow flex-col items-center">
<TransitionGroup className="panels" component={null}>
{
{
weight: (
<CSSTransition ref={weightRef} timeout={500} classNames="view-panel">
<WeightView nodeRef={weightRef}/>
</CSSTransition>
),
workout: (
<CSSTransition ref={workoutRef} timeout={500} classNames="view-panel">
<WorkoutView nodeRef={workoutRef}/>
</CSSTransition>
),
nutrition: (
<CSSTransition ref={nutritionRef} timeout={500} classNames="view-panel">
<NutritionView nodeRef={nutritionRef} />
</CSSTransition>
),
}[activeView]
}
</TransitionGroup>
</div>
<div className="flex grow flex-col items-center">
<TransitionGroup className="panels" component={null}>
{
{
weight: (
<CSSTransition ref={weightRef} timeout={500} classNames="view-panel">
<WeightView nodeRef={weightRef}/>
</CSSTransition>
),
workout: (
<CSSTransition ref={workoutRef} timeout={500} classNames="view-panel">
<WorkoutView nodeRef={workoutRef}/>
</CSSTransition>
),
nutrition: (
<CSSTransition ref={nutritionRef} timeout={500} classNames="view-panel">
<NutritionView nodeRef={nutritionRef} />
</CSSTransition>
),
}[activeView]
}
</TransitionGroup>
</div>