Some components accept CSS as props instead of className
Timing logic is hard coded
My suggestions are as follows:
Use React Context to avoid prop drilling (can be implemented for meetup details as well as templates). The code will be cleaner and more maintainable.
Loop in the TEMPLATE_CONFIGS to display each template option.
Rewrite/Remove these components as needed. CSS should be passed as className. Data should be passed as props.
The timing logic has to be dynamic and magic numbers should be avoided. We can name variables/constants properly to ease readability. Each template config can have a timing calculator function that takes the meetup details as argument.
The current code has the following issues:
My suggestions are as follows: