Select component with searchable options

quran / common-components

Common components to be used across Quran.com, Quranicaudio.com and Salah.com

https://quran.github.io/common-components

41 stars 19 forks source link

Select component with searchable options #57

Open naveed-ahmad opened 7 years ago

naveed-ahmad commented 7 years ago

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 commented 6 years ago

we should use react-select rather than reinvent the wheel

mmahalwy commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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).