feat: question approval progress bar on homepage

[jengkhaw95]

🛠️ Fixes Issue

Closes #262

➕ Changes Introduced

1. Added a component QuestionApprovalProgressBarSection and placed it on the homepage.

2. Count of the approved questions is fetched in a useEffect (on mount) using supabase client in the QuestionApprovalProgressBarSection component.

📄 Note To Reviewers

1. Inline style (width) is used on the progress bar element as a dynamic class name like: w-[{currentPercentage}] does not work in tailwindcss JIT mode. Reference
   

2. Implementation of a multi-step progress bar could be introduced in the future, as soon as the steps are defined. (Might require further discussion)

📷 Screenshots

Mobile View

Desktop View

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
defaang	✅ Ready (Inspect)	Visit Preview	Oct 7, 2022 at 4:53PM (UTC)

[ykdojo]

Thank you @jengkhaw95.

This is a good start:

A few issues though:

1. Since we're at 3%, it doesn't look quite good.

What do you think of setting the initial goal to 10 questions?

Then we can describe what will happen when we have 10 approved questions. Maybe something like - "All users with at least one approved question get access to all other questions"?

2. The top portion of the landing page and the progress bar section look too blended together. Is there a good way to separate them?

[ykdojo]

(described my feedback in my earlier comment)

[jengkhaw95]

Yes, it makes sense that we start with 10 approved questions.
Let me work on a sample describing the goal. (Will upload it here when it's ready)

Currently, I don't have any idea about separating the landing page and the progress bar section.
I'm open to suggestions for both.

[ykdojo]

@jengkhaw95 any updates?

[ykdojo]

One idea: what if we pulled the progress bar all the way to the bottom?

That way, we can have a white background there, and show the progress bar in its own distinct section - just an idea though.

[ykdojo]

Like this: #303

[adilwahla]

cool