gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update examples

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-10-20 21:44:56 +02:00
parent 0a4941e2e1
commit 1a6c3e13b0
5 changed files with 60 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/DocsCallout.js
View File

@ -5,7 +5,7 @@ import { CCallout, CLink } from '@coreui/react'
import packageJson from '../../package.json'
const DocsCallout = (props) => {
const { href, name } = props
const { content, href, name } = props
const plural = name.slice(-1) === 's' ? true : false
@ -13,9 +13,13 @@ const DocsCallout = (props) => {
return (
<CCallout color="info" className="bg-white">
A React {name} component {plural ? 'have' : 'has'} been created as a native React.js version
of Bootstrap {name}. {name} {plural ? 'are' : 'is'} delivered with some new features,
variants, and unique design that matches CoreUI Design System requirements.
{content
? content
: `A React ${name} component ${
plural ? 'have' : 'has'
} been created as a native React.js version
of Bootstrap ${name}. ${name} ${plural ? 'are' : 'is'} delivered with some new features,
variants, and unique design that matches CoreUI Design System requirements.`}
<br />
<br />
For more information please visit our official{' '}
@ -28,6 +32,7 @@ const DocsCallout = (props) => {
}
DocsCallout.propTypes = {
content: PropTypes.string,
href: PropTypes.string,
name: PropTypes.string,
}

14
src/views/charts/Charts.js
View File

@ -8,19 +8,23 @@ import {
CChartPolarArea,
CChartRadar,
} from '@coreui/react-chartjs'
import { DocsLink } from 'src/components'
import { DocsCallout } from 'src/components'
const Charts = () => {
const random = () => Math.round(Math.random() * 100)
return (
<CRow>
<CCol xs={12}>
<DocsCallout
name="Chart"
href="components/chart"
content="React wrapper component for Chart.js 3.0, the most popular charting library."
/>
</CCol>
<CCol xs={6}>
<CCard className="mb-4">
<CCardHeader>
Bar Chart
<DocsLink href="http://www.chartjs.org" />
</CCardHeader>
<CCardHeader>Bar Chart</CCardHeader>
<CCardBody>
<CChartBar
data={{

24
src/views/icons/brands/Brands.js
View File

@ -2,7 +2,7 @@ import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { brandSet } from '@coreui/icons'
import { DocsLink } from 'src/components'
import { DocsCallout } from 'src/components'
const toKebabCase = (str) => {
return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
@ -19,15 +19,19 @@ export const getIconsView = (iconset) => {
const CoreUIIcons = () => {
return (
<CCard className="mb-4">
<CCardHeader>
Brand Icons
<DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub" />
</CCardHeader>
<CCardBody>
<CRow className="text-center">{getIconsView(brandSet)}</CRow>
</CCardBody>
</CCard>
<>
<DocsCallout
name="CoreUI Brand Icons"
href="components/chart"
content="CoreUI Brand Icons. CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app."
/>
<CCard className="mb-4">
<CCardHeader>Brand Icons</CCardHeader>
<CCardBody>
<CRow className="text-center">{getIconsView(brandSet)}</CRow>
</CCardBody>
</CCard>
</>
)
}

24
src/views/icons/coreui-icons/CoreUIIcons.js
View File

@ -2,19 +2,23 @@ import React from 'react'
import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
import { freeSet } from '@coreui/icons'
import { getIconsView } from '../brands/Brands.js'
import { DocsLink } from 'src/components'
import { DocsCallout } from 'src/components'
const CoreUIIcons = () => {
return (
<CCard className="mb-4">
<CCardHeader>
Free Icons / as CIcon{' '}
<DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub" />
</CCardHeader>
<CCardBody>
<CRow className="text-center">{getIconsView(freeSet)}</CRow>
</CCardBody>
</CCard>
<>
<DocsCallout
name="CoreUI Icons"
href="components/chart"
content="CoreUI Icons. CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app."
/>
<CCard className="mb-4">
<CCardHeader>Free Icons</CCardHeader>
<CCardBody>
<CRow className="text-center">{getIconsView(freeSet)}</CRow>
</CCardBody>
</CCard>
</>
)
}

24
src/views/icons/flags/Flags.js
View File

@ -2,19 +2,23 @@ import React from 'react'
import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
import { getIconsView } from '../brands/Brands.js'
import { flagSet } from '@coreui/icons'
import { DocsLink } from 'src/components'
import { DocsCallout } from 'src/components'
const CoreUIIcons = () => {
return (
<CCard className="mb-4">
<CCardHeader>
Flag Icons
<DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub" />
</CCardHeader>
<CCardBody>
<CRow className="text-center">{getIconsView(flagSet)}</CRow>
</CCardBody>
</CCard>
<>
<DocsCallout
name="CoreUI Flag Icons"
href="components/chart"
content="CoreUI Flag Icons. CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app."
/>
<CCard className="mb-4">
<CCardHeader>Flag Icons</CCardHeader>
<CCardBody>
<CRow className="text-center">{getIconsView(flagSet)}</CRow>
</CCardBody>
</CCard>
</>
)
}