56 lines
2.1 KiB
JavaScript
56 lines
2.1 KiB
JavaScript
import { Fragment, useContext } from 'react'
|
|
import { Row, Col } from 'reactstrap'
|
|
import { useRTL } from '@hooks/useRTL'
|
|
import RatingBasic from './RatingBasic'
|
|
import RatingSizes from './RatingSizes'
|
|
import RatingEvents from './RatingEvents'
|
|
import RatingNumbers from './RatingNumbers'
|
|
import RatingReadOnly from './RatingReadOnly'
|
|
import RatingCustomSvg from './RatingCustomSvg'
|
|
import RatingFractional from './RatingFractional'
|
|
import RatingControlled from './RatingControlled'
|
|
import ExtensionsHeader from '@components/extensions-header'
|
|
import { ThemeColors } from '@src/utility/context/ThemeColors'
|
|
|
|
const Rating = () => {
|
|
const [isRtl, setIsRtl] = useRTL()
|
|
const themeColors = useContext(ThemeColors)
|
|
return (
|
|
<Fragment>
|
|
<ExtensionsHeader
|
|
title='React Rating'
|
|
subTitle='A rating react component with custom symbols'
|
|
link='https://github.com/dreyescat/react-rating'
|
|
/>
|
|
<Row className='match-height'>
|
|
<Col lg={6} xs={12}>
|
|
<RatingBasic dir={isRtl ? 'rtl' : 'ltr'} filledColor={themeColors.colors.warning.main} />
|
|
</Col>
|
|
<Col lg={6} xs={12}>
|
|
<RatingReadOnly dir={isRtl ? 'rtl' : 'ltr'} filledColor={themeColors.colors.warning.main} />
|
|
</Col>
|
|
<Col lg={6} xs={12}>
|
|
<RatingFractional dir={isRtl ? 'rtl' : 'ltr'} filledColor={themeColors.colors.warning.main} />
|
|
</Col>
|
|
<Col lg={6} xs={12}>
|
|
<RatingCustomSvg dir={isRtl ? 'rtl' : 'ltr'} filledColor={themeColors.colors.warning.main} />
|
|
</Col>
|
|
<Col lg={6} xs={12}>
|
|
<RatingNumbers dir={isRtl ? 'rtl' : 'ltr'} filledColor={themeColors.colors.warning.main} />
|
|
</Col>
|
|
<Col lg={6} xs={12}>
|
|
<RatingEvents dir={isRtl ? 'rtl' : 'ltr'} filledColor={themeColors.colors.warning.main} />
|
|
</Col>
|
|
<Col lg={6} xs={12}>
|
|
<RatingControlled dir={isRtl ? 'rtl' : 'ltr'} filledColor={themeColors.colors.warning.main} />
|
|
</Col>
|
|
<Col lg={6} xs={12}>
|
|
<RatingSizes dir={isRtl ? 'rtl' : 'ltr'} filledColor={themeColors.colors.warning.main} />
|
|
</Col>
|
|
</Row>
|
|
</Fragment>
|
|
)
|
|
}
|
|
|
|
export default Rating
|