Select component with searchable options

[naveed-ahmad]

Scrolling through 114 surah isn't good UX, neither scrolling 286 ayah. How about adding searchable select component. Demo: https://building.coursera.org/ui/?selectedKind=basic.Select&selectedStory=Default%20%28untested%29&full=0&down=0&left=1&panelRight=1&downPanel=tuchk4%2Freadme%2Fpanel

[thabti]

we should use react-select rather than reinvent the wheel

[mmahalwy]

Agreed with @sabeurthabti. @naveed-ahmad where do you imagine this is placed? If on the homepage, that won't make sense because we won't benefit from SEO.

[naveed-ahmad]

@mmahalwy We can and should use this on surah page.

Sura Bakra for example, it's hard to scroll down to find 250th ayah, goes worst if you're on mobile. Also on suran dropdown.

If we could allow users to filter surah by

• typing surah number
• Surah name( Baqarah ) or translation ( Cow )

that would be great! I could have submitted the PR but adding another dependency for filters seems too much to me, we're already trying to reduce build size. But I could be wrong.

[mmahalwy]

Add away! It should be code split! But I do agree that on the surah page, we should implement something like this. But on homepage it might make sense to still have the list as we do AND a quick-to option (i want to go to surah 3 verse 230).