quran / common-components Goto Github PK
View Code? Open in Web Editor NEWCommon components to be used across Quran.com, Quranicaudio.com and Salah.com
Home Page: https://quran.github.io/common-components
Common components to be used across Quran.com, Quranicaudio.com and Salah.com
Home Page: https://quran.github.io/common-components
Bootstrap button has a prop for href
which would style an <a>
like a button and apply the href
value.
Quran.com showing video and foot note in popup, next maybe we'll use popup for tafsir as well.
Similar to Quran.com
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
Ideally, we use for all sites!
To copy things
Where can I find the Quran text files
@mmahalwy I started moving the button we use on quranicaudio over. Let me know if you have any specific components you have in mind. What would be cool in the future we we can have an Ayah Component that can render ayah's and call our api to retrieve the data.
I know the lib folder was the compiled code but since we will just import the components directly from other projects, no need, no?
For example
import Button from '@quran/common-components/src/components/Button;
Thoughts?
Hi,
I am running a local build of the quran.com-frontend. While working, I found the following error that
occurs on each body click.
In the Drawer Component, the event handler for clicks on the body tries to call
the contains method on a Styled Component.
I have seen the API reference for Styled Components, and have not come across any contains
method.
I am trying to make the npm
pipe line work, however I am running in to path errors. We will have to keep everything contained. I will see what I can do about scss variables however images and such have to be contained to specific components, so we don't have to worry about paths. Unless you have any ideas.
/Users/sab/workspace/apps/audio.quran.com/node_modules/loader-runner/lib/LoaderRunner.js:109
throw e;
^
Error: Module build failed:
@import '../../styles/variables.scss';
^
File to import not found or unreadable: ../../styles/variables.scss
Parent style sheet: stdin
Our fonts + sizes should be consistent throughout!
Currently quran-components
is on my personal npm account, we need to move this over to something official.
Tab title could be a component or any html tag, see following use case:
<Tab title={
<LocaleFormattedMessage
id="surah.index.heading"
defaultMessage="SURAHS (CHAPTERS)"
/>
}>
</Tab>
I read an interesting article. Since we use font-awesome, we can get the the svg files from https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg and make them into simple React component.
Benefits:
thoughts?
@arshdkhn1 I will assign this for you since you worked on it.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.