Add FAQ with toggle logic #15
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/julianblohm/hotspotornot/abbx9czi2 |
There was a problem hiding this comment.
Your code looks clean, nothing much I can comment on. Mainly had pointers on using px instead of % in width, height, margin and padding. Seeing there are different sized phone screens it could help you cover several different kind of phone layouts, without any extra work. Especially if you want to implement horizontal view as well later on. :)
Tested the app on my phone (have a quite small phone) and something that I noticed is that when I open your FAQ's on the first page it opens them up downwards (which is not bad) but when I open the 2 last ones I they open up so that I can't see them on the screen and have to scroll down to see the answer. Not sure if there is an easy way to fix this but could be a nice feature to make the app "automatically" make the answer completely visible on the screen. :)
| display: grid; | ||
| grid-gap: 20px; | ||
| background: var(--silver); | ||
| grid-gap: 40px; |
There was a problem hiding this comment.
Have you thought about using % or some other more scalable value here in case you want to make a desktop version of the app as well? In case just focusing on mobile, maybe does not make sense but could also adapt the layout more naturally to different phone screen sizes. :)
There was a problem hiding this comment.
Thanks for your review!
Definitely I will easy adjust responsiveness for other phone sizes and desktop later on.
Just focused on other things first. :)
| @@ -33,28 +33,21 @@ function FAQ() { | |||
| {questions.map((question) => ( | |||
There was a problem hiding this comment.
You could destructure questions but I'm only writing this, because I didnt find anything else :))
| width: 100%; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| padding: 10px 10px; |
There was a problem hiding this comment.
Wouldnt padding: 10px; be sufficient?
Added the FAQ data and integrated the questions with toggle logic to show answer.