Discuss/Decide how to implement templates for tips screens of varying lenth

[developess]

Analysis:

Every set of tips has a defined "welcome" page. They also all have a second page with a large header and some text below. 'Procrastination', 'Thinking Traps' and 'Time Management' all have a further three screens. 'Sleep' has two further screens. All other sets have one further screen.

Initial suggestion is to use a single component for header page which takes name of the the tips selected and user's name.

For subsequent screens, pass down a prop/state into the tips views which is e.g. named "index". Index determines the background to use of (1 of 4) in screen styles and the component to use (2/3/4/5) from an array of screens for that set of tips.

I think the text in screens 2-5 should be written as functional components since they contain varied text formatting such as italics, bold text numbered lists, bulleted lists and links.

Example of data for screens:

const sleep1 = () => ...
const sleep2 = () => ...
const sleep3 = () => ...
const sleep4= () => ...

export const sleepScreens = [ sleep1, sleep2, sleep3 ... ]
export const procrastinationScreens = [ proc1, proc2, proc3 ... ]
...

OR export as one big object

export default {
 sleep: [ sleep1, sleep2, sleep3 ... ],
 procrastination: [ proc1, proc2, proc3 ... ],
 ...
}