Code refactor

[n-d-r-d-g]

The current code has the following issues:

1. Prop drilling
2. Template select options are hard coded
3. Some components accept CSS as props instead of className
4. Timing logic is hard coded

My suggestions are as follows:

1. 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.
2. Loop in the TEMPLATE_CONFIGS object to display each template option.
3. Rewrite/Remove these components as needed. CSS should be passed as className. Data should be passed as props.
4. 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.

Other improvements: Part1:

• [x] Move DefaultTemplate from src/templates to src/components as IMHO src/templates should contain only template components.
• [x] Rename DefaultTemplate to DynamicTemplate.
• [x] Rename the meetup parameter at src/components/Root.tsx on line 54 to meetupDetails.
• [x] Move Root from src/components to src as src/components should contain reusable components.
• [x] Rename Root to App to match React project conventions.
• [x] Create an interface for TEMPLATE_CONFIGS objects to ensure type safety while adding/modifying TEMPLATE_CONFIGS.

Part2:

• [x] Fix TEMPLATE_CONFIGS type by removing : TemplateConfig & replacing as const with satisfies TemplateConfig in src/constants.ts. This enables the Template type to infer TEMPLATE_CONFIG's key type correctly (instead of string, it's inferred as "blackPanther" | "snowWhite" | "squareRoot" | "youtube").
• [x] Move DynamicTemplate from src/components inside src/App.tsx as it's not being used elsewhere.
• [x] Rename src/components/Cover to src/components/cover.
• [ ] ~Move types.ts to src/types & rename to index.ts.~
• [x] Add src/utils folder.
• [x] Move constants from src to src/utils.
• [x] Add functions.ts to src/utils.
• [x] Install clsx & tailwind-merge, then add cn (function to combine classNames) to src/utils/functions.ts (instructions).
• [x] Add select for choosing audio; Move & rename audio.mp3 to public/soundtracks/A_MEANINGFUL_NAME.mp3.
• [x] Add SOUNDTRACKS to /src/constants.ts(e.g. type SoundTrack = 'audio1.mp3' | 'audio2.mp3').
• [x] Add soundtrack to TemplateProvider.
• [ ] Replace <Title /> & <Subtitle /> with html tags. (IMPORTANT: WE STASHED WIP.)
• [ ] Remove src/components/Title.tsx, src/components/Subtitle.tsx & src/components/SubtitleOutline.tsx.
• [ ] Add slide components in a folder, e.g. move LogoFull & LogoMinimal to src/components/slide/logo. We can then choose from multiple components for each slide.
• [ ] Modify instructions in the README.

[derecklhw]

@n-d-r-d-g sorry for prop drilling XD

[n-d-r-d-g]

@derecklhw I did it too! We needed to make it work. That's our excuse! 😜