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

styles: improve syntax using prettier

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-04-09 23:21:48 +02:00
parent f502f58695
commit 2f793d1746
73 changed files with 3741 additions and 2719 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/App.js
View File

@ -1,6 +1,6 @@
import React, { Component } from 'react'; import React, { Component } from 'react'
import { HashRouter, Route, Switch } from 'react-router-dom'; import { HashRouter, Route, Switch } from 'react-router-dom'
import './scss/style.scss'; import './scss/style.scss'
const loading = ( const loading = (
<div className="pt-3 text-center"> <div className="pt-3 text-center">
@ -9,31 +9,35 @@ const loading = (
) )
// Containers // Containers
const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout')); const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
// Pages // Pages
const Login = React.lazy(() => import('./views/pages/login/Login')); const Login = React.lazy(() => import('./views/pages/login/Login'))
const Register = React.lazy(() => import('./views/pages/register/Register')); const Register = React.lazy(() => import('./views/pages/register/Register'))
const Page404 = React.lazy(() => import('./views/pages/page404/Page404')); const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
const Page500 = React.lazy(() => import('./views/pages/page500/Page500')); const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
class App extends Component { class App extends Component {
render() { render() {
return ( return (
<HashRouter> <HashRouter>
<React.Suspense fallback={loading}> <React.Suspense fallback={loading}>
<Switch> <Switch>
<Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} /> <Route exact path="/login" name="Login Page" render={(props) => <Login {...props} />} />
<Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} /> <Route
<Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>} /> exact
<Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>} /> path="/register"
<Route path="/" name="Home" render={props => <DefaultLayout {...props}/>} /> name="Register Page"
</Switch> render={(props) => <Register {...props} />}
</React.Suspense> />
<Route exact path="/404" name="Page 404" render={(props) => <Page404 {...props} />} />
<Route exact path="/500" name="Page 500" render={(props) => <Page500 {...props} />} />
<Route path="/" name="Home" render={(props) => <DefaultLayout {...props} />} />
</Switch>
</React.Suspense>
</HashRouter> </HashRouter>
); )
} }
} }
export default App; export default App

7
src/App.test.js
View File

@ -4,18 +4,17 @@ import App from './App'
import ChartLineSimple from './views/charts/ChartLineSimple' import ChartLineSimple from './views/charts/ChartLineSimple'
import Dashboard from './views/dashboard/Dashboard.js' import Dashboard from './views/dashboard/Dashboard.js'
it('mounts App without crashing', () => { it('mounts App without crashing', () => {
const wrapper = shallow(<App/>) const wrapper = shallow(<App />)
wrapper.unmount() wrapper.unmount()
}) })
it('mounts Dashboard without crashing', () => { it('mounts Dashboard without crashing', () => {
const wrapper = shallow(<Dashboard/>) const wrapper = shallow(<Dashboard />)
wrapper.unmount() wrapper.unmount()
}) })
it('mounts Charts without crashing', () => { it('mounts Charts without crashing', () => {
const wrapper = shallow(<ChartLineSimple/> ) const wrapper = shallow(<ChartLineSimple />)
wrapper.unmount() wrapper.unmount()
}) })

277
src/assets/icons/index.js
View File

@ -26,16 +26,9 @@ import {
cibStripe, cibStripe,
cibPaypal, cibPaypal,
cibGooglePay, cibGooglePay,
cibCcAmex cibCcAmex,
} from '@coreui/icons'
import {
cifUs,
cifBr,
cifIn,
cifFr,
cifEs,
cifPl
} from '@coreui/icons' } from '@coreui/icons'
import { cifUs, cifBr, cifIn, cifFr, cifEs, cifPl } from '@coreui/icons'
import { import {
cilAlignCenter, cilAlignCenter,
cilAlignLeft, cilAlignLeft,
@ -127,135 +120,141 @@ import {
cilUserUnfollow, cilUserUnfollow,
cilX, cilX,
cilXCircle, cilXCircle,
cilWarning cilWarning,
} from '@coreui/icons' } from '@coreui/icons'
export const icons = Object.assign({}, { export const icons = Object.assign(
sygnet, {},
logo, {
logoNegative sygnet,
}, { logo,
cilAlignCenter, logoNegative,
cilAlignLeft, },
cilAlignRight, {
cilApplicationsSettings, cilAlignCenter,
cilArrowRight, cilAlignLeft,
cilArrowTop, cilAlignRight,
cilAsterisk, cilApplicationsSettings,
cilBan, cilArrowRight,
cilBasket, cilArrowTop,
cilBell, cilAsterisk,
cilBold, cilBan,
cilBookmark, cilBasket,
cilCalculator, cilBell,
cilCalendar, cilBold,
cilCloudDownload, cilBookmark,
cilChartPie, cilCalculator,
cilCheck, cilCalendar,
cilChevronBottom, cilCloudDownload,
cilChevronLeft, cilChartPie,
cilChevronRight, cilCheck,
cilChevronTop, cilChevronBottom,
cilCircle, cilChevronLeft,
cilCheckCircle, cilChevronRight,
cilCode, cilChevronTop,
cilCommentSquare, cilCircle,
cilCreditCard, cilCheckCircle,
cilCursor, cilCode,
cilCursorMove, cilCommentSquare,
cilDrop, cilCreditCard,
cilDollar, cilCursor,
cilEnvelopeClosed, cilCursorMove,
cilEnvelopeLetter, cilDrop,
cilEnvelopeOpen, cilDollar,
cilEuro, cilEnvelopeClosed,
cilGlobeAlt, cilEnvelopeLetter,
cilGrid, cilEnvelopeOpen,
cilFile, cilEuro,
cilFullscreen, cilGlobeAlt,
cilFullscreenExit, cilGrid,
cilGraph, cilFile,
cilHome, cilFullscreen,
cilInbox, cilFullscreenExit,
cilIndentDecrease, cilGraph,
cilIndentIncrease, cilHome,
cilInputPower, cilInbox,
cilItalic, cilIndentDecrease,
cilJustifyCenter, cilIndentIncrease,
cilJustifyLeft, cilInputPower,
cilLaptop, cilItalic,
cilLayers, cilJustifyCenter,
cilLightbulb, cilJustifyLeft,
cilList, cilLaptop,
cilListNumbered, cilLayers,
cilListRich, cilLightbulb,
cilLocationPin, cilList,
cilLockLocked, cilListNumbered,
cilMagnifyingGlass, cilListRich,
cilMap, cilLocationPin,
cilMoon, cilLockLocked,
cilNotes, cilMagnifyingGlass,
cilOptions, cilMap,
cilPaperclip, cilMoon,
cilPaperPlane, cilNotes,
cilPencil, cilOptions,
cilPeople, cilPaperclip,
cilPhone, cilPaperPlane,
cilPrint, cilPencil,
cilPuzzle, cilPeople,
cilSave, cilPhone,
cilScrubber, cilPrint,
cilSettings, cilPuzzle,
cilShare, cilSave,
cilShareAll, cilScrubber,
cilShareBoxed, cilSettings,
cilShieldAlt, cilShare,
cilSpeech, cilShareAll,
cilSpeedometer, cilShareBoxed,
cilSpreadsheet, cilShieldAlt,
cilStar, cilSpeech,
cilSun, cilSpeedometer,
cilTags, cilSpreadsheet,
cilTask, cilStar,
cilTrash, cilSun,
cilUnderline, cilTags,
cilUser, cilTask,
cilUserFemale, cilTrash,
cilUserFollow, cilUnderline,
cilUserUnfollow, cilUser,
cilX, cilUserFemale,
cilXCircle, cilUserFollow,
cilWarning cilUserUnfollow,
}, { cilX,
cifUs, cilXCircle,
cifBr, cilWarning,
cifIn, },
cifFr, {
cifEs, cifUs,
cifPl cifBr,
}, { cifIn,
cibSkype, cifFr,
cibFacebook, cifEs,
cibTwitter, cifPl,
cibLinkedin, },
cibFlickr, {
cibTumblr, cibSkype,
cibXing, cibFacebook,
cibGithub, cibTwitter,
cibStackoverflow, cibLinkedin,
cibYoutube, cibFlickr,
cibDribbble, cibTumblr,
cibInstagram, cibXing,
cibPinterest, cibGithub,
cibVk, cibStackoverflow,
cibYahoo, cibYoutube,
cibBehance, cibDribbble,
cibReddit, cibInstagram,
cibVimeo, cibPinterest,
cibCcMastercard, cibVk,
cibCcVisa, cibYahoo,
cibStripe, cibBehance,
cibPaypal, cibReddit,
cibGooglePay, cibVimeo,
cibCcAmex cibCcMastercard,
}) cibCcVisa,
cibStripe,
cibPaypal,
cibGooglePay,
cibCcAmex,
},
)

7
src/assets/icons/logo-negative.js
View File

@ -1,4 +1,6 @@
export const logoNegative = ['608 134', ` export const logoNegative = [
'608 134',
`
<title>coreui react pro logo</title> <title>coreui react pro logo</title>
<g> <g>
<g style="fill:#80d0ff;"> <g style="fill:#80d0ff;">
@ -27,4 +29,5 @@ export const logoNegative = ['608 134', `
</g> </g>
</g> </g>
</g> </g>
`] `,
]

7
src/assets/icons/logo.js
View File

@ -1,4 +1,6 @@
export const logo = ['608 134', ` export const logo = [
'608 134',
`
<title>coreui react pro</title> <title>coreui react pro</title>
<g> <g>
<g style="fill:#00a1ff"> <g style="fill:#00a1ff">
@ -26,4 +28,5 @@ export const logo = ['608 134', `
</g> </g>
</g> </g>
</g> </g>
`] `,
]

7
src/assets/icons/sygnet.js
View File

@ -1,4 +1,6 @@
export const sygnet = ['160 160', ` export const sygnet = [
'160 160',
`
<title>coreui logo</title> <title>coreui logo</title>
<g> <g>
<g style="fill:#fff;"> <g style="fill:#fff;">
@ -6,4 +8,5 @@ export const sygnet = ['160 160', `
<path d="M103.0216,93.0379h-2.866a4,4,0,0,0-1.9246.4935L80.95,103.0167,61,91.4981V68.5206L80.95,57.002l17.2894,9.455a4,4,0,0,0,1.9192.4905h2.8632a2,2,0,0,0,2-2V62.2357a2,2,0,0,0-1.04-1.7547L84.793,49.9854a8.0391,8.0391,0,0,0-7.8428.09L57,61.5929A8.0243,8.0243,0,0,0,53,68.5216v22.976a8,8,0,0,0,4,6.9283l19.95,11.5185a8.0422,8.0422,0,0,0,7.8433.0879l19.19-10.5311a2,2,0,0,0,1.0378-1.7534v-2.71A2,2,0,0,0,103.0216,93.0379Z"/> <path d="M103.0216,93.0379h-2.866a4,4,0,0,0-1.9246.4935L80.95,103.0167,61,91.4981V68.5206L80.95,57.002l17.2894,9.455a4,4,0,0,0,1.9192.4905h2.8632a2,2,0,0,0,2-2V62.2357a2,2,0,0,0-1.04-1.7547L84.793,49.9854a8.0391,8.0391,0,0,0-7.8428.09L57,61.5929A8.0243,8.0243,0,0,0,53,68.5216v22.976a8,8,0,0,0,4,6.9283l19.95,11.5185a8.0422,8.0422,0,0,0,7.8433.0879l19.19-10.5311a2,2,0,0,0,1.0378-1.7534v-2.71A2,2,0,0,0,103.0216,93.0379Z"/>
</g> </g>
</g> </g>
`] `,
]

36
src/components/AppBreadcrumb.js
View File

@ -1,16 +1,16 @@
import React from 'react' import React from 'react'
import { useLocation } from "react-router-dom"; import { useLocation } from 'react-router-dom'
import routes from "../routes"; import routes from '../routes'
import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react-ts'; import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react-ts'
const AppBreadcrumb = () => { const AppBreadcrumb = () => {
const currentLocation = useLocation().pathname const currentLocation = useLocation().pathname
//array1.find(element => element > 10); //array1.find(element => element > 10);
const getRouteName = (pathname, routes) => { const getRouteName = (pathname, routes) => {
const currentRoute = routes.find(route => route.path === pathname) const currentRoute = routes.find((route) => route.path === pathname)
return currentRoute.name return currentRoute.name
} }
@ -19,9 +19,9 @@ const AppBreadcrumb = () => {
location.split('/').reduce((prev, curr, index, array) => { location.split('/').reduce((prev, curr, index, array) => {
const currentPathname = `${prev}/${curr}` const currentPathname = `${prev}/${curr}`
breadcrumbs.push({ breadcrumbs.push({
'pathname': currentPathname, pathname: currentPathname,
'name': getRouteName(currentPathname, routes), name: getRouteName(currentPathname, routes),
'active': index + 1 === array.length ? true : false active: index + 1 === array.length ? true : false,
}) })
return currentPathname return currentPathname
}) })
@ -33,18 +33,16 @@ const AppBreadcrumb = () => {
return ( return (
<CBreadcrumb className="m-0"> <CBreadcrumb className="m-0">
<CBreadcrumbItem href="/">Home</CBreadcrumbItem> <CBreadcrumbItem href="/">Home</CBreadcrumbItem>
{ {breadcrumbs.map((breadcrumb, index) => {
breadcrumbs.map((breadcrumb, index) => { return (
return ( <CBreadcrumbItem
<CBreadcrumbItem {...(breadcrumb.active ? { active: true } : { href: breadcrumb.pathname })}
{...(breadcrumb.active ? { 'active': true } : { 'href': breadcrumb.pathname })} key={index}
key={index} >
> {breadcrumb.name}
{breadcrumb.name} </CBreadcrumbItem>
</CBreadcrumbItem> )
) })}
})
}
</CBreadcrumb> </CBreadcrumb>
) )
} }

8
src/components/AppFooter.js
View File

@ -5,12 +5,16 @@ const AppFooter = () => {
return ( return (
<CFooter> <CFooter>
<div> <div>
<a href="https://coreui.io" target="_blank" rel="noopener noreferrer">CoreUI</a> <a href="https://coreui.io" target="_blank" rel="noopener noreferrer">
CoreUI
</a>
<span className="ms-1">&copy; 2020 creativeLabs.</span> <span className="ms-1">&copy; 2020 creativeLabs.</span>
</div> </div>
<div className="ms-auto"> <div className="ms-auto">
<span className="me-1">Powered by</span> <span className="me-1">Powered by</span>
<a href="https://coreui.io/react" target="_blank" rel="noopener noreferrer">CoreUI for React</a> <a href="https://coreui.io/react" target="_blank" rel="noopener noreferrer">
CoreUI for React
</a>
</div> </div>
</CFooter> </CFooter>
) )

60
src/components/AppHeader.js
View File

@ -1,6 +1,6 @@
import React from "react"; import React from 'react'
import { NavLink } from "react-router-dom"; import { NavLink } from 'react-router-dom'
import { useSelector, useDispatch } from "react-redux"; import { useSelector, useDispatch } from 'react-redux'
import { import {
CContainer, CContainer,
CHeader, CHeader,
@ -10,8 +10,8 @@ import {
CHeaderToggler, CHeaderToggler,
CNavLink, CNavLink,
CNavItem, CNavItem,
} from "@coreui/react-ts"; } from '@coreui/react-ts'
import CIcon from "@coreui/icons-react"; import CIcon from '@coreui/icons-react'
import { import {
AppBreadcrumb, AppBreadcrumb,
@ -19,57 +19,39 @@ import {
AppHeaderDropdownMssg, AppHeaderDropdownMssg,
AppHeaderDropdownNotif, AppHeaderDropdownNotif,
AppHeaderDropdownTasks, AppHeaderDropdownTasks,
} from "../containers/index"; } from '../containers/index'
const AppHeader = () => { const AppHeader = () => {
const dispatch = useDispatch(); const dispatch = useDispatch()
const sidebarShow = useSelector((state) => state.sidebarShow); const sidebarShow = useSelector((state) => state.sidebarShow)
const toggleSidebar = () => { const toggleSidebar = () => {
const val = [true, "responsive"].includes(sidebarShow) const val = [true, 'responsive'].includes(sidebarShow) ? false : 'responsive'
? false dispatch({ type: 'set', sidebarShow: val })
: "responsive"; }
dispatch({ type: "set", sidebarShow: val });
};
const toggleSidebarMobile = () => { const toggleSidebarMobile = () => {
const val = [false, "responsive"].includes(sidebarShow) const val = [false, 'responsive'].includes(sidebarShow) ? true : 'responsive'
? true dispatch({ type: 'set', sidebarShow: val })
: "responsive"; }
dispatch({ type: "set", sidebarShow: val });
};
return ( return (
<CHeader position="sticky" className="mb-4"> <CHeader position="sticky" className="mb-4">
<CContainer fluid> <CContainer fluid>
<CHeaderToggler <CHeaderToggler inHeader className="ms-md-3 d-lg-none" onClick={toggleSidebarMobile} />
inHeader <CHeaderToggler inHeader className="ms-3 d-md-down-none" onClick={toggleSidebar} />
className="ms-md-3 d-lg-none"
onClick={toggleSidebarMobile}
/>
<CHeaderToggler
inHeader
className="ms-3 d-md-down-none"
onClick={toggleSidebar}
/>
<CHeaderBrand className="mx-auto d-lg-none" to="/"> <CHeaderBrand className="mx-auto d-lg-none" to="/">
<CIcon name="logo" height="48" alt="Logo" /> <CIcon name="logo" height="48" alt="Logo" />
</CHeaderBrand> </CHeaderBrand>
<CHeaderNav className="d-md-down-none me-auto"> <CHeaderNav className="d-md-down-none me-auto">
<CNavItem> <CNavItem>
<CNavLink <CNavLink to="/dashboard" component={NavLink} activeClassName="active">
to="/dashboard"
component={NavLink}
activeClassName="active"
>
Dashboard Dashboard
</CNavLink> </CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink to="/users" component={NavLink} activeClassName="active"> <CNavLink>Users</CNavLink>
Users
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink>Settings</CNavLink> <CNavLink>Settings</CNavLink>
@ -85,10 +67,10 @@ const AppHeader = () => {
</CContainer> </CContainer>
<CHeaderDivider /> <CHeaderDivider />
<CContainer fluid> <CContainer fluid>
<AppBreadcrumb/> <AppBreadcrumb />
</CContainer> </CContainer>
</CHeader> </CHeader>
); )
}; }
export default AppHeader export default AppHeader

23
src/components/AppSidebar.js
View File

@ -16,7 +16,7 @@ import navigation from '../containers/_nav'
const AppSidebar = () => { const AppSidebar = () => {
const dispatch = useDispatch() const dispatch = useDispatch()
const unfoldable = useSelector(state => state.sidebarUnfoldable) const unfoldable = useSelector((state) => state.sidebarUnfoldable)
// const visible = useSelector(state => state.sidebarUnfoldable) // const visible = useSelector(state => state.sidebarUnfoldable)
return ( return (
@ -28,23 +28,16 @@ const AppSidebar = () => {
// onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })} // onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })}
> >
<CSidebarBrand className="d-md-down-none" to="/"> <CSidebarBrand className="d-md-down-none" to="/">
<CIcon <CIcon className="sidebar-brand-full" name="logo-negative" height={35} />
className="sidebar-brand-full" <CIcon className="sidebar-brand-narrow" name="sygnet" height={35} />
name="logo-negative"
height={35}
/>
<CIcon
className="sidebar-brand-narrow"
name="sygnet"
height={35}
/>
</CSidebarBrand> </CSidebarBrand>
<CSidebarNav> <CSidebarNav>
<CCreateNavItem <CCreateNavItem items={navigation} />
items={navigation}
/>
</CSidebarNav> </CSidebarNav>
<CSidebarToggler className="c-d-md-down-none" onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}/> <CSidebarToggler
className="c-d-md-down-none"
onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
/>
</CSidebar> </CSidebar>
) )
} }

39
src/components/header/AppHeaderDropdown.js
View File

@ -13,41 +13,44 @@ import CIcon from '@coreui/icons-react'
const AppHeaderDropdown = () => { const AppHeaderDropdown = () => {
return ( return (
<CDropdown <CDropdown variant="nav-item">
variant="nav-item"
>
<CDropdownToggle placement="bottom-end"> <CDropdownToggle placement="bottom-end">
<CAvatar image="avatars/6.jpg" /> <CAvatar image="avatars/6.jpg" />
</CDropdownToggle> </CDropdownToggle>
<CDropdownMenu className="pt-0" placement="bottom-end"> <CDropdownMenu className="pt-0" placement="bottom-end">
<CDropdownHeader className="bg-light fw-semibold py-2"> <CDropdownHeader className="bg-light fw-semibold py-2">Account</CDropdownHeader>
Account
</CDropdownHeader>
<CDropdownItem> <CDropdownItem>
<CIcon name="cil-bell" className="me-2" /> <CIcon name="cil-bell" className="me-2" />
Updates Updates
<CBadge color="info" className="ms-auto">42</CBadge> <CBadge color="info" className="ms-auto">
42
</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<CIcon name="cil-envelope-open" className="me-2" /> <CIcon name="cil-envelope-open" className="me-2" />
Messages Messages
<CBadge color="success" className="ms-auto">42</CBadge> <CBadge color="success" className="ms-auto">
42
</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<CIcon name="cil-task" className="me-2" /> <CIcon name="cil-task" className="me-2" />
Tasks Tasks
<CBadge color="danger" className="ms-auto">42</CBadge> <CBadge color="danger" className="ms-auto">
42
</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<CIcon name="cil-comment-square" className="me-2" /> <CIcon name="cil-comment-square" className="me-2" />
Comments Comments
<CBadge color="warning" className="ms-auto">42</CBadge> <CBadge color="warning" className="ms-auto">
42
</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownHeader className="bg-light fw-semibold py-2"> <CDropdownHeader className="bg-light fw-semibold py-2">Settings</CDropdownHeader>
Settings
</CDropdownHeader>
<CDropdownItem> <CDropdownItem>
<CIcon name="cil-user" className="me-2" />Profile <CIcon name="cil-user" className="me-2" />
Profile
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<CIcon name="cil-settings" className="me-2" /> <CIcon name="cil-settings" className="me-2" />
@ -56,12 +59,16 @@ const AppHeaderDropdown = () => {
<CDropdownItem> <CDropdownItem>
<CIcon name="cil-credit-card" className="me-2" /> <CIcon name="cil-credit-card" className="me-2" />
Payments Payments
<CBadge color="secondary" className="ms-auto">42</CBadge> <CBadge color="secondary" className="ms-auto">
42
</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<CIcon name="cil-file" className="me-2" /> <CIcon name="cil-file" className="me-2" />
Projects Projects
<CBadge color="primary" className="ms-auto">42</CBadge> <CBadge color="primary" className="ms-auto">
42
</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownDivider /> <CDropdownDivider />
<CDropdownItem> <CDropdownItem>

37
src/components/header/AppHeaderDropdownMssg.js
View File

@ -6,26 +6,22 @@ import {
CDropdownItem, CDropdownItem,
CDropdownMenu, CDropdownMenu,
CDropdownToggle, CDropdownToggle,
CImage CImage,
} from '@coreui/react-ts' } from '@coreui/react-ts'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
const AppHeaderDropdownMssg = () => { const AppHeaderDropdownMssg = () => {
const itemsCount = 4 const itemsCount = 4
return ( return (
<CDropdown <CDropdown variant="nav-item" direction="down">
variant="nav-item"
direction="down"
>
<CDropdownToggle className="c-header-nav-link" caret={false}> <CDropdownToggle className="c-header-nav-link" caret={false}>
<CIcon name="cil-envelope-open" /><CBadge shape="rounded-pill" color="info">{itemsCount}</CBadge> <CIcon name="cil-envelope-open" />
<CBadge shape="rounded-pill" color="info">
{itemsCount}
</CBadge>
</CDropdownToggle> </CDropdownToggle>
<CDropdownMenu className="pt-0" placement="bottom-end"> <CDropdownMenu className="pt-0" placement="bottom-end">
<CDropdownItem <CDropdownItem header tag="div" color="light">
header
tag="div"
color="light"
>
<strong>You have {itemsCount} messages</strong> <strong>You have {itemsCount} messages</strong>
</CDropdownItem> </CDropdownItem>
<CDropdownItem href="#"> <CDropdownItem href="#">
@ -41,7 +37,8 @@ const AppHeaderDropdownMssg = () => {
<span className="fa fa-exclamation text-danger"></span> Important message <span className="fa fa-exclamation text-danger"></span> Important message
</div> </div>
<div className="small text-muted text-truncate"> <div className="small text-muted text-truncate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt...
</div> </div>
</div> </div>
</CDropdownItem> </CDropdownItem>
@ -56,7 +53,9 @@ const AppHeaderDropdownMssg = () => {
<small className="text-muted float-end mt-1">5 minutes ago</small> <small className="text-muted float-end mt-1">5 minutes ago</small>
</div> </div>
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div> <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... <div className="small text-muted text-truncate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt...
</div> </div>
</div> </div>
</CDropdownItem> </CDropdownItem>
@ -71,7 +70,9 @@ const AppHeaderDropdownMssg = () => {
<small className="text-muted float-end mt-1">1:52 PM</small> <small className="text-muted float-end mt-1">1:52 PM</small>
</div> </div>
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div> <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... <div className="small text-muted text-truncate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt...
</div> </div>
</div> </div>
</CDropdownItem> </CDropdownItem>
@ -86,11 +87,15 @@ const AppHeaderDropdownMssg = () => {
<small className="text-muted float-end mt-1">4:03 AM</small> <small className="text-muted float-end mt-1">4:03 AM</small>
</div> </div>
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div> <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... <div className="small text-muted text-truncate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt...
</div> </div>
</div> </div>
</CDropdownItem> </CDropdownItem>
<CDropdownItem href="#" className="text-center border-top"><strong>View all messages</strong></CDropdownItem> <CDropdownItem href="#" className="text-center border-top">
<strong>View all messages</strong>
</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
) )

59
src/components/header/AppHeaderDropdownNotif.js
View File

@ -5,58 +5,65 @@ import {
CDropdownItem, CDropdownItem,
CDropdownMenu, CDropdownMenu,
CDropdownToggle, CDropdownToggle,
CProgress CProgress,
} from '@coreui/react-ts' } from '@coreui/react-ts'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
const AppHeaderDropdownNotif = () => { const AppHeaderDropdownNotif = () => {
const itemsCount = 5 const itemsCount = 5
return ( return (
<CDropdown <CDropdown variant="nav-item">
variant="nav-item"
>
<CDropdownToggle className="c-header-nav-link" caret={false}> <CDropdownToggle className="c-header-nav-link" caret={false}>
<CIcon name="cil-bell"/> <CIcon name="cil-bell" />
<CBadge shape="rounded-pill" color="danger">{itemsCount}</CBadge> <CBadge shape="rounded-pill" color="danger">
{itemsCount}
</CBadge>
</CDropdownToggle> </CDropdownToggle>
<CDropdownMenu placement="bottom-end" className="pt-0"> <CDropdownMenu placement="bottom-end" className="pt-0">
<CDropdownItem <CDropdownItem header tag="div" className="text-center" color="light">
header
tag="div"
className="text-center"
color="light"
>
<strong>You have {itemsCount} notifications</strong> <strong>You have {itemsCount} notifications</strong>
</CDropdownItem> </CDropdownItem>
<CDropdownItem><CIcon name="cil-user-follow" className="me-2 text-success" /> New user registered</CDropdownItem> <CDropdownItem>
<CDropdownItem><CIcon name="cil-user-unfollow" className="me-2 text-danger" /> User deleted</CDropdownItem> <CIcon name="cil-user-follow" className="me-2 text-success" /> New user registered
<CDropdownItem><CIcon name="cil-chart-pie" className="me-2 text-info" /> Sales report is ready</CDropdownItem> </CDropdownItem>
<CDropdownItem><CIcon name="cil-basket" className="me-2 text-primary" /> New client</CDropdownItem> <CDropdownItem>
<CDropdownItem><CIcon name="cil-speedometer" className="me-2 text-warning" /> Server overloaded</CDropdownItem> <CIcon name="cil-user-unfollow" className="me-2 text-danger" /> User deleted
<CDropdownItem </CDropdownItem>
header <CDropdownItem>
tag="div" <CIcon name="cil-chart-pie" className="me-2 text-info" /> Sales report is ready
color="light" </CDropdownItem>
> <CDropdownItem>
<CIcon name="cil-basket" className="me-2 text-primary" /> New client
</CDropdownItem>
<CDropdownItem>
<CIcon name="cil-speedometer" className="me-2 text-warning" /> Server overloaded
</CDropdownItem>
<CDropdownItem header tag="div" color="light">
<strong>Server</strong> <strong>Server</strong>
</CDropdownItem> </CDropdownItem>
<CDropdownItem className="d-block"> <CDropdownItem className="d-block">
<div className="text-uppercase mb-1"> <div className="text-uppercase mb-1">
<small><b>CPU Usage</b></small> <small>
<b>CPU Usage</b>
</small>
</div> </div>
<CProgress size="xs" color="info" value={25} /> <CProgress size="xs" color="info" value={25} />
<small className="text-muted">348 Processes. 1/4 Cores.</small> <small className="text-muted">348 Processes. 1/4 Cores.</small>
</CDropdownItem> </CDropdownItem>
<CDropdownItem className="d-block"> <CDropdownItem className="d-block">
<div className="text-uppercase mb-1"> <div className="text-uppercase mb-1">
<small><b>Memory Usage</b></small> <small>
<b>Memory Usage</b>
</small>
</div> </div>
<CProgress size="xs" color="warning" value={70} /> <CProgress size="xs" color="warning" value={70} />
<small className="text-muted">11444GB/16384MB</small> <small className="text-muted">11444GB/16384MB</small>
</CDropdownItem> </CDropdownItem>
<CDropdownItem className="d-block"> <CDropdownItem className="d-block">
<div className="text-uppercase mb-1"> <div className="text-uppercase mb-1">
<small><b>SSD 1 Usage</b></small> <small>
<b>SSD 1 Usage</b>
</small>
</div> </div>
<CProgress size="xs" color="danger" value={90} /> <CProgress size="xs" color="danger" value={90} />
<small className="text-muted">243GB/256GB</small> <small className="text-muted">243GB/256GB</small>

57
src/components/header/AppHeaderDropdownTasks.js
View File

@ -5,51 +5,72 @@ import {
CDropdownItem, CDropdownItem,
CDropdownMenu, CDropdownMenu,
CDropdownToggle, CDropdownToggle,
CProgress CProgress,
} from '@coreui/react-ts' } from '@coreui/react-ts'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
const AppHeaderDropdownTasks = () => { const AppHeaderDropdownTasks = () => {
const itemsCount = 5 const itemsCount = 5
return ( return (
<CDropdown <CDropdown variant="nav-item">
variant="nav-item"
>
<CDropdownToggle> <CDropdownToggle>
<CIcon name="cil-list" /> <CIcon name="cil-list" />
<CBadge shape="rounded-pill" color="warning">{itemsCount}</CBadge> <CBadge shape="rounded-pill" color="warning">
{itemsCount}
</CBadge>
</CDropdownToggle> </CDropdownToggle>
<CDropdownMenu placement="bottom-end" className="pt-0"> <CDropdownMenu placement="bottom-end" className="pt-0">
<CDropdownItem <CDropdownItem header tag="div" className="text-center" color="light">
header
tag="div"
className="text-center"
color="light"
>
<strong>You have {itemsCount} pending tasks</strong> <strong>You have {itemsCount} pending tasks</strong>
</CDropdownItem> </CDropdownItem>
<CDropdownItem className="d-block"> <CDropdownItem className="d-block">
<div className="small mb-1">Upgrade NPM &amp; Bower <span <div className="small mb-1">
className="float-end"><strong>0%</strong></span></div> Upgrade NPM &amp; Bower{' '}
<span className="float-end">
<strong>0%</strong>
</span>
</div>
<CProgress size="xs" color="info" value={0} /> <CProgress size="xs" color="info" value={0} />
</CDropdownItem> </CDropdownItem>
<CDropdownItem className="d-block"> <CDropdownItem className="d-block">
<div className="small mb-1">ReactJS Version <span className="float-end"><strong>25%</strong></span></div> <div className="small mb-1">
ReactJS Version{' '}
<span className="float-end">
<strong>25%</strong>
</span>
</div>
<CProgress size="xs" color="danger" value={25} /> <CProgress size="xs" color="danger" value={25} />
</CDropdownItem> </CDropdownItem>
<CDropdownItem className="d-block"> <CDropdownItem className="d-block">
<div className="small mb-1">VueJS Version <span className="float-end"><strong>50%</strong></span></div> <div className="small mb-1">
VueJS Version{' '}
<span className="float-end">
<strong>50%</strong>
</span>
</div>
<CProgress size="xs" color="warning" value={50} /> <CProgress size="xs" color="warning" value={50} />
</CDropdownItem> </CDropdownItem>
<CDropdownItem className="d-block"> <CDropdownItem className="d-block">
<div className="small mb-1">Add new layouts <span className="float-end"><strong>75%</strong></span></div> <div className="small mb-1">
Add new layouts{' '}
<span className="float-end">
<strong>75%</strong>
</span>
</div>
<CProgress size="xs" color="info" value={75} /> <CProgress size="xs" color="info" value={75} />
</CDropdownItem> </CDropdownItem>
<CDropdownItem className="d-block"> <CDropdownItem className="d-block">
<div className="small mb-1">Angular 2 Cli Version <span className="float-end"><strong>100%</strong></span></div> <div className="small mb-1">
Angular 2 Cli Version{' '}
<span className="float-end">
<strong>100%</strong>
</span>
</div>
<CProgress size="xs" color="success" value={100} /> <CProgress size="xs" color="success" value={100} />
</CDropdownItem> </CDropdownItem>
<CDropdownItem className="text-center border-top"><strong>View all tasks</strong></CDropdownItem> <CDropdownItem className="text-center border-top">
<strong>View all tasks</strong>
</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
) )

31
src/containers/TheContent.js
View File

@ -1,9 +1,5 @@
import React, { Suspense } from 'react' import React, { Suspense } from 'react'
import { import { Redirect, Route, Switch } from 'react-router-dom'
Redirect,
Route,
Switch
} from 'react-router-dom'
import { CContainer, CFade } from '@coreui/react-ts' import { CContainer, CFade } from '@coreui/react-ts'
// routes config // routes config
@ -22,17 +18,20 @@ const TheContent = () => {
<Suspense fallback={loading}> <Suspense fallback={loading}>
<Switch> <Switch>
{routes.map((route, idx) => { {routes.map((route, idx) => {
return route.component && ( return (
<Route route.component && (
key={idx} <Route
path={route.path} key={idx}
exact={route.exact} path={route.path}
name={route.name} exact={route.exact}
render={props => ( name={route.name}
<CFade> render={(props) => (
<route.component {...props} /> <CFade>
</CFade> <route.component {...props} />
)} /> </CFade>
)}
/>
)
) )
})} })}
<Redirect from="/" to="/dashboard" /> <Redirect from="/" to="/dashboard" />

38
src/containers/_nav.js
View File

@ -1,47 +1,47 @@
import React from 'react' import React from 'react'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
import { NavLink } from "react-router-dom" import { NavLink } from 'react-router-dom'
const _nav = [ const _nav = [
{ {
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
anchor: 'Dashboard', anchor: 'Dashboard',
to: '/dashboard', to: '/dashboard',
icon: <CIcon name="cil-speedometer" customClasses="nav-icon"/>, icon: <CIcon name="cil-speedometer" customClasses="nav-icon" />,
badge: { badge: {
color: 'info', color: 'info',
text: 'NEW', text: 'NEW',
} },
}, },
{ {
_component: 'CNavTitle', _component: 'CNavTitle',
anchor: 'Theme' anchor: 'Theme',
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
anchor: 'Colors', anchor: 'Colors',
to: '/theme/colors', to: '/theme/colors',
icon: <CIcon name="cil-drop" customClasses="nav-icon"/>, icon: <CIcon name="cil-drop" customClasses="nav-icon" />,
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
anchor: 'Typography', anchor: 'Typography',
to: '/theme/typography', to: '/theme/typography',
icon: <CIcon name="cil-pencil" customClasses="nav-icon"/>, icon: <CIcon name="cil-pencil" customClasses="nav-icon" />,
}, },
{ {
_component: 'CNavTitle', _component: 'CNavTitle',
anchor: 'Components' anchor: 'Components',
}, },
{ {
_component: 'CNavGroup', _component: 'CNavGroup',
as: NavLink, as: NavLink,
anchor: 'Base', anchor: 'Base',
to: '/to', to: '/to',
icon: <CIcon name="cil-puzzle" customClasses="nav-icon"/>, icon: <CIcon name="cil-puzzle" customClasses="nav-icon" />,
items: [ items: [
{ {
_component: 'CNavItem', _component: 'CNavItem',
@ -139,7 +139,7 @@ const _nav = [
_component: 'CNavGroup', _component: 'CNavGroup',
anchor: 'Buttons', anchor: 'Buttons',
// route: '/buttons', // route: '/buttons',
icon: <CIcon name="cil-cursor" customClasses="nav-icon"/>, icon: <CIcon name="cil-cursor" customClasses="nav-icon" />,
items: [ items: [
{ {
_component: 'CNavItem', _component: 'CNavItem',
@ -164,7 +164,7 @@ const _nav = [
as: NavLink, as: NavLink,
anchor: 'Dropdowns', anchor: 'Dropdowns',
to: '/buttons/button-dropdowns', to: '/buttons/button-dropdowns',
} },
], ],
}, },
{ {
@ -172,13 +172,13 @@ const _nav = [
as: NavLink, as: NavLink,
anchor: 'Charts', anchor: 'Charts',
to: '/charts', to: '/charts',
icon: <CIcon name="cil-chart-pie" customClasses="nav-icon"/> icon: <CIcon name="cil-chart-pie" customClasses="nav-icon" />,
}, },
{ {
_component: 'CNavGroup', _component: 'CNavGroup',
anchor: 'Icons', anchor: 'Icons',
// route: '/icons', // route: '/icons',
icon: <CIcon name="cil-star" customClasses="nav-icon"/>, icon: <CIcon name="cil-star" customClasses="nav-icon" />,
items: [ items: [
{ {
_component: 'CNavItem', _component: 'CNavItem',
@ -208,7 +208,7 @@ const _nav = [
_component: 'CNavGroup', _component: 'CNavGroup',
anchor: 'Notifications', anchor: 'Notifications',
// route: '/notifications', // route: '/notifications',
icon: <CIcon name="cil-bell" customClasses="nav-icon"/>, icon: <CIcon name="cil-bell" customClasses="nav-icon" />,
items: [ items: [
{ {
_component: 'CNavItem', _component: 'CNavItem',
@ -232,16 +232,16 @@ const _nav = [
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
anchor: 'Toaster', anchor: 'Toaster',
to: '/notifications/toaster' to: '/notifications/toaster',
} },
] ],
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
anchor: 'Widgets', anchor: 'Widgets',
to: '/widgets', to: '/widgets',
icon: <CIcon name="cil-calculator" customClasses="nav-icon"/>, icon: <CIcon name="cil-calculator" customClasses="nav-icon" />,
badge: { badge: {
color: 'info', color: 'info',
text: 'NEW', text: 'NEW',
@ -257,7 +257,7 @@ const _nav = [
{ {
_component: 'CNavGroup', _component: 'CNavGroup',
anchor: 'Pages', anchor: 'Pages',
icon: <CIcon name="cil-star" customClasses="nav-icon"/>, icon: <CIcon name="cil-star" customClasses="nav-icon" />,
items: [ items: [
{ {
_component: 'CNavItem', _component: 'CNavItem',

2
src/containers/index.js
View File

@ -19,5 +19,5 @@ export {
AppHeaderDropdownNotif, AppHeaderDropdownNotif,
AppHeaderDropdownTasks, AppHeaderDropdownTasks,
DefaultLayout, DefaultLayout,
AppSidebar AppSidebar,
} }

22
src/index.js
View File

@ -1,11 +1,11 @@
import 'react-app-polyfill/ie11'; // For IE 11 support import 'react-app-polyfill/ie11' // For IE 11 support
import 'react-app-polyfill/stable'; import 'react-app-polyfill/stable'
import 'core-js'; import 'core-js'
import './polyfill' import './polyfill'
import React from 'react'; import React from 'react'
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom'
import App from './App'; import App from './App'
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker'
import { icons } from './assets/icons' import { icons } from './assets/icons'
@ -16,12 +16,12 @@ React.icons = icons
ReactDOM.render( ReactDOM.render(
<Provider store={store}> <Provider store={store}>
<App/> <App />
</Provider>, </Provider>,
document.getElementById('root') document.getElementById('root'),
); )
// If you want your app to work offline and load faster, you can change // If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls. // unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA // Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister(); serviceWorker.unregister()

16
src/layout/DefaultLayout.js
View File

@ -1,22 +1,16 @@
import React from 'react' import React from 'react'
import { import { TheContent, AppSidebar, AppFooter, AppHeader } from '../containers/index'
TheContent,
AppSidebar,
AppFooter,
AppHeader
} from '../containers/index'
const DefaultLayout = () => { const DefaultLayout = () => {
return ( return (
<div> <div>
<AppSidebar/> <AppSidebar />
<div className="wrapper d-flex flex-column min-vh-100 bg-light"> <div className="wrapper d-flex flex-column min-vh-100 bg-light">
<AppHeader/> <AppHeader />
<div className="body"> <div className="body">
<TheContent/> <TheContent />
</div> </div>
<AppFooter/> <AppFooter />
</div> </div>
</div> </div>
) )

32
src/polyfill.js
View File

@ -1,6 +1,6 @@
/* /*
* required polyfills * required polyfills
*/ */
/** IE9, IE10 and IE11 requires all of the following polyfills. **/ /** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import "core-js"; // import "core-js";
@ -28,14 +28,13 @@
// import 'core-js/features/reflect' // import 'core-js/features/reflect'
// CustomEvent() constructor functionality in IE9, IE10, IE11 // CustomEvent() constructor functionality in IE9, IE10, IE11
(function () { ;(function () {
if (typeof window.CustomEvent === 'function') return false
if ( typeof window.CustomEvent === "function" ) return false function CustomEvent(event, params) {
function CustomEvent ( event, params ) {
params = params || { bubbles: false, cancelable: false, detail: undefined } params = params || { bubbles: false, cancelable: false, detail: undefined }
var evt = document.createEvent( 'CustomEvent' ) var evt = document.createEvent('CustomEvent')
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail ) evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail)
return evt return evt
} }
@ -46,18 +45,17 @@
if (!Element.prototype.matches) { if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.matches =
Element.prototype.msMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector
Element.prototype.webkitMatchesSelector;
} }
if (!Element.prototype.closest) { if (!Element.prototype.closest) {
Element.prototype.closest = function(s) { Element.prototype.closest = function (s) {
var el = this; var el = this
do { do {
if (Element.prototype.matches.call(el, s)) return el; if (Element.prototype.matches.call(el, s)) return el
el = el.parentElement || el.parentNode; el = el.parentElement || el.parentNode
} while (el !== null && el.nodeType === 1); } while (el !== null && el.nodeType === 1)
return null; return null
}; }
} }

10
src/reusable/DocsLink.js
View File

@ -1,12 +1,8 @@
import React from 'react' import React from 'react'
import { CLink } from '@coreui/react-ts' import { CLink } from '@coreui/react-ts'
const DocsLink = props => { const DocsLink = (props) => {
const { const { name, text, ...rest } = props
name,
text,
...rest
} = props
const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href
@ -19,7 +15,7 @@ const DocsLink = props => {
target="_blank" target="_blank"
className="card-header-action" className="card-header-action"
> >
<small className="text-muted">{ text || 'docs' }</small> <small className="text-muted">{text || 'docs'}</small>
</CLink> </CLink>
</div> </div>
) )

4
src/reusable/index.js
View File

@ -1,5 +1,3 @@
import DocsLink from './DocsLink' import DocsLink from './DocsLink'
export { export { DocsLink }
DocsLink
}

76
src/routes.js
View File

@ -1,44 +1,42 @@
import React from 'react'; import React from 'react'
const Toaster = React.lazy(() => import('./views/notifications/toaster/Toaster')); const Toaster = React.lazy(() => import('./views/notifications/toaster/Toaster'))
const Tables = React.lazy(() => import('./views/base/tables/Tables')); const Tables = React.lazy(() => import('./views/base/tables/Tables'))
const Breadcrumbs = React.lazy(() => import('./views/base/breadcrumbs/Breadcrumbs')); const Breadcrumbs = React.lazy(() => import('./views/base/breadcrumbs/Breadcrumbs'))
const Cards = React.lazy(() => import('./views/base/cards/Cards')); const Cards = React.lazy(() => import('./views/base/cards/Cards'))
const Carousels = React.lazy(() => import('./views/base/carousels/Carousels')); const Carousels = React.lazy(() => import('./views/base/carousels/Carousels'))
const Collapses = React.lazy(() => import('./views/base/collapses/Collapses')); const Collapses = React.lazy(() => import('./views/base/collapses/Collapses'))
const BasicForms = React.lazy(() => import('./views/base/forms/BasicForms')); const BasicForms = React.lazy(() => import('./views/base/forms/BasicForms'))
const Jumbotrons = React.lazy(() => import('./views/base/jumbotrons/Jumbotrons')); const Jumbotrons = React.lazy(() => import('./views/base/jumbotrons/Jumbotrons'))
const ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups')); const ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups'))
const Navbars = React.lazy(() => import('./views/base/navbars/Navbars')); const Navbars = React.lazy(() => import('./views/base/navbars/Navbars'))
const Navs = React.lazy(() => import('./views/base/navs/Navs')); const Navs = React.lazy(() => import('./views/base/navs/Navs'))
const Paginations = React.lazy(() => import('./views/base/paginations/Pagnations')); const Paginations = React.lazy(() => import('./views/base/paginations/Pagnations'))
const Popovers = React.lazy(() => import('./views/base/popovers/Popovers')); const Popovers = React.lazy(() => import('./views/base/popovers/Popovers'))
const ProgressBar = React.lazy(() => import('./views/base/progress-bar/ProgressBar')); const ProgressBar = React.lazy(() => import('./views/base/progress-bar/ProgressBar'))
const Tabs = React.lazy(() => import('./views/base/tabs/Tabs')); const Tabs = React.lazy(() => import('./views/base/tabs/Tabs'))
const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips')); const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips'))
const BrandButtons = React.lazy(() => import('./views/buttons/brand-buttons/BrandButtons')); const BrandButtons = React.lazy(() => import('./views/buttons/brand-buttons/BrandButtons'))
const ButtonDropdowns = React.lazy(() => import('./views/buttons/button-dropdowns/ButtonDropdowns')); const ButtonDropdowns = React.lazy(() => import('./views/buttons/button-dropdowns/ButtonDropdowns'))
const ButtonGroups = React.lazy(() => import('./views/buttons/button-groups/ButtonGroups')); const ButtonGroups = React.lazy(() => import('./views/buttons/button-groups/ButtonGroups'))
const Buttons = React.lazy(() => import('./views/buttons/buttons/Buttons')); const Buttons = React.lazy(() => import('./views/buttons/buttons/Buttons'))
const Charts = React.lazy(() => import('./views/charts/Charts')); const Charts = React.lazy(() => import('./views/charts/Charts'))
const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard')); const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
const CoreUIIcons = React.lazy(() => import('./views/icons/coreui-icons/CoreUIIcons')); const CoreUIIcons = React.lazy(() => import('./views/icons/coreui-icons/CoreUIIcons'))
const Flags = React.lazy(() => import('./views/icons/flags/Flags')); const Flags = React.lazy(() => import('./views/icons/flags/Flags'))
const Brands = React.lazy(() => import('./views/icons/brands/Brands')); const Brands = React.lazy(() => import('./views/icons/brands/Brands'))
const Alerts = React.lazy(() => import('./views/notifications/alerts/Alerts')); const Alerts = React.lazy(() => import('./views/notifications/alerts/Alerts'))
const Badges = React.lazy(() => import('./views/notifications/badges/Badges')); const Badges = React.lazy(() => import('./views/notifications/badges/Badges'))
const Modals = React.lazy(() => import('./views/notifications/modals/Modals')); const Modals = React.lazy(() => import('./views/notifications/modals/Modals'))
const Colors = React.lazy(() => import('./views/theme/colors/Colors')); const Colors = React.lazy(() => import('./views/theme/colors/Colors'))
const Typography = React.lazy(() => import('./views/theme/typography/Typography')); const Typography = React.lazy(() => import('./views/theme/typography/Typography'))
const Widgets = React.lazy(() => import('./views/widgets/Widgets')); const Widgets = React.lazy(() => import('./views/widgets/Widgets'))
const Users = React.lazy(() => import('./views/users/Users'));
const User = React.lazy(() => import('./views/users/User'));
const Login = React.lazy(() => import('./views/pages/login/Login')); const Login = React.lazy(() => import('./views/pages/login/Login'))
const Register = React.lazy(() => import('./views/pages/register/Register')); const Register = React.lazy(() => import('./views/pages/register/Register'))
const routes = [ const routes = [
{ path: '/', exact: true, name: 'Home' }, { path: '/', exact: true, name: 'Home' },
@ -80,8 +78,6 @@ const routes = [
{ path: '/pages/login', name: 'Login', component: Login }, { path: '/pages/login', name: 'Login', component: Login },
{ path: '/pages/register', name: 'Register', component: Register }, { path: '/pages/register', name: 'Register', component: Register },
{ path: '/widgets', name: 'Widgets', component: Widgets }, { path: '/widgets', name: 'Widgets', component: Widgets },
{ path: '/users', exact: true, name: 'Users', component: Users }, ]
{ path: '/users/:id', exact: true, name: 'User Details', component: User }
];
export default routes; export default routes

70
src/serviceWorker.js
View File

@ -13,51 +13,49 @@ const isLocalhost = Boolean(
// [::1] is the IPv6 localhost address. // [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' || window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4. // 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match( window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/),
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ )
)
);
export function register(config) { export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW. // The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location); const publicUrl = new URL(process.env.PUBLIC_URL, window.location)
if (publicUrl.origin !== window.location.origin) { if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin // Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to // from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374 // serve assets; see https://github.com/facebook/create-react-app/issues/2374
return; return
} }
window.addEventListener('load', () => { window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
if (isLocalhost) { if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not. // This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config); checkValidServiceWorker(swUrl, config)
// Add some additional logging to localhost, pointing developers to the // Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation. // service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => { navigator.serviceWorker.ready.then(() => {
console.log( console.log(
'This web app is being served cache-first by a service ' + 'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://goo.gl/SC7cgQ' 'worker. To learn more, visit https://goo.gl/SC7cgQ',
); )
}); })
} else { } else {
// Is not local host. Just register service worker // Is not local host. Just register service worker
registerValidSW(swUrl, config); registerValidSW(swUrl, config)
} }
}); })
} }
} }
function registerValidSW(swUrl, config) { function registerValidSW(swUrl, config) {
navigator.serviceWorker navigator.serviceWorker
.register(swUrl) .register(swUrl)
.then(registration => { .then((registration) => {
registration.onupdatefound = () => { registration.onupdatefound = () => {
const installingWorker = registration.installing; const installingWorker = registration.installing
installingWorker.onstatechange = () => { installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') { if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) { if (navigator.serviceWorker.controller) {
@ -65,63 +63,61 @@ function registerValidSW(swUrl, config) {
// the fresh content will have been added to the cache. // the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is // It's the perfect time to display a "New content is
// available; please refresh." message in your web app. // available; please refresh." message in your web app.
console.log('New content is available; please refresh.'); console.log('New content is available; please refresh.')
// Execute callback // Execute callback
if (config.onUpdate) { if (config.onUpdate) {
config.onUpdate(registration); config.onUpdate(registration)
} }
} else { } else {
// At this point, everything has been precached. // At this point, everything has been precached.
// It's the perfect time to display a // It's the perfect time to display a
// "Content is cached for offline use." message. // "Content is cached for offline use." message.
console.log('Content is cached for offline use.'); console.log('Content is cached for offline use.')
// Execute callback // Execute callback
if (config.onSuccess) { if (config.onSuccess) {
config.onSuccess(registration); config.onSuccess(registration)
} }
} }
} }
}; }
}; }
})
.catch((error) => {
console.error('Error during service worker registration:', error)
}) })
.catch(error => {
console.error('Error during service worker registration:', error);
});
} }
function checkValidServiceWorker(swUrl, config) { function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page. // Check if the service worker can be found. If it can't reload the page.
fetch(swUrl) fetch(swUrl)
.then(response => { .then((response) => {
// Ensure service worker exists, and that we really are getting a JS file. // Ensure service worker exists, and that we really are getting a JS file.
if ( if (
response.status === 404 || response.status === 404 ||
response.headers.get('content-type').indexOf('javascript') === -1 response.headers.get('content-type').indexOf('javascript') === -1
) { ) {
// No service worker found. Probably a different app. Reload the page. // No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => { navigator.serviceWorker.ready.then((registration) => {
registration.unregister().then(() => { registration.unregister().then(() => {
window.location.reload(); window.location.reload()
}); })
}); })
} else { } else {
// Service worker found. Proceed as normal. // Service worker found. Proceed as normal.
registerValidSW(swUrl, config); registerValidSW(swUrl, config)
} }
}) })
.catch(() => { .catch(() => {
console.log( console.log('No internet connection found. App is running in offline mode.')
'No internet connection found. App is running in offline mode.' })
);
});
} }
export function unregister() { export function unregister() {
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => { navigator.serviceWorker.ready.then((registration) => {
registration.unregister(); registration.unregister()
}); })
} }
} }

8
src/setupTests.js
View File

@ -1,7 +1,7 @@
import {configure} from 'enzyme'; import { configure } from 'enzyme'
import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
configure({adapter: new Adapter()}); configure({ adapter: new Adapter() })
if (global.document) { if (global.document) {
document.createRange = () => ({ document.createRange = () => ({
@ -11,5 +11,5 @@ if (global.document) {
nodeName: 'BODY', nodeName: 'BODY',
ownerDocument: document, ownerDocument: document,
}, },
}); })
} }

6
src/store.js
View File

@ -1,17 +1,17 @@
import { createStore } from 'redux' import { createStore } from 'redux'
const initialState = { const initialState = {
sidebarShow: 'responsive' sidebarShow: 'responsive',
} }
const changeState = (state = initialState, { type, ...rest }) => { const changeState = (state = initialState, { type, ...rest }) => {
switch (type) { switch (type) {
case 'set': case 'set':
return {...state, ...rest } return { ...state, ...rest }
default: default:
return state return state
} }
} }
const store = createStore(changeState) const store = createStore(changeState)
export default store export default store

12
src/views/base/breadcrumbs/Breadcrumbs.js
View File

@ -1,4 +1,4 @@
import React from "react"; import React from 'react'
import { import {
CBreadcrumb, CBreadcrumb,
CBreadcrumbItem, CBreadcrumbItem,
@ -8,8 +8,8 @@ import {
CCol, CCol,
CRow, CRow,
CLink, CLink,
} from "@coreui/react-ts"; } from '@coreui/react-ts'
import { DocsLink } from "src/reusable"; import { DocsLink } from 'src/reusable'
const Breadcrumbs = () => { const Breadcrumbs = () => {
return ( return (
@ -52,7 +52,7 @@ const Breadcrumbs = () => {
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
); )
}; }
export default Breadcrumbs; export default Breadcrumbs

289
src/views/base/cards/Cards.js
View File

@ -8,11 +8,10 @@ import {
CCol, CCol,
CFormCheck, CFormCheck,
CRow, CRow,
} from '@coreui/react-ts' } from '@coreui/react-ts'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
import { DocsLink } from 'src/reusable' import { DocsLink } from 'src/reusable'
const Cards = () => { const Cards = () => {
const [collapsed, setCollapsed] = React.useState(true) const [collapsed, setCollapsed] = React.useState(true)
const [showCard, setShowCard] = React.useState(true) const [showCard, setShowCard] = React.useState(true)
@ -24,21 +23,23 @@ const Cards = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Card title Card title
<DocsLink name="CCard"/> <DocsLink name="CCard" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard className="mb-4"> <CCard className="mb-4">
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</CCardBody> </CCardBody>
<CCardFooter>Card footer</CCardFooter> <CCardFooter>Card footer</CCardFooter>
</CCard> </CCard>
@ -47,12 +48,13 @@ const Cards = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Card with icon Card with icon
<CIcon name="cil-check" className="float-end"/> <CIcon name="cil-check" className="float-end" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -60,12 +62,13 @@ const Cards = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Card with switch Card with switch
<CFormCheck switch className="float-end" id="formSwitchCheckDefault"/> <CFormCheck switch className="float-end" id="formSwitchCheckDefault" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -73,12 +76,15 @@ const Cards = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Card with label Card with label
<CBadge color="success" className="float-end">Success</CBadge> <CBadge color="success" className="float-end">
Success
</CBadge>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -86,12 +92,15 @@ const Cards = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Card with label Card with label
<CBadge shape="rounded-pill" color="danger" className="float-end">42</CBadge> <CBadge shape="rounded-pill" color="danger" className="float-end">
42
</CBadge>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -99,73 +108,67 @@ const Cards = () => {
<CRow> <CRow>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard className="mb-4 border-primary"> <CCard className="mb-4 border-primary">
<CCardHeader> <CCardHeader>Card outline primary</CCardHeader>
Card outline primary
</CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard className="mb-4 border-secondary"> <CCard className="mb-4 border-secondary">
<CCardHeader> <CCardHeader>Card outline secondary</CCardHeader>
Card outline secondary
</CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard className="mb-4 border-success"> <CCard className="mb-4 border-success">
<CCardHeader> <CCardHeader>Card outline success</CCardHeader>
Card outline success
</CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard className="mb-4 border-info"> <CCard className="mb-4 border-info">
<CCardHeader> <CCardHeader>Card outline info</CCardHeader>
Card outline info
</CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard className="mb-4 border-warning"> <CCard className="mb-4 border-warning">
<CCardHeader> <CCardHeader>Card outline warning</CCardHeader>
Card outline warning
</CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard className="mb-4 border-danger"> <CCard className="mb-4 border-danger">
<CCardHeader> <CCardHeader>Card outline danger</CCardHeader>
Card outline danger
</CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -174,73 +177,67 @@ const Cards = () => {
<CRow> <CRow>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard className="border-top-primary border-top-3 mb-4"> <CCard className="border-top-primary border-top-3 mb-4">
<CCardHeader> <CCardHeader>Card with accent</CCardHeader>
Card with accent
</CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard className="border-top-secondary border-top-3 mb-4"> <CCard className="border-top-secondary border-top-3 mb-4">
<CCardHeader> <CCardHeader>Card with accent</CCardHeader>
Card with accent
</CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard className="border-top-success border-top-3 mb-4"> <CCard className="border-top-success border-top-3 mb-4">
<CCardHeader> <CCardHeader>Card with accent</CCardHeader>
Card with accent
</CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard className="border-top-info border-top-3 mb-4"> <CCard className="border-top-info border-top-3 mb-4">
<CCardHeader> <CCardHeader>Card with accent</CCardHeader>
Card with accent
</CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard className="border-top-warning border-top-3 mb-4"> <CCard className="border-top-warning border-top-3 mb-4">
<CCardHeader> <CCardHeader>Card with accent</CCardHeader>
Card with accent
</CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard className="border-top-danger border-top-3 mb-4"> <CCard className="border-top-danger border-top-3 mb-4">
<CCardHeader> <CCardHeader>Card with accent</CCardHeader>
Card with accent
</CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -250,8 +247,13 @@ const Cards = () => {
<CCard color="primary" className="text-white text-center mb-4"> <CCard color="primary" className="text-white text-center mb-4">
<CCardBody> <CCardBody>
<blockquote className="card-bodyquote"> <blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante.
</p>
<footer>
Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote> </blockquote>
</CCardBody> </CCardBody>
</CCard> </CCard>
@ -260,8 +262,13 @@ const Cards = () => {
<CCard color="success" className="text-white text-center mb-4"> <CCard color="success" className="text-white text-center mb-4">
<CCardBody> <CCardBody>
<blockquote className="card-bodyquote"> <blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante.
</p>
<footer>
Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote> </blockquote>
</CCardBody> </CCardBody>
</CCard> </CCard>
@ -270,8 +277,13 @@ const Cards = () => {
<CCard color="info" className="text-white text-center mb-4"> <CCard color="info" className="text-white text-center mb-4">
<CCardBody> <CCardBody>
<blockquote className="card-bodyquote"> <blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante.
</p>
<footer>
Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote> </blockquote>
</CCardBody> </CCardBody>
</CCard> </CCard>
@ -280,8 +292,13 @@ const Cards = () => {
<CCard color="warning" className="text-white text-center mb-4"> <CCard color="warning" className="text-white text-center mb-4">
<CCardBody> <CCardBody>
<blockquote className="card-bodyquote"> <blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante.
</p>
<footer>
Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote> </blockquote>
</CCardBody> </CCardBody>
</CCard> </CCard>
@ -290,8 +307,13 @@ const Cards = () => {
<CCard color="danger" className="text-white text-center mb-4"> <CCard color="danger" className="text-white text-center mb-4">
<CCardBody> <CCardBody>
<blockquote className="card-bodyquote"> <blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante.
</p>
<footer>
Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote> </blockquote>
</CCardBody> </CCardBody>
</CCard> </CCard>
@ -300,8 +322,13 @@ const Cards = () => {
<CCard color="primary" className="text-white text-center mb-4"> <CCard color="primary" className="text-white text-center mb-4">
<CCardBody> <CCardBody>
<blockquote className="card-bodyquote"> <blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante.
</p>
<footer>
Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote> </blockquote>
</CCardBody> </CCardBody>
</CCard> </CCard>
@ -310,49 +337,45 @@ const Cards = () => {
<CRow> <CRow>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard color="primary" className="text-white mb-4"> <CCard color="primary" className="text-white mb-4">
<CCardHeader> <CCardHeader>Card title</CCardHeader>
Card title
</CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard color="success" className="text-white mb-4"> <CCard color="success" className="text-white mb-4">
<CCardHeader> <CCardHeader>Card title</CCardHeader>
Card title
</CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard color="info" className="text-white mb-4"> <CCard color="info" className="text-white mb-4">
<CCardHeader> <CCardHeader>Card title</CCardHeader>
Card title
</CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard color="warning" className="text-white mb-4"> <CCard color="warning" className="text-white mb-4">
<CCardHeader> <CCardHeader>Card title</CCardHeader>
Card title
</CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

107
src/views/base/carousels/Carousels.js
View File

@ -10,7 +10,7 @@ import {
CCarouselInner, CCarouselInner,
CCarouselItem, CCarouselItem,
CCol, CCol,
CRow CRow,
} from '@coreui/react-ts' } from '@coreui/react-ts'
import { DocsLink } from 'src/reusable' import { DocsLink } from 'src/reusable'
@ -29,107 +29,128 @@ const Carousels = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Carousel with controls Carousel with controls
<DocsLink name="CCarousel"/> <DocsLink name="CCarousel" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CCarousel> <CCarousel>
<CCarouselInner> <CCarouselInner>
<CCarouselItem> <CCarouselItem>
<img className="d-block w-100" src={slides[0]} alt="slide 1"/> <img className="d-block w-100" src={slides[0]} alt="slide 1" />
</CCarouselItem> </CCarouselItem>
<CCarouselItem> <CCarouselItem>
<img className="d-block w-100" src={slides[1]} alt="slide 2"/> <img className="d-block w-100" src={slides[1]} alt="slide 2" />
</CCarouselItem> </CCarouselItem>
<CCarouselItem> <CCarouselItem>
<img className="d-block w-100" src={slides[2]} alt="slide 3"/> <img className="d-block w-100" src={slides[2]} alt="slide 3" />
</CCarouselItem> </CCarouselItem>
</CCarouselInner> </CCarouselInner>
<CCarouselControl direction="prev"/> <CCarouselControl direction="prev" />
<CCarouselControl direction="next"/> <CCarouselControl direction="next" />
</CCarousel> </CCarousel>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" xl="6"> <CCol xs="12" xl="6">
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Carousel with controls, indicators and caption</CCardHeader>
Carousel with controls, indicators and caption
</CCardHeader>
<CCardBody> <CCardBody>
<CCarousel activeIndex={activeIndex}> <CCarousel activeIndex={activeIndex}>
<CCarouselIndicators/> <CCarouselIndicators />
<CCarouselInner> <CCarouselInner>
<CCarouselItem> <CCarouselItem>
<img className="d-block w-100" src={slides[0]} alt="slide 1"/> <img className="d-block w-100" src={slides[0]} alt="slide 1" />
<CCarouselCaption><h3>Slide 1</h3><p>Slide 1</p></CCarouselCaption> <CCarouselCaption>
<h3>Slide 1</h3>
<p>Slide 1</p>
</CCarouselCaption>
</CCarouselItem> </CCarouselItem>
<CCarouselItem> <CCarouselItem>
<img className="d-block w-100" src={slides[1]} alt="slide 2"/> <img className="d-block w-100" src={slides[1]} alt="slide 2" />
<CCarouselCaption><h3>Slide 2</h3><p>Slide 2</p></CCarouselCaption> <CCarouselCaption>
<h3>Slide 2</h3>
<p>Slide 2</p>
</CCarouselCaption>
</CCarouselItem> </CCarouselItem>
<CCarouselItem> <CCarouselItem>
<img className="d-block w-100" src={slides[2]} alt="slide 3"/> <img className="d-block w-100" src={slides[2]} alt="slide 3" />
<CCarouselCaption><h3>Slide 3</h3><p>Slide 3</p></CCarouselCaption> <CCarouselCaption>
<h3>Slide 3</h3>
<p>Slide 3</p>
</CCarouselCaption>
</CCarouselItem> </CCarouselItem>
</CCarouselInner> </CCarouselInner>
<CCarouselControl direction="prev"/> <CCarouselControl direction="prev" />
<CCarouselControl direction="next"/> <CCarouselControl direction="next" />
</CCarousel> </CCarousel>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" xl="6"> <CCol xs="12" xl="6">
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Carousel animation</CCardHeader>
Carousel animation
</CCardHeader>
<CCardBody> <CCardBody>
<CCarousel animate> <CCarousel animate>
<CCarouselIndicators/> <CCarouselIndicators />
<CCarouselInner> <CCarouselInner>
<CCarouselItem> <CCarouselItem>
<img className="d-block w-100" src={slides[0]} alt="slide 1"/> <img className="d-block w-100" src={slides[0]} alt="slide 1" />
<CCarouselCaption><h3>Slide 1</h3><p>Slide 1</p></CCarouselCaption> <CCarouselCaption>
<h3>Slide 1</h3>
<p>Slide 1</p>
</CCarouselCaption>
</CCarouselItem> </CCarouselItem>
<CCarouselItem> <CCarouselItem>
<img className="d-block w-100" src={slides[1]} alt="slide 2"/> <img className="d-block w-100" src={slides[1]} alt="slide 2" />
<CCarouselCaption><h3>Slide 2</h3><p>Slide 2</p></CCarouselCaption> <CCarouselCaption>
<h3>Slide 2</h3>
<p>Slide 2</p>
</CCarouselCaption>
</CCarouselItem> </CCarouselItem>
<CCarouselItem> <CCarouselItem>
<img className="d-block w-100" src={slides[2]} alt="slide 3"/> <img className="d-block w-100" src={slides[2]} alt="slide 3" />
<CCarouselCaption><h3>Slide 3</h3><p>Slide 3</p></CCarouselCaption> <CCarouselCaption>
<h3>Slide 3</h3>
<p>Slide 3</p>
</CCarouselCaption>
</CCarouselItem> </CCarouselItem>
</CCarouselInner> </CCarouselInner>
<CCarouselControl direction="prev"/> <CCarouselControl direction="prev" />
<CCarouselControl direction="next"/> <CCarouselControl direction="next" />
</CCarousel> </CCarousel>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" xl="6"> <CCol xs="12" xl="6">
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Carousel animation with autoSlide</CCardHeader>
Carousel animation with autoSlide
</CCardHeader>
<CCardBody> <CCardBody>
<CCarousel animate autoSlide={3000}> <CCarousel animate autoSlide={3000}>
<CCarouselIndicators/> <CCarouselIndicators />
<CCarouselInner> <CCarouselInner>
<CCarouselItem> <CCarouselItem>
<img className="d-block w-100" src={slides[0]} alt="slide 1"/> <img className="d-block w-100" src={slides[0]} alt="slide 1" />
<CCarouselCaption><h3>Slide 1</h3><p>Slide 1</p></CCarouselCaption> <CCarouselCaption>
<h3>Slide 1</h3>
<p>Slide 1</p>
</CCarouselCaption>
</CCarouselItem> </CCarouselItem>
<CCarouselItem> <CCarouselItem>
<img className="d-block w-100" src={slides[1]} alt="slide 2"/> <img className="d-block w-100" src={slides[1]} alt="slide 2" />
<CCarouselCaption><h3>Slide 2</h3><p>Slide 2</p></CCarouselCaption> <CCarouselCaption>
<h3>Slide 2</h3>
<p>Slide 2</p>
</CCarouselCaption>
</CCarouselItem> </CCarouselItem>
<CCarouselItem> <CCarouselItem>
<img className="d-block w-100" src={slides[2]} alt="slide 3"/> <img className="d-block w-100" src={slides[2]} alt="slide 3" />
<CCarouselCaption><h3>Slide 3</h3><p>Slide 3</p></CCarouselCaption> <CCarouselCaption>
<h3>Slide 3</h3>
<p>Slide 3</p>
</CCarouselCaption>
</CCarouselItem> </CCarouselItem>
</CCarouselInner> </CCarouselInner>
<CCarouselControl direction="prev"/> <CCarouselControl direction="prev" />
<CCarouselControl direction="next"/> <CCarouselControl direction="next" />
</CCarousel> </CCarousel>
</CCardBody> </CCardBody>
</CCard> </CCard>

189
src/views/base/collapses/Collapses.js
View File

@ -8,12 +8,11 @@ import {
CCol, CCol,
CCollapse, CCollapse,
CFade, CFade,
CRow CRow,
} from '@coreui/react-ts'; } from '@coreui/react-ts'
import { DocsLink } from 'src/reusable' import { DocsLink } from 'src/reusable'
const Collapses = () => { const Collapses = () => {
const [collapse, setCollapse] = useState(false) const [collapse, setCollapse] = useState(false)
const [collapseMulti, setCollapseMulti] = useState([false, false]) const [collapseMulti, setCollapseMulti] = useState([false, false])
const [accordion, setAccordion] = useState(1) const [accordion, setAccordion] = useState(1)
@ -27,16 +26,16 @@ const Collapses = () => {
const toggleMulti = (type) => { const toggleMulti = (type) => {
let newCollapse = collapseMulti.slice() let newCollapse = collapseMulti.slice()
switch (type) { switch (type) {
case "left": case 'left':
newCollapse[0] = !collapseMulti[0]; newCollapse[0] = !collapseMulti[0]
break; break
case "right": case 'right':
newCollapse[1] = !collapseMulti[1]; newCollapse[1] = !collapseMulti[1]
break; break
case "both": case 'both':
newCollapse[0] = !collapseMulti[0]; newCollapse[0] = !collapseMulti[0]
newCollapse[1] = !collapseMulti[1]; newCollapse[1] = !collapseMulti[1]
break; break
default: default:
} }
setCollapseMulti(newCollapse) setCollapseMulti(newCollapse)
@ -52,35 +51,34 @@ const Collapses = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Collapse Collapse
<DocsLink name="CCollapse"/> <DocsLink name="CCollapse" />
</CCardHeader> </CCardHeader>
<CCollapse show={collapse}> <CCollapse show={collapse}>
<CCardBody> <CCardBody>
<p> <p>
Anim pariatur cliche reprehenderit, Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
enim eiusmod high life accusamus terry richardson ad squid. Nihil richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
anim keffiyeh helvetica, craft beer labore wes anderson cred cred nesciunt sapiente ea proident.
nesciunt sapiente ea proident.
</p> </p>
<p> <p>
Donec molestie odio id nisi malesuada, mattis tincidunt velit egestas. Sed non pulvinar risus. Aenean Donec molestie odio id nisi malesuada, mattis tincidunt velit egestas. Sed non
elementum eleifend nunc, pellentesque dapibus arcu hendrerit fringilla. Aliquam in nibh massa. Cras pulvinar risus. Aenean elementum eleifend nunc, pellentesque dapibus arcu hendrerit
ultricies lorem non enim volutpat, a eleifend urna placerat. Fusce id luctus urna. In sed leo tellus. fringilla. Aliquam in nibh massa. Cras ultricies lorem non enim volutpat, a eleifend
Mauris tristique leo a nisl feugiat, eget vehicula leo venenatis. Quisque magna metus, luctus quis urna placerat. Fusce id luctus urna. In sed leo tellus. Mauris tristique leo a nisl
sollicitudin vel, vehicula nec ipsum. Donec rutrum commodo lacus ut condimentum. Integer vel turpis feugiat, eget vehicula leo venenatis. Quisque magna metus, luctus quis sollicitudin
purus. Etiam vehicula, nulla non fringilla blandit, massa purus faucibus tellus, a luctus enim orci non vel, vehicula nec ipsum. Donec rutrum commodo lacus ut condimentum. Integer vel
augue. Aenean ullamcorper nisl urna, non feugiat tortor volutpat in. Vivamus lobortis massa dolor, eget turpis purus. Etiam vehicula, nulla non fringilla blandit, massa purus faucibus
faucibus ipsum varius eget. Pellentesque imperdiet, turpis sed sagittis lobortis, leo elit laoreet arcu, tellus, a luctus enim orci non augue. Aenean ullamcorper nisl urna, non feugiat
tortor volutpat in. Vivamus lobortis massa dolor, eget faucibus ipsum varius eget.
Pellentesque imperdiet, turpis sed sagittis lobortis, leo elit laoreet arcu,
vehicula sagittis elit leo id nisi. vehicula sagittis elit leo id nisi.
</p> </p>
</CCardBody> </CCardBody>
</CCollapse> </CCollapse>
<CCardFooter> <CCardFooter>
<CButton <CButton color="primary" onClick={toggle} className={'mb-1'}>
color="primary" Toggling button
onClick={toggle} </CButton>
className={'mb-1'}
>Toggling button</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
@ -89,44 +87,66 @@ const Collapses = () => {
Collapse Collapse
<small> multi target</small> <small> multi target</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p> <p>
<CButton color="primary" onClick={()=>{toggleMulti('left')}}> <CButton
Left</CButton>{' '} color="primary"
<CButton color="primary" onClick={()=>{toggleMulti('right')}}> onClick={() => {
Right</CButton>{' '} toggleMulti('left')
<CButton color="primary" onClick={()=>{toggleMulti('both')}}> }}
Both</CButton>{' '} >
</p> Left
<CRow> </CButton>{' '}
<CCol xs> <CButton
<CCollapse show={collapseMulti[0]}> color="primary"
<CCard className="mb-4"> onClick={() => {
<CCardBody> toggleMulti('right')
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. }}
</CCardBody> >
</CCard> Right
</CCollapse> </CButton>{' '}
</CCol> <CButton
<CCol className="col-sm-12 col-md-6"> color="primary"
<CCollapse show={collapseMulti[1]}> onClick={() => {
<CCard className="mb-4"> toggleMulti('both')
<CCardBody> }}
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. >
</CCardBody> Both
</CCard> </CButton>{' '}
</CCollapse> </p>
</CCol> <CRow>
</CRow> <CCol xs>
</CCardBody> <CCollapse show={collapseMulti[0]}>
<CCard className="mb-4">
<CCardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid.Nihil anim keffiyeh helvetica, craft beer labore wes
anderson cred nesciunt sapiente ea proident.
</CCardBody>
</CCard>
</CCollapse>
</CCol>
<CCol className="col-sm-12 col-md-6">
<CCollapse show={collapseMulti[1]}>
<CCard className="mb-4">
<CCardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid.Nihil anim keffiyeh helvetica, craft beer labore wes
anderson cred nesciunt sapiente ea proident.
</CCardBody>
</CCard>
</CCollapse>
</CCol>
</CRow>
</CCardBody>
</CCard> </CCard>
<hr/> <hr />
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Fade Fade
<DocsLink name="CFade"/> <DocsLink name="CFade" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CFade timeout={300} in={fade} tag="h5" className="mt-3"> <CFade timeout={300} in={fade} tag="h5" className="mt-3">
@ -134,7 +154,9 @@ const Collapses = () => {
</CFade> </CFade>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton color="primary" onClick={toggleFade}>Toggle Fade</CButton> <CButton color="primary" onClick={toggleFade}>
Toggle Fade
</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@ -159,11 +181,14 @@ const Collapses = () => {
</CCardHeader> </CCardHeader>
<CCollapse show={accordion === 0}> <CCollapse show={accordion === 0}>
<CCardBody> <CCardBody>
1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non 1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS. shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven''t heard of them accusamus labore sustainable VHS.
</CCardBody> </CCardBody>
</CCollapse> </CCollapse>
</CCard> </CCard>
@ -180,11 +205,14 @@ const Collapses = () => {
</CCardHeader> </CCardHeader>
<CCollapse show={accordion === 1}> <CCollapse show={accordion === 1}>
<CCardBody> <CCardBody>
2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non 2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS. shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven''t heard of them accusamus labore sustainable VHS.
</CCardBody> </CCardBody>
</CCollapse> </CCollapse>
</CCard> </CCard>
@ -201,11 +229,14 @@ const Collapses = () => {
</CCardHeader> </CCardHeader>
<CCollapse show={accordion === 2}> <CCollapse show={accordion === 2}>
<CCardBody> <CCardBody>
3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non 3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
beer farm-to-table, raw denim aesthetic synth nesciunt you probably havent heard of them accusamus labore sustainable VHS. shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably havent heard of them accusamus labore sustainable VHS.
</CCardBody> </CCardBody>
</CCollapse> </CCollapse>
</CCard> </CCard>

579
src/views/base/forms/BasicForms.js
View File

@ -38,7 +38,7 @@ const BasicForms = () => {
<CCardHeader> <CCardHeader>
Credit Card Credit Card
<small> Form</small> <small> Form</small>
<DocsLink name="-Input"/> <DocsLink name="-Input" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow> <CRow>
@ -97,7 +97,7 @@ const BasicForms = () => {
<CCol xs="4"> <CCol xs="4">
<div className="mb-3"> <div className="mb-3">
<CFormLabel htmlFor="cvv">CVV/CVC</CFormLabel> <CFormLabel htmlFor="cvv">CVV/CVC</CFormLabel>
<CFormControl id="cvv" placeholder="123" required/> <CFormControl id="cvv" placeholder="123" required />
</div> </div>
</CCol> </CCol>
</CRow> </CRow>
@ -153,7 +153,12 @@ const BasicForms = () => {
<small> Elements</small> <small> Elements</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CForm action="" method="post" encType="multipart/form-data" className="form-horizontal"> <CForm
action=""
method="post"
encType="multipart/form-data"
className="form-horizontal"
>
<CRow className="mb-3"> <CRow className="mb-3">
<CCol md="3"> <CCol md="3">
<CFormLabel>Static</CFormLabel> <CFormLabel>Static</CFormLabel>
@ -176,7 +181,13 @@ const BasicForms = () => {
<CFormLabel htmlFor="email-input">Email Input</CFormLabel> <CFormLabel htmlFor="email-input">Email Input</CFormLabel>
</CCol> </CCol>
<CCol xs="12" md="9"> <CCol xs="12" md="9">
<CFormControl type="email" id="email-input" name="email-input" placeholder="Enter Email" autoComplete="email"/> <CFormControl
type="email"
id="email-input"
name="email-input"
placeholder="Enter Email"
autoComplete="email"
/>
<CFormText>Please enter your email</CFormText> <CFormText>Please enter your email</CFormText>
</CCol> </CCol>
</CRow> </CRow>
@ -185,7 +196,13 @@ const BasicForms = () => {
<CFormLabel htmlFor="password-input">Password</CFormLabel> <CFormLabel htmlFor="password-input">Password</CFormLabel>
</CCol> </CCol>
<CCol xs="12" md="9"> <CCol xs="12" md="9">
<CFormControl type="password" id="password-input" name="password-input" placeholder="Password" autoComplete="new-password" /> <CFormControl
type="password"
id="password-input"
name="password-input"
placeholder="Password"
autoComplete="new-password"
/>
<CFormText>Please enter a complex password</CFormText> <CFormText>Please enter a complex password</CFormText>
</CCol> </CCol>
</CRow> </CRow>
@ -194,7 +211,12 @@ const BasicForms = () => {
<CFormLabel htmlFor="date-input">Date Input</CFormLabel> <CFormLabel htmlFor="date-input">Date Input</CFormLabel>
</CCol> </CCol>
<CCol xs="12" md="9"> <CCol xs="12" md="9">
<CFormControl type="date" id="date-input" name="date-input" placeholder="date" /> <CFormControl
type="date"
id="date-input"
name="date-input"
placeholder="date"
/>
</CCol> </CCol>
</CRow> </CRow>
<CRow className="mb-3"> <CRow className="mb-3">
@ -202,7 +224,12 @@ const BasicForms = () => {
<CFormLabel htmlFor="disabled-input">Disabled Input</CFormLabel> <CFormLabel htmlFor="disabled-input">Disabled Input</CFormLabel>
</CCol> </CCol>
<CCol xs="12" md="9"> <CCol xs="12" md="9">
<CFormControl id="disabled-input" name="disabled-input" placeholder="Disabled" disabled /> <CFormControl
id="disabled-input"
name="disabled-input"
placeholder="Disabled"
disabled
/>
</CCol> </CCol>
</CRow> </CRow>
<CRow className="mb-3"> <CRow className="mb-3">
@ -284,10 +311,30 @@ const BasicForms = () => {
Switch checkboxes Switch checkboxes
</CCol> </CCol>
<CCol sm="9"> <CCol sm="9">
<CFormCheck switch label="Default switch checkbox input" id="formSwitchCheckDefault"/> <CFormCheck
<CFormCheck switch label="Checked switch checkbox input" id="formSwitchCheckChecked" defaultChecked/> switch
<CFormCheck switch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled/> label="Default switch checkbox input"
<CFormCheck switch label="Disabled checked switch checkbox input" id="formSwitchCheckCheckedDisabled" defaultChecked disabled/> id="formSwitchCheckDefault"
/>
<CFormCheck
switch
label="Checked switch checkbox input"
id="formSwitchCheckChecked"
defaultChecked
/>
<CFormCheck
switch
label="Disabled switch checkbox input"
id="formSwitchCheckDisabled"
disabled
/>
<CFormCheck
switch
label="Disabled checked switch checkbox input"
id="formSwitchCheckCheckedDisabled"
defaultChecked
disabled
/>
</CCol> </CCol>
</CRow> </CRow>
<CRow className="mb-3"> <CRow className="mb-3">
@ -296,13 +343,31 @@ const BasicForms = () => {
</CCol> </CCol>
<CCol md="9"> <CCol md="9">
<div className="mb-3"> <div className="mb-3">
<CFormCheck type="radio" id="radio1" name="radios" value="option1" label="Option 1"/> <CFormCheck
type="radio"
id="radio1"
name="radios"
value="option1"
label="Option 1"
/>
</div> </div>
<div className="mb-3"> <div className="mb-3">
<CFormCheck type="radio" id="radio2" name="radios" value="option2" label="Option 2"/> <CFormCheck
type="radio"
id="radio2"
name="radios"
value="option2"
label="Option 2"
/>
</div> </div>
<div className="mb-3"> <div className="mb-3">
<CFormCheck type="radio" id="radio3" name="radios" value="option3" label="Option 3"/> <CFormCheck
type="radio"
id="radio3"
name="radios"
value="option3"
label="Option 3"
/>
</div> </div>
</CCol> </CCol>
</CRow> </CRow>
@ -312,28 +377,56 @@ const BasicForms = () => {
</CCol> </CCol>
<CCol md="9"> <CCol md="9">
<div className="mb-3"> <div className="mb-3">
<CFormCheck type="radio" inline id="inline-radio1" name="inline-radios" value="option1" label="One"/> <CFormCheck
<CFormCheck type="radio" inline id="inline-radio2" name="inline-radios" value="option2" label="Two"/> type="radio"
<CFormCheck type="radio" inline id="inline-radio3" name="inline-radios" value="option3" label="Three"/> inline
id="inline-radio1"
name="inline-radios"
value="option1"
label="One"
/>
<CFormCheck
type="radio"
inline
id="inline-radio2"
name="inline-radios"
value="option2"
label="Two"
/>
<CFormCheck
type="radio"
inline
id="inline-radio3"
name="inline-radios"
value="option3"
label="Three"
/>
</div> </div>
</CCol> </CCol>
</CRow> </CRow>
<CRow className="mb-3"> <CRow className="mb-3">
<CCol md="3"><CFormLabel>Checkboxes</CFormLabel></CCol> <CCol md="3">
<CFormLabel>Checkboxes</CFormLabel>
</CCol>
<CCol md="9"> <CCol md="9">
<div className="mb-3">
<CFormCheck id="checkbox1" name="checkbox1" value="option1" label="Option" />
</div>
<div className="mb-3"> <div className="mb-3">
<CFormCheck <CFormCheck
id="checkbox1" id="checkbox2"
name="checkbox1" name="checkbox2"
value="option1" value="option2"
label="Option" label="Option 2"
/> />
</div> </div>
<div className="mb-3"> <div className="mb-3">
<CFormCheck id="checkbox2" name="checkbox2" value="option2" label="Option 2"/> <CFormCheck
</div> id="checkbox3"
<div className="mb-3"> name="checkbox3"
<CFormCheck id="checkbox3" name="checkbox3" value="option3" label="Option 3"/> value="option3"
label="Option 3"
/>
</div> </div>
</CCol> </CCol>
</CRow> </CRow>
@ -350,15 +443,29 @@ const BasicForms = () => {
value="option1" value="option1"
label="One" label="One"
/> />
<CFormCheck inline id="inline-checkbox2" name="inline-checkbox2" value="option2" label="Two"/> <CFormCheck
<CFormCheck inline id="inline-checkbox3" name="inline-checkbox3" value="option3" label="Three"/> inline
id="inline-checkbox2"
name="inline-checkbox2"
value="option2"
label="Two"
/>
<CFormCheck
inline
id="inline-checkbox3"
name="inline-checkbox3"
value="option3"
label="Three"
/>
</div> </div>
</CCol> </CCol>
</CRow> </CRow>
<CRow className="mb-3"> <CRow className="mb-3">
<CFormLabel col md="3" htmlFor="file-input">File input</CFormLabel> <CFormLabel col md="3" htmlFor="file-input">
File input
</CFormLabel>
<CCol xs="12" md="9"> <CCol xs="12" md="9">
<CFormControl type="file" id="file-input" name="file-input"/> <CFormControl type="file" id="file-input" name="file-input" />
</CCol> </CCol>
</CRow> </CRow>
<CRow className="mb-3"> <CRow className="mb-3">
@ -366,7 +473,8 @@ const BasicForms = () => {
<CFormLabel>Multiple File input</CFormLabel> <CFormLabel>Multiple File input</CFormLabel>
</CCol> </CCol>
<CCol xs="12" md="9"> <CCol xs="12" md="9">
<CFormControl type="file" <CFormControl
type="file"
id="file-multiple-input" id="file-multiple-input"
name="file-multiple-input" name="file-multiple-input"
multiple multiple
@ -377,9 +485,11 @@ const BasicForms = () => {
</CCol> </CCol>
</CRow> </CRow>
<CRow className="mb-3"> <CRow className="mb-3">
<CFormLabel col md={3}>Custom file input</CFormLabel> <CFormLabel col md={3}>
Custom file input
</CFormLabel>
<CCol xs="12" md="9"> <CCol xs="12" md="9">
<CFormControl type="file" id="custom-file-input"/> <CFormControl type="file" id="custom-file-input" />
<CFormLabel htmlFor="custom-file-input" variant="custom-file"> <CFormLabel htmlFor="custom-file-input" variant="custom-file">
Choose file... Choose file...
</CFormLabel> </CFormLabel>
@ -388,8 +498,12 @@ const BasicForms = () => {
</CForm> </CForm>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-scrubber" /> Submit</CButton> <CButton type="submit" size="sm" color="primary">
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton> <CIcon name="cil-scrubber" /> Submit
</CButton>
<CButton type="reset" size="sm" color="danger">
<CIcon name="cil-ban" /> Reset
</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
@ -400,18 +514,31 @@ const BasicForms = () => {
<CCardBody> <CCardBody>
<CForm action="" method="post" inline> <CForm action="" method="post" inline>
<div className="pe-1"> <div className="pe-1">
<CFormLabel htmlFor="exampleInputName2" className="pe-1">Name</CFormLabel> <CFormLabel htmlFor="exampleInputName2" className="pe-1">
Name
</CFormLabel>
<CFormControl id="exampleInputName2" placeholder="Jane Doe" required /> <CFormControl id="exampleInputName2" placeholder="Jane Doe" required />
</div> </div>
<div className="pe-1"> <div className="pe-1">
<CFormLabel htmlFor="exampleInputEmail2" className="pe-1">Email</CFormLabel> <CFormLabel htmlFor="exampleInputEmail2" className="pe-1">
<CFormControl type="email" id="exampleInputEmail2" placeholder="jane.doe@example.com" required /> Email
</CFormLabel>
<CFormControl
type="email"
id="exampleInputEmail2"
placeholder="jane.doe@example.com"
required
/>
</div> </div>
</CForm> </CForm>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-scrubber" /> Submit</CButton> <CButton type="submit" size="sm" color="primary">
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton> <CIcon name="cil-scrubber" /> Submit
</CButton>
<CButton type="reset" size="sm" color="danger">
<CIcon name="cil-ban" /> Reset
</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@ -428,7 +555,13 @@ const BasicForms = () => {
<CFormLabel htmlFor="hf-email">Email</CFormLabel> <CFormLabel htmlFor="hf-email">Email</CFormLabel>
</CCol> </CCol>
<CCol xs="12" md="9"> <CCol xs="12" md="9">
<CFormControl type="email" id="hf-email" name="hf-email" placeholder="Enter Email..." autoComplete="email" /> <CFormControl
type="email"
id="hf-email"
name="hf-email"
placeholder="Enter Email..."
autoComplete="email"
/>
<CFormText>Please enter your email</CFormText> <CFormText>Please enter your email</CFormText>
</CCol> </CCol>
</CRow> </CRow>
@ -437,14 +570,25 @@ const BasicForms = () => {
<CFormLabel htmlFor="hf-password">Password</CFormLabel> <CFormLabel htmlFor="hf-password">Password</CFormLabel>
</CCol> </CCol>
<CCol xs="12" md="9"> <CCol xs="12" md="9">
<CFormControl type="password" id="hf-password" name="hf-password" placeholder="Enter Password..." autoComplete="current-password"/> <CFormControl
type="password"
id="hf-password"
name="hf-password"
placeholder="Enter Password..."
autoComplete="current-password"
/>
<CFormText>Please enter your password</CFormText> <CFormText>Please enter your password</CFormText>
</CCol> </CCol>
</CRow> </CRow>
</CForm> </CForm>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-scrubber" /> Submit</CButton> <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton> <CButton type="submit" size="sm" color="primary">
<CIcon name="cil-scrubber" /> Submit
</CButton>{' '}
<CButton type="reset" size="sm" color="danger">
<CIcon name="cil-ban" /> Reset
</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
@ -456,18 +600,35 @@ const BasicForms = () => {
<CForm action="" method="post"> <CForm action="" method="post">
<div className="mb-3"> <div className="mb-3">
<CFormLabel htmlFor="nf-email">Email</CFormLabel> <CFormLabel htmlFor="nf-email">Email</CFormLabel>
<CFormControl type="email" id="nf-email" name="nf-email" placeholder="Enter Email.." autoComplete="email"/> <CFormControl
type="email"
id="nf-email"
name="nf-email"
placeholder="Enter Email.."
autoComplete="email"
/>
<CFormText>Please enter your email</CFormText> <CFormText>Please enter your email</CFormText>
</div> </div>
<div className="mb-3"> <div className="mb-3">
<CFormLabel htmlFor="nf-password">Password</CFormLabel> <CFormLabel htmlFor="nf-password">Password</CFormLabel>
<CFormControl type="password" id="nf-password" name="nf-password" placeholder="Enter Password.." autoComplete="current-password"/> <CFormControl
type="password"
id="nf-password"
name="nf-password"
placeholder="Enter Password.."
autoComplete="current-password"
/>
<CFormText>Please enter your password</CFormText> <CFormText>Please enter your password</CFormText>
</div> </div>
</CForm> </CForm>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-scrubber" /> Submit</CButton> <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton> <CButton type="submit" size="sm" color="primary">
<CIcon name="cil-scrubber" /> Submit
</CButton>{' '}
<CButton type="reset" size="sm" color="danger">
<CIcon name="cil-ban" /> Reset
</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
@ -530,7 +691,12 @@ const BasicForms = () => {
</CForm> </CForm>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-user" /> Login</CButton> <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton> <CButton type="submit" size="sm" color="primary">
<CIcon name="cil-user" /> Login
</CButton>{' '}
<CButton type="reset" size="sm" color="danger">
<CIcon name="cil-ban" /> Reset
</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
@ -541,28 +707,52 @@ const BasicForms = () => {
<CCardBody> <CCardBody>
<CForm action="" method="post" className="form-horizontal"> <CForm action="" method="post" className="form-horizontal">
<CRow className="mb-3"> <CRow className="mb-3">
<CFormLabel sm="5" col="sm" htmlFor="input-small">Small Input</CFormLabel> <CFormLabel sm="5" col="sm" htmlFor="input-small">
Small Input
</CFormLabel>
<CCol sm="6"> <CCol sm="6">
<CFormControl size="sm" type="text" id="input-small" name="input-small" className="input-sm" placeholder=".form-control-sm" /> <CFormControl
size="sm"
type="text"
id="input-small"
name="input-small"
className="input-sm"
placeholder=".form-control-sm"
/>
</CCol> </CCol>
</CRow> </CRow>
<CRow className="mb-3"> <CRow className="mb-3">
<CFormLabel sm="5" col htmlFor="input-normal">Normal Input</CFormLabel> <CFormLabel sm="5" col htmlFor="input-normal">
Normal Input
</CFormLabel>
<CCol sm="6"> <CCol sm="6">
<CFormControl id="input-normal" name="input-normal" placeholder="Normal" /> <CFormControl id="input-normal" name="input-normal" placeholder="Normal" />
</CCol> </CCol>
</CRow> </CRow>
<CRow className="mb-3"> <CRow className="mb-3">
<CFormLabel sm="5" col="lg" htmlFor="input-large">Large Input</CFormLabel> <CFormLabel sm="5" col="lg" htmlFor="input-large">
Large Input
</CFormLabel>
<CCol sm="6"> <CCol sm="6">
<CFormControl size="lg" type="text" id="input-large" name="input-large" className="input-lg" placeholder=".form-control-lg" /> <CFormControl
size="lg"
type="text"
id="input-large"
name="input-large"
className="input-lg"
placeholder=".form-control-lg"
/>
</CCol> </CCol>
</CRow> </CRow>
</CForm> </CForm>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-scrubber" /> Submit</CButton> <CButton type="submit" size="sm" color="primary">
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton> <CIcon name="cil-scrubber" /> Submit
</CButton>
<CButton type="reset" size="sm" color="danger">
<CIcon name="cil-ban" /> Reset
</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@ -590,9 +780,7 @@ const BasicForms = () => {
</CCol> </CCol>
<CCol xs="12" sm="6"> <CCol xs="12" sm="6">
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Validation feedback Form</CCardHeader>
Validation feedback Form
</CCardHeader>
<CCardBody> <CCardBody>
<CForm className="was-validated"> <CForm className="was-validated">
<div className="mb-3"> <div className="mb-3">
@ -603,9 +791,7 @@ const BasicForms = () => {
<div className="mb-3"> <div className="mb-3">
<CFormLabel htmlFor="inputWarning2i">Required input</CFormLabel> <CFormLabel htmlFor="inputWarning2i">Required input</CFormLabel>
<CFormControl id="inputWarning2i" required /> <CFormControl id="inputWarning2i" required />
<CFormFeedback invalid> <CFormFeedback invalid>Please provide a valid information</CFormFeedback>
Please provide a valid information
</CFormFeedback>
<CFormFeedback valid>Input provided</CFormFeedback> <CFormFeedback valid>Input provided</CFormFeedback>
</div> </div>
</CForm> </CForm>
@ -616,9 +802,7 @@ const BasicForms = () => {
<CRow> <CRow>
<CCol xs="12" md="4"> <CCol xs="12" md="4">
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Icon/Text Groups</CCardHeader>
Icon/Text Groups
</CCardHeader>
<CCardBody> <CCardBody>
<CForm action="" method="post" className="form-horizontal"> <CForm action="" method="post" className="form-horizontal">
<CRow className="mb-3"> <CRow className="mb-3">
@ -627,14 +811,23 @@ const BasicForms = () => {
<CInputGroupText> <CInputGroupText>
<CIcon name="cil-user" /> <CIcon name="cil-user" />
</CInputGroupText> </CInputGroupText>
<CFormControl id="input1-group1" name="input1-group1" placeholder="Username" /> <CFormControl
id="input1-group1"
name="input1-group1"
placeholder="Username"
/>
</CInputGroup> </CInputGroup>
</CCol> </CCol>
</CRow> </CRow>
<CRow className="mb-3"> <CRow className="mb-3">
<CCol md="12"> <CCol md="12">
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CFormControl type="email" id="input2-group1" name="input2-group1" placeholder="Email" /> <CFormControl
type="email"
id="input2-group1"
name="input2-group1"
placeholder="Email"
/>
<CInputGroupText> <CInputGroupText>
<CIcon name="cil-envelope-closed" /> <CIcon name="cil-envelope-closed" />
</CInputGroupText> </CInputGroupText>
@ -655,56 +848,77 @@ const BasicForms = () => {
</CForm> </CForm>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" color="success"><CIcon name="cil-scrubber" /> Submit</CButton> <CButton type="submit" size="sm" color="success">
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton> <CIcon name="cil-scrubber" /> Submit
</CButton>
<CButton type="reset" size="sm" color="danger">
<CIcon name="cil-ban" /> Reset
</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="4"> <CCol xs="12" md="4">
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Button Groups</CCardHeader>
Button Groups
</CCardHeader>
<CCardBody> <CCardBody>
<CForm action="" method="post" className="form-horizontal"> <CForm action="" method="post" className="form-horizontal">
<CRow className="mb-3"> <CRow className="mb-3">
<CCol md="12"> <CCol md="12">
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CButton type="button" color="primary"><CIcon name="cil-magnifying-glass" /> Search</CButton> <CButton type="button" color="primary">
<CFormControl id="input1-group2" name="input1-group2" placeholder="Username" /> <CIcon name="cil-magnifying-glass" /> Search
</CButton>
<CFormControl
id="input1-group2"
name="input1-group2"
placeholder="Username"
/>
</CInputGroup> </CInputGroup>
</CCol> </CCol>
</CRow> </CRow>
<CRow className="mb-3"> <CRow className="mb-3">
<CCol md="12"> <CCol md="12">
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CFormControl type="email" id="input2-group2" name="input2-group2" placeholder="Email" /> <CFormControl
<CButton type="button" color="primary">Submit</CButton> type="email"
id="input2-group2"
name="input2-group2"
placeholder="Email"
/>
<CButton type="button" color="primary">
Submit
</CButton>
</CInputGroup> </CInputGroup>
</CCol> </CCol>
</CRow> </CRow>
<CRow className="mb-3"> <CRow className="mb-3">
<CCol md="12"> <CCol md="12">
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CButton type="button" color="primary"><CIcon name="cib-facebook" /></CButton> <CButton type="button" color="primary">
<CIcon name="cib-facebook" />
</CButton>
<CFormControl id="input3-group2" name="input3-group2" placeholder="Search" /> <CFormControl id="input3-group2" name="input3-group2" placeholder="Search" />
<CButton type="button" color="primary"><CIcon name="cib-twitter" /></CButton> <CButton type="button" color="primary">
<CIcon name="cib-twitter" />
</CButton>
</CInputGroup> </CInputGroup>
</CCol> </CCol>
</CRow> </CRow>
</CForm> </CForm>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" color="success"><CIcon name="cil-scrubber" /> Submit</CButton> <CButton type="submit" size="sm" color="success">
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton> <CIcon name="cil-scrubber" /> Submit
</CButton>
<CButton type="reset" size="sm" color="danger">
<CIcon name="cil-ban" /> Reset
</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="4"> <CCol xs="12" md="4">
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Dropdowns Groups</CCardHeader>
Dropdowns Groups
</CCardHeader>
<CCardBody> <CCardBody>
<CForm className="form-horizontal"> <CForm className="form-horizontal">
<CRow className="mb-3"> <CRow className="mb-3">
@ -722,18 +936,25 @@ const BasicForms = () => {
<CDropdownItem>Separated link</CDropdownItem> <CDropdownItem>Separated link</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<CFormControl id="input1-group3" name="input1-group3" placeholder="Username" /> <CFormControl
id="input1-group3"
name="input1-group3"
placeholder="Username"
/>
</CInputGroup> </CInputGroup>
</CCol> </CCol>
</CRow> </CRow>
<CRow className="mb-3"> <CRow className="mb-3">
<CCol md="12"> <CCol md="12">
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CFormControl type="email" id="input2-group3" name="input2-group3" placeholder="Email" /> <CFormControl
type="email"
id="input2-group3"
name="input2-group3"
placeholder="Email"
/>
<CDropdown className="input-group-append"> <CDropdown className="input-group-append">
<CDropdownToggle color="primary"> <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
Dropdown
</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another Action</CDropdownItem> <CDropdownItem>Another Action</CDropdownItem>
@ -777,8 +998,12 @@ const BasicForms = () => {
</CForm> </CForm>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" color="success"><CIcon name="cil-scrubber" /> Submit</CButton> <CButton type="submit" size="sm" color="success">
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton> <CIcon name="cil-scrubber" /> Submit
</CButton>
<CButton type="reset" size="sm" color="danger">
<CIcon name="cil-ban" /> Reset
</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@ -788,7 +1013,10 @@ const BasicForms = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Use the grid for big devices! Use the grid for big devices!
<small> <code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small> <small>
{' '}
<code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code>
</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CForm action="" method="post" className="form-horizontal"> <CForm action="" method="post" className="form-horizontal">
@ -835,11 +1063,21 @@ const BasicForms = () => {
</CForm> </CForm>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" color="primary">Action</CButton> <CButton type="submit" size="sm" color="primary">
<CButton size="sm" color="danger">Action</CButton> Action
<CButton size="sm" color="warning">Action</CButton> </CButton>
<CButton size="sm" color="info">Action</CButton> <CButton size="sm" color="danger">
<CButton size="sm" color="success">Action</CButton> Action
</CButton>
<CButton size="sm" color="warning">
Action
</CButton>
<CButton size="sm" color="info">
Action
</CButton>
<CButton size="sm" color="success">
Action
</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@ -847,7 +1085,10 @@ const BasicForms = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Input Grid for small devices! Input Grid for small devices!
<small> <code>.col-*</code></small> <small>
{' '}
<code>.col-*</code>
</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CForm action="" method="post" className="form-horizontal"> <CForm action="" method="post" className="form-horizontal">
@ -894,11 +1135,21 @@ const BasicForms = () => {
</CForm> </CForm>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" color="primary">Action</CButton> <CButton type="submit" size="sm" color="primary">
<CButton size="sm" color="danger">Action</CButton> Action
<CButton size="sm" color="warning">Action</CButton> </CButton>
<CButton size="sm" color="info">Action</CButton> <CButton size="sm" color="danger">
<CButton size="sm" color="success">Action</CButton> Action
</CButton>
<CButton size="sm" color="warning">
Action
</CButton>
<CButton size="sm" color="info">
Action
</CButton>
<CButton size="sm" color="success">
Action
</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@ -906,34 +1157,50 @@ const BasicForms = () => {
<CRow> <CRow>
<CCol xs="12" sm="4"> <CCol xs="12" sm="4">
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Example Form</CCardHeader>
Example Form
</CCardHeader>
<CCardBody> <CCardBody>
<CForm action="" method="post"> <CForm action="" method="post">
<div className="mb-3"> <div className="mb-3">
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CInputGroupText>Username</CInputGroupText> <CInputGroupText>Username</CInputGroupText>
<CFormControl type="email" id="username3" name="username3" autoComplete="name"/> <CFormControl
<CInputGroupText><CIcon name="cil-user" /></CInputGroupText> type="email"
id="username3"
name="username3"
autoComplete="name"
/>
<CInputGroupText>
<CIcon name="cil-user" />
</CInputGroupText>
</CInputGroup> </CInputGroup>
</div> </div>
<div className="mb-3"> <div className="mb-3">
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CInputGroupText>Email</CInputGroupText> <CInputGroupText>Email</CInputGroupText>
<CFormControl type="email" id="email3" name="email3" autoComplete="username"/> <CFormControl type="email" id="email3" name="email3" autoComplete="username" />
<CInputGroupText><CIcon name="cil-envelope-closed" /></CInputGroupText> <CInputGroupText>
<CIcon name="cil-envelope-closed" />
</CInputGroupText>
</CInputGroup> </CInputGroup>
</div> </div>
<div className="mb-3"> <div className="mb-3">
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CInputGroupText>Password</CInputGroupText> <CInputGroupText>Password</CInputGroupText>
<CFormControl type="password" id="password3" name="password3" autoComplete="current-password"/> <CFormControl
<CInputGroupText><CIcon name="cil-asterisk" /></CInputGroupText> type="password"
id="password3"
name="password3"
autoComplete="current-password"
/>
<CInputGroupText>
<CIcon name="cil-asterisk" />
</CInputGroupText>
</CInputGroup> </CInputGroup>
</div> </div>
<div className="form-actions"> <div className="form-actions">
<CButton type="submit" size="sm" color="primary">Submit</CButton> <CButton type="submit" size="sm" color="primary">
Submit
</CButton>
</div> </div>
</CForm> </CForm>
</CCardBody> </CCardBody>
@ -941,31 +1208,54 @@ const BasicForms = () => {
</CCol> </CCol>
<CCol xs="12" sm="4"> <CCol xs="12" sm="4">
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Example Form</CCardHeader>
Example Form
</CCardHeader>
<CCardBody> <CCardBody>
<CForm action="" method="post"> <CForm action="" method="post">
<div className="mb-3"> <div className="mb-3">
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CFormControl id="username2" name="username2" placeholder="Username" autoComplete="name"/> <CFormControl
<CInputGroupText><CIcon name="cil-user" /></CInputGroupText> id="username2"
name="username2"
placeholder="Username"
autoComplete="name"
/>
<CInputGroupText>
<CIcon name="cil-user" />
</CInputGroupText>
</CInputGroup> </CInputGroup>
</div> </div>
<div className="mb-3"> <div className="mb-3">
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CFormControl type="email" id="email2" name="email2" placeholder="Email" autoComplete="username"/> <CFormControl
<CInputGroupText><CIcon name="cil-envelope-closed" /></CInputGroupText> type="email"
id="email2"
name="email2"
placeholder="Email"
autoComplete="username"
/>
<CInputGroupText>
<CIcon name="cil-envelope-closed" />
</CInputGroupText>
</CInputGroup> </CInputGroup>
</div> </div>
<div className="mb-3"> <div className="mb-3">
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CFormControl type="password" id="password2" name="password2" placeholder="Password" autoComplete="current-password"/> <CFormControl
<CInputGroupText><CIcon name="cil-asterisk" /></CInputGroupText> type="password"
id="password2"
name="password2"
placeholder="Password"
autoComplete="current-password"
/>
<CInputGroupText>
<CIcon name="cil-asterisk" />
</CInputGroupText>
</CInputGroup> </CInputGroup>
</div> </div>
<div className="form-actions"> <div className="form-actions">
<CButton type="submit" size="sm" color="secondary">Submit</CButton> <CButton type="submit" size="sm" color="secondary">
Submit
</CButton>
</div> </div>
</CForm> </CForm>
</CCardBody> </CCardBody>
@ -973,31 +1263,54 @@ const BasicForms = () => {
</CCol> </CCol>
<CCol xs="12" sm="4"> <CCol xs="12" sm="4">
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Example Form</CCardHeader>
Example Form
</CCardHeader>
<CCardBody> <CCardBody>
<CForm action="" method="post"> <CForm action="" method="post">
<div className="mb-3"> <div className="mb-3">
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CInputGroupText><CIcon name="cil-user" /></CInputGroupText> <CInputGroupText>
<CFormControl id="username1" name="username1" placeholder="Username" autoComplete="name"/> <CIcon name="cil-user" />
</CInputGroupText>
<CFormControl
id="username1"
name="username1"
placeholder="Username"
autoComplete="name"
/>
</CInputGroup> </CInputGroup>
</div> </div>
<div className="mb-3"> <div className="mb-3">
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CInputGroupText><CIcon name="cil-envelope-closed" /></CInputGroupText> <CInputGroupText>
<CFormControl type="email" id="email1" name="email1" placeholder="Email" autoComplete="username"/> <CIcon name="cil-envelope-closed" />
</CInputGroupText>
<CFormControl
type="email"
id="email1"
name="email1"
placeholder="Email"
autoComplete="username"
/>
</CInputGroup> </CInputGroup>
</div> </div>
<div className="mb-3"> <div className="mb-3">
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CInputGroupText><CIcon name="cil-asterisk" /></CInputGroupText> <CInputGroupText>
<CFormControl type="password" id="password1" name="password1" placeholder="Password" autoComplete="current-password"/> <CIcon name="cil-asterisk" />
</CInputGroupText>
<CFormControl
type="password"
id="password1"
name="password1"
placeholder="Password"
autoComplete="current-password"
/>
</CInputGroup> </CInputGroup>
</div> </div>
<div className="form-actions"> <div className="form-actions">
<CButton type="submit" size="sm" color="success">Submit</CButton> <CButton type="submit" size="sm" color="success">
Submit
</CButton>
</div> </div>
</CForm> </CForm>
</CCardBody> </CCardBody>
@ -1019,7 +1332,7 @@ const BasicForms = () => {
className="card-header-action btn-minimize" className="card-header-action btn-minimize"
onClick={() => setCollapsed(!collapsed)} onClick={() => setCollapsed(!collapsed)}
> >
<CIcon name={ collapsed ? "cil-arrow-top" : "cil-arrow-bottom"} /> <CIcon name={collapsed ? 'cil-arrow-top' : 'cil-arrow-bottom'} />
</CButton> </CButton>
<CButton <CButton
color="link" color="link"
@ -1083,7 +1396,9 @@ const BasicForms = () => {
</div> </div>
</div> </div>
<div className="form-actions"> <div className="form-actions">
<CButton type="submit" color="primary">Save changes</CButton> <CButton type="submit" color="primary">
Save changes
</CButton>
<CButton color="secondary">Cancel</CButton> <CButton color="secondary">Cancel</CButton>
</div> </div>
</CForm> </CForm>

46
src/views/base/index.js
View File

@ -1,19 +1,31 @@
import Breadcrumbs from './Breadcrumbs'; import Breadcrumbs from './Breadcrumbs'
import Cards from './Cards'; import Cards from './Cards'
import Carousels from './Carousels'; import Carousels from './Carousels'
import Collapses from './Collapses'; import Collapses from './Collapses'
import Dropdowns from './Dropdowns'; import Dropdowns from './Dropdowns'
import Jumbotrons from './Jumbotrons'; import Jumbotrons from './Jumbotrons'
import ListGroups from './ListGroups'; import ListGroups from './ListGroups'
import Navbars from './Navbars'; import Navbars from './Navbars'
import Navs from './Navs'; import Navs from './Navs'
import Paginations from './Paginations'; import Paginations from './Paginations'
import Popovers from './Popovers'; import Popovers from './Popovers'
import ProgressBar from './ProgressBar'; import ProgressBar from './ProgressBar'
import Tabs from './Tabs'; import Tabs from './Tabs'
import Tooltips from './Tooltips'; import Tooltips from './Tooltips'
export { export {
Breadcrumbs, Cards, Carousels, Collapses, Dropdowns, Jumbotrons, ListGroups, Navbars, Navs, Popovers, ProgressBar, Tabs, Tooltips, Paginations, Breadcrumbs,
}; Cards,
Carousels,
Collapses,
Dropdowns,
Jumbotrons,
ListGroups,
Navbars,
Navs,
Popovers,
ProgressBar,
Tabs,
Tooltips,
Paginations,
}

38
src/views/base/jumbotrons/Jumbotrons.js
View File

@ -1,43 +1,49 @@
import React from 'react' import React from 'react'
import { import { CButton, CCard, CCardBody, CCardHeader, CCol, CContainer, CRow } from '@coreui/react-ts'
CButton,
CCard,
CCardBody,
CCardHeader,
CCol,
CContainer,
CRow,
} from '@coreui/react-ts'
import { DocsLink } from 'src/reusable' import { DocsLink } from 'src/reusable'
const Jumbotrons = () => { const Jumbotrons = () => {
return ( return (
<> <>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Jumbotron Jumbotron
<DocsLink name="CJumbotron"/> <DocsLink name="CJumbotron" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CContainer className="py-5" fluid> <CContainer className="py-5" fluid>
<h1 className="display-5 fw-bold">Custom jumbotron</h1> <h1 className="display-5 fw-bold">Custom jumbotron</h1>
<p className="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p> <p className="col-md-8 fs-4">
Using a series of utilities, you can create this jumbotron, just like the one in
previous versions of Bootstrap. Check out the examples below for how you can remix and
restyle it to your liking.
</p>
<CButton size="lg">Example button</CButton> <CButton size="lg">Example button</CButton>
</CContainer> </CContainer>
<CRow className="align-items-md-stretch"> <CRow className="align-items-md-stretch">
<CCol md="6"> <CCol md="6">
<div className="h-100 p-5 text-white bg-dark rounded-3"> <div className="h-100 p-5 text-white bg-dark rounded-3">
<h2>Change the background</h2> <h2>Change the background</h2>
<p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.</p> <p>
<CButton color="light" variant="outline">Example button</CButton> Swap the background-color utility and add a `.text-*` color utility to mix up the
jumbotron look. Then, mix and match with additional component themes and more.
</p>
<CButton color="light" variant="outline">
Example button
</CButton>
</div> </div>
</CCol> </CCol>
<CCol md="6"> <CCol md="6">
<div className="h-100 p-5 bg-light border rounded-3"> <div className="h-100 p-5 bg-light border rounded-3">
<h2>Add borders</h2> <h2>Add borders</h2>
<p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p> <p>
<CButton color="secondary" variant="outline">Example button</CButton> Or, keep it light and add a border for some added definition to the boundaries of
your content. Be sure to look under the hood at the source HTML here as we've
adjusted the alignment and sizing of both column's content for equal-height.
</p>
<CButton color="secondary" variant="outline">
Example button
</CButton>
</div> </div>
</CCol> </CCol>
</CRow> </CRow>

204
src/views/base/list-groups/ListGroups.js
View File

@ -9,11 +9,10 @@ import {
CListGroupItem, CListGroupItem,
CRow, CRow,
CTabContent, CTabContent,
CTabPane CTabPane,
} from '@coreui/react-ts' } from '@coreui/react-ts'
import { DocsLink } from 'src/reusable' import { DocsLink } from 'src/reusable'
const ListGroups = () => { const ListGroups = () => {
const [activeTab, setActiveTab] = useState(1) const [activeTab, setActiveTab] = useState(1)
@ -21,11 +20,10 @@ const ListGroups = () => {
<> <>
<CRow> <CRow>
<CCol sm="12" xl="6"> <CCol sm="12" xl="6">
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
List group List group
<DocsLink name="CListGroup"/> <DocsLink name="CListGroup" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CListGroup> <CListGroup>
@ -37,7 +35,6 @@ const ListGroups = () => {
</CListGroup> </CListGroup>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="12" xl="6"> <CCol sm="12" xl="6">
<CCard className="mb-4"> <CCard className="mb-4">
@ -47,11 +44,15 @@ const ListGroups = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CListGroup> <CListGroup>
<CListGroupItem href="#" active>Cras justo odio</CListGroupItem> <CListGroupItem href="#" active>
Cras justo odio
</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem> <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Morbi leo risus</CListGroupItem> <CListGroupItem href="#">Morbi leo risus</CListGroupItem>
<CListGroupItem href="#">Porta ac consectetur ac</CListGroupItem> <CListGroupItem href="#">Porta ac consectetur ac</CListGroupItem>
<CListGroupItem href="#" disabled>Vestibulum at eros</CListGroupItem> <CListGroupItem href="#" disabled>
Vestibulum at eros
</CListGroupItem>
</CListGroup> </CListGroup>
</CCardBody> </CCardBody>
</CCard> </CCard>
@ -60,7 +61,6 @@ const ListGroups = () => {
<CRow> <CRow>
<CCol sm="12" xl="6"> <CCol sm="12" xl="6">
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
List group List group
@ -70,7 +70,9 @@ const ListGroups = () => {
<CListGroup> <CListGroup>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem color="primary">This is a primary list group item</CListGroupItem> <CListGroupItem color="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem color="secondary">This is a secondary list group item</CListGroupItem> <CListGroupItem color="secondary">
This is a secondary list group item
</CListGroupItem>
<CListGroupItem color="success">This is a success list group item</CListGroupItem> <CListGroupItem color="success">This is a success list group item</CListGroupItem>
<CListGroupItem color="danger">This is a danger list group item</CListGroupItem> <CListGroupItem color="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem color="warning">This is a warning list group item</CListGroupItem> <CListGroupItem color="warning">This is a warning list group item</CListGroupItem>
@ -80,10 +82,8 @@ const ListGroups = () => {
</CListGroup> </CListGroup>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="12" xl="6"> <CCol sm="12" xl="6">
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
List group List group
@ -92,18 +92,33 @@ const ListGroups = () => {
<CCardBody> <CCardBody>
<CListGroup> <CListGroup>
<CListGroupItem component="button">Dapibus ac facilisis in</CListGroupItem> <CListGroupItem component="button">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem component="button" color="primary">This is a primary list group item</CListGroupItem> <CListGroupItem component="button" color="primary">
<CListGroupItem component="button" color="secondary">This is a secondary list group item</CListGroupItem> This is a primary list group item
<CListGroupItem component="button" color="success">This is a success list group item</CListGroupItem> </CListGroupItem>
<CListGroupItem component="button" color="danger">This is a danger list group item</CListGroupItem> <CListGroupItem component="button" color="secondary">
<CListGroupItem component="button" color="warning">This is a warning list group item</CListGroupItem> This is a secondary list group item
<CListGroupItem component="button" color="info">This is a info list group item</CListGroupItem> </CListGroupItem>
<CListGroupItem component="button" color="light">This is a light list group item</CListGroupItem> <CListGroupItem component="button" color="success">
<CListGroupItem component="button" color="dark">This is a dark list group item</CListGroupItem> This is a success list group item
</CListGroupItem>
<CListGroupItem component="button" color="danger">
This is a danger list group item
</CListGroupItem>
<CListGroupItem component="button" color="warning">
This is a warning list group item
</CListGroupItem>
<CListGroupItem component="button" color="info">
This is a info list group item
</CListGroupItem>
<CListGroupItem component="button" color="light">
This is a light list group item
</CListGroupItem>
<CListGroupItem component="button" color="dark">
This is a dark list group item
</CListGroupItem>
</CListGroup> </CListGroup>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
@ -116,7 +131,9 @@ const ListGroups = () => {
<CCardBody> <CCardBody>
<CListGroup accent> <CListGroup accent>
<CListGroupItem accent="primary">This is a primary list group item</CListGroupItem> <CListGroupItem accent="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem accent="secondary">This is a secondary list group item</CListGroupItem> <CListGroupItem accent="secondary">
This is a secondary list group item
</CListGroupItem>
<CListGroupItem accent="success">This is a success list group item</CListGroupItem> <CListGroupItem accent="success">This is a success list group item</CListGroupItem>
<CListGroupItem accent="danger">This is a danger list group item</CListGroupItem> <CListGroupItem accent="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem accent="warning">This is a warning list group item</CListGroupItem> <CListGroupItem accent="warning">This is a warning list group item</CListGroupItem>
@ -135,14 +152,30 @@ const ListGroups = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CListGroup accent> <CListGroup accent>
<CListGroupItem accent="primary" color="primary">This is a primary list group item</CListGroupItem> <CListGroupItem accent="primary" color="primary">
<CListGroupItem accent="secondary" color="secondary">This is a secondary list group item</CListGroupItem> This is a primary list group item
<CListGroupItem accent="success" color="success">This is a success list group item</CListGroupItem> </CListGroupItem>
<CListGroupItem accent="danger" color="danger">This is a danger list group item</CListGroupItem> <CListGroupItem accent="secondary" color="secondary">
<CListGroupItem accent="warning" color="warning">This is a warning list group item</CListGroupItem> This is a secondary list group item
<CListGroupItem accent="info" color="info">This is a info list group item</CListGroupItem> </CListGroupItem>
<CListGroupItem accent="light" color="light">This is a light list group item</CListGroupItem> <CListGroupItem accent="success" color="success">
<CListGroupItem accent="dark" color="dark">This is a dark list group item</CListGroupItem> This is a success list group item
</CListGroupItem>
<CListGroupItem accent="danger" color="danger">
This is a danger list group item
</CListGroupItem>
<CListGroupItem accent="warning" color="warning">
This is a warning list group item
</CListGroupItem>
<CListGroupItem accent="info" color="info">
This is a info list group item
</CListGroupItem>
<CListGroupItem accent="light" color="light">
This is a light list group item
</CListGroupItem>
<CListGroupItem accent="dark" color="dark">
This is a dark list group item
</CListGroupItem>
</CListGroup> </CListGroup>
</CCardBody> </CCardBody>
</CCard> </CCard>
@ -159,30 +192,33 @@ const ListGroups = () => {
<CListGroup> <CListGroup>
<CListGroupItem className="justify-content-between"> <CListGroupItem className="justify-content-between">
Cras justo odio Cras justo odio
<CBadge className="float-end" shape="rounded-pill" color="primary">14</CBadge> <CBadge className="float-end" shape="rounded-pill" color="primary">
14
</CBadge>
</CListGroupItem> </CListGroupItem>
<CListGroupItem className="justify-content-between"> <CListGroupItem className="justify-content-between">
Dapibus ac facilisis in Dapibus ac facilisis in
<CBadge className="float-end" shape="rounded-pill" color="primary">2</CBadge> <CBadge className="float-end" shape="rounded-pill" color="primary">
2
</CBadge>
</CListGroupItem> </CListGroupItem>
<CListGroupItem className="justify-content-between"> <CListGroupItem className="justify-content-between">
Morbi leo risus Morbi leo risus
<CBadge className="float-end" shape="rounded-pill" color="primary">1</CBadge> <CBadge className="float-end" shape="rounded-pill" color="primary">
1
</CBadge>
</CListGroupItem> </CListGroupItem>
</CListGroup> </CListGroup>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="12" xl="6"> <CCol sm="12" xl="6">
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
List group List group
<small> custom content</small> <small> custom content</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CListGroup> <CListGroup>
<CListGroupItem component="a" active> <CListGroupItem component="a" active>
<h5 className="d-flex w-100 justify-content-between"> <h5 className="d-flex w-100 justify-content-between">
@ -190,26 +226,28 @@ const ListGroups = () => {
<small>3 days ago</small> <small>3 days ago</small>
</h5> </h5>
<div className="mb-1"> <div className="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
varius blandit.
<small>Donec id elit non mi porta.</small> <small>Donec id elit non mi porta.</small>
</div> </div>
</CListGroupItem> </CListGroupItem>
<CListGroupItem component="a"> <CListGroupItem component="a">
<h5>List group item heading</h5> <h5>List group item heading</h5>
<div> <div>
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
varius blandit.
</div> </div>
<small>Small.</small> <small>Small.</small>
</CListGroupItem> </CListGroupItem>
<CListGroupItem component="a"> <CListGroupItem component="a">
<h5>List group item heading</h5> <h5>List group item heading</h5>
<div> <div>
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
varius blandit.
</div> </div>
<small>Small.</small> <small>Small.</small>
</CListGroupItem> </CListGroupItem>
</CListGroup> </CListGroup>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -225,39 +263,81 @@ const ListGroups = () => {
<CRow> <CRow>
<CCol xs="4"> <CCol xs="4">
<CListGroup id="list-tab" role="tablist"> <CListGroup id="list-tab" role="tablist">
<CListGroupItem onClick={() => setActiveTab(0)} component="button" active={activeTab === 0} >Home</CListGroupItem> <CListGroupItem
<CListGroupItem onClick={() => setActiveTab(1)} component="button" active={activeTab === 1} >Profile</CListGroupItem> onClick={() => setActiveTab(0)}
<CListGroupItem onClick={() => setActiveTab(2)} component="button" active={activeTab === 2} >Messages</CListGroupItem> component="button"
<CListGroupItem onClick={() => setActiveTab(3)} component="button" active={activeTab === 3} >Settings</CListGroupItem> active={activeTab === 0}
>
Home
</CListGroupItem>
<CListGroupItem
onClick={() => setActiveTab(1)}
component="button"
active={activeTab === 1}
>
Profile
</CListGroupItem>
<CListGroupItem
onClick={() => setActiveTab(2)}
component="button"
active={activeTab === 2}
>
Messages
</CListGroupItem>
<CListGroupItem
onClick={() => setActiveTab(3)}
component="button"
active={activeTab === 3}
>
Settings
</CListGroupItem>
</CListGroup> </CListGroup>
</CCol> </CCol>
<CCol xs="8"> <CCol xs="8">
<CTabContent> <CTabContent>
<CTabPane visible={activeTab === 0} > <CTabPane visible={activeTab === 0}>
<p>Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt <p>
nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing
tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat
eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</p> proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim
tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat
aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor.
Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam
minim.
</p>
</CTabPane> </CTabPane>
<CTabPane visible={activeTab === 1}> <CTabPane visible={activeTab === 1}>
<p>Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia <p>
dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur
anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore
reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.</p> sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt
laboris deserunt anim aute dolor incididunt veniam aute dolore do
exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris
ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt
veniam ad.
</p>
</CTabPane> </CTabPane>
<CTabPane visible={activeTab === 2}> <CTabPane visible={activeTab === 2}>
<p>Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris <p>
nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo
est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet
deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla cupidatat cupidatat anim do ut velit mollit consequat enim tempor.
laborum elit adipisicing pariatur cillum.</p> Consectetur est minim nostrud nostrud consectetur irure labore voluptate
irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et
deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod
aliquip nulla laborum elit adipisicing pariatur cillum.
</p>
</CTabPane> </CTabPane>
<CTabPane visible={activeTab === 3}> <CTabPane visible={activeTab === 3}>
<p>Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna <p>
sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore Irure enim occaecat labore sit qui aliquip reprehenderit amet velit.
aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat
nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua
eiusmod eu pariatur culpa mollit in irure.</p> labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation
irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet
qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt
dolor eiusmod eu pariatur culpa mollit in irure.
</p>
</CTabPane> </CTabPane>
</CTabContent> </CTabContent>
</CCol> </CCol>

98
src/views/base/navbars/Navbars.js
View File

@ -31,14 +31,12 @@ const CNavbars = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
CNavbar CNavbar
<DocsLink name="CNavbar"/> <DocsLink name="CNavbar" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CNavbar expandable="sm" color="info" > <CNavbar expandable="sm" color="info">
<CNavbarToggler onClick={() => setVisible(!visible)} /> <CNavbarToggler onClick={() => setVisible(!visible)} />
<CNavbarBrand> <CNavbarBrand>NavbarBrand</CNavbarBrand>
NavbarBrand
</CNavbarBrand>
<CCollapse show={visible} navbar> <CCollapse show={visible} navbar>
<CNavbarNav> <CNavbarNav>
<CNavLink>Home</CNavLink> <CNavLink>Home</CNavLink>
@ -46,19 +44,13 @@ const CNavbars = () => {
</CNavbarNav> </CNavbarNav>
<CNavbarNav className="ms-auto"> <CNavbarNav className="ms-auto">
<CForm className="d-flex"> <CForm className="d-flex">
<CFormControl <CFormControl className="me-sm-2" placeholder="Search" size="sm" />
className="me-sm-2" <CButton color="light" className="my-2 my-sm-0" type="submit">
placeholder="Search" Search
size="sm" </CButton>
/>
<CButton color="light" className="my-2 my-sm-0" type="submit">Search</CButton>
</CForm> </CForm>
<CDropdown <CDropdown inNav>
inNav <CDropdownToggle color="primary">Lang</CDropdownToggle>
>
<CDropdownToggle color="primary">
Lang
</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem>EN</CDropdownItem> <CDropdownItem>EN</CDropdownItem>
<CDropdownItem>ES</CDropdownItem> <CDropdownItem>ES</CDropdownItem>
@ -66,12 +58,8 @@ const CNavbars = () => {
<CDropdownItem>FA</CDropdownItem> <CDropdownItem>FA</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<CDropdown <CDropdown inNav>
inNav <CDropdownToggle color="primary">User</CDropdownToggle>
>
<CDropdownToggle color="primary">
User
</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem>Account</CDropdownItem> <CDropdownItem>Account</CDropdownItem>
<CDropdownItem>Settings</CDropdownItem> <CDropdownItem>Settings</CDropdownItem>
@ -84,9 +72,7 @@ const CNavbars = () => {
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>CNavbar brand</CCardHeader>
CNavbar brand
</CCardHeader>
<CCardBody> <CCardBody>
<CNavbar color="faded" light> <CNavbar color="faded" light>
<CNavbarBrand> <CNavbarBrand>
@ -102,14 +88,14 @@ const CNavbars = () => {
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>CNavbar text</CCardHeader>
CNavbar text
</CCardHeader>
<CCardBody> <CCardBody>
<CNavbar toggleable="sm" light color="light"> <CNavbar toggleable="sm" light color="light">
<CNavbarToggler <CNavbarToggler
inNavbar inNavbar
onClick={()=>{ setNavbarText(!navbarText)}} onClick={() => {
setNavbarText(!navbarText)
}}
/> />
<CNavbarBrand>NavbarBrand</CNavbarBrand> <CNavbarBrand>NavbarBrand</CNavbarBrand>
<CCollapse show={navbarText}> <CCollapse show={navbarText}>
@ -122,22 +108,21 @@ const CNavbars = () => {
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>CNavbar dropdown</CCardHeader>
CNavbar dropdown
</CCardHeader>
<CCardBody> <CCardBody>
<CNavbar expandable="false" color="primary" > <CNavbar expandable="false" color="primary">
<CNavbarToggler inNavbar onClick={()=>{setIsOpenDropdown(!isOpenDropdown)}} /> <CNavbarToggler
inNavbar
onClick={() => {
setIsOpenDropdown(!isOpenDropdown)
}}
/>
<CCollapse show={isOpenDropdown} navbar> <CCollapse show={isOpenDropdown} navbar>
<CNavbarNav> <CNavbarNav>
<CNavLink>Home</CNavLink> <CNavLink>Home</CNavLink>
<CNavLink>Link</CNavLink> <CNavLink>Link</CNavLink>
<CDropdown <CDropdown inNav>
inNav <CDropdownToggle color="primary">Lang</CDropdownToggle>
>
<CDropdownToggle color="primary">
Lang
</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem>EN</CDropdownItem> <CDropdownItem>EN</CDropdownItem>
<CDropdownItem>ES</CDropdownItem> <CDropdownItem>ES</CDropdownItem>
@ -145,12 +130,8 @@ const CNavbars = () => {
<CDropdownItem>FA</CDropdownItem> <CDropdownItem>FA</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<CDropdown <CDropdown inNav>
inNav <CDropdownToggle color="primary">User</CDropdownToggle>
>
<CDropdownToggle color="primary">
User
</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem>Account</CDropdownItem> <CDropdownItem>Account</CDropdownItem>
<CDropdownItem>Settings</CDropdownItem> <CDropdownItem>Settings</CDropdownItem>
@ -163,34 +144,25 @@ const CNavbars = () => {
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>CNavbar form</CCardHeader>
CNavbar form
</CCardHeader>
<CCardBody> <CCardBody>
<CNavbar light color="light"> <CNavbar light color="light">
<CForm className="d-flex"> <CForm className="d-flex">
<CFormControl <CFormControl className="me-sm-2" placeholder="Search" size="sm" />
className="me-sm-2" <CButton color="outline-success" className="my-2 my-sm-0" type="submit">
placeholder="Search" Search
size="sm" </CButton>
/>
<CButton color="outline-success" className="my-2 my-sm-0" type="submit">Search</CButton>
</CForm> </CForm>
</CNavbar> </CNavbar>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>CNavbar input group</CCardHeader>
CNavbar input group
</CCardHeader>
<CCardBody> <CCardBody>
<CNavbar light color="light"> <CNavbar light color="light">
<CForm className="d-flex"> <CForm className="d-flex">
<CFormControl <CFormControl className="me-sm-2" placeholder="Username" />
className="me-sm-2"
placeholder="Username"
/>
</CForm> </CForm>
</CNavbar> </CNavbar>
</CCardBody> </CCardBody>

42
src/views/base/navs/Navs.js
View File

@ -11,7 +11,7 @@ import {
CDropdownToggle, CDropdownToggle,
CNav, CNav,
CNavItem, CNavItem,
CNavLink CNavLink,
} from '@coreui/react-ts' } from '@coreui/react-ts'
import { DocsLink } from 'src/reusable' import { DocsLink } from 'src/reusable'
@ -23,7 +23,7 @@ const Navs = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Navs Navs
<DocsLink name="CNav"/> <DocsLink name="CNav" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<small>List Based</small> <small>List Based</small>
@ -175,10 +175,14 @@ const Navs = () => {
<hr /> <hr />
<CNav fill variant="pills"> <CNav fill variant="pills">
<CNavLink active className="nav-item">Active</CNavLink> <CNavLink active className="nav-item">
Active
</CNavLink>
<CNavLink className="nav-item">Link</CNavLink> <CNavLink className="nav-item">Link</CNavLink>
<CNavLink className="nav-item">Link</CNavLink> <CNavLink className="nav-item">Link</CNavLink>
<CNavLink className="nav-item" disabled>Disabled</CNavLink> <CNavLink className="nav-item" disabled>
Disabled
</CNavLink>
</CNav> </CNav>
<hr /> <hr />
@ -201,12 +205,15 @@ const Navs = () => {
<hr /> <hr />
<CNav justified variant="pills"> <CNav justified variant="pills">
<CNavLink className="nav-item" active>Active</CNavLink> <CNavLink className="nav-item" active>
Active
</CNavLink>
<CNavLink className="nav-item">Link</CNavLink> <CNavLink className="nav-item">Link</CNavLink>
<CNavLink className="nav-item">Link</CNavLink> <CNavLink className="nav-item">Link</CNavLink>
<CNavLink className="nav-item" disabled>Disabled</CNavLink> <CNavLink className="nav-item" disabled>
Disabled
</CNavLink>
</CNav> </CNav>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -221,10 +228,14 @@ const Navs = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CNav variant="pills" className="flex-sm-row"> <CNav variant="pills" className="flex-sm-row">
<CNavLink className="flex-sm-fill text-sm-center" active>Active</CNavLink> <CNavLink className="flex-sm-fill text-sm-center" active>
<CNavLink className="flex-sm-fill text-sm-center">Link</CNavLink> Active
<CNavLink className="flex-sm-fill text-sm-center">Link</CNavLink> </CNavLink>
<CNavLink className="flex-sm-fill text-sm-center" disabled>Disabled</CNavLink> <CNavLink className="flex-sm-fill text-sm-center">Link</CNavLink>
<CNavLink className="flex-sm-fill text-sm-center">Link</CNavLink>
<CNavLink className="flex-sm-fill text-sm-center" disabled>
Disabled
</CNavLink>
</CNav> </CNav>
</CCardBody> </CCardBody>
</CCard> </CCard>
@ -232,7 +243,6 @@ const Navs = () => {
</CRow> </CRow>
<CRow> <CRow>
<CCol xs="6"> <CCol xs="6">
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -245,9 +255,7 @@ const Navs = () => {
<CNavLink active>Link</CNavLink> <CNavLink active>Link</CNavLink>
</CNavItem> </CNavItem>
<CDropdown variant="nav-item"> <CDropdown variant="nav-item">
<CDropdownToggle> <CDropdownToggle>Dropdown</CDropdownToggle>
Dropdown
</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
@ -279,9 +287,7 @@ const Navs = () => {
<CNavLink active>Link</CNavLink> <CNavLink active>Link</CNavLink>
</CNavItem> </CNavItem>
<CDropdown variant="nav-item"> <CDropdown variant="nav-item">
<CDropdownToggle> <CDropdownToggle>Dropdown</CDropdownToggle>
Dropdown
</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>

17
src/views/base/paginations/Pagnations.js
View File

@ -1,14 +1,7 @@
import React, { useState } from 'react' import React, { useState } from 'react'
import { import { CCard, CCardBody, CCardHeader, CPagination, CPaginationItem } from '@coreui/react-ts'
CCard,
CCardBody,
CCardHeader,
CPagination,
CPaginationItem
} from '@coreui/react-ts'
import { DocsLink } from 'src/reusable' import { DocsLink } from 'src/reusable'
const Paginations = () => { const Paginations = () => {
const [currentPage, setCurrentPage] = useState(2) const [currentPage, setCurrentPage] = useState(2)
@ -17,7 +10,7 @@ const Paginations = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Pagination Pagination
<DocsLink name="CPagination"/> <DocsLink name="CPagination" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h6>Default</h6> <h6>Default</h6>
@ -60,11 +53,7 @@ const Paginations = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h6>Left alignment (default)</h6> <h6>Left alignment (default)</h6>
<CPagination <CPagination activePage={currentPage} pages={10} onActivePageChange={setCurrentPage} />
activePage={currentPage}
pages={10}
onActivePageChange={setCurrentPage}
/>
<br></br> <br></br>
<h6>Center alignment</h6> <h6>Center alignment</h6>

68
src/views/base/popovers/Popovers.js
View File

@ -13,10 +13,18 @@ import { DocsLink } from 'src/reusable'
const Popovers = () => { const Popovers = () => {
const placements = [ const placements = [
'top-start', 'top', 'top-end', 'top-start',
'bottom-start', 'bottom', 'bottom-end', 'top',
'right-start', 'right', 'right-end', 'top-end',
'left-start', 'left', 'left-end' 'bottom-start',
'bottom',
'bottom-end',
'right-start',
'right',
'right-end',
'left-start',
'left',
'left-end',
] ]
return ( return (
@ -24,31 +32,27 @@ const Popovers = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Popovers Popovers
<DocsLink name="CPopover"/> <DocsLink name="CPopover" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
{/*eslint-disable-next-line*/} {/*eslint-disable-next-line*/}
<p className="text-muted"> <p className="text-muted">Hover over the links below to see popover:</p>
Hover over the links below to see popover:
</p>
<p className="muted"> <p className="muted">
Tight pants next level keffiyeh Tight pants next level keffiyeh
<CPopover title="Popover header" content="Popover text"> <CPopover title="Popover header" content="Popover text">
<CLink> you probably </CLink> <CLink> you probably </CLink>
</CPopover> </CPopover>
haven't heard of them. haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag
Photo booth beard raw denim letterpress vegan messenger stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american
bag stumptown. Farm-to-table seitan, mcsweeney's fixie apparel
sustainable quinoa 8-bit american apparel
<CPopover title="Popover header" content="Popover text"> <CPopover title="Popover header" content="Popover text">
<CLink> have a </CLink> <CLink> have a </CLink>
</CPopover> </CPopover>
terry richardson vinyl chambray. Beard stumptown, terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats.
cardigans banh mi lomo thundercats. Tofu biodiesel Tofu biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan chambray. A
williamsburg marfa, four loko mcsweeney''s cleanse really ironic artisan
vegan chambray. A really ironic artisan
<CPopover title="Popover header" content="Popover text"> <CPopover title="Popover header" content="Popover text">
<CLink> whatever keytar </CLink> <CLink> whatever keytar </CLink>
</CPopover> </CPopover>
@ -56,13 +60,12 @@ const Popovers = () => {
<CPopover title="Popover header" content="Popover text"> <CPopover title="Popover header" content="Popover text">
<CLink> twitter handle </CLink> <CLink> twitter handle </CLink>
</CPopover> </CPopover>
freegan cred raw denim single-origin coffee viral. freegan cred raw denim single-origin coffee viral.
</p> </p>
</CCardBody> </CCardBody>
</CCard> </CCard>
<hr/> <hr />
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -72,22 +75,19 @@ const Popovers = () => {
<CCardBody> <CCardBody>
<div className="my-3"> <div className="my-3">
<CRow> <CRow>
{placements.map(placement => { {placements.map((placement) => {
return (<CCol return (
md="4" <CCol md="4" className="py-4 text-center" key={placement}>
className="py-4 text-center" <CPopover
key={placement} title="Popover header"
> content={`Popover with placement: ${placement}`}
<CPopover title="Popover header" placement={placement}
content={`Popover with placement: ${placement}`} trigger="click"
placement={placement} >
trigger="click" <CButton color="primary">{placement}</CButton>
> </CPopover>
<CButton color="primary"> </CCol>
{ placement } )
</CButton>
</CPopover>
</CCol>)
})} })}
</CRow> </CRow>
</div> </div>

26
src/views/base/progress-bar/ProgressBar.js
View File

@ -1,11 +1,5 @@
import React from 'react' import React from 'react'
import { import { CCard, CCardBody, CCardHeader, CProgress, CProgressBar } from '@coreui/react-ts'
CCard,
CCardBody,
CCardHeader,
CProgress,
CProgressBar
} from '@coreui/react-ts'
import { DocsLink } from 'src/reusable' import { DocsLink } from 'src/reusable'
const ProgressBar = () => { const ProgressBar = () => {
@ -14,7 +8,7 @@ const ProgressBar = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Progress Progress
<DocsLink name="CProgressBar"/> <DocsLink name="CProgressBar" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CProgress className="mb-3" /> <CProgress className="mb-3" />
@ -30,9 +24,9 @@ const ProgressBar = () => {
<small> labels</small> <small> labels</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CProgress value={25.3746472} className="mb-3"/> <CProgress value={25.3746472} className="mb-3" />
<CProgress value={50.45} className="mb-3"/> <CProgress value={50.45} className="mb-3" />
<CProgress value={15} max={20} className="mb-3"/> <CProgress value={15} max={20} className="mb-3" />
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
@ -41,8 +35,8 @@ const ProgressBar = () => {
<small> heights</small> <small> heights</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CProgress value={25} className="mb-3" height="3"/> <CProgress value={25} className="mb-3" height="3" />
<CProgress value={25} className="mb-3" height="30"/> <CProgress value={25} className="mb-3" height="30" />
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
@ -64,9 +58,9 @@ const ProgressBar = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CProgress size="xs"> <CProgress size="xs">
<CProgressBar value={10}/> <CProgressBar value={10} />
<CProgressBar color="success" value={30}/> <CProgressBar color="success" value={30} />
<CProgressBar color="danger" value={20}/> <CProgressBar color="danger" value={20} />
</CProgress> </CProgress>
</CCardBody> </CCardBody>
</CCard> </CCard>

120
src/views/base/tables/Tables.js
View File

@ -23,7 +23,7 @@ const Tables = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Simple Table Simple Table
<DocsLink name="CModal"/> <DocsLink name="CModal" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CTable responsive="sm"> <CTable responsive="sm">
@ -40,31 +40,41 @@ const Tables = () => {
<CTableDataCell>Samppa Nori</CTableDataCell> <CTableDataCell>Samppa Nori</CTableDataCell>
<CTableDataCell>2012/01/01</CTableDataCell> <CTableDataCell>2012/01/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell> <CTableDataCell>Member</CTableDataCell>
<CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="success">Active</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell>Estavan Lykos</CTableDataCell> <CTableDataCell>Estavan Lykos</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell> <CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell> <CTableDataCell>Staff</CTableDataCell>
<CTableDataCell><CBadge color="danger">Banned</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="danger">Banned</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell>Chetan Mohamed</CTableDataCell> <CTableDataCell>Chetan Mohamed</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell> <CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Admin</CTableDataCell> <CTableDataCell>Admin</CTableDataCell>
<CTableDataCell><CBadge color="secondary">Inactive</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="secondary">Inactive</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell>Derick Maximinus</CTableDataCell> <CTableDataCell>Derick Maximinus</CTableDataCell>
<CTableDataCell>2012/03/01</CTableDataCell> <CTableDataCell>2012/03/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell> <CTableDataCell>Member</CTableDataCell>
<CTableDataCell><CBadge color="warning">Pending</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="warning">Pending</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell>Friderik Dávid</CTableDataCell> <CTableDataCell>Friderik Dávid</CTableDataCell>
<CTableDataCell>2012/01/21</CTableDataCell> <CTableDataCell>2012/01/21</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell> <CTableDataCell>Staff</CTableDataCell>
<CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="success">Active</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
@ -74,9 +84,7 @@ const Tables = () => {
<CCol xs="12" lg="6"> <CCol xs="12" lg="6">
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Striped Table</CCardHeader>
Striped Table
</CCardHeader>
<CCardBody> <CCardBody>
<CTable responsive="sm" striped> <CTable responsive="sm" striped>
<CTableHead> <CTableHead>
@ -92,31 +100,41 @@ const Tables = () => {
<CTableDataCell>Yiorgos Avraamu</CTableDataCell> <CTableDataCell>Yiorgos Avraamu</CTableDataCell>
<CTableDataCell>2012/01/01</CTableDataCell> <CTableDataCell>2012/01/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell> <CTableDataCell>Member</CTableDataCell>
<CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="success">Active</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell>Avram Tarasios</CTableDataCell> <CTableDataCell>Avram Tarasios</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell> <CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell> <CTableDataCell>Staff</CTableDataCell>
<CTableDataCell><CBadge color="danger">Banned</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="danger">Banned</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell>Quintin Ed</CTableDataCell> <CTableDataCell>Quintin Ed</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell> <CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Admin</CTableDataCell> <CTableDataCell>Admin</CTableDataCell>
<CTableDataCell><CBadge color="secondary">Inactive</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="secondary">Inactive</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell>Enéas Kwadwo</CTableDataCell> <CTableDataCell>Enéas Kwadwo</CTableDataCell>
<CTableDataCell>2012/03/01</CTableDataCell> <CTableDataCell>2012/03/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell> <CTableDataCell>Member</CTableDataCell>
<CTableDataCell><CBadge color="warning">Pending</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="warning">Pending</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell>Agapetus Tadeáš</CTableDataCell> <CTableDataCell>Agapetus Tadeáš</CTableDataCell>
<CTableDataCell>2012/01/21</CTableDataCell> <CTableDataCell>2012/01/21</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell> <CTableDataCell>Staff</CTableDataCell>
<CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="success">Active</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
@ -126,12 +144,9 @@ const Tables = () => {
</CRow> </CRow>
<CRow> <CRow>
<CCol xs="12" lg="6"> <CCol xs="12" lg="6">
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Condensed Table</CCardHeader>
Condensed Table
</CCardHeader>
<CCardBody> <CCardBody>
<CTable responsive="sm" small> <CTable responsive="sm" small>
<CTableHead> <CTableHead>
@ -147,31 +162,41 @@ const Tables = () => {
<CTableDataCell>Carwyn Fachtna</CTableDataCell> <CTableDataCell>Carwyn Fachtna</CTableDataCell>
<CTableDataCell>2012/01/01</CTableDataCell> <CTableDataCell>2012/01/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell> <CTableDataCell>Member</CTableDataCell>
<CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="success">Active</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell>Nehemiah Tatius</CTableDataCell> <CTableDataCell>Nehemiah Tatius</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell> <CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell> <CTableDataCell>Staff</CTableDataCell>
<CTableDataCell><CBadge color="danger">Banned</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="danger">Banned</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell>Ebbe Gemariah</CTableDataCell> <CTableDataCell>Ebbe Gemariah</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell> <CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Admin</CTableDataCell> <CTableDataCell>Admin</CTableDataCell>
<CTableDataCell><CBadge color="secondary">Inactive</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="secondary">Inactive</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell>Eustorgios Amulius</CTableDataCell> <CTableDataCell>Eustorgios Amulius</CTableDataCell>
<CTableDataCell>2012/03/01</CTableDataCell> <CTableDataCell>2012/03/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell> <CTableDataCell>Member</CTableDataCell>
<CTableDataCell><CBadge color="warning">Pending</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="warning">Pending</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell>Leopold Gáspár</CTableDataCell> <CTableDataCell>Leopold Gáspár</CTableDataCell>
<CTableDataCell>2012/01/21</CTableDataCell> <CTableDataCell>2012/01/21</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell> <CTableDataCell>Staff</CTableDataCell>
<CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="success">Active</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
@ -181,9 +206,7 @@ const Tables = () => {
<CCol xs="12" lg="6"> <CCol xs="12" lg="6">
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Bordered Table</CCardHeader>
Bordered Table
</CCardHeader>
<CCardBody> <CCardBody>
<CTable responsive="sm" bordered> <CTable responsive="sm" bordered>
<CTableHead> <CTableHead>
@ -199,46 +222,53 @@ const Tables = () => {
<CTableDataCell>Pompeius René</CTableDataCell> <CTableDataCell>Pompeius René</CTableDataCell>
<CTableDataCell>2012/01/01</CTableDataCell> <CTableDataCell>2012/01/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell> <CTableDataCell>Member</CTableDataCell>
<CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="success">Active</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell>Paĉjo Jadon</CTableDataCell> <CTableDataCell>Paĉjo Jadon</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell> <CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell> <CTableDataCell>Staff</CTableDataCell>
<CTableDataCell><CBadge color="danger">Banned</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="danger">Banned</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell>Micheal Mercurius</CTableDataCell> <CTableDataCell>Micheal Mercurius</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell> <CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Admin</CTableDataCell> <CTableDataCell>Admin</CTableDataCell>
<CTableDataCell><CBadge color="secondary">Inactive</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="secondary">Inactive</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell>Ganesha Dubhghall</CTableDataCell> <CTableDataCell>Ganesha Dubhghall</CTableDataCell>
<CTableDataCell>2012/03/01</CTableDataCell> <CTableDataCell>2012/03/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell> <CTableDataCell>Member</CTableDataCell>
<CTableDataCell><CBadge color="warning">Pending</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="warning">Pending</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell>Hiroto Šimun</CTableDataCell> <CTableDataCell>Hiroto Šimun</CTableDataCell>
<CTableDataCell>2012/01/21</CTableDataCell> <CTableDataCell>2012/01/21</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell> <CTableDataCell>Staff</CTableDataCell>
<CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="success">Active</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol xs> <CCol xs>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Combined All Table</CCardHeader>
Combined All Table
</CCardHeader>
<CCardBody> <CCardBody>
<CTable responsive="sm" bordered striped small> <CTable responsive="sm" bordered striped small>
<CTableHead> <CTableHead>
@ -254,31 +284,41 @@ const Tables = () => {
<CTableDataCell>Vishnu Serghei</CTableDataCell> <CTableDataCell>Vishnu Serghei</CTableDataCell>
<CTableDataCell>2012/01/01</CTableDataCell> <CTableDataCell>2012/01/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell> <CTableDataCell>Member</CTableDataCell>
<CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="success">Active</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell>Zbyněk Phoibos</CTableDataCell> <CTableDataCell>Zbyněk Phoibos</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell> <CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell> <CTableDataCell>Staff</CTableDataCell>
<CTableDataCell><CBadge color="danger">Banned</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="danger">Banned</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell>Einar Randall</CTableDataCell> <CTableDataCell>Einar Randall</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell> <CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Admin</CTableDataCell> <CTableDataCell>Admin</CTableDataCell>
<CTableDataCell><CBadge color="secondary">Inactive</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="secondary">Inactive</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell>Félix Troels</CTableDataCell> <CTableDataCell>Félix Troels</CTableDataCell>
<CTableDataCell>2012/03/01</CTableDataCell> <CTableDataCell>2012/03/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell> <CTableDataCell>Member</CTableDataCell>
<CTableDataCell><CBadge color="warning">Pending</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="warning">Pending</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell>Aulus Agmundr</CTableDataCell> <CTableDataCell>Aulus Agmundr</CTableDataCell>
<CTableDataCell>2012/01/21</CTableDataCell> <CTableDataCell>2012/01/21</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell> <CTableDataCell>Staff</CTableDataCell>
<CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell> <CTableDataCell>
<CBadge color="success">Active</CBadge>
</CTableDataCell>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>

28
src/views/base/tabs/Tabs.js
View File

@ -1,4 +1,4 @@
import React, { useState } from "react"; import React, { useState } from 'react'
import { import {
CCol, CCol,
CNav, CNav,
@ -10,15 +10,13 @@ import {
CCard, CCard,
CCardBody, CCardBody,
CCardHeader, CCardHeader,
} from "@coreui/react-ts"; } from '@coreui/react-ts'
import CIcon from "@coreui/icons-react"; import { DocsLink } from 'src/reusable'
import { DocsLink } from "src/reusable";
const Tabs = () => { const Tabs = () => {
const [activeKey, setActiveKey] = useState(1) const [activeKey, setActiveKey] = useState(1)
const [active, setActive] = useState(1);
const lorem = const lorem =
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit."; 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.'
return ( return (
<CRow> <CRow>
@ -31,13 +29,19 @@ const Tabs = () => {
<CCardBody> <CCardBody>
<CNav variant="tabs"> <CNav variant="tabs">
<CNavItem> <CNavItem>
<CNavLink active={activeKey === 1} onClick={() => setActiveKey(1)}>Home</CNavLink> <CNavLink active={activeKey === 1} onClick={() => setActiveKey(1)}>
Home
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink active={activeKey === 2} onClick={() => setActiveKey(2)}>Profile</CNavLink> <CNavLink active={activeKey === 2} onClick={() => setActiveKey(2)}>
Profile
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink active={activeKey === 3} onClick={() => setActiveKey(3)}>Messages</CNavLink> <CNavLink active={activeKey === 3} onClick={() => setActiveKey(3)}>
Messages
</CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
<CTabContent> <CTabContent>
@ -144,7 +148,7 @@ const Tabs = () => {
</CCard> </CCard>
</CCol> */} </CCol> */}
</CRow> </CRow>
); )
}; }
export default Tabs; export default Tabs

70
src/views/base/tooltips/Tooltips.js
View File

@ -13,10 +13,18 @@ import { DocsLink } from 'src/reusable'
const Tooltips = () => { const Tooltips = () => {
const placements = [ const placements = [
'top-start', 'top', 'top-end', 'top-start',
'bottom-start', 'bottom', 'bottom-end', 'top',
'right-start', 'right', 'right-end', 'top-end',
'left-start', 'left', 'left-end' 'bottom-start',
'bottom',
'bottom-end',
'right-start',
'right',
'right-end',
'left-start',
'left',
'left-end',
] ]
return ( return (
@ -24,31 +32,24 @@ const Tooltips = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Tooltips Tooltips
<DocsLink name="CTooltip"/> <DocsLink name="CTooltip" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
{/*eslint-disable-next-line*/} <p className="text-muted">Hover over the links below to see tooltips:</p>
<p className="text-muted">
Hover over the links below to see tooltips:
</p>
<p className="muted"> <p className="muted">
Tight pants next level keffiyeh Tight pants next level keffiyeh
<CTooltip content="Tooltip text"> <CTooltip content="Tooltip text">
<CLink> you probably </CLink> <CLink> you probably </CLink>
</CTooltip> </CTooltip>
haven't heard of them. haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag
Photo booth beard raw denim letterpress vegan messenger stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american
bag stumptown. Farm-to-table seitan, mcsweeney's fixie apparel
sustainable quinoa 8-bit american apparel
<CTooltip content="Tooltip text"> <CTooltip content="Tooltip text">
<CLink> have a </CLink> <CLink> have a </CLink>
</CTooltip> </CTooltip>
terry richardson vinyl chambray. Beard stumptown, terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats.
cardigans banh mi lomo thundercats. Tofu biodiesel Tofu biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan chambray. A
williamsburg marfa, four loko mcsweeney''s cleanse really ironic artisan
vegan chambray. A really ironic artisan
<CTooltip content="Tooltip text"> <CTooltip content="Tooltip text">
<CLink> whatever keytar </CLink> <CLink> whatever keytar </CLink>
</CTooltip> </CTooltip>
@ -56,13 +57,12 @@ const Tooltips = () => {
<CTooltip content="Tooltip text"> <CTooltip content="Tooltip text">
<CLink> twitter handle </CLink> <CLink> twitter handle </CLink>
</CTooltip> </CTooltip>
freegan cred raw denim single-origin coffee viral. freegan cred raw denim single-origin coffee viral.
</p> </p>
</CCardBody> </CCardBody>
</CCard> </CCard>
<hr/> <hr />
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -72,21 +72,17 @@ const Tooltips = () => {
<CCardBody> <CCardBody>
<div className="my-3"> <div className="my-3">
<CRow> <CRow>
{placements.map(placement => { {placements.map((placement) => {
return (<CCol return (
md="4" <CCol md="4" className="py-4 text-center" key={placement}>
className="py-4 text-center" <CTooltip
key={placement} content={`Tooltip with placement: ${placement}`}
> placement={placement}
<CTooltip >
content={`Tooltip with placement: ${placement}`} <CButton color="primary">{placement}</CButton>
placement={placement} </CTooltip>
> </CCol>
<CButton color="primary"> )
{ placement }
</CButton>
</CTooltip>
</CCol>)
})} })}
</CRow> </CRow>
</div> </div>
@ -96,4 +92,4 @@ const Tooltips = () => {
) )
} }
export default Tooltips; export default Tooltips

504
src/views/buttons/brand-buttons/BrandButtons.js
View File

@ -1,12 +1,5 @@
import React from 'react' import React from 'react'
import { import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react-ts'
CButton,
CCard,
CCardBody,
CCardHeader,
CCol,
CRow
} from '@coreui/react-ts'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
const BrandButtons = () => { const BrandButtons = () => {
@ -14,73 +7,232 @@ const BrandButtons = () => {
<CRow> <CRow>
<CCol xs="12"> <CCol xs="12">
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Brand button</CCardHeader>
Brand button
</CCardHeader>
<CCardBody> <CCardBody>
<h6>Size Small <h6>
<small> <code>size="sm"</code></small> Size Small
<small>
{' '}
<code>size="sm"</code>
</small>
</h6> </h6>
<p> <p>
<CButton size="sm" className="btn-facebook btn-brand me-1 mb-1"><CIcon size="sm" name="cib-facebook" /><span className="ms-2">Facebook</span></CButton> <CButton size="sm" className="btn-facebook btn-brand me-1 mb-1">
<CButton size="sm" className="btn-twitter btn-brand me-1 mb-1"><CIcon size="sm" name="cib-twitter" /><span className="ms-2">Twitter</span></CButton> <CIcon size="sm" name="cib-facebook" />
<CButton size="sm" className="btn-linkedin btn-brand me-1 mb-1"><CIcon size="sm" name="cib-linkedin" /><span className="ms-2">LinkedIn</span></CButton> <span className="ms-2">Facebook</span>
<CButton size="sm" className="btn-flickr btn-brand me-1 mb-1"><CIcon size="sm" name="cib-flickr" /><span className="ms-2">Flickr</span></CButton> </CButton>
<CButton size="sm" className="btn-tumblr btn-brand me-1 mb-1"><CIcon size="sm" name="cib-tumblr" /><span className="ms-2">Tumblr</span></CButton> <CButton size="sm" className="btn-twitter btn-brand me-1 mb-1">
<CButton size="sm" className="btn-xing btn-brand me-1 mb-1"><CIcon size="sm" name="cib-xing" /><span className="ms-2">Xing</span></CButton> <CIcon size="sm" name="cib-twitter" />
<CButton size="sm" className="btn-github btn-brand me-1 mb-1"><CIcon size="sm" name="cib-github" /><span className="ms-2">Github</span></CButton> <span className="ms-2">Twitter</span>
<CButton size="sm" className="btn-stack-overflow btn-brand me-1 mb-1"><CIcon size="sm" name="cib-stackoverflow" /><span className="ms-2">StackOverflow</span></CButton> </CButton>
<CButton size="sm" className="btn-youtube btn-brand me-1 mb-1"><CIcon size="sm" name="cib-youtube" /><span className="ms-2">YouTube</span></CButton> <CButton size="sm" className="btn-linkedin btn-brand me-1 mb-1">
<CButton size="sm" className="btn-dribbble btn-brand me-1 mb-1"><CIcon size="sm" name="cib-dribbble" /><span className="ms-2">Dribbble</span></CButton> <CIcon size="sm" name="cib-linkedin" />
<CButton size="sm" className="btn-instagram btn-brand me-1 mb-1"><CIcon size="sm" name="cib-instagram" /><span className="ms-2">Instagram</span></CButton> <span className="ms-2">LinkedIn</span>
<CButton size="sm" className="btn-pinterest btn-brand me-1 mb-1"><CIcon size="sm" name="cib-pinterest" /><span className="ms-2">Pinterest</span></CButton> </CButton>
<CButton size="sm" className="btn-vk btn-brand me-1 mb-1"><CIcon size="sm" name="cib-vk" /><span className="ms-2">VK</span></CButton> <CButton size="sm" className="btn-flickr btn-brand me-1 mb-1">
<CButton size="sm" className="btn-yahoo btn-brand me-1 mb-1"><CIcon size="sm" name="cib-yahoo" /><span className="ms-2">Yahoo</span></CButton> <CIcon size="sm" name="cib-flickr" />
<CButton size="sm" className="btn-behance btn-brand me-1 mb-1"><CIcon size="sm" name="cib-behance" /><span className="ms-2">Behance</span></CButton> <span className="ms-2">Flickr</span>
<CButton size="sm" className="btn-reddit btn-brand me-1 mb-1"><CIcon size="sm" name="cib-reddit" /><span className="ms-2">Reddit</span></CButton> </CButton>
<CButton size="sm" className="btn-vimeo btn-brand me-1 mb-1"><CIcon size="sm" name="cib-vimeo" /><span className="ms-2">Vimeo</span></CButton> <CButton size="sm" className="btn-tumblr btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-tumblr" />
<span className="ms-2">Tumblr</span>
</CButton>
<CButton size="sm" className="btn-xing btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-xing" />
<span className="ms-2">Xing</span>
</CButton>
<CButton size="sm" className="btn-github btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-github" />
<span className="ms-2">Github</span>
</CButton>
<CButton size="sm" className="btn-stack-overflow btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-stackoverflow" />
<span className="ms-2">StackOverflow</span>
</CButton>
<CButton size="sm" className="btn-youtube btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-youtube" />
<span className="ms-2">YouTube</span>
</CButton>
<CButton size="sm" className="btn-dribbble btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-dribbble" />
<span className="ms-2">Dribbble</span>
</CButton>
<CButton size="sm" className="btn-instagram btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-instagram" />
<span className="ms-2">Instagram</span>
</CButton>
<CButton size="sm" className="btn-pinterest btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-pinterest" />
<span className="ms-2">Pinterest</span>
</CButton>
<CButton size="sm" className="btn-vk btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-vk" />
<span className="ms-2">VK</span>
</CButton>
<CButton size="sm" className="btn-yahoo btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-yahoo" />
<span className="ms-2">Yahoo</span>
</CButton>
<CButton size="sm" className="btn-behance btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-behance" />
<span className="ms-2">Behance</span>
</CButton>
<CButton size="sm" className="btn-reddit btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-reddit" />
<span className="ms-2">Reddit</span>
</CButton>
<CButton size="sm" className="btn-vimeo btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-vimeo" />
<span className="ms-2">Vimeo</span>
</CButton>
</p> </p>
<h6>Size Normal</h6> <h6>Size Normal</h6>
<p> <p>
<CButton className="btn-facebook btn-brand me-1 mb-1"><CIcon name="cib-facebook" /><span className="ms-2">Facebook</span></CButton> <CButton className="btn-facebook btn-brand me-1 mb-1">
<CButton className="btn-twitter btn-brand me-1 mb-1"><CIcon name="cib-twitter" /><span className="ms-2">Twitter</span></CButton> <CIcon name="cib-facebook" />
<CButton className="btn-linkedin btn-brand me-1 mb-1"><CIcon name="cib-linkedin" /><span className="ms-2">LinkedIn</span></CButton> <span className="ms-2">Facebook</span>
<CButton className="btn-flickr btn-brand me-1 mb-1"><CIcon name="cib-flickr" /><span className="ms-2">Flickr</span></CButton> </CButton>
<CButton className="btn-tumblr btn-brand me-1 mb-1"><CIcon name="cib-tumblr" /><span className="ms-2">Tumblr</span></CButton> <CButton className="btn-twitter btn-brand me-1 mb-1">
<CButton className="btn-xing btn-brand me-1 mb-1"><CIcon name="cib-xing" /><span className="ms-2">Xing</span></CButton> <CIcon name="cib-twitter" />
<CButton className="btn-github btn-brand me-1 mb-1"><CIcon name="cib-github" /><span className="ms-2">Github</span></CButton> <span className="ms-2">Twitter</span>
<CButton className="btn-stack-overflow btn-brand me-1 mb-1"><CIcon name="cib-stackoverflow" /><span className="ms-2">StackOverflow</span></CButton> </CButton>
<CButton className="btn-youtube btn-brand me-1 mb-1"><CIcon name="cib-youtube" /><span className="ms-2">YouTube</span></CButton> <CButton className="btn-linkedin btn-brand me-1 mb-1">
<CButton className="btn-dribbble btn-brand me-1 mb-1"><CIcon name="cib-dribbble" /><span className="ms-2">Dribbble</span></CButton> <CIcon name="cib-linkedin" />
<CButton className="btn-instagram btn-brand me-1 mb-1"><CIcon name="cib-instagram" /><span className="ms-2">Instagram</span></CButton> <span className="ms-2">LinkedIn</span>
<CButton className="btn-pinterest btn-brand me-1 mb-1"><CIcon name="cib-pinterest" /><span className="ms-2">Pinterest</span></CButton> </CButton>
<CButton className="btn-vk btn-brand me-1 mb-1"><CIcon name="cib-vk" /><span className="ms-2">VK</span></CButton> <CButton className="btn-flickr btn-brand me-1 mb-1">
<CButton className="btn-yahoo btn-brand me-1 mb-1"><CIcon name="cib-yahoo" /><span className="ms-2">Yahoo</span></CButton> <CIcon name="cib-flickr" />
<CButton className="btn-behance btn-brand me-1 mb-1"><CIcon name="cib-behance" /><span className="ms-2">Behance</span></CButton> <span className="ms-2">Flickr</span>
<CButton className="btn-reddit btn-brand me-1 mb-1"><CIcon name="cib-reddit" /><span className="ms-2">Reddit</span></CButton> </CButton>
<CButton className="btn-vimeo btn-brand me-1 mb-1"><CIcon name="cib-vimeo" /><span className="ms-2">Vimeo</span></CButton> <CButton className="btn-tumblr btn-brand me-1 mb-1">
<CIcon name="cib-tumblr" />
<span className="ms-2">Tumblr</span>
</CButton>
<CButton className="btn-xing btn-brand me-1 mb-1">
<CIcon name="cib-xing" />
<span className="ms-2">Xing</span>
</CButton>
<CButton className="btn-github btn-brand me-1 mb-1">
<CIcon name="cib-github" />
<span className="ms-2">Github</span>
</CButton>
<CButton className="btn-stack-overflow btn-brand me-1 mb-1">
<CIcon name="cib-stackoverflow" />
<span className="ms-2">StackOverflow</span>
</CButton>
<CButton className="btn-youtube btn-brand me-1 mb-1">
<CIcon name="cib-youtube" />
<span className="ms-2">YouTube</span>
</CButton>
<CButton className="btn-dribbble btn-brand me-1 mb-1">
<CIcon name="cib-dribbble" />
<span className="ms-2">Dribbble</span>
</CButton>
<CButton className="btn-instagram btn-brand me-1 mb-1">
<CIcon name="cib-instagram" />
<span className="ms-2">Instagram</span>
</CButton>
<CButton className="btn-pinterest btn-brand me-1 mb-1">
<CIcon name="cib-pinterest" />
<span className="ms-2">Pinterest</span>
</CButton>
<CButton className="btn-vk btn-brand me-1 mb-1">
<CIcon name="cib-vk" />
<span className="ms-2">VK</span>
</CButton>
<CButton className="btn-yahoo btn-brand me-1 mb-1">
<CIcon name="cib-yahoo" />
<span className="ms-2">Yahoo</span>
</CButton>
<CButton className="btn-behance btn-brand me-1 mb-1">
<CIcon name="cib-behance" />
<span className="ms-2">Behance</span>
</CButton>
<CButton className="btn-reddit btn-brand me-1 mb-1">
<CIcon name="cib-reddit" />
<span className="ms-2">Reddit</span>
</CButton>
<CButton className="btn-vimeo btn-brand me-1 mb-1">
<CIcon name="cib-vimeo" />
<span className="ms-2">Vimeo</span>
</CButton>
</p> </p>
<h6>Size Large <h6>
<small> <code>size="lg"</code></small> Size Large
<small>
{' '}
<code>size="lg"</code>
</small>
</h6> </h6>
<p> <p>
<CButton size="lg" className="btn-facebook btn-brand me-1 mb-1"><CIcon size="lg" name="cib-facebook" /><span className="ms-2">Facebook</span></CButton> <CButton size="lg" className="btn-facebook btn-brand me-1 mb-1">
<CButton size="lg" className="btn-twitter btn-brand me-1 mb-1"><CIcon size="lg" name="cib-twitter" /><span className="ms-2">Twitter</span></CButton> <CIcon size="lg" name="cib-facebook" />
<CButton size="lg" className="btn-linkedin btn-brand me-1 mb-1"><CIcon size="lg" name="cib-linkedin" /><span className="ms-2">LinkedIn</span></CButton> <span className="ms-2">Facebook</span>
<CButton size="lg" className="btn-flickr btn-brand me-1 mb-1"><CIcon size="lg" name="cib-flickr" /><span className="ms-2">Flickr</span></CButton> </CButton>
<CButton size="lg" className="btn-tumblr btn-brand me-1 mb-1"><CIcon size="lg" name="cib-tumblr" /><span className="ms-2">Tumblr</span></CButton> <CButton size="lg" className="btn-twitter btn-brand me-1 mb-1">
<CButton size="lg" className="btn-xing btn-brand me-1 mb-1"><CIcon size="lg" name="cib-xing" /><span className="ms-2">Xing</span></CButton> <CIcon size="lg" name="cib-twitter" />
<CButton size="lg" className="btn-github btn-brand me-1 mb-1"><CIcon size="lg" name="cib-github" /><span className="ms-2">Github</span></CButton> <span className="ms-2">Twitter</span>
<CButton size="lg" className="btn-stack-overflow btn-brand me-1 mb-1"><CIcon size="lg" name="cib-stackoverflow" /><span className="ms-2">StackOverflow</span></CButton> </CButton>
<CButton size="lg" className="btn-youtube btn-brand me-1 mb-1"><CIcon size="lg" name="cib-youtube" /><span className="ms-2">YouTube</span></CButton> <CButton size="lg" className="btn-linkedin btn-brand me-1 mb-1">
<CButton size="lg" className="btn-dribbble btn-brand me-1 mb-1"><CIcon size="lg" name="cib-dribbble" /><span className="ms-2">Dribbble</span></CButton> <CIcon size="lg" name="cib-linkedin" />
<CButton size="lg" className="btn-instagram btn-brand me-1 mb-1"><CIcon size="lg" name="cib-instagram" /><span className="ms-2">Instagram</span></CButton> <span className="ms-2">LinkedIn</span>
<CButton size="lg" className="btn-pinterest btn-brand me-1 mb-1"><CIcon size="lg" name="cib-pinterest" /><span className="ms-2">Pinterest</span></CButton> </CButton>
<CButton size="lg" className="btn-vk btn-brand me-1 mb-1"><CIcon size="lg" name="cib-vk" /><span className="ms-2">VK</span></CButton> <CButton size="lg" className="btn-flickr btn-brand me-1 mb-1">
<CButton size="lg" className="btn-yahoo btn-brand me-1 mb-1"><CIcon size="lg" name="cib-yahoo" /><span className="ms-2">Yahoo</span></CButton> <CIcon size="lg" name="cib-flickr" />
<CButton size="lg" className="btn-behance btn-brand me-1 mb-1"><CIcon size="lg" name="cib-behance" /><span className="ms-2">Behance</span></CButton> <span className="ms-2">Flickr</span>
<CButton size="lg" className="btn-reddit btn-brand me-1 mb-1"><CIcon size="lg" name="cib-reddit" /><span className="ms-2">Reddit</span></CButton> </CButton>
<CButton size="lg" className="btn-vimeo btn-brand me-1 mb-1"><CIcon size="lg" name="cib-vimeo" /><span className="ms-2">Vimeo</span></CButton> <CButton size="lg" className="btn-tumblr btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-tumblr" />
<span className="ms-2">Tumblr</span>
</CButton>
<CButton size="lg" className="btn-xing btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-xing" />
<span className="ms-2">Xing</span>
</CButton>
<CButton size="lg" className="btn-github btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-github" />
<span className="ms-2">Github</span>
</CButton>
<CButton size="lg" className="btn-stack-overflow btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-stackoverflow" />
<span className="ms-2">StackOverflow</span>
</CButton>
<CButton size="lg" className="btn-youtube btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-youtube" />
<span className="ms-2">YouTube</span>
</CButton>
<CButton size="lg" className="btn-dribbble btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-dribbble" />
<span className="ms-2">Dribbble</span>
</CButton>
<CButton size="lg" className="btn-instagram btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-instagram" />
<span className="ms-2">Instagram</span>
</CButton>
<CButton size="lg" className="btn-pinterest btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-pinterest" />
<span className="ms-2">Pinterest</span>
</CButton>
<CButton size="lg" className="btn-vk btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-vk" />
<span className="ms-2">VK</span>
</CButton>
<CButton size="lg" className="btn-yahoo btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-yahoo" />
<span className="ms-2">Yahoo</span>
</CButton>
<CButton size="lg" className="btn-behance btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-behance" />
<span className="ms-2">Behance</span>
</CButton>
<CButton size="lg" className="btn-reddit btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-reddit" />
<span className="ms-2">Reddit</span>
</CButton>
<CButton size="lg" className="btn-vimeo btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-vimeo" />
<span className="ms-2">Vimeo</span>
</CButton>
</p> </p>
</CCardBody> </CCardBody>
</CCard> </CCard>
@ -93,69 +245,179 @@ const BrandButtons = () => {
<small> only icons</small> <small> only icons</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h6>Size Small <h6>
<small> <code>size="sm"</code></small> Size Small
<small>
{' '}
<code>size="sm"</code>
</small>
</h6> </h6>
<p> <p>
<CButton size="sm" className="btn-facebook btn-brand me-1 mb-1"><CIcon size="sm" name="cib-facebook" /></CButton> <CButton size="sm" className="btn-facebook btn-brand me-1 mb-1">
<CButton size="sm" className="btn-twitter btn-brand me-1 mb-1"><CIcon size="sm" name="cib-twitter" /></CButton> <CIcon size="sm" name="cib-facebook" />
<CButton size="sm" className="btn-linkedin btn-brand me-1 mb-1"><CIcon size="sm" name="cib-linkedin" /></CButton> </CButton>
<CButton size="sm" className="btn-flickr btn-brand me-1 mb-1"><CIcon size="sm" name="cib-flickr" /></CButton> <CButton size="sm" className="btn-twitter btn-brand me-1 mb-1">
<CButton size="sm" className="btn-tumblr btn-brand me-1 mb-1"><CIcon size="sm" name="cib-tumblr" /></CButton> <CIcon size="sm" name="cib-twitter" />
<CButton size="sm" className="btn-xing btn-brand me-1 mb-1"><CIcon size="sm" name="cib-xing" /></CButton> </CButton>
<CButton size="sm" className="btn-github btn-brand me-1 mb-1"><CIcon size="sm" name="cib-github" /></CButton> <CButton size="sm" className="btn-linkedin btn-brand me-1 mb-1">
<CButton size="sm" className="btn-stack-overflow btn-brand me-1 mb-1"><CIcon size="sm" name="cib-stackoverflow" /></CButton> <CIcon size="sm" name="cib-linkedin" />
<CButton size="sm" className="btn-youtube btn-brand me-1 mb-1"><CIcon size="sm" name="cib-youtube" /></CButton> </CButton>
<CButton size="sm" className="btn-dribbble btn-brand me-1 mb-1"><CIcon size="sm" name="cib-dribbble" /></CButton> <CButton size="sm" className="btn-flickr btn-brand me-1 mb-1">
<CButton size="sm" className="btn-instagram btn-brand me-1 mb-1"><CIcon size="sm" name="cib-instagram" /></CButton> <CIcon size="sm" name="cib-flickr" />
<CButton size="sm" className="btn-pinterest btn-brand me-1 mb-1"><CIcon size="sm" name="cib-pinterest" /></CButton> </CButton>
<CButton size="sm" className="btn-vk btn-brand me-1 mb-1"><CIcon size="sm" name="cib-vk" /></CButton> <CButton size="sm" className="btn-tumblr btn-brand me-1 mb-1">
<CButton size="sm" className="btn-yahoo btn-brand me-1 mb-1"><CIcon size="sm" name="cib-yahoo" /></CButton> <CIcon size="sm" name="cib-tumblr" />
<CButton size="sm" className="btn-behance btn-brand me-1 mb-1"><CIcon size="sm" name="cib-behance" /></CButton> </CButton>
<CButton size="sm" className="btn-reddit btn-brand me-1 mb-1"><CIcon size="sm" name="cib-reddit" /></CButton> <CButton size="sm" className="btn-xing btn-brand me-1 mb-1">
<CButton size="sm" className="btn-vimeo btn-brand me-1 mb-1"><CIcon size="sm" name="cib-vimeo" /></CButton> <CIcon size="sm" name="cib-xing" />
</CButton>
<CButton size="sm" className="btn-github btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-github" />
</CButton>
<CButton size="sm" className="btn-stack-overflow btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-stackoverflow" />
</CButton>
<CButton size="sm" className="btn-youtube btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-youtube" />
</CButton>
<CButton size="sm" className="btn-dribbble btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-dribbble" />
</CButton>
<CButton size="sm" className="btn-instagram btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-instagram" />
</CButton>
<CButton size="sm" className="btn-pinterest btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-pinterest" />
</CButton>
<CButton size="sm" className="btn-vk btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-vk" />
</CButton>
<CButton size="sm" className="btn-yahoo btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-yahoo" />
</CButton>
<CButton size="sm" className="btn-behance btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-behance" />
</CButton>
<CButton size="sm" className="btn-reddit btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-reddit" />
</CButton>
<CButton size="sm" className="btn-vimeo btn-brand me-1 mb-1">
<CIcon size="sm" name="cib-vimeo" />
</CButton>
</p> </p>
<h6>Size Normal</h6> <h6>Size Normal</h6>
<p> <p>
<CButton className="btn-facebook btn-brand me-1 mb-1"><CIcon name="cib-facebook" /></CButton> <CButton className="btn-facebook btn-brand me-1 mb-1">
<CButton className="btn-twitter btn-brand me-1 mb-1"><CIcon name="cib-twitter" /></CButton> <CIcon name="cib-facebook" />
<CButton className="btn-linkedin btn-brand me-1 mb-1"><CIcon name="cib-linkedin" /></CButton> </CButton>
<CButton className="btn-flickr btn-brand me-1 mb-1"><CIcon name="cib-flickr" /></CButton> <CButton className="btn-twitter btn-brand me-1 mb-1">
<CButton className="btn-tumblr btn-brand me-1 mb-1"><CIcon name="cib-tumblr" /></CButton> <CIcon name="cib-twitter" />
<CButton className="btn-xing btn-brand me-1 mb-1"><CIcon name="cib-xing" /></CButton> </CButton>
<CButton className="btn-github btn-brand me-1 mb-1"><CIcon name="cib-github" /></CButton> <CButton className="btn-linkedin btn-brand me-1 mb-1">
<CButton className="btn-stack-overflow btn-brand me-1 mb-1"><CIcon name="cib-stackoverflow" /></CButton> <CIcon name="cib-linkedin" />
<CButton className="btn-youtube btn-brand me-1 mb-1"><CIcon name="cib-youtube" /></CButton> </CButton>
<CButton className="btn-dribbble btn-brand me-1 mb-1"><CIcon name="cib-dribbble" /></CButton> <CButton className="btn-flickr btn-brand me-1 mb-1">
<CButton className="btn-instagram btn-brand me-1 mb-1"><CIcon name="cib-instagram" /></CButton> <CIcon name="cib-flickr" />
<CButton className="btn-pinterest btn-brand me-1 mb-1"><CIcon name="cib-pinterest" /></CButton> </CButton>
<CButton className="btn-vk btn-brand me-1 mb-1"><CIcon name="cib-vk" /></CButton> <CButton className="btn-tumblr btn-brand me-1 mb-1">
<CButton className="btn-yahoo btn-brand me-1 mb-1"><CIcon name="cib-yahoo" /></CButton> <CIcon name="cib-tumblr" />
<CButton className="btn-behance btn-brand me-1 mb-1"><CIcon name="cib-behance" /></CButton> </CButton>
<CButton className="btn-reddit btn-brand me-1 mb-1"><CIcon name="cib-reddit" /></CButton> <CButton className="btn-xing btn-brand me-1 mb-1">
<CButton className="btn-vimeo btn-brand me-1 mb-1"><CIcon name="cib-vimeo" /></CButton> <CIcon name="cib-xing" />
</CButton>
<CButton className="btn-github btn-brand me-1 mb-1">
<CIcon name="cib-github" />
</CButton>
<CButton className="btn-stack-overflow btn-brand me-1 mb-1">
<CIcon name="cib-stackoverflow" />
</CButton>
<CButton className="btn-youtube btn-brand me-1 mb-1">
<CIcon name="cib-youtube" />
</CButton>
<CButton className="btn-dribbble btn-brand me-1 mb-1">
<CIcon name="cib-dribbble" />
</CButton>
<CButton className="btn-instagram btn-brand me-1 mb-1">
<CIcon name="cib-instagram" />
</CButton>
<CButton className="btn-pinterest btn-brand me-1 mb-1">
<CIcon name="cib-pinterest" />
</CButton>
<CButton className="btn-vk btn-brand me-1 mb-1">
<CIcon name="cib-vk" />
</CButton>
<CButton className="btn-yahoo btn-brand me-1 mb-1">
<CIcon name="cib-yahoo" />
</CButton>
<CButton className="btn-behance btn-brand me-1 mb-1">
<CIcon name="cib-behance" />
</CButton>
<CButton className="btn-reddit btn-brand me-1 mb-1">
<CIcon name="cib-reddit" />
</CButton>
<CButton className="btn-vimeo btn-brand me-1 mb-1">
<CIcon name="cib-vimeo" />
</CButton>
</p> </p>
<h6>Size Large <h6>
<small> <code>size="lg"</code></small> Size Large
<small>
{' '}
<code>size="lg"</code>
</small>
</h6> </h6>
<p> <p>
<CButton size="lg" className="btn-facebook btn-brand me-1 mb-1"><CIcon size="lg" name="cib-facebook" /></CButton> <CButton size="lg" className="btn-facebook btn-brand me-1 mb-1">
<CButton size="lg" className="btn-twitter btn-brand me-1 mb-1"><CIcon size="lg" name="cib-twitter" /></CButton> <CIcon size="lg" name="cib-facebook" />
<CButton size="lg" className="btn-linkedin btn-brand me-1 mb-1"><CIcon size="lg" name="cib-linkedin" /></CButton> </CButton>
<CButton size="lg" className="btn-flickr btn-brand me-1 mb-1"><CIcon size="lg" name="cib-flickr" /></CButton> <CButton size="lg" className="btn-twitter btn-brand me-1 mb-1">
<CButton size="lg" className="btn-tumblr btn-brand me-1 mb-1"><CIcon size="lg" name="cib-tumblr" /></CButton> <CIcon size="lg" name="cib-twitter" />
<CButton size="lg" className="btn-xing btn-brand me-1 mb-1"><CIcon size="lg" name="cib-xing" /></CButton> </CButton>
<CButton size="lg" className="btn-github btn-brand me-1 mb-1"><CIcon size="lg" name="cib-github" /></CButton> <CButton size="lg" className="btn-linkedin btn-brand me-1 mb-1">
<CButton size="lg" className="btn-stack-overflow btn-brand me-1 mb-1"><CIcon size="lg" name="cib-stackoverflow" /></CButton> <CIcon size="lg" name="cib-linkedin" />
<CButton size="lg" className="btn-youtube btn-brand me-1 mb-1"><CIcon size="lg" name="cib-youtube" /></CButton> </CButton>
<CButton size="lg" className="btn-dribbble btn-brand me-1 mb-1"><CIcon size="lg" name="cib-dribbble" /></CButton> <CButton size="lg" className="btn-flickr btn-brand me-1 mb-1">
<CButton size="lg" className="btn-instagram btn-brand me-1 mb-1"><CIcon size="lg" name="cib-instagram" /></CButton> <CIcon size="lg" name="cib-flickr" />
<CButton size="lg" className="btn-pinterest btn-brand me-1 mb-1"><CIcon size="lg" name="cib-pinterest" /></CButton> </CButton>
<CButton size="lg" className="btn-vk btn-brand me-1 mb-1"><CIcon size="lg" name="cib-vk" /></CButton> <CButton size="lg" className="btn-tumblr btn-brand me-1 mb-1">
<CButton size="lg" className="btn-yahoo btn-brand me-1 mb-1"><CIcon size="lg" name="cib-yahoo" /></CButton> <CIcon size="lg" name="cib-tumblr" />
<CButton size="lg" className="btn-behance btn-brand me-1 mb-1"><CIcon size="lg" name="cib-behance" /></CButton> </CButton>
<CButton size="lg" className="btn-reddit btn-brand me-1 mb-1"><CIcon size="lg" name="cib-reddit" /></CButton> <CButton size="lg" className="btn-xing btn-brand me-1 mb-1">
<CButton size="lg" className="btn-vimeo btn-brand me-1 mb-1"><CIcon size="lg" name="cib-vimeo" /></CButton> <CIcon size="lg" name="cib-xing" />
</CButton>
<CButton size="lg" className="btn-github btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-github" />
</CButton>
<CButton size="lg" className="btn-stack-overflow btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-stackoverflow" />
</CButton>
<CButton size="lg" className="btn-youtube btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-youtube" />
</CButton>
<CButton size="lg" className="btn-dribbble btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-dribbble" />
</CButton>
<CButton size="lg" className="btn-instagram btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-instagram" />
</CButton>
<CButton size="lg" className="btn-pinterest btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-pinterest" />
</CButton>
<CButton size="lg" className="btn-vk btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-vk" />
</CButton>
<CButton size="lg" className="btn-yahoo btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-yahoo" />
</CButton>
<CButton size="lg" className="btn-behance btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-behance" />
</CButton>
<CButton size="lg" className="btn-reddit btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-reddit" />
</CButton>
<CButton size="lg" className="btn-vimeo btn-brand me-1 mb-1">
<CIcon size="lg" name="cib-vimeo" />
</CButton>
</p> </p>
</CCardBody> </CCardBody>
</CCard> </CCard>

138
src/views/buttons/button-dropdowns/ButtonDropdowns.js
View File

@ -15,7 +15,7 @@ import {
CRow, CRow,
CFormLabel, CFormLabel,
CFormControl, CFormControl,
CFormCheck CFormCheck,
} from '@coreui/react-ts' } from '@coreui/react-ts'
import { DocsLink } from 'src/reusable' import { DocsLink } from 'src/reusable'
@ -26,14 +26,11 @@ const ButtonDropdowns = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Dropdowns Dropdowns
<DocsLink name="CDropdown"/> <DocsLink name="CDropdown" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CDropdown className="m-1"> <CDropdown className="m-1">
<CDropdownToggle> <CDropdownToggle>Dropdown button</CDropdownToggle>
Dropdown button
</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem header>Header</CDropdownItem> <CDropdownItem header>Header</CDropdownItem>
<CDropdownItem disabled>Action Disabled</CDropdownItem> <CDropdownItem disabled>Action Disabled</CDropdownItem>
@ -42,13 +39,9 @@ const ButtonDropdowns = () => {
<CDropdownItem>Another Action</CDropdownItem> <CDropdownItem>Another Action</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<hr />
<hr/>
<CDropdown className="m-1 btn-group"> <CDropdown className="m-1 btn-group">
<CDropdownToggle color="primary"> <CDropdownToggle color="primary">Primary</CDropdownToggle>
Primary
</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem header>Header</CDropdownItem> <CDropdownItem header>Header</CDropdownItem>
<CDropdownItem disabled>Action Disabled</CDropdownItem> <CDropdownItem disabled>Action Disabled</CDropdownItem>
@ -58,9 +51,7 @@ const ButtonDropdowns = () => {
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<CDropdown className="m-1 btn-group"> <CDropdown className="m-1 btn-group">
<CDropdownToggle color="secondary"> <CDropdownToggle color="secondary">Secondary</CDropdownToggle>
Secondary
</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem header>Header</CDropdownItem> <CDropdownItem header>Header</CDropdownItem>
<CDropdownItem disabled>Action Disabled</CDropdownItem> <CDropdownItem disabled>Action Disabled</CDropdownItem>
@ -70,9 +61,7 @@ const ButtonDropdowns = () => {
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<CDropdown className="m-1 btn-group"> <CDropdown className="m-1 btn-group">
<CDropdownToggle color="success"> <CDropdownToggle color="success">Success</CDropdownToggle>
Success
</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem header>Header</CDropdownItem> <CDropdownItem header>Header</CDropdownItem>
<CDropdownItem disabled>Action Disabled</CDropdownItem> <CDropdownItem disabled>Action Disabled</CDropdownItem>
@ -82,9 +71,7 @@ const ButtonDropdowns = () => {
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<CDropdown className="m-1 btn-group"> <CDropdown className="m-1 btn-group">
<CDropdownToggle color="info"> <CDropdownToggle color="info">Info</CDropdownToggle>
Info
</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem header>Header</CDropdownItem> <CDropdownItem header>Header</CDropdownItem>
<CDropdownItem disabled>Action Disabled</CDropdownItem> <CDropdownItem disabled>Action Disabled</CDropdownItem>
@ -94,9 +81,7 @@ const ButtonDropdowns = () => {
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<CDropdown className="m-1 btn-group"> <CDropdown className="m-1 btn-group">
<CDropdownToggle color="warning"> <CDropdownToggle color="warning">Warning</CDropdownToggle>
Warning
</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem header>Header</CDropdownItem> <CDropdownItem header>Header</CDropdownItem>
<CDropdownItem disabled>Action Disabled</CDropdownItem> <CDropdownItem disabled>Action Disabled</CDropdownItem>
@ -106,9 +91,7 @@ const ButtonDropdowns = () => {
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<CDropdown className="m-1 btn-group"> <CDropdown className="m-1 btn-group">
<CDropdownToggle color="danger"> <CDropdownToggle color="danger">Danger</CDropdownToggle>
Danger
</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem header>Header</CDropdownItem> <CDropdownItem header>Header</CDropdownItem>
<CDropdownItem disabled>Action Disabled</CDropdownItem> <CDropdownItem disabled>Action Disabled</CDropdownItem>
@ -117,8 +100,7 @@ const ButtonDropdowns = () => {
<CDropdownItem>Another Action</CDropdownItem> <CDropdownItem>Another Action</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<hr />
<hr/>
<CDropdown className="m-1"> <CDropdown className="m-1">
<CDropdownToggle split color="primary"> <CDropdownToggle split color="primary">
Primary Primary
@ -191,13 +173,9 @@ const ButtonDropdowns = () => {
<CDropdownItem>Another Action</CDropdownItem> <CDropdownItem>Another Action</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<hr />
<hr/>
<CDropdown className="m-1" size="lg"> <CDropdown className="m-1" size="lg">
<CDropdownToggle color="secondary"> <CDropdownToggle color="secondary">Large button</CDropdownToggle>
Large button
</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem header>Header</CDropdownItem> <CDropdownItem header>Header</CDropdownItem>
<CDropdownItem disabled>Action Disabled</CDropdownItem> <CDropdownItem disabled>Action Disabled</CDropdownItem>
@ -205,8 +183,7 @@ const ButtonDropdowns = () => {
<CDropdownDivider /> <CDropdownDivider />
<CDropdownItem>Another Action</CDropdownItem> <CDropdownItem>Another Action</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>{' '}
{' '}
<CDropdown className="m-1"> <CDropdown className="m-1">
<CDropdownToggle split color="secondary" size="lg"> <CDropdownToggle split color="secondary" size="lg">
Large split button Large split button
@ -219,9 +196,7 @@ const ButtonDropdowns = () => {
<CDropdownItem>Another Action</CDropdownItem> <CDropdownItem>Another Action</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<hr />
<hr/>
<CDropdown className="m-1"> <CDropdown className="m-1">
<CDropdownToggle color="secondary" size="sm"> <CDropdownToggle color="secondary" size="sm">
Small button Small button
@ -233,8 +208,7 @@ const ButtonDropdowns = () => {
<CDropdownDivider /> <CDropdownDivider />
<CDropdownItem>Another Action</CDropdownItem> <CDropdownItem>Another Action</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>{' '}
{' '}
<CDropdown className="m-1"> <CDropdown className="m-1">
<CDropdownToggle color="secondary" size="sm" split> <CDropdownToggle color="secondary" size="sm" split>
Small split button Small split button
@ -247,13 +221,9 @@ const ButtonDropdowns = () => {
<CDropdownItem>Another Action</CDropdownItem> <CDropdownItem>Another Action</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<hr />
<hr/>
<CDropdown className="m-1"> <CDropdown className="m-1">
<CDropdownToggle color="secondary"> <CDropdownToggle color="secondary">Dropup button</CDropdownToggle>
Dropup button
</CDropdownToggle>
<CDropdownMenu placement="top"> <CDropdownMenu placement="top">
<CDropdownItem header>Header</CDropdownItem> <CDropdownItem header>Header</CDropdownItem>
<CDropdownItem disabled>Action Disabled</CDropdownItem> <CDropdownItem disabled>Action Disabled</CDropdownItem>
@ -272,19 +242,13 @@ const ButtonDropdowns = () => {
<CDropdownItem>Another Action</CDropdownItem> <CDropdownItem>Another Action</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Menus</CCardHeader>
Menus
</CCardHeader>
<CCardBody> <CCardBody>
<CDropdown className="m-1 d-inline-block"> <CDropdown className="m-1 d-inline-block">
<CDropdownToggle color="secondary"> <CDropdownToggle color="secondary">Direction Up</CDropdownToggle>
Direction Up
</CDropdownToggle>
<CDropdownMenu placement="top"> <CDropdownMenu placement="top">
<CDropdownItem header>Header</CDropdownItem> <CDropdownItem header>Header</CDropdownItem>
<CDropdownItem disabled>Action Disabled</CDropdownItem> <CDropdownItem disabled>Action Disabled</CDropdownItem>
@ -294,9 +258,7 @@ const ButtonDropdowns = () => {
</CDropdown> </CDropdown>
<CDropdown className="m-1 d-inline-block"> <CDropdown className="m-1 d-inline-block">
<CDropdownToggle color="secondary"> <CDropdownToggle color="secondary">Direction Left</CDropdownToggle>
Direction Left
</CDropdownToggle>
<CDropdownMenu placement="left"> <CDropdownMenu placement="left">
<CDropdownItem header>Header</CDropdownItem> <CDropdownItem header>Header</CDropdownItem>
<CDropdownItem disabled>Action Disabled</CDropdownItem> <CDropdownItem disabled>Action Disabled</CDropdownItem>
@ -306,9 +268,7 @@ const ButtonDropdowns = () => {
</CDropdown> </CDropdown>
<CDropdown className="m-1 d-inline-block"> <CDropdown className="m-1 d-inline-block">
<CDropdownToggle color="secondary"> <CDropdownToggle color="secondary">Direction Right</CDropdownToggle>
Direction Right
</CDropdownToggle>
<CDropdownMenu placement="right"> <CDropdownMenu placement="right">
<CDropdownHeader>Header</CDropdownHeader> <CDropdownHeader>Header</CDropdownHeader>
<CDropdownItem disabled>Action Disabled</CDropdownItem> <CDropdownItem disabled>Action Disabled</CDropdownItem>
@ -318,13 +278,8 @@ const ButtonDropdowns = () => {
</CDropdown> </CDropdown>
<CDropdown className="m-1 d-inline-block"> <CDropdown className="m-1 d-inline-block">
<CDropdownToggle color="secondary"> <CDropdownToggle color="secondary">Default Down</CDropdownToggle>
Default Down <CDropdownMenu placement="bottom" modifiers={[{ name: 'flip', enabled: false }]}>
</CDropdownToggle>
<CDropdownMenu
placement="bottom"
modifiers={[{name: 'flip', enabled: false }]}
>
<CDropdownItem header>Header</CDropdownItem> <CDropdownItem header>Header</CDropdownItem>
<CDropdownItem disabled>Action Disabled</CDropdownItem> <CDropdownItem disabled>Action Disabled</CDropdownItem>
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
@ -336,7 +291,7 @@ const ButtonDropdowns = () => {
<CDropdown className="m-1"> <CDropdown className="m-1">
<CDropdownToggle color="secondary"> <CDropdownToggle color="secondary">
This dropdown{'\''}s menu is right-aligned This dropdown{"'"}s menu is right-aligned
</CDropdownToggle> </CDropdownToggle>
<CDropdownMenu placement="right"> <CDropdownMenu placement="right">
<CDropdownItem header>Header</CDropdownItem> <CDropdownItem header>Header</CDropdownItem>
@ -349,9 +304,7 @@ const ButtonDropdowns = () => {
<hr /> <hr />
<CDropdown className="m-1"> <CDropdown className="m-1">
<CDropdownToggle color="secondary"> <CDropdownToggle color="secondary">Dropdown with header</CDropdownToggle>
Dropdown with header
</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem header>Header</CDropdownItem> <CDropdownItem header>Header</CDropdownItem>
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
@ -362,9 +315,7 @@ const ButtonDropdowns = () => {
<hr /> <hr />
<CDropdown className="m-1"> <CDropdown className="m-1">
<CDropdownToggle color="secondary"> <CDropdownToggle color="secondary">Dropdown with divider</CDropdownToggle>
Dropdown with divider
</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownDivider /> <CDropdownDivider />
@ -375,9 +326,7 @@ const ButtonDropdowns = () => {
<hr /> <hr />
<CDropdown className="m-1"> <CDropdown className="m-1">
<CDropdownToggle color="secondary"> <CDropdownToggle color="secondary">Dropdown with disabled item</CDropdownToggle>
Dropdown with disabled item
</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem disabled>Disabled Action</CDropdownItem> <CDropdownItem disabled>Disabled Action</CDropdownItem>
@ -387,32 +336,41 @@ const ButtonDropdowns = () => {
<hr /> <hr />
<CDropdown className="m-1"> <CDropdown className="m-1">
<CDropdownToggle color="info"> <CDropdownToggle color="info">Dropdown with form</CDropdownToggle>
Dropdown with form
</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
<CForm className="px-4 py-3" > <CForm className="px-4 py-3">
<div className="mb-3"> <div className="mb-3">
<CFormLabel htmlFor="exampleDropdownFormEmail1">Email address</CFormLabel> <CFormLabel htmlFor="exampleDropdownFormEmail1">Email address</CFormLabel>
<CFormControl id="exampleDropdownFormEmail1" type="email" placeholder="email@example.com" autoComplete="email"/> <CFormControl
id="exampleDropdownFormEmail1"
type="email"
placeholder="email@example.com"
autoComplete="email"
/>
</div> </div>
<div className="mb-3"> <div className="mb-3">
<CFormLabel htmlFor="exampleDropdownFormPassword1">Password</CFormLabel> <CFormLabel htmlFor="exampleDropdownFormPassword1">Password</CFormLabel>
<CFormControl id="exampleDropdownFormPassword1" type="password" placeholder="Password" autoComplete="current-password"/> <CFormControl
id="exampleDropdownFormPassword1"
type="password"
placeholder="Password"
autoComplete="current-password"
/>
</div> </div>
<div className="mb-3"> <div className="mb-3">
<CFormCheck custom id="exampleDropdownFormCheckbox1" label="Remember me"/> <CFormCheck custom id="exampleDropdownFormCheckbox1" label="Remember me" />
</div> </div>
<div className="mb-3"> <div className="mb-3">
<CButton color="primary" type="submit">Sign in</CButton> <CButton color="primary" type="submit">
Sign in
</CButton>
</div> </div>
</CForm> </CForm>
<CDropdownDivider/> <CDropdownDivider />
<CDropdownItem href="#/pages/register" >Register</CDropdownItem> <CDropdownItem href="#/pages/register">Register</CDropdownItem>
<CDropdownItem>Forgot password?</CDropdownItem> <CDropdownItem>Forgot password?</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

16
src/views/buttons/button-groups/ButtonGroups.js
View File

@ -26,19 +26,17 @@ const ButtonGroups = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Callout Callout
<DocsLink name="CCallout"/> <DocsLink name="CCallout" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CCallout color="primary"> <CCallout color="primary">Callout</CCallout>
Callout
</CCallout>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Button Group Button Group
<DocsLink name="-Button/#CButtonGroup"/> <DocsLink name="-Button/#CButtonGroup" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CButtonGroup> <CButtonGroup>
@ -111,10 +109,8 @@ const ButtonGroups = () => {
</CButtonGroup> </CButtonGroup>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol md={6}> <CCol md={6}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Button Group Button Group
@ -126,13 +122,15 @@ const ButtonGroups = () => {
<CButton color="secondary">Middle</CButton> <CButton color="secondary">Middle</CButton>
<CButton color="secondary">Right</CButton> <CButton color="secondary">Right</CButton>
</CButtonGroup> </CButtonGroup>
<br /><br /> <br />
<br />
<CButtonGroup> <CButtonGroup>
<CButton color="secondary">Left</CButton> <CButton color="secondary">Left</CButton>
<CButton color="secondary">Middle</CButton> <CButton color="secondary">Middle</CButton>
<CButton color="secondary">Right</CButton> <CButton color="secondary">Right</CButton>
</CButtonGroup> </CButtonGroup>
<br /><br /> <br />
<br />
<CButtonGroup size="sm"> <CButtonGroup size="sm">
<CButton color="secondary">Left</CButton> <CButton color="secondary">Left</CButton>
<CButton color="secondary">Middle</CButton> <CButton color="secondary">Middle</CButton>

674
src/views/buttons/buttons/Buttons.js
View File

File diff suppressed because it is too large Load Diff

4
src/views/buttons/index.js
View File

@ -3,6 +3,4 @@ import ButtonGroups from './ButtonGroups'
import Buttons from './Buttons' import Buttons from './Buttons'
import BrandButtons from './BrandButtons' import BrandButtons from './BrandButtons'
export { export { ButtonDropdowns, ButtonGroups, Buttons, BrandButtons }
ButtonDropdowns, ButtonGroups, Buttons, BrandButtons
}

46
src/views/charts/ChartBarSimple.js
View File

@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
import { getColor } from '@coreui/utils' import { getColor } from '@coreui/utils'
import { CChartBar } from '@coreui/react-chartjs' import { CChartBar } from '@coreui/react-chartjs'
const ChartBarSimple = props => { const ChartBarSimple = (props) => {
const { const {
backgroundColor, backgroundColor,
pointHoverBackgroundColor, pointHoverBackgroundColor,
@ -14,7 +13,7 @@ const ChartBarSimple = props => {
...attributes ...attributes
} = props } = props
const defaultDatasets = (()=>{ const defaultDatasets = (() => {
return [ return [
{ {
data: dataPoints, data: dataPoints,
@ -22,36 +21,35 @@ const ChartBarSimple = props => {
pointHoverBackgroundColor: getColor(pointHoverBackgroundColor), pointHoverBackgroundColor: getColor(pointHoverBackgroundColor),
label: label, label: label,
barPercentage: 0.5, barPercentage: 0.5,
categoryPercentage: 1 categoryPercentage: 1,
} },
] ]
})() })()
const defaultOptions = (()=>{ const defaultOptions = (() => {
return { return {
maintainAspectRatio: false, maintainAspectRatio: false,
legend: { legend: {
display: false display: false,
}, },
scales: { scales: {
xAxes: [{ xAxes: [
display: false {
}], display: false,
yAxes: [{ },
display: false ],
}] yAxes: [
} {
display: false,
},
],
},
} }
})() })()
// render // render
return ( return (
<CChartBar <CChartBar {...attributes} datasets={defaultDatasets} options={defaultOptions} labels={label} />
{...attributes}
datasets={defaultDatasets}
options={defaultOptions}
labels={label}
/>
) )
} }
@ -63,13 +61,13 @@ ChartBarSimple.propTypes = {
pointHoverBackgroundColor: PropTypes.string, pointHoverBackgroundColor: PropTypes.string,
dataPoints: PropTypes.array, dataPoints: PropTypes.array,
label: PropTypes.string, label: PropTypes.string,
pointed: PropTypes.bool pointed: PropTypes.bool,
}; }
ChartBarSimple.defaultProps = { ChartBarSimple.defaultProps = {
backgroundColor: 'rgba(0,0,0,.2)', backgroundColor: 'rgba(0,0,0,.2)',
dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12], dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12],
label: 'Sales' label: 'Sales',
}; }
export default ChartBarSimple export default ChartBarSimple

85
src/views/charts/ChartLineSimple.js
View File

@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
import { getColor, deepObjectsMerge } from '@coreui/utils' import { getColor, deepObjectsMerge } from '@coreui/utils'
import { CChartLine } from '@coreui/react-chartjs' import { CChartLine } from '@coreui/react-chartjs'
const ChartLineSimple = props => { const ChartLineSimple = (props) => {
const { const {
borderColor, borderColor,
backgroundColor, backgroundColor,
@ -15,7 +14,7 @@ const ChartLineSimple = props => {
...attributes ...attributes
} = props } = props
const pointHoverColor = (()=>{ const pointHoverColor = (() => {
if (pointHoverBackgroundColor) { if (pointHoverBackgroundColor) {
return pointHoverBackgroundColor return pointHoverBackgroundColor
} else if (backgroundColor !== 'transparent') { } else if (backgroundColor !== 'transparent') {
@ -24,7 +23,7 @@ const ChartLineSimple = props => {
return borderColor return borderColor
})() })()
const defaultDatasets = (()=>{ const defaultDatasets = (() => {
return [ return [
{ {
data: dataPoints, data: dataPoints,
@ -32,12 +31,12 @@ const ChartLineSimple = props => {
backgroundColor: getColor(backgroundColor), backgroundColor: getColor(backgroundColor),
pointBackgroundColor: getColor(pointHoverColor), pointBackgroundColor: getColor(pointHoverColor),
pointHoverBackgroundColor: getColor(pointHoverColor), pointHoverBackgroundColor: getColor(pointHoverColor),
label label,
} },
] ]
})() })()
const pointedOptions = (()=>{ const pointedOptions = (() => {
return { return {
scales: { scales: {
xAxes: [ xAxes: [
@ -45,13 +44,13 @@ const ChartLineSimple = props => {
offset: true, offset: true,
gridLines: { gridLines: {
color: 'transparent', color: 'transparent',
zeroLineColor: 'transparent' zeroLineColor: 'transparent',
}, },
ticks: { ticks: {
fontSize: 2, fontSize: 2,
fontColor: 'transparent' fontColor: 'transparent',
} },
} },
], ],
yAxes: [ yAxes: [
{ {
@ -59,55 +58,59 @@ const ChartLineSimple = props => {
ticks: { ticks: {
display: false, display: false,
min: Math.min.apply(Math, dataPoints) - 5, min: Math.min.apply(Math, dataPoints) - 5,
max: Math.max.apply(Math, dataPoints) + 5 max: Math.max.apply(Math, dataPoints) + 5,
} },
} },
] ],
}, },
elements: { elements: {
line: { line: {
borderWidth: 1 borderWidth: 1,
}, },
point: { point: {
radius: 4, radius: 4,
hitRadius: 10, hitRadius: 10,
hoverRadius: 4 hoverRadius: 4,
} },
} },
} }
})() })()
const straightOptions = (()=>{ const straightOptions = (() => {
return { return {
scales: { scales: {
xAxes: [{ xAxes: [
display: false {
}], display: false,
yAxes: [{ },
display: false ],
}] yAxes: [
{
display: false,
},
],
}, },
elements: { elements: {
line: { line: {
borderWidth: 2 borderWidth: 2,
}, },
point: { point: {
radius: 0, radius: 0,
hitRadius: 10, hitRadius: 10,
hoverRadius: 4 hoverRadius: 4,
} },
} },
} }
})() })()
const defaultOptions = (()=>{ const defaultOptions = (() => {
const options = pointed ? pointedOptions : straightOptions const options = pointed ? pointedOptions : straightOptions
return Object.assign({}, options, { return Object.assign({}, options, {
maintainAspectRatio: false, maintainAspectRatio: false,
legend: { legend: {
display: false display: false,
} },
}) })
})() })()
const computedDatasets = (() => { const computedDatasets = (() => {
@ -139,14 +142,14 @@ ChartLineSimple.propTypes = {
pointHoverBackgroundColor: PropTypes.string, pointHoverBackgroundColor: PropTypes.string,
dataPoints: PropTypes.array, dataPoints: PropTypes.array,
label: PropTypes.string, label: PropTypes.string,
pointed: PropTypes.bool pointed: PropTypes.bool,
}; }
ChartLineSimple.defaultProps = { ChartLineSimple.defaultProps = {
borderColor: 'rgba(255,255,255,.55)', borderColor: 'rgba(255,255,255,.55)',
backgroundColor: 'transparent', backgroundColor: 'transparent',
dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12], dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12],
label: 'Sales' label: 'Sales',
}; }
export default ChartLineSimple export default ChartLineSimple

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

@ -1,28 +1,22 @@
import React from 'react' import React from 'react'
import { import { CCard, CCardBody, CCardGroup, CCardHeader } from '@coreui/react-ts'
CCard,
CCardBody,
CCardGroup,
CCardHeader
} from '@coreui/react-ts'
import { import {
CChartBar, CChartBar,
CChartLine, CChartLine,
CChartDoughnut, CChartDoughnut,
CChartRadar, CChartRadar,
CChartPie, CChartPie,
CChartPolarArea CChartPolarArea,
} from '@coreui/react-chartjs' } from '@coreui/react-chartjs'
import { DocsLink } from 'src/reusable' import { DocsLink } from 'src/reusable'
const Charts = () => { const Charts = () => {
return ( return (
<CCardGroup columns className = "cols-2" > <CCardGroup columns className="cols-2">
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Bar Chart Bar Chart
<DocsLink href="http://www.chartjs.org"/> <DocsLink href="http://www.chartjs.org" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CChartBar <CChartBar
@ -30,68 +24,59 @@ const Charts = () => {
{ {
label: 'GitHub Commits', label: 'GitHub Commits',
backgroundColor: '#f87979', backgroundColor: '#f87979',
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11] data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11],
} },
]} ]}
labels="months" labels="months"
options={{ options={{
tooltips: { tooltips: {
enabled: true enabled: true,
} },
}} }}
/> />
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Doughnut Chart</CCardHeader>
Doughnut Chart
</CCardHeader>
<CCardBody> <CCardBody>
<CChartDoughnut <CChartDoughnut
datasets={[ datasets={[
{ {
backgroundColor: [ backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
'#41B883', data: [40, 20, 80, 10],
'#E46651', },
'#00D8FF',
'#DD1B16'
],
data: [40, 20, 80, 10]
}
]} ]}
labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']} labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']}
options={{ options={{
tooltips: { tooltips: {
enabled: true enabled: true,
} },
}} }}
/> />
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Line Chart</CCardHeader>
Line Chart
</CCardHeader>
<CCardBody> <CCardBody>
<CChartLine <CChartLine
datasets={[ datasets={[
{ {
label: 'Data One', label: 'Data One',
backgroundColor: 'rgb(228,102,81,0.9)', backgroundColor: 'rgb(228,102,81,0.9)',
data: [30, 39, 10, 50, 30, 70, 35] data: [30, 39, 10, 50, 30, 70, 35],
}, },
{ {
label: 'Data Two', label: 'Data Two',
backgroundColor: 'rgb(0,216,255,0.9)', backgroundColor: 'rgb(0,216,255,0.9)',
data: [39, 80, 40, 35, 40, 20, 45] data: [39, 80, 40, 35, 40, 20, 45],
} },
]} ]}
options={{ options={{
tooltips: { tooltips: {
enabled: true enabled: true,
} },
}} }}
labels="months" labels="months"
/> />
@ -99,36 +84,27 @@ const Charts = () => {
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Pie Chart</CCardHeader>
Pie Chart
</CCardHeader>
<CCardBody> <CCardBody>
<CChartPie <CChartPie
datasets={[ datasets={[
{ {
backgroundColor: [ backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
'#41B883', data: [40, 20, 80, 10],
'#E46651', },
'#00D8FF',
'#DD1B16'
],
data: [40, 20, 80, 10]
}
]} ]}
labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']} labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']}
options={{ options={{
tooltips: { tooltips: {
enabled: true enabled: true,
} },
}} }}
/> />
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Polar Area Chart</CCardHeader>
Polar Area Chart
</CCardHeader>
<CCardBody> <CCardBody>
<CChartPolarArea <CChartPolarArea
datasets={[ datasets={[
@ -139,7 +115,7 @@ const Charts = () => {
pointBorderColor: '#fff', pointBorderColor: '#fff',
pointHoverBackgroundColor: 'rgba(179,181,198,1)', pointHoverBackgroundColor: 'rgba(179,181,198,1)',
pointHoverBorderColor: 'rgba(179,181,198,1)', pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40] data: [65, 59, 90, 81, 56, 55, 40],
}, },
{ {
label: 'My Second dataset', label: 'My Second dataset',
@ -148,27 +124,22 @@ const Charts = () => {
pointBorderColor: '#fff', pointBorderColor: '#fff',
pointHoverBackgroundColor: 'rgba(255,99,132,1)', pointHoverBackgroundColor: 'rgba(255,99,132,1)',
pointHoverBorderColor: 'rgba(255,99,132,1)', pointHoverBorderColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100] data: [28, 48, 40, 19, 96, 27, 100],
} },
]} ]}
options={{ options={{
aspectRatio: 1.5, aspectRatio: 1.5,
tooltips: { tooltips: {
enabled: true enabled: true,
} },
}} }}
labels={[ labels={['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running']}
'Eating', 'Drinking', 'Sleeping', 'Designing',
'Coding', 'Cycling', 'Running'
]}
/> />
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Radar Chart</CCardHeader>
Radar Chart
</CCardHeader>
<CCardBody> <CCardBody>
<CChartRadar <CChartRadar
datasets={[ datasets={[
@ -181,7 +152,7 @@ const Charts = () => {
pointHoverBackgroundColor: '#fff', pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)', pointHoverBorderColor: 'rgba(179,181,198,1)',
tooltipLabelColor: 'rgba(179,181,198,1)', tooltipLabelColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40] data: [65, 59, 90, 81, 56, 55, 40],
}, },
{ {
label: '2020', label: '2020',
@ -192,19 +163,16 @@ const Charts = () => {
pointHoverBackgroundColor: '#fff', pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(255,99,132,1)', pointHoverBorderColor: 'rgba(255,99,132,1)',
tooltipLabelColor: 'rgba(255,99,132,1)', tooltipLabelColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100] data: [28, 48, 40, 19, 96, 27, 100],
} },
]} ]}
options={{ options={{
aspectRatio: 1.5, aspectRatio: 1.5,
tooltips: { tooltips: {
enabled: true enabled: true,
} },
}} }}
labels={[ labels={['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running']}
'Eating', 'Drinking', 'Sleeping', 'Designing',
'Coding', 'Cycling', 'Running'
]}
/> />
</CCardBody> </CCardBody>
</CCard> </CCard>

99
src/views/charts/MainChartExample.js
View File

@ -6,12 +6,12 @@ const brandSuccess = getStyle('success') || '#4dbd74'
const brandInfo = getStyle('info') || '#20a8d8' const brandInfo = getStyle('info') || '#20a8d8'
const brandDanger = getStyle('danger') || '#f86c6b' const brandDanger = getStyle('danger') || '#f86c6b'
const MainChartExample = attributes => { const MainChartExample = (attributes) => {
const random = (min, max)=>{ const random = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) + min) return Math.floor(Math.random() * (max - min + 1) + min)
} }
const defaultDatasets = (()=>{ const defaultDatasets = (() => {
let elements = 27 let elements = 27
const data1 = [] const data1 = []
const data2 = [] const data2 = []
@ -28,7 +28,7 @@ const MainChartExample = attributes => {
borderColor: brandInfo, borderColor: brandInfo,
pointHoverBackgroundColor: brandInfo, pointHoverBackgroundColor: brandInfo,
borderWidth: 2, borderWidth: 2,
data: data1 data: data1,
}, },
{ {
label: 'My Second dataset', label: 'My Second dataset',
@ -36,7 +36,7 @@ const MainChartExample = attributes => {
borderColor: brandSuccess, borderColor: brandSuccess,
pointHoverBackgroundColor: brandSuccess, pointHoverBackgroundColor: brandSuccess,
borderWidth: 2, borderWidth: 2,
data: data2 data: data2,
}, },
{ {
label: 'My Third dataset', label: 'My Third dataset',
@ -45,46 +45,49 @@ const MainChartExample = attributes => {
pointHoverBackgroundColor: brandDanger, pointHoverBackgroundColor: brandDanger,
borderWidth: 1, borderWidth: 1,
borderDash: [8, 5], borderDash: [8, 5],
data: data3 data: data3,
} },
] ]
})() })()
const defaultOptions = (()=>{ const defaultOptions = (() => {
return { return {
maintainAspectRatio: false, maintainAspectRatio: false,
legend: { legend: {
display: false display: false,
}, },
scales: { scales: {
xAxes: [{ xAxes: [
{
gridLines: { gridLines: {
drawOnChartArea: false drawOnChartArea: false,
} },
}], },
yAxes: [{ ],
yAxes: [
{
ticks: { ticks: {
beginAtZero: true, beginAtZero: true,
maxTicksLimit: 5, maxTicksLimit: 5,
stepSize: Math.ceil(250 / 5), stepSize: Math.ceil(250 / 5),
max: 250 max: 250,
}, },
gridLines: { gridLines: {
display: true display: true,
} },
}] },
],
},
elements: {
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3,
}, },
elements: { },
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3
}
}
}
} }
)() })()
// render // render
return ( return (
@ -92,10 +95,38 @@ const MainChartExample = attributes => {
{...attributes} {...attributes}
datasets={defaultDatasets} datasets={defaultDatasets}
options={defaultOptions} options={defaultOptions}
labels={['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']} labels={[
'Mo',
'Tu',
'We',
'Th',
'Fr',
'Sa',
'Su',
'Mo',
'Tu',
'We',
'Th',
'Fr',
'Sa',
'Su',
'Mo',
'Tu',
'We',
'Th',
'Fr',
'Sa',
'Su',
'Mo',
'Tu',
'We',
'Th',
'Fr',
'Sa',
'Su',
]}
/> />
) )
} }
export default MainChartExample export default MainChartExample

136
src/views/dashboard/Dashboard.js
View File

@ -29,98 +29,71 @@ const Dashboard = () => {
<CCardBody> <CCardBody>
<CRow> <CRow>
<CCol sm="5"> <CCol sm="5">
<h4 id="traffic" className="card-title mb-0">Traffic</h4> <h4 id="traffic" className="card-title mb-0">
Traffic
</h4>
<div className="small text-muted">November 2017</div> <div className="small text-muted">November 2017</div>
</CCol> </CCol>
<CCol sm="7" className="d-none d-md-block"> <CCol sm="7" className="d-none d-md-block">
<CButton color="primary" className="float-end"> <CButton color="primary" className="float-end">
<CIcon name="cil-cloud-download"/> <CIcon name="cil-cloud-download" />
</CButton> </CButton>
<CButtonGroup className="float-end me-3"> <CButtonGroup className="float-end me-3">
{ {['Day', 'Month', 'Year'].map((value) => (
['Day', 'Month', 'Year'].map(value => ( <CButton
<CButton color="outline-secondary"
color="outline-secondary" key={value}
key={value} className="mx-0"
className="mx-0" active={value === 'Month'}
active={value === 'Month'} >
> {value}
{value} </CButton>
</CButton> ))}
))
}
</CButtonGroup> </CButtonGroup>
</CCol> </CCol>
</CRow> </CRow>
<MainChartExample style={{height: '300px', marginTop: '40px'}}/> <MainChartExample style={{ height: '300px', marginTop: '40px' }} />
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CRow className="text-center"> <CRow className="text-center">
<CCol md sm="12" className="mb-sm-2 mb-0"> <CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">Visits</div> <div className="text-muted">Visits</div>
<strong>29.703 Users (40%)</strong> <strong>29.703 Users (40%)</strong>
<CProgress <CProgress className="progress-xs mt-2" precision={1} color="success" value={40} />
className="progress-xs mt-2"
precision={1}
color="success"
value={40}
/>
</CCol> </CCol>
<CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none"> <CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none">
<div className="text-muted">Unique</div> <div className="text-muted">Unique</div>
<strong>24.093 Users (20%)</strong> <strong>24.093 Users (20%)</strong>
<CProgress <CProgress className="progress-xs mt-2" precision={1} color="info" value={40} />
className="progress-xs mt-2"
precision={1}
color="info"
value={40}
/>
</CCol> </CCol>
<CCol md sm="12" className="mb-sm-2 mb-0"> <CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">Pageviews</div> <div className="text-muted">Pageviews</div>
<strong>78.706 Views (60%)</strong> <strong>78.706 Views (60%)</strong>
<CProgress <CProgress className="progress-xs mt-2" precision={1} color="warning" value={40} />
className="progress-xs mt-2"
precision={1}
color="warning"
value={40}
/>
</CCol> </CCol>
<CCol md sm="12" className="mb-sm-2 mb-0"> <CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">New Users</div> <div className="text-muted">New Users</div>
<strong>22.123 Users (80%)</strong> <strong>22.123 Users (80%)</strong>
<CProgress <CProgress className="progress-xs mt-2" precision={1} color="danger" value={40} />
className="progress-xs mt-2"
precision={1}
color="danger"
value={40}
/>
</CCol> </CCol>
<CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none"> <CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none">
<div className="text-muted">Bounce Rate</div> <div className="text-muted">Bounce Rate</div>
<strong>Average Rate (40.15%)</strong> <strong>Average Rate (40.15%)</strong>
<CProgress <CProgress className="progress-xs mt-2" precision={1} value={40} />
className="progress-xs mt-2"
precision={1}
value={40}
/>
</CCol> </CCol>
</CRow> </CRow>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
<WidgetsBrand withCharts/> <WidgetsBrand withCharts />
<CRow> <CRow>
<CCol xs> <CCol xs>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Traffic {' & '} Sales</CCardHeader>
Traffic {' & '} Sales
</CCardHeader>
<CCardBody> <CCardBody>
<CRow> <CRow>
<CCol xs="12" md="6" xl="6"> <CCol xs="12" md="6" xl="6">
<CRow> <CRow>
<CCol sm="6"> <CCol sm="6">
<CCallout color="info"> <CCallout color="info">
@ -142,9 +115,7 @@ const Dashboard = () => {
<div className="progress-group mb-4"> <div className="progress-group mb-4">
<div className="progress-group-prepend"> <div className="progress-group-prepend">
<span className="text-medium-emphasis small"> <span className="text-medium-emphasis small">Monday</span>
Monday
</span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="34" /> <CProgress className="progress-xs" color="info" value="34" />
@ -153,9 +124,7 @@ const Dashboard = () => {
</div> </div>
<div className="progress-group mb-4"> <div className="progress-group mb-4">
<div className="progress-group-prepend"> <div className="progress-group-prepend">
<span className="text-medium-emphasis small"> <span className="text-medium-emphasis small">Tuesday</span>
Tuesday
</span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="56" /> <CProgress className="progress-xs" color="info" value="56" />
@ -164,9 +133,7 @@ const Dashboard = () => {
</div> </div>
<div className="progress-group mb-4"> <div className="progress-group mb-4">
<div className="progress-group-prepend"> <div className="progress-group-prepend">
<span className="text-medium-emphasis small"> <span className="text-medium-emphasis small">Wednesday</span>
Wednesday
</span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="12" /> <CProgress className="progress-xs" color="info" value="12" />
@ -175,9 +142,7 @@ const Dashboard = () => {
</div> </div>
<div className="progress-group mb-4"> <div className="progress-group mb-4">
<div className="progress-group-prepend"> <div className="progress-group-prepend">
<span className="text-medium-emphasis small"> <span className="text-medium-emphasis small">Thursday</span>
Thursday
</span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="43" /> <CProgress className="progress-xs" color="info" value="43" />
@ -186,9 +151,7 @@ const Dashboard = () => {
</div> </div>
<div className="progress-group mb-4"> <div className="progress-group mb-4">
<div className="progress-group-prepend"> <div className="progress-group-prepend">
<span className="text-medium-emphasis small"> <span className="text-medium-emphasis small">Friday</span>
Friday
</span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="22" /> <CProgress className="progress-xs" color="info" value="22" />
@ -197,9 +160,7 @@ const Dashboard = () => {
</div> </div>
<div className="progress-group mb-4"> <div className="progress-group mb-4">
<div className="progress-group-prepend"> <div className="progress-group-prepend">
<span className="text-medium-emphasis small"> <span className="text-medium-emphasis small">Saturday</span>
Saturday
</span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="53" /> <CProgress className="progress-xs" color="info" value="53" />
@ -208,9 +169,7 @@ const Dashboard = () => {
</div> </div>
<div className="progress-group mb-4"> <div className="progress-group mb-4">
<div className="progress-group-prepend"> <div className="progress-group-prepend">
<span className="text-medium-emphasis small"> <span className="text-medium-emphasis small">Sunday</span>
Sunday
</span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="9" /> <CProgress className="progress-xs" color="info" value="9" />
@ -220,7 +179,6 @@ const Dashboard = () => {
</CCol> </CCol>
<CCol xs="12" md="6" xl="6"> <CCol xs="12" md="6" xl="6">
<CRow> <CRow>
<CCol sm="6"> <CCol sm="6">
<CCallout color="warning"> <CCallout color="warning">
@ -265,7 +223,9 @@ const Dashboard = () => {
<div className="progress-group-header"> <div className="progress-group-header">
<CIcon className="icon icon-lg me-2" name="cib-google" /> <CIcon className="icon icon-lg me-2" name="cib-google" />
<span>Organic Search</span> <span>Organic Search</span>
<span className="ms-auto font-semibold">191,235 <span className="text-muted small">(56%)</span></span> <span className="ms-auto font-semibold">
191,235 <span className="text-muted small">(56%)</span>
</span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="success" value="56" /> <CProgress className="progress-xs" color="success" value="56" />
@ -275,7 +235,9 @@ const Dashboard = () => {
<div className="progress-group-header"> <div className="progress-group-header">
<CIcon name="cib-facebook" className="icon icon-lg me-2" /> <CIcon name="cib-facebook" className="icon icon-lg me-2" />
<span>Facebook</span> <span>Facebook</span>
<span className="ms-auto font-semibold">51,223 <span className="text-muted small">(15%)</span></span> <span className="ms-auto font-semibold">
51,223 <span className="text-muted small">(15%)</span>
</span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="success" value="15" /> <CProgress className="progress-xs" color="success" value="15" />
@ -285,7 +247,9 @@ const Dashboard = () => {
<div className="progress-group-header"> <div className="progress-group-header">
<CIcon name="cib-twitter" className="icon icon-lg me-2" /> <CIcon name="cib-twitter" className="icon icon-lg me-2" />
<span>Twitter</span> <span>Twitter</span>
<span className="ms-auto font-semibold">37,564 <span className="text-muted small">(11%)</span></span> <span className="ms-auto font-semibold">
37,564 <span className="text-muted small">(11%)</span>
</span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="success" value="11" /> <CProgress className="progress-xs" color="success" value="11" />
@ -295,7 +259,9 @@ const Dashboard = () => {
<div className="progress-group-header"> <div className="progress-group-header">
<CIcon name="cib-linkedin" className="icon icon-lg me-2" /> <CIcon name="cib-linkedin" className="icon icon-lg me-2" />
<span>LinkedIn</span> <span>LinkedIn</span>
<span className="ms-auto font-semibold">27,319 <span className="text-muted small">(8%)</span></span> <span className="ms-auto font-semibold">
27,319 <span className="text-muted small">(8%)</span>
</span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="success" value="8" /> <CProgress className="progress-xs" color="success" value="8" />
@ -309,7 +275,9 @@ const Dashboard = () => {
<table className="table table-hover table-outline mb-0 d-none d-sm-table"> <table className="table table-hover table-outline mb-0 d-none d-sm-table">
<thead className="thead-light"> <thead className="thead-light">
<tr> <tr>
<th className="text-center"><CIcon name="cil-people" /></th> <th className="text-center">
<CIcon name="cil-people" />
</th>
<th>User</th> <th>User</th>
<th className="text-center">Country</th> <th className="text-center">Country</th>
<th>Usage</th> <th>Usage</th>
@ -320,7 +288,7 @@ const Dashboard = () => {
<tbody> <tbody>
<tr> <tr>
<td className="text-center"> <td className="text-center">
<CAvatar image="avatars/1.jpg" status="success"/> <CAvatar image="avatars/1.jpg" status="success" />
</td> </td>
<td> <td>
<div>Yiorgos Avraamu</div> <div>Yiorgos Avraamu</div>
@ -352,12 +320,11 @@ const Dashboard = () => {
</tr> </tr>
<tr> <tr>
<td className="text-center"> <td className="text-center">
<CAvatar image="avatars/2.jpg" status="danger"/> <CAvatar image="avatars/2.jpg" status="danger" />
</td> </td>
<td> <td>
<div>Avram Tarasios</div> <div>Avram Tarasios</div>
<div className="small text-muted"> <div className="small text-muted">
<span>Recurring</span> | Registered: Jan 1, 2015 <span>Recurring</span> | Registered: Jan 1, 2015
</div> </div>
</td> </td>
@ -385,7 +352,7 @@ const Dashboard = () => {
</tr> </tr>
<tr> <tr>
<td className="text-center"> <td className="text-center">
<CAvatar image="avatars/3.jpg" status="warning"/> <CAvatar image="avatars/3.jpg" status="warning" />
</td> </td>
<td> <td>
<div>Quintin Ed</div> <div>Quintin Ed</div>
@ -417,7 +384,7 @@ const Dashboard = () => {
</tr> </tr>
<tr> <tr>
<td className="text-center"> <td className="text-center">
<CAvatar image="avatars/4.jpg" status="secondary"/> <CAvatar image="avatars/4.jpg" status="secondary" />
</td> </td>
<td> <td>
<div>Enéas Kwadwo</div> <div>Enéas Kwadwo</div>
@ -449,7 +416,7 @@ const Dashboard = () => {
</tr> </tr>
<tr> <tr>
<td className="text-center"> <td className="text-center">
<CAvatar image="avatars/5.jpg" status="success"/> <CAvatar image="avatars/5.jpg" status="success" />
</td> </td>
<td> <td>
<div>Agapetus Tadeáš</div> <div>Agapetus Tadeáš</div>
@ -472,7 +439,7 @@ const Dashboard = () => {
<CProgress className="progress-xs" color="info" value="22" /> <CProgress className="progress-xs" color="info" value="22" />
</td> </td>
<td className="text-center"> <td className="text-center">
<CIcon height={25} name="cib-google-pay"/> <CIcon height={25} name="cib-google-pay" />
</td> </td>
<td> <td>
<div className="small text-muted">Last login</div> <div className="small text-muted">Last login</div>
@ -481,7 +448,7 @@ const Dashboard = () => {
</tr> </tr>
<tr> <tr>
<td className="text-center"> <td className="text-center">
<CAvatar image="avatars/6.jpg" status="danger"/> <CAvatar image="avatars/6.jpg" status="danger" />
</td> </td>
<td> <td>
<div>Friderik Dávid</div> <div>Friderik Dávid</div>
@ -513,7 +480,6 @@ const Dashboard = () => {
</tr> </tr>
</tbody> </tbody>
</table> </table>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

@ -8,10 +8,10 @@ const toKebabCase = (str) => {
return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase() return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
} }
export const getIconsView = iconset => { export const getIconsView = (iconset) => {
return Object.entries(iconset).map(([name, value]) => ( return Object.entries(iconset).map(([name, value]) => (
<CCol className="mb-5" xs="6" sm="4" md="3" xl="2" key={name}> <CCol className="mb-5" xs="6" sm="4" md="3" xl="2" key={name}>
<CIcon content={value} size="2xl"/> <CIcon content={value} size="2xl" />
<div>{toKebabCase(name)}</div> <div>{toKebabCase(name)}</div>
</CCol> </CCol>
)) ))
@ -22,12 +22,10 @@ const CoreUIIcons = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Brand Icons Brand Icons
<DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub"/> <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow className="text-center"> <CRow className="text-center">{getIconsView(brandSet)}</CRow>
{getIconsView(brandSet)}
</CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
) )

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

@ -9,12 +9,10 @@ const CoreUIIcons = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Free Icons / as CIcon{' '} Free Icons / as CIcon{' '}
<DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub"/> <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow className="text-center"> <CRow className="text-center">{getIconsView(freeSet)}</CRow>
{getIconsView(freeSet)}
</CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
) )

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

@ -9,12 +9,10 @@ const CoreUIIcons = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Flag Icons Flag Icons
<DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub"/> <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow className="text-center"> <CRow className="text-center">{getIconsView(flagSet)}</CRow>
{getIconsView(flagSet)}
</CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
) )

10
src/views/icons/index.js
View File

@ -1,7 +1,5 @@
import CoreUIIcons from './coreui-icons'; import CoreUIIcons from './coreui-icons'
import Flags from './flags'; import Flags from './flags'
import Brands from './brands'; import Brands from './brands'
export { export { CoreUIIcons, Flags, Brands }
CoreUIIcons, Flags, Brands
};

84
src/views/notifications/alerts/Alerts.js
View File

@ -23,33 +23,17 @@ const Alerts = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Alerts Alerts
<DocsLink name="CAlert"/> <DocsLink name="CAlert" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CAlert color="primary"> <CAlert color="primary">This is a primary alert — check it out!</CAlert>
This is a primary alert — check it out! <CAlert color="secondary">This is a secondary alert — check it out!</CAlert>
</CAlert> <CAlert color="success">This is a success alert — check it out!</CAlert>
<CAlert color="secondary"> <CAlert color="danger">This is a danger alert — check it out!</CAlert>
This is a secondary alert — check it out! <CAlert color="warning">This is a warning alert — check it out!</CAlert>
</CAlert> <CAlert color="info">This is a info alert — check it out!</CAlert>
<CAlert color="success"> <CAlert color="light">This is a light alert — check it out!</CAlert>
This is a success alert — check it out! <CAlert color="dark">This is a dark alert — check it out!</CAlert>
</CAlert>
<CAlert color="danger">
This is a danger alert — check it out!
</CAlert>
<CAlert color="warning">
This is a warning alert — check it out!
</CAlert>
<CAlert color="info">
This is a info alert — check it out!
</CAlert>
<CAlert color="light">
This is a light alert — check it out!
</CAlert>
<CAlert color="dark">
This is a dark alert — check it out!
</CAlert>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -57,56 +41,51 @@ const Alerts = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Alerts Alerts
<small> use <code>.alert-link</code> to provide links</small> <small>
{' '}
use <code>.alert-link</code> to provide links
</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CAlert color="primary"> <CAlert color="primary">
{/*eslint-disable-next-line*/} {/*eslint-disable-next-line*/}
This is a primary alert with&nbsp; This is a primary alert with&nbsp;
<CLink className="alert-link">an example link</CLink>. <CLink className="alert-link">an example link</CLink>. Give it a click if you like.
Give it a click if you like.
</CAlert> </CAlert>
<CAlert color="secondary"> <CAlert color="secondary">
{/*eslint-disable-next-line*/} {/*eslint-disable-next-line*/}
This is a secondary alert with&nbsp; This is a secondary alert with&nbsp;
<CLink className="alert-link">an example link</CLink>. <CLink className="alert-link">an example link</CLink>. Give it a click if you like.
Give it a click if you like.
</CAlert> </CAlert>
<CAlert color="success"> <CAlert color="success">
{/*eslint-disable-next-line*/} {/*eslint-disable-next-line*/}
This is a success alert with&nbsp; This is a success alert with&nbsp;
<CLink className="alert-link">an example link</CLink>. <CLink className="alert-link">an example link</CLink>. Give it a click if you like.
Give it a click if you like.
</CAlert> </CAlert>
<CAlert color="danger"> <CAlert color="danger">
{/*eslint-disable-next-line*/} {/*eslint-disable-next-line*/}
This is a danger alert with&nbsp; This is a danger alert with&nbsp;
<CLink className="alert-link">an example link</CLink>. <CLink className="alert-link">an example link</CLink>. Give it a click if you like.
Give it a click if you like.
</CAlert> </CAlert>
<CAlert color="warning"> <CAlert color="warning">
{/*eslint-disable-next-line*/} {/*eslint-disable-next-line*/}
This is a warning alert with&nbsp; This is a warning alert with&nbsp;
<CLink className="alert-link">an example link</CLink>. <CLink className="alert-link">an example link</CLink>. Give it a click if you like.
Give it a click if you like.
</CAlert> </CAlert>
<CAlert color="info"> <CAlert color="info">
{/*eslint-disable-next-line*/} {/*eslint-disable-next-line*/}
This is a info alert with&nbsp; This is a info alert with&nbsp;
<CLink className="alert-link">an example link</CLink>. <CLink className="alert-link">an example link</CLink>. Give it a click if you like.
Give it a click if you like.
</CAlert> </CAlert>
<CAlert color="light"> <CAlert color="light">
{/*eslint-disable-next-line*/} {/*eslint-disable-next-line*/}
This is a light alert with&nbsp; This is a light alert with&nbsp;
<CLink className="alert-link">an example link</CLink>. <CLink className="alert-link">an example link</CLink>. Give it a click if you like.
Give it a click if you like.
</CAlert> </CAlert>
<CAlert color="dark"> <CAlert color="dark">
{/*eslint-disable-next-line*/} {/*eslint-disable-next-line*/}
This is a dark alert with&nbsp; This is a dark alert with&nbsp;
<CLink className="alert-link">an example link</CLink>. <CLink className="alert-link">an example link</CLink>. Give it a click if you like.
Give it a click if you like.
</CAlert> </CAlert>
</CCardBody> </CCardBody>
</CCard> </CCard>
@ -123,13 +102,14 @@ const Alerts = () => {
<CAlert color="success"> <CAlert color="success">
<CAlertHeading>Well done!</CAlertHeading> <CAlertHeading>Well done!</CAlertHeading>
<p> <p>
Aww yeah, you successfully read this important alert message. This example text is going Aww yeah, you successfully read this important alert message. This example text is
to run a bit longer so that you can see how spacing within an alert works with this kind going to run a bit longer so that you can see how spacing within an alert works
of content. with this kind of content.
</p> </p>
<hr /> <hr />
<p className="mb-0"> <p className="mb-0">
Whenever you need to, be sure to use margin utilities to keep things nice and tidy. Whenever you need to, be sure to use margin utilities to keep things nice and
tidy.
</p> </p>
</CAlert> </CAlert>
</CCardBody> </CCardBody>
@ -142,18 +122,10 @@ const Alerts = () => {
<small> dismissing</small> <small> dismissing</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CAlert <CAlert color="info" dismissible>
color="info"
dismissible
>
I am an dismissible alert! I am an dismissible alert!
</CAlert> </CAlert>
<CAlert <CAlert color="warning" show={visible} closeButton visible={setVisible}>
color="warning"
show={visible}
closeButton
visible={setVisible}
>
I will be closed in {visible} seconds! I will be closed in {visible} seconds!
<CProgress <CProgress
striped striped

129
src/views/notifications/badges/Badges.js
View File

@ -7,7 +7,7 @@ import {
CCardHeader, CCardHeader,
CCol, CCol,
CBadge, CBadge,
CRow CRow,
} from '@coreui/react-ts' } from '@coreui/react-ts'
import { DocsLink } from 'src/reusable' import { DocsLink } from 'src/reusable'
@ -18,19 +18,34 @@ const Badges = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Badges Badges
<DocsLink name="CBadge"/> <DocsLink name="CBadge" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h1>Example heading <CBadge color="secondary">New</CBadge></h1> <h1>
<h2>Example heading <CBadge color="secondary">New</CBadge></h2> Example heading <CBadge color="secondary">New</CBadge>
<h3>Example heading <CBadge color="secondary">New</CBadge></h3> </h1>
<h4>Example heading <CBadge color="secondary">New</CBadge></h4> <h2>
<h5>Example heading <CBadge color="secondary">New</CBadge></h5> Example heading <CBadge color="secondary">New</CBadge>
<h6>Example heading <CBadge color="secondary">New</CBadge></h6> </h2>
<h3>
Example heading <CBadge color="secondary">New</CBadge>
</h3>
<h4>
Example heading <CBadge color="secondary">New</CBadge>
</h4>
<h5>
Example heading <CBadge color="secondary">New</CBadge>
</h5>
<h6>
Example heading <CBadge color="secondary">New</CBadge>
</h6>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton color="secondary"> <CButton color="secondary">
Notifications <CBadge color="primary" shape="rounded-pill" style={{ position: 'static' }}>9</CBadge> Notifications{' '}
<CBadge color="primary" shape="rounded-pill" style={{ position: 'static' }}>
9
</CBadge>
</CButton> </CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
@ -42,14 +57,30 @@ const Badges = () => {
<small> contextual variations</small> <small> contextual variations</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CBadge className="me-1" color="primary">Primary</CBadge> <CBadge className="me-1" color="primary">
<CBadge className="me-1" color="secondary">Secondary</CBadge> Primary
<CBadge className="me-1" color="success">Success</CBadge> </CBadge>
<CBadge className="me-1" color="danger">Danger</CBadge> <CBadge className="me-1" color="secondary">
<CBadge className="me-1" color="warning">Warning</CBadge> Secondary
<CBadge className="me-1" color="info">Info</CBadge> </CBadge>
<CBadge className="me-1" color="light">Light</CBadge> <CBadge className="me-1" color="success">
<CBadge className="me-1" color="dark">Dark</CBadge> Success
</CBadge>
<CBadge className="me-1" color="danger">
Danger
</CBadge>
<CBadge className="me-1" color="warning">
Warning
</CBadge>
<CBadge className="me-1" color="info">
Info
</CBadge>
<CBadge className="me-1" color="light">
Light
</CBadge>
<CBadge className="me-1" color="dark">
Dark
</CBadge>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
@ -58,14 +89,30 @@ const Badges = () => {
<small> pill badges</small> <small> pill badges</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CBadge className="me-1" color="primary" shape="rounded-pill">Primary</CBadge> <CBadge className="me-1" color="primary" shape="rounded-pill">
<CBadge className="me-1" color="secondary" shape="rounded-pill">Secondary</CBadge> Primary
<CBadge className="me-1" color="success" shape="rounded-pill">Success</CBadge> </CBadge>
<CBadge className="me-1" color="danger" shape="rounded-pill">Danger</CBadge> <CBadge className="me-1" color="secondary" shape="rounded-pill">
<CBadge className="me-1" color="warning" shape="rounded-pill">Warning</CBadge> Secondary
<CBadge className="me-1" color="info" shape="rounded-pill">Info</CBadge> </CBadge>
<CBadge className="me-1" color="light" shape="rounded-pill">Light</CBadge> <CBadge className="me-1" color="success" shape="rounded-pill">
<CBadge className="me-1" color="dark" shape="rounded-pill">Dark</CBadge> Success
</CBadge>
<CBadge className="me-1" color="danger" shape="rounded-pill">
Danger
</CBadge>
<CBadge className="me-1" color="warning" shape="rounded-pill">
Warning
</CBadge>
<CBadge className="me-1" color="info" shape="rounded-pill">
Info
</CBadge>
<CBadge className="me-1" color="light" shape="rounded-pill">
Light
</CBadge>
<CBadge className="me-1" color="dark" shape="rounded-pill">
Dark
</CBadge>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
@ -74,14 +121,30 @@ const Badges = () => {
<small> square badges</small> <small> square badges</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CBadge className="me-1" color="primary" shape="rounded-0">Primary</CBadge> <CBadge className="me-1" color="primary" shape="rounded-0">
<CBadge className="me-1" color="secondary" shape="rounded-0">Secondary</CBadge> Primary
<CBadge className="me-1" color="success" shape="rounded-0">Success</CBadge> </CBadge>
<CBadge className="me-1" color="danger" shape="rounded-0">Danger</CBadge> <CBadge className="me-1" color="secondary" shape="rounded-0">
<CBadge className="me-1" color="warning" shape="rounded-0">Warning</CBadge> Secondary
<CBadge className="me-1" color="info" shape="rounded-0">Info</CBadge> </CBadge>
<CBadge className="me-1" color="light" shape="rounded-0">Light</CBadge> <CBadge className="me-1" color="success" shape="rounded-0">
<CBadge className="me-1" color="dark" shape="rounded-0">Dark</CBadge> Success
</CBadge>
<CBadge className="me-1" color="danger" shape="rounded-0">
Danger
</CBadge>
<CBadge className="me-1" color="warning" shape="rounded-0">
Warning
</CBadge>
<CBadge className="me-1" color="info" shape="rounded-0">
Info
</CBadge>
<CBadge className="me-1" color="light" shape="rounded-0">
Light
</CBadge>
<CBadge className="me-1" color="dark" shape="rounded-0">
Dark
</CBadge>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

12
src/views/notifications/index.js
View File

@ -1,8 +1,6 @@
import Alerts from './Alerts'; import Alerts from './Alerts'
import Badges from './Badges'; import Badges from './Badges'
import Modals from './Modals'; import Modals from './Modals'
import Toaster from './Toaster'; import Toaster from './Toaster'
export { export { Alerts, Badges, Modals, Toaster }
Alerts, Badges, Modals, Toaster
};

220
src/views/notifications/modals/Modals.js
View File

@ -10,12 +10,11 @@ import {
CModalFooter, CModalFooter,
CModalHeader, CModalHeader,
CModalTitle, CModalTitle,
CRow CRow,
} from '@coreui/react-ts' } from '@coreui/react-ts'
import { DocsLink } from 'src/reusable' import { DocsLink } from 'src/reusable'
const Modals = () => { const Modals = () => {
const [modal, setModal] = useState(true) const [modal, setModal] = useState(true)
const [large, setLarge] = useState(false) const [large, setLarge] = useState(false)
const [small, setSmall] = useState(false) const [small, setSmall] = useState(false)
@ -31,82 +30,79 @@ const Modals = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Bootstrap Modals Bootstrap Modals
<DocsLink name="CModal"/> <DocsLink name="CModal" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CButton <CButton onClick={() => setModal(!modal)} className="me-1">
onClick={() => setModal(!modal)} Launch demo modal
className="me-1" </CButton>
>Launch demo modal</CButton>
<CButton onClick={() => setLarge(!large)} className="me-1"> <CButton onClick={() => setLarge(!large)} className="me-1">
Launch large modal Launch large modal
</CButton> </CButton>
<CButton onClick={() => setSmall(!large)} className="me-1"> <CButton onClick={() => setSmall(!large)} className="me-1">
Launch small modal Launch small modal
</CButton> </CButton>
<CModal <CModal visible={modal} onClose={setModal}>
visible={modal}
onClose={setModal}
>
<CModalHeader closeButton> <CModalHeader closeButton>
<CModalTitle>Modal title</CModalTitle> <CModalTitle>Modal title</CModalTitle>
</CModalHeader> </CModalHeader>
<CModalBody> <CModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
culpa qui officia deserunt mollit anim id est laborum. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</CModalBody> </CModalBody>
<CModalFooter> <CModalFooter>
<CButton color="primary">Do Something</CButton>{' '} <CButton color="primary">Do Something</CButton>{' '}
<CButton <CButton color="secondary" onClick={() => setModal(false)}>
color="secondary" Cancel
onClick={() => setModal(false)} </CButton>
>Cancel</CButton>
</CModalFooter> </CModalFooter>
</CModal> </CModal>
<CModal visible={large} onClose={() => setLarge(!large)} size="lg">
<CModal
visible={large}
onClose={() => setLarge(!large)}
size="lg"
>
<CModalHeader closeButton> <CModalHeader closeButton>
<CModalTitle>Modal title</CModalTitle> <CModalTitle>Modal title</CModalTitle>
</CModalHeader> </CModalHeader>
<CModalBody> <CModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
culpa qui officia deserunt mollit anim id est laborum. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</CModalBody> </CModalBody>
<CModalFooter> <CModalFooter>
<CButton color="primary" onClick={() => setLarge(!large)}>Do Something</CButton>{' '} <CButton color="primary" onClick={() => setLarge(!large)}>
<CButton color="secondary" onClick={() => setLarge(!large)}>Cancel</CButton> Do Something
</CButton>{' '}
<CButton color="secondary" onClick={() => setLarge(!large)}>
Cancel
</CButton>
</CModalFooter> </CModalFooter>
</CModal> </CModal>
<CModal <CModal visible={small} onClose={() => setSmall(!small)} size="sm">
visible={small}
onClose={() => setSmall(!small)}
size="sm"
>
<CModalHeader closeButton> <CModalHeader closeButton>
<CModalTitle>Modal title</CModalTitle> <CModalTitle>Modal title</CModalTitle>
</CModalHeader> </CModalHeader>
<CModalBody> <CModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
culpa qui officia deserunt mollit anim id est laborum. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</CModalBody> </CModalBody>
<CModalFooter> <CModalFooter>
<CButton color="primary" onClick={() => setSmall(!small)}>Do Something</CButton>{' '} <CButton color="primary" onClick={() => setSmall(!small)}>
<CButton color="secondary" onClick={() => setSmall(!small)}>Cancel</CButton> Do Something
</CButton>{' '}
<CButton color="secondary" onClick={() => setSmall(!small)}>
Cancel
</CButton>
</CModalFooter> </CModalFooter>
</CModal> </CModal>
@ -115,25 +111,30 @@ const Modals = () => {
<CButton color="primary" onClick={() => setPrimary(!primary)} className="me-1"> <CButton color="primary" onClick={() => setPrimary(!primary)} className="me-1">
Primary modal Primary modal
</CButton> </CButton>
<CButton color="success" onClick={() => setSuccess(!success)} className="me-1">Success modal</CButton> <CButton color="success" onClick={() => setSuccess(!success)} className="me-1">
<CButton color="warning" onClick={() => setWarning(!warning)} className="me-1">Warning modal</CButton> Success modal
<CButton color="danger" onClick={() => setDanger(!danger)} className="me-1">Danger modal</CButton> </CButton>
<CButton color="info" onClick={() => setInfo(!info)} className="me-1">Info modal</CButton> <CButton color="warning" onClick={() => setWarning(!warning)} className="me-1">
Warning modal
</CButton>
<CButton color="danger" onClick={() => setDanger(!danger)} className="me-1">
Danger modal
</CButton>
<CButton color="info" onClick={() => setInfo(!info)} className="me-1">
Info modal
</CButton>
<CModal <CModal visible={primary} onClose={() => setPrimary(!primary)} color="primary">
visible={primary}
onClose={() => setPrimary(!primary)}
color="primary"
>
<CModalHeader closeButton> <CModalHeader closeButton>
<CModalTitle>Modal title</CModalTitle> <CModalTitle>Modal title</CModalTitle>
</CModalHeader> </CModalHeader>
<CModalBody> <CModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
culpa qui officia deserunt mollit anim id est laborum. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</CModalBody> </CModalBody>
<CModalFooter> <CModalFooter>
<CButton color="primary" onClick={() => setPrimary(!primary)}> <CButton color="primary" onClick={() => setPrimary(!primary)}>
@ -145,90 +146,93 @@ const Modals = () => {
</CModalFooter> </CModalFooter>
</CModal> </CModal>
<CModal <CModal visible={success} onClose={() => setSuccess(!success)} color="success">
visible={success}
onClose={() => setSuccess(!success)}
color="success"
>
<CModalHeader closeButton> <CModalHeader closeButton>
<CModalTitle>Modal title</CModalTitle> <CModalTitle>Modal title</CModalTitle>
</CModalHeader> </CModalHeader>
<CModalBody> <CModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
culpa qui officia deserunt mollit anim id est laborum. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</CModalBody> </CModalBody>
<CModalFooter> <CModalFooter>
<CButton color="success" onClick={() => setSuccess(!success)}>Do Something</CButton>{' '} <CButton color="success" onClick={() => setSuccess(!success)}>
<CButton color="secondary" onClick={() => setSuccess(!success)}>Cancel</CButton> Do Something
</CButton>{' '}
<CButton color="secondary" onClick={() => setSuccess(!success)}>
Cancel
</CButton>
</CModalFooter> </CModalFooter>
</CModal> </CModal>
<CModal <CModal visible={warning} onClose={() => setWarning(!warning)} color="warning">
visible={warning}
onClose={() => setWarning(!warning)}
color="warning"
>
<CModalHeader closeButton> <CModalHeader closeButton>
<CModalTitle>Modal title</CModalTitle> <CModalTitle>Modal title</CModalTitle>
</CModalHeader> </CModalHeader>
<CModalBody> <CModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
culpa qui officia deserunt mollit anim id est laborum. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</CModalBody> </CModalBody>
<CModalFooter> <CModalFooter>
<CButton color="warning" onClick={() => setWarning(!warning)}>Do Something</CButton>{' '} <CButton color="warning" onClick={() => setWarning(!warning)}>
<CButton color="secondary" onClick={() => setWarning(!warning)}>Cancel</CButton> Do Something
</CButton>{' '}
<CButton color="secondary" onClick={() => setWarning(!warning)}>
Cancel
</CButton>
</CModalFooter> </CModalFooter>
</CModal> </CModal>
<CModal <CModal visible={danger} onClose={() => setDanger(!danger)} color="danger">
visible={danger}
onClose={() => setDanger(!danger)}
color="danger"
>
<CModalHeader closeButton> <CModalHeader closeButton>
<CModalTitle>Modal title</CModalTitle> <CModalTitle>Modal title</CModalTitle>
</CModalHeader> </CModalHeader>
<CModalBody> <CModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
culpa qui officia deserunt mollit anim id est laborum. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</CModalBody> </CModalBody>
<CModalFooter> <CModalFooter>
<CButton color="danger" onClick={() => setDanger(!danger)}>Do Something</CButton>{' '} <CButton color="danger" onClick={() => setDanger(!danger)}>
<CButton color="secondary" onClick={() => setDanger(!danger)}>Cancel</CButton> Do Something
</CButton>{' '}
<CButton color="secondary" onClick={() => setDanger(!danger)}>
Cancel
</CButton>
</CModalFooter> </CModalFooter>
</CModal> </CModal>
<CModal <CModal visible={info} onClose={() => setInfo(!info)} color="info">
visible={info}
onClose={() => setInfo(!info)}
color="info"
>
<CModalHeader closeButton> <CModalHeader closeButton>
<CModalTitle>Modal title</CModalTitle> <CModalTitle>Modal title</CModalTitle>
</CModalHeader> </CModalHeader>
<CModalBody> <CModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
culpa qui officia deserunt mollit anim id est laborum. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</CModalBody> </CModalBody>
<CModalFooter> <CModalFooter>
<CButton color="secondary" onClick={() => setInfo(!info)}>Cancel</CButton> <CButton color="secondary" onClick={() => setInfo(!info)}>
<CButton color="info" onClick={() => setInfo(!info)}>Do Something</CButton>{' '} Cancel
</CButton>
<CButton color="info" onClick={() => setInfo(!info)}>
Do Something
</CButton>{' '}
</CModalFooter> </CModalFooter>
</CModal> </CModal>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

90
src/views/notifications/toaster/Toaster.js
View File

@ -15,12 +15,11 @@ import {
CToast, CToast,
CToastBody, CToastBody,
CToastHeader, CToastHeader,
CToaster CToaster,
} from '@coreui/react-ts' } from '@coreui/react-ts'
import { DocsLink } from 'src/reusable' import { DocsLink } from 'src/reusable'
const Toaster = () => { const Toaster = () => {
const placements = [ const placements = [
'top-start', 'top-start',
'top-center', 'top-center',
@ -30,13 +29,13 @@ const Toaster = () => {
'middle-end', 'middle-end',
'bottom-start', 'bottom-start',
'bottom-center', 'bottom-center',
'bottom-end' 'bottom-end',
] ]
const [toasts, setToasts] = useState([ const [toasts, setToasts] = useState([
{ placement: 'static'}, { placement: 'static' },
{ placement: 'static'}, { placement: 'static' },
{ placement: 'top-right', autohide: 3000 } { placement: 'top-right', autohide: 3000 },
]) ])
const [placement, setPlacement] = useState('top-right') const [placement, setPlacement] = useState('top-right')
@ -46,14 +45,10 @@ const Toaster = () => {
const [fade, setFade] = useState(true) const [fade, setFade] = useState(true)
const addToast = () => { const addToast = () => {
setToasts([ setToasts([...toasts, { placement, autohide: autohide && autohideValue, closeButton, fade }])
...toasts,
{ placement, autohide: autohide && autohideValue, closeButton, fade }
])
} }
const toasters = (() => {
const toasters = (()=>{
return toasts.reduce((toasters, toast) => { return toasts.reduce((toasters, toast) => {
toasters[toast.placement] = toasters[toast.placement] || [] toasters[toast.placement] = toasters[toast.placement] || []
toasters[toast.placement].push(toast) toasters[toast.placement].push(toast)
@ -61,12 +56,11 @@ const Toaster = () => {
}, {}) }, {})
})() })()
return ( return (
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Toasts. Toasts.
<DocsLink name="-Toast"/> <DocsLink name="-Toast" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CContainer> <CContainer>
@ -79,39 +73,40 @@ const Toaster = () => {
<CFormCheck <CFormCheck
id="autohide" id="autohide"
checked={autohide} checked={autohide}
onChange={e => { setAutohide(e.target.checked) }} onChange={(e) => {
setAutohide(e.target.checked)
}}
custom custom
/> />
<CFormLabel variant="custom-checkbox" htmlFor="autohide"> <CFormLabel variant="custom-checkbox" htmlFor="autohide">
Autohide of the toast Autohide of the toast
</CFormLabel> </CFormLabel>
</div> </div>
{ {autohide && (
autohide &&
<div className="my-2"> <div className="my-2">
<CFormLabel htmlFor="ccyear">Time to autohide</CFormLabel> <CFormLabel htmlFor="ccyear">Time to autohide</CFormLabel>
<CFormControl <CFormControl
type="number" type="number"
value={autohideValue} value={autohideValue}
onChange={e => { onChange={(e) => {
setAutohideValue(Number(e.target.value)) setAutohideValue(Number(e.target.value))
}} }}
/> />
</div> </div>
} )}
<div className="my-2"> <div className="my-2">
<CFormLabel htmlFor="ccyear">Placement</CFormLabel> <CFormLabel htmlFor="ccyear">Placement</CFormLabel>
<CFormSelect <CFormSelect
className="form-control" className="form-control"
value={placement} value={placement}
onChange={e => {setPlacement(e.target.value)}} onChange={(e) => {
setPlacement(e.target.value)
}}
> >
{ {placements.map((placement, i) => (
placements.map((placement, i)=>( <option key={i}>{placement}</option>
<option key={i}>{placement}</option> ))}
))
}
</CFormSelect> </CFormSelect>
</div> </div>
@ -119,10 +114,14 @@ const Toaster = () => {
<CFormCheck <CFormCheck
id="fade" id="fade"
checked={fade} checked={fade}
onChange={e => { setFade(e.target.checked) }} onChange={(e) => {
setFade(e.target.checked)
}}
custom custom
/> />
<CFormLabel variant="custom-checkbox" htmlFor="fade">fade</CFormLabel> <CFormLabel variant="custom-checkbox" htmlFor="fade">
fade
</CFormLabel>
</div> </div>
<div variant="custom-checkbox" className="my-2"> <div variant="custom-checkbox" className="my-2">
@ -130,32 +129,25 @@ const Toaster = () => {
id="close" id="close"
custom custom
checked={closeButton} checked={closeButton}
onChange={e=> { setCloseButton(e.target.checked) }} onChange={(e) => {
setCloseButton(e.target.checked)
}}
/> />
<CFormLabel variant="custom-checkbox" htmlFor="close"> <CFormLabel variant="custom-checkbox" htmlFor="close">
closeButton closeButton
</CFormLabel> </CFormLabel>
</div> </div>
<CButton <CButton className="me-1 w-25" color="success" onClick={addToast}>
className="me-1 w-25"
color="success"
onClick={addToast}
>
Add toast Add toast
</CButton> </CButton>
</CForm> </CForm>
</CCol> </CCol>
<CCol sm="12" lg="6"> <CCol sm="12" lg="6">
{Object.keys(toasters).map((toasterKey) => ( {Object.keys(toasters).map((toasterKey) => (
<CToaster <CToaster placement={toasterKey} key={'toaster' + toasterKey}>
placement={toasterKey} {toasters[toasterKey].map((toast, key) => {
key={'toaster' + toasterKey} return (
>
{
toasters[toasterKey].map((toast, key)=>{
return(
<CToast <CToast
key={'toast' + key} key={'toast' + key}
icon={ icon={
@ -177,22 +169,8 @@ const Toaster = () => {
> >
{`Hello, ${toasterKey} world! This is a toast ${toasterKey} message.`} {`Hello, ${toasterKey} world! This is a toast ${toasterKey} message.`}
</CToast> </CToast>
// <CToast
// key={'toast' + key}
// show={true}
// autohide={toast.autohide}
// fade={toast.fade}
// >
// <CToastHeader closeButton={toast.closeButton}>
// Toast title
// </CToastHeader>
// <CToastBody>
// {`This is a toast in ${toasterKey} positioned toaster number ${key + 1}.`}
// </CToastBody>
// </CToast>
) )
}) })}
}
</CToaster> </CToaster>
))} ))}
</CCol> </CCol>

26
src/views/pages/login/Login.js
View File

@ -11,7 +11,7 @@ import {
CFormControl, CFormControl,
CInputGroup, CInputGroup,
CInputGroupText, CInputGroupText,
CRow CRow,
} from '@coreui/react-ts' } from '@coreui/react-ts'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
@ -37,14 +37,22 @@ const Login = () => {
<CInputGroupText> <CInputGroupText>
<CIcon name="cil-lock-locked" /> <CIcon name="cil-lock-locked" />
</CInputGroupText> </CInputGroupText>
<CFormControl type="password" placeholder="Password" autoComplete="current-password" /> <CFormControl
type="password"
placeholder="Password"
autoComplete="current-password"
/>
</CInputGroup> </CInputGroup>
<CRow> <CRow>
<CCol xs="6"> <CCol xs="6">
<CButton color="primary" className="px-4">Login</CButton> <CButton color="primary" className="px-4">
Login
</CButton>
</CCol> </CCol>
<CCol xs="6" className="text-right"> <CCol xs="6" className="text-right">
<CButton color="link" className="px-0">Forgot password?</CButton> <CButton color="link" className="px-0">
Forgot password?
</CButton>
</CCol> </CCol>
</CRow> </CRow>
</CForm> </CForm>
@ -54,10 +62,14 @@ const Login = () => {
<CCardBody className="text-center"> <CCardBody className="text-center">
<div> <div>
<h2>Sign up</h2> <h2>Sign up</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <p>
labore et dolore magna aliqua.</p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
<Link to="/register"> <Link to="/register">
<CButton color="primary" className="mt-3" active tabIndex={-1}>Register Now!</CButton> <CButton color="primary" className="mt-3" active tabIndex={-1}>
Register Now!
</CButton>
</Link> </Link>
</div> </div>
</CCardBody> </CCardBody>

2
src/views/pages/page404/Page404.js
View File

@ -18,7 +18,7 @@ const Page404 = () => {
<CCol md="6"> <CCol md="6">
<div className="clearfix"> <div className="clearfix">
<h1 className="float-start display-3 me-4">404</h1> <h1 className="float-start display-3 me-4">404</h1>
<h4 className="pt-3">Oops! You{'\''}re lost.</h4> <h4 className="pt-3">Oops! You{"'"}re lost.</h4>
<p className="text-muted float-start">The page you are looking for was not found.</p> <p className="text-muted float-start">The page you are looking for was not found.</p>
</div> </div>
<CInputGroup className="input-prepend"> <CInputGroup className="input-prepend">

6
src/views/pages/page500/Page500.js
View File

@ -6,7 +6,7 @@ import {
CFormControl, CFormControl,
CInputGroup, CInputGroup,
CInputGroupText, CInputGroupText,
CRow CRow,
} from '@coreui/react-ts' } from '@coreui/react-ts'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
@ -19,7 +19,9 @@ const Page500 = () => {
<span className="clearfix"> <span className="clearfix">
<h1 className="float-start display-3 me-4">500</h1> <h1 className="float-start display-3 me-4">500</h1>
<h4 className="pt-3">Houston, we have a problem!</h4> <h4 className="pt-3">Houston, we have a problem!</h4>
<p className="text-muted float-start">The page you are looking for is temporarily unavailable.</p> <p className="text-muted float-start">
The page you are looking for is temporarily unavailable.
</p>
</span> </span>
<CInputGroup className="input-prepend"> <CInputGroup className="input-prepend">
<CInputGroupText> <CInputGroupText>

26
src/views/pages/register/Register.js
View File

@ -10,7 +10,7 @@ import {
CFormControl, CFormControl,
CInputGroup, CInputGroup,
CInputGroupText, CInputGroupText,
CRow CRow,
} from '@coreui/react-ts' } from '@coreui/react-ts'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
@ -39,24 +39,38 @@ const Register = () => {
<CInputGroupText> <CInputGroupText>
<CIcon name="cil-lock-locked" /> <CIcon name="cil-lock-locked" />
</CInputGroupText> </CInputGroupText>
<CFormControl type="password" placeholder="Password" autoComplete="new-password" /> <CFormControl
type="password"
placeholder="Password"
autoComplete="new-password"
/>
</CInputGroup> </CInputGroup>
<CInputGroup className="mb-4"> <CInputGroup className="mb-4">
<CInputGroupText> <CInputGroupText>
<CIcon name="cil-lock-locked" /> <CIcon name="cil-lock-locked" />
</CInputGroupText> </CInputGroupText>
<CFormControl type="password" placeholder="Repeat password" autoComplete="new-password" /> <CFormControl
type="password"
placeholder="Repeat password"
autoComplete="new-password"
/>
</CInputGroup> </CInputGroup>
<CButton color="success" block>Create Account</CButton> <CButton color="success" block>
Create Account
</CButton>
</CForm> </CForm>
</CCardBody> </CCardBody>
<CCardFooter className="p-4"> <CCardFooter className="p-4">
<CRow> <CRow>
<CCol xs="12" sm="6"> <CCol xs="12" sm="6">
<CButton className="btn-facebook mb-1" block><span>facebook</span></CButton> <CButton className="btn-facebook mb-1" block>
<span>facebook</span>
</CButton>
</CCol> </CCol>
<CCol xs="12" sm="6"> <CCol xs="12" sm="6">
<CButton className="btn-twitter mb-1" block><span>twitter</span></CButton> <CButton className="btn-twitter mb-1" block>
<span>twitter</span>
</CButton>
</CCol> </CCol>
</CRow> </CRow>
</CCardFooter> </CCardFooter>

37
src/views/theme/colors/Colors.js
View File

@ -1,16 +1,9 @@
import React, { useEffect, useState, createRef } from 'react' import React, { useEffect, useState, createRef } from 'react'
import classNames from 'classnames' import classNames from 'classnames'
import { import { CRow, CCol, CCard, CCardHeader, CCardBody } from '@coreui/react-ts'
CRow,
CCol,
CCard,
CCardHeader,
CCardBody
} from '@coreui/react-ts'
import { rgbToHex } from '@coreui/utils' import { rgbToHex } from '@coreui/utils'
import { DocsLink } from 'src/reusable' import { DocsLink } from 'src/reusable'
const ThemeView = () => { const ThemeView = () => {
const [color, setColor] = useState('rgb(255, 255, 255)') const [color, setColor] = useState('rgb(255, 255, 255)')
const ref = createRef() const ref = createRef()
@ -24,26 +17,26 @@ const ThemeView = () => {
return ( return (
<table className="table w-100" ref={ref}> <table className="table w-100" ref={ref}>
<tbody> <tbody>
<tr> <tr>
<td className="text-muted">HEX:</td> <td className="text-muted">HEX:</td>
<td className="font-weight-bold">{ rgbToHex(color) }</td> <td className="font-weight-bold">{rgbToHex(color)}</td>
</tr> </tr>
<tr> <tr>
<td className="text-muted">RGB:</td> <td className="text-muted">RGB:</td>
<td className="font-weight-bold">{ color }</td> <td className="font-weight-bold">{color}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
) )
} }
const ThemeColor = ({className, children}) => { const ThemeColor = ({ className, children }) => {
const classes = classNames(className, 'theme-color w-75 rounded mb-3') const classes = classNames(className, 'theme-color w-75 rounded mb-3')
return ( return (
<CCol xl="2" md="4" sm="6" xs="12" className="mb-4"> <CCol xl="2" md="4" sm="6" xs="12" className="mb-4">
<div className={classes} style={{paddingTop: '75%'}}></div> <div className={classes} style={{ paddingTop: '75%' }}></div>
{children} {children}
<ThemeView/> <ThemeView />
</CCol> </CCol>
) )
} }
@ -54,7 +47,7 @@ const Colors = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Theme colors Theme colors
<DocsLink href="https://coreui.io/docs/utilities/colors/"/> <DocsLink href="https://coreui.io/docs/utilities/colors/" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow> <CRow>
@ -86,9 +79,7 @@ const Colors = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Grays</CCardHeader>
Grays
</CCardHeader>
<CCardBody> <CCardBody>
<CRow className="mb-3"> <CRow className="mb-3">
<ThemeColor className="bg-gray-100"> <ThemeColor className="bg-gray-100">

231
src/views/theme/typography/Typography.js
View File

@ -1,9 +1,5 @@
import React from 'react' import React from 'react'
import { import { CCard, CCardHeader, CCardBody } from '@coreui/react-ts'
CCard,
CCardHeader,
CCardBody
} from '@coreui/react-ts'
import { DocsLink } from 'src/reusable' import { DocsLink } from 'src/reusable'
const Typography = () => { const Typography = () => {
@ -12,68 +8,94 @@ const Typography = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Headings Headings
<DocsLink href="https://coreui.io/docs/content/typography/"/> <DocsLink href="https://coreui.io/docs/content/typography/" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p>Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p> <p>
Documentation and examples for Bootstrap typography, including global settings,
headings, body text, lists, and more.
</p>
<table className="table"> <table className="table">
<thead> <thead>
<tr> <tr>
<th>Heading</th> <th>Heading</th>
<th>Example</th> <th>Example</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<p><code className="highlighter-rouge">&lt;h1&gt;&lt;/h1&gt;</code></p> <p>
</td> <code className="highlighter-rouge">&lt;h1&gt;&lt;/h1&gt;</code>
<td><span className="h1">h1. Bootstrap heading</span></td> </p>
</tr> </td>
<tr> <td>
<td> <span className="h1">h1. Bootstrap heading</span>
<p><code className="highlighter-rouge">&lt;h2&gt;&lt;/h2&gt;</code></p> </td>
</td> </tr>
<td><span className="h2">h2. Bootstrap heading</span></td> <tr>
</tr> <td>
<tr> <p>
<td> <code className="highlighter-rouge">&lt;h2&gt;&lt;/h2&gt;</code>
<p><code className="highlighter-rouge">&lt;h3&gt;&lt;/h3&gt;</code></p> </p>
</td> </td>
<td><span className="h3">h3. Bootstrap heading</span></td> <td>
</tr> <span className="h2">h2. Bootstrap heading</span>
<tr> </td>
<td> </tr>
<p><code className="highlighter-rouge">&lt;h4&gt;&lt;/h4&gt;</code></p> <tr>
</td> <td>
<td><span className="h4">h4. Bootstrap heading</span></td> <p>
</tr> <code className="highlighter-rouge">&lt;h3&gt;&lt;/h3&gt;</code>
<tr> </p>
<td> </td>
<p><code className="highlighter-rouge">&lt;h5&gt;&lt;/h5&gt;</code></p> <td>
</td> <span className="h3">h3. Bootstrap heading</span>
<td><span className="h5">h5. Bootstrap heading</span></td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<p><code className="highlighter-rouge">&lt;h6&gt;&lt;/h6&gt;</code></p> <p>
</td> <code className="highlighter-rouge">&lt;h4&gt;&lt;/h4&gt;</code>
<td><span className="h6">h6. Bootstrap heading</span></td> </p>
</tr> </td>
<td>
<span className="h4">h4. Bootstrap heading</span>
</td>
</tr>
<tr>
<td>
<p>
<code className="highlighter-rouge">&lt;h5&gt;&lt;/h5&gt;</code>
</p>
</td>
<td>
<span className="h5">h5. Bootstrap heading</span>
</td>
</tr>
<tr>
<td>
<p>
<code className="highlighter-rouge">&lt;h6&gt;&lt;/h6&gt;</code>
</p>
</td>
<td>
<span className="h6">h6. Bootstrap heading</span>
</td>
</tr>
</tbody> </tbody>
</table> </table>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Headings</CCardHeader>
Headings
</CCardHeader>
<CCardBody> <CCardBody>
<p><code className="highlighter-rouge">.h1</code> through <p>
<code className="highlighter-rouge">.h6</code> <code className="highlighter-rouge">.h1</code> through
classes are also available, for when you <code className="highlighter-rouge">.h6</code>
want to match the font styling of a heading but cannot use the classes are also available, for when you want to match the font styling of a heading but
associated HTML element.</p> cannot use the associated HTML element.
</p>
<div className="bd-example"> <div className="bd-example">
<p className="h1">h1. Bootstrap heading</p> <p className="h1">h1. Bootstrap heading</p>
<p className="h2">h2. Bootstrap heading</p> <p className="h2">h2. Bootstrap heading</p>
@ -85,64 +107,86 @@ const Typography = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
<div className="card-header"> <div className="card-header">Display headings</div>
Display headings
</div>
<div className="card-body"> <div className="card-body">
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using <p>
a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p> Traditional heading elements are designed to work best in the meat of your page content.
When you need a heading to stand out, consider using a <strong>display heading</strong>
—a larger, slightly more opinionated heading style.
</p>
<div className="bd-example bd-example-type"> <div className="bd-example bd-example-type">
<table className="table"> <table className="table">
<tbody> <tbody>
<tr> <tr>
<td><span className="display-1">Display 1</span></td> <td>
</tr> <span className="display-1">Display 1</span>
<tr> </td>
<td><span className="display-2">Display 2</span></td> </tr>
</tr> <tr>
<tr> <td>
<td><span className="display-3">Display 3</span></td> <span className="display-2">Display 2</span>
</tr> </td>
<tr> </tr>
<td><span className="display-4">Display 4</span></td> <tr>
</tr> <td>
<span className="display-3">Display 3</span>
</td>
</tr>
<tr>
<td>
<span className="display-4">Display 4</span>
</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Inline text elements</CCardHeader>
Inline text elements
</CCardHeader>
<CCardBody> <CCardBody>
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using <p>
a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p> Traditional heading elements are designed to work best in the meat of your page content.
When you need a heading to stand out, consider using a <strong>display heading</strong>
—a larger, slightly more opinionated heading style.
</p>
<div className="bd-example"> <div className="bd-example">
<p>You can use the mark tag to <mark>highlight</mark> text.</p> <p>
You can use the mark tag to <mark>highlight</mark> text.
</p>
<p> <p>
<del>This line of text is meant to be treated as deleted text.</del> <del>This line of text is meant to be treated as deleted text.</del>
</p> </p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p> <p>
<s>This line of text is meant to be treated as no longer accurate.</s>
</p>
<p> <p>
<ins>This line of text is meant to be treated as an addition to the document.</ins> <ins>This line of text is meant to be treated as an addition to the document.</ins>
</p> </p>
<p><u>This line of text will render as underlined</u></p> <p>
<u>This line of text will render as underlined</u>
</p>
<p> <p>
<small>This line of text is meant to be treated as fine print.</small> <small>This line of text is meant to be treated as fine print.</small>
</p> </p>
<p><strong>This line rendered as bold text.</strong></p> <p>
<p><em>This line rendered as italicized text.</em></p> <strong>This line rendered as bold text.</strong>
</p>
<p>
<em>This line rendered as italicized text.</em>
</p>
</div> </div>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>Description list alignment</CCardHeader>
Description list alignment
</CCardHeader>
<CCardBody> <CCardBody>
<p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can <p>
optionally add a <code className="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis.</p> Align terms and descriptions horizontally by using our grid system’s predefined classes
(or semantic mixins). For longer terms, you can optionally add a{' '}
<code className="highlighter-rouge">.text-truncate</code> class to truncate the text
with an ellipsis.
</p>
<div className="bd-example"> <div className="bd-example">
<dl className="row"> <dl className="row">
<dt className="col-sm-3">Description lists</dt> <dt className="col-sm-3">Description lists</dt>
@ -150,7 +194,9 @@ const Typography = () => {
<dt className="col-sm-3">Euismod</dt> <dt className="col-sm-3">Euismod</dt>
<dd className="col-sm-9"> <dd className="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p> <p>
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
</p>
<p>Donec id elit non mi porta gravida at eget metus.</p> <p>Donec id elit non mi porta gravida at eget metus.</p>
</dd> </dd>
@ -158,13 +204,18 @@ const Typography = () => {
<dd className="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd> <dd className="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt className="col-sm-3 text-truncate">Truncated term is truncated</dt> <dt className="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd className="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd> <dd className="col-sm-9">
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus.
</dd>
<dt className="col-sm-3">Nesting</dt> <dt className="col-sm-3">Nesting</dt>
<dd className="col-sm-9"> <dd className="col-sm-9">
<dl className="row"> <dl className="row">
<dt className="col-sm-4">Nested definition list</dt> <dt className="col-sm-4">Nested definition list</dt>
<dd className="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd> <dd className="col-sm-8">
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
</dd>
</dl> </dl>
</dd> </dd>
</dl> </dl>

41
src/views/users/User.js
View File

@ -1,41 +0,0 @@
import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react-ts'
import CIcon from '@coreui/icons-react'
import usersData from './UsersData'
const User = ({match}) => {
const user = usersData.find( user => user.id.toString() === match.params.id)
const userDetails = user ? Object.entries(user) :
[['id', (<span><CIcon className="text-muted" name="cui-icon-ban" /> Not found</span>)]]
return (
<CRow>
<CCol lg={6}>
<CCard className="mb-4">
<CCardHeader>
User id: {match.params.id}
</CCardHeader>
<CCardBody>
<table className="table table-striped table-hover">
<tbody>
{
userDetails.map(([key, value], index) => {
return (
<tr key={index.toString()}>
<td>{`${key}:`}</td>
<td><strong>{value}</strong></td>
</tr>
)
})
}
</tbody>
</table>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
export default User

86
src/views/users/Users.js
View File

@ -1,86 +0,0 @@
import React, { useState, useEffect } from 'react'
import { useHistory, useLocation } from 'react-router-dom'
import {
CBadge,
CCard,
CCardBody,
CCardHeader,
CCol,
CDataTable,
CRow,
CPagination
} from '@coreui/react'
import usersData from './UsersData'
const getBadge = status => {
switch (status) {
case 'Active': return 'success'
case 'Inactive': return 'secondary'
case 'Pending': return 'warning'
case 'Banned': return 'danger'
default: return 'primary'
}
}
const Users = () => {
const history = useHistory()
const queryPage = useLocation().search.match(/page=([0-9]+)/, '')
const currentPage = Number(queryPage && queryPage[1] ? queryPage[1] : 1)
const [page, setPage] = useState(currentPage)
const pageChange = newPage => {
currentPage !== newPage && history.push(`/users?page=${newPage}`)
}
useEffect(() => {
currentPage !== page && setPage(currentPage)
}, [currentPage, page])
return (
<CRow>
<CCol xl={6}>
<CCard className="mb-4">
<CCardHeader>
Users
<small className="text-muted"> example</small>
</CCardHeader>
<CCardBody>
<CDataTable
items={usersData}
fields={[
{ key: 'name', _classes: 'font-weight-bold' },
'registered', 'role', 'status'
]}
hover
striped
itemsPerPage={5}
activePage={page}
clickableRows
onRowClick={(item) => history.push(`/users/${item.id}`)}
scopedSlots = {{
'status':
(item)=>(
<td>
<CBadge color={getBadge(item.status)}>
{item.status}
</CBadge>
</td>
)
}}
/>
<CPagination
activePage={page}
onActivePageChange={pageChange}
pages={5}
doubleArrows={false}
align="center"
/>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
export default Users

29
src/views/users/UsersData.js
View File

@ -1,29 +0,0 @@
const usersData = [
{id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
{id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 4, name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 5, name: 'Friderik Dávid', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 6, name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 7, name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 8, name: 'Quintin Ed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 9, name: 'Enéas Kwadwo', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 10, name: 'Agapetus Tadeáš', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 11, name: 'Carwyn Fachtna', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 12, name: 'Nehemiah Tatius', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 13, name: 'Ebbe Gemariah', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 14, name: 'Eustorgios Amulius', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 15, name: 'Leopold Gáspár', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 16, name: 'Pompeius René', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 17, name: 'Paĉjo Jadon', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 18, name: 'Micheal Mercurius', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 19, name: 'Ganesha Dubhghall', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 20, name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 21, name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 22, name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 23, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'},
{id: 42, name: 'Ford Prefect', registered: '2001/05/25', role: 'Alien', status: 'Don\'t panic!'}
]
export default usersData

315
src/views/widgets/Widgets.js
View File

@ -7,7 +7,7 @@ import {
CWidgetIcon, CWidgetIcon,
CWidgetProgress, CWidgetProgress,
CWidgetProgressIcon, CWidgetProgressIcon,
CWidgetSimple CWidgetSimple,
} from '@coreui/react-ts' } from '@coreui/react-ts'
import WidgetsBrand from './WidgetsBrand' import WidgetsBrand from './WidgetsBrand'
@ -24,146 +24,297 @@ const Widgets = () => {
<WidgetsDropdown /> <WidgetsDropdown />
<CRow> <CRow>
<CCol xs="12" sm="6" lg="3"> <CCol xs="12" sm="6" lg="3">
<CWidgetProgress className="mb-4" value="89.9%" title="Widget title" progressColor="success" progressValue={89.9} text="Lorem ipsum dolor sit amet enim."/> <CWidgetProgress
className="mb-4"
value="89.9%"
title="Widget title"
progressColor="success"
progressValue={89.9}
text="Lorem ipsum dolor sit amet enim."
/>
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs="12" sm="6" lg="3">
<CWidgetProgress className="mb-4" value="12.124" title="Widget title" progressColor="info" progressValue={89.9} text="Lorem ipsum dolor sit amet enim."/> <CWidgetProgress
className="mb-4"
value="12.124"
title="Widget title"
progressColor="info"
progressValue={89.9}
text="Lorem ipsum dolor sit amet enim."
/>
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs="12" sm="6" lg="3">
<CWidgetProgress className="mb-4" value="$98.111,00" title="Widget title" progressColor="warning" progressValue={89.9} text="Lorem ipsum dolor sit amet enim."/> <CWidgetProgress
className="mb-4"
value="$98.111,00"
title="Widget title"
progressColor="warning"
progressValue={89.9}
text="Lorem ipsum dolor sit amet enim."
/>
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs="12" sm="6" lg="3">
<CWidgetProgress className="mb-4" value="2 TB" title="Widget title" progressValue={89.9} text="Lorem ipsum dolor sit amet enim." /> <CWidgetProgress
className="mb-4"
value="2 TB"
title="Widget title"
progressValue={89.9}
text="Lorem ipsum dolor sit amet enim."
/>
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs="12" sm="6" lg="3">
<CWidgetProgress className="mb-4" color="success" textColor="white" value="89.9%" title="Widget title" progressWhite progressValue={89.9} text="Lorem ipsum dolor sit amet enim."/> <CWidgetProgress
className="mb-4"
color="success"
textColor="white"
value="89.9%"
title="Widget title"
progressWhite
progressValue={89.9}
text="Lorem ipsum dolor sit amet enim."
/>
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs="12" sm="6" lg="3">
<CWidgetProgress className="mb-4" color="info" textColor="white" value="12.124" title="Widget title" progressWhite progressValue={89.9} text="Lorem ipsum dolor sit amet enim."/> <CWidgetProgress
className="mb-4"
color="info"
textColor="white"
value="12.124"
title="Widget title"
progressWhite
progressValue={89.9}
text="Lorem ipsum dolor sit amet enim."
/>
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs="12" sm="6" lg="3">
<CWidgetProgress className="mb-4" color="warning" textColor="white" value="$98.111,00" title="Widget title" progressWhite progressValue={89.9} text="Lorem ipsum dolor sit amet enim."/> <CWidgetProgress
className="mb-4"
color="warning"
textColor="white"
value="$98.111,00"
title="Widget title"
progressWhite
progressValue={89.9}
text="Lorem ipsum dolor sit amet enim."
/>
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs="12" sm="6" lg="3">
<CWidgetProgress className="mb-4" color="primary" textColor="white" value="2 TB" title="Widget title" progressWhite progressValue={89.9} text="Lorem ipsum dolor sit amet enim." /> <CWidgetProgress
className="mb-4"
color="primary"
textColor="white"
value="2 TB"
title="Widget title"
progressWhite
progressValue={89.9}
text="Lorem ipsum dolor sit amet enim."
/>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol xs="12" sm="6" lg="3"> <CCol xs="12" sm="6" lg="3">
<CWidgetIcon className="mb-3" icon={<CIcon width={24} name="cil-settings" className="icon icon-xl"/>} iconPadding={3} title="income" value="$1.999,50" color="primary" /> <CWidgetIcon
className="mb-3"
icon={<CIcon width={24} name="cil-settings" className="icon icon-xl" />}
iconPadding={3}
title="income"
value="$1.999,50"
color="primary"
/>
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs="12" sm="6" lg="3">
<CWidgetIcon className="mb-3" icon={<CIcon width={24} name="cil-user" className="icon icon-xl"/>} iconPadding={3} title="income" value="$1.999,50" color="info"/> <CWidgetIcon
className="mb-3"
icon={<CIcon width={24} name="cil-user" className="icon icon-xl" />}
iconPadding={3}
title="income"
value="$1.999,50"
color="info"
/>
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs="12" sm="6" lg="3">
<CWidgetIcon className="mb-3" icon={<CIcon width={24} name="cil-moon" className="icon icon-xl"/>} iconPadding={3} title="income" value="$1.999,50" color="warning"/> <CWidgetIcon
className="mb-3"
icon={<CIcon width={24} name="cil-moon" className="icon icon-xl" />}
iconPadding={3}
title="income"
value="$1.999,50"
color="warning"
/>
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs="12" sm="6" lg="3">
<CWidgetIcon className="mb-3" icon={<CIcon width={24} name="cil-bell" className="icon icon-xl"/>} iconPadding={3} title="income" value="$1.999,50" color="danger"/> <CWidgetIcon
className="mb-3"
icon={<CIcon width={24} name="cil-bell" className="icon icon-xl" />}
iconPadding={3}
title="income"
value="$1.999,50"
color="danger"
/>
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs="12" sm="6" lg="3">
<CWidgetIcon className="mb-3" icon={<CIcon width={24} name="cil-settings" className="icon icon-xl"/>} iconPadding={3} title="income" value="$1.999,50" color="primary" footer={ <CWidgetIcon
<CLink className="mb-3"
className="font-weight-bold font-xs btn-block text-muted" icon={<CIcon width={24} name="cil-settings" className="icon icon-xl" />}
href="https://coreui.io/" iconPadding={3}
rel="noopener norefferer" title="income"
target="_blank" value="$1.999,50"
> color="primary"
View more footer={
<CIcon name="cil-arrow-right" className="float-end" width="16"/> <CLink
</CLink> className="font-weight-bold font-xs btn-block text-muted"
href="https://coreui.io/"
rel="noopener norefferer"
target="_blank"
>
View more
<CIcon name="cil-arrow-right" className="float-end" width="16" />
</CLink>
} }
/> />
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs="12" sm="6" lg="3">
<CWidgetIcon className="mb-3" icon={<CIcon width={24} name="cil-laptop" className="icon icon-xl"/>} iconPadding={3} title="income" value="$1.999,50" color="info" footer={ <CWidgetIcon
<CLink className="mb-3"
className="font-weight-bold font-xs btn-block text-muted" icon={<CIcon width={24} name="cil-laptop" className="icon icon-xl" />}
href="https://coreui.io/" iconPadding={3}
rel="noopener norefferer" title="income"
target="_blank" value="$1.999,50"
> color="info"
View more footer={
<CIcon name="cil-arrow-right" className="float-end" width="16"/> <CLink
</CLink> className="font-weight-bold font-xs btn-block text-muted"
href="https://coreui.io/"
rel="noopener norefferer"
target="_blank"
>
View more
<CIcon name="cil-arrow-right" className="float-end" width="16" />
</CLink>
} }
/> />
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs="12" sm="6" lg="3">
<CWidgetIcon className="mb-3" icon={<CIcon width={24} name="cil-moon" className="icon icon-xl"/>} iconPadding={3} title="income" value="$1.999,50" color="warning" footer={ <CWidgetIcon
<CLink className="mb-3"
className="font-weight-bold font-xs btn-block text-muted" icon={<CIcon width={24} name="cil-moon" className="icon icon-xl" />}
href="https://coreui.io/" iconPadding={3}
rel="noopener norefferer" title="income"
target="_blank" value="$1.999,50"
> color="warning"
View more footer={
<CIcon name="cil-arrow-right" className="float-end" width="16"/> <CLink
</CLink> className="font-weight-bold font-xs btn-block text-muted"
href="https://coreui.io/"
rel="noopener norefferer"
target="_blank"
>
View more
<CIcon name="cil-arrow-right" className="float-end" width="16" />
</CLink>
} }
/> />
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs="12" sm="6" lg="3">
<CWidgetIcon className="mb-3" icon={<CIcon width={24} name="cil-bell" className="icon icon-xl"/>} iconPadding={3} title="income" value="$1.999,50" color="danger" footer={ <CWidgetIcon
<CLink className="mb-3"
className="font-weight-bold font-xs btn-block text-muted" icon={<CIcon width={24} name="cil-bell" className="icon icon-xl" />}
href="https://coreui.io/" iconPadding={3}
rel="noopener norefferer" title="income"
target="_blank" value="$1.999,50"
> color="danger"
View more footer={
<CIcon name="cil-arrow-right" className="float-end" width="16"/> <CLink
</CLink> className="font-weight-bold font-xs btn-block text-muted"
href="https://coreui.io/"
rel="noopener norefferer"
target="_blank"
>
View more
<CIcon name="cil-arrow-right" className="float-end" width="16" />
</CLink>
} }
/> />
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs="12" sm="6" lg="3">
<CWidgetIcon className="mb-3" padding={0} icon={<CIcon width={24} name="cil-settings" className="icon icon-xl"/>} iconPadding={4} title="income" value="$1.999,50" color="primary" /> <CWidgetIcon
className="mb-3"
padding={0}
icon={<CIcon width={24} name="cil-settings" className="icon icon-xl" />}
iconPadding={4}
title="income"
value="$1.999,50"
color="primary"
/>
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs="12" sm="6" lg="3">
<CWidgetIcon className="mb-3" padding={0} icon={<CIcon width={24} name="cil-user" className="icon icon-xl"/>} iconPadding={4} title="income" value="$1.999,50" color="info"/> <CWidgetIcon
className="mb-3"
padding={0}
icon={<CIcon width={24} name="cil-user" className="icon icon-xl" />}
iconPadding={4}
title="income"
value="$1.999,50"
color="info"
/>
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs="12" sm="6" lg="3">
<CWidgetIcon className="mb-3" padding={0} icon={<CIcon width={24} name="cil-moon" className="icon icon-xl"/>} iconPadding={4} title="income" value="$1.999,50" color="warning"/> <CWidgetIcon
className="mb-3"
padding={0}
icon={<CIcon width={24} name="cil-moon" className="icon icon-xl" />}
iconPadding={4}
title="income"
value="$1.999,50"
color="warning"
/>
</CCol> </CCol>
<CCol xs="12" sm="6" lg="3"> <CCol xs="12" sm="6" lg="3">
<CWidgetIcon className="mb-3" padding={0} icon={<CIcon width={24} name="cil-bell" className="icon icon-xl"/>} iconPadding={4} title="income" value="$1.999,50" color="danger"/> <CWidgetIcon
className="mb-3"
padding={0}
icon={<CIcon width={24} name="cil-bell" className="icon icon-xl" />}
iconPadding={4}
title="income"
value="$1.999,50"
color="danger"
/>
</CCol> </CCol>
</CRow> </CRow>
<WidgetsBrand/> <WidgetsBrand />
<WidgetsBrand withCharts/> <WidgetsBrand withCharts />
<CCardGroup className="mb-4"> <CCardGroup className="mb-4">
<CWidgetProgressIcon <CWidgetProgressIcon
icon={<CIcon name="cil-people" className="icon icon-2xl"/>} icon={<CIcon name="cil-people" className="icon icon-2xl" />}
value="87.500" value="87.500"
title="Visitors" title="Visitors"
progressColor="info" progressColor="info"
progressValue={75} progressValue={75}
/> />
<CWidgetProgressIcon <CWidgetProgressIcon
icon={<CIcon name="cil-userFollow" className="icon icon-2xl"/>} icon={<CIcon name="cil-userFollow" className="icon icon-2xl" />}
value="385" value="385"
title="New Clients" title="New Clients"
progressColor="success" progressColor="success"
progressValue={75} progressValue={75}
/> />
<CWidgetProgressIcon <CWidgetProgressIcon
icon={<CIcon name="cil-basket" className="icon icon-2xl"/>} icon={<CIcon name="cil-basket" className="icon icon-2xl" />}
value="1238" value="1238"
title="Products sold" title="Products sold"
progressColor="warning" progressColor="warning"
progressValue={75} progressValue={75}
/> />
<CWidgetProgressIcon <CWidgetProgressIcon
icon={<CIcon name="cil-chartPie" className="icon icon-2xl"/>} icon={<CIcon name="cil-chartPie" className="icon icon-2xl" />}
value="28%" value="28%"
title="Returning Visitors" title="Returning Visitors"
progressValue={75} progressValue={75}
/> />
<CWidgetProgressIcon <CWidgetProgressIcon
icon={<CIcon name="cil-speedometer" className="icon icon-2xl"/>} icon={<CIcon name="cil-speedometer" className="icon icon-2xl" />}
value="5:34:11" value="5:34:11"
title="Avg. Time" title="Avg. Time"
progressColor="danger" progressColor="danger"
@ -173,7 +324,7 @@ const Widgets = () => {
<CRow> <CRow>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidgetProgressIcon <CWidgetProgressIcon
icon={<CIcon name="cil-people" height="36"/>} icon={<CIcon name="cil-people" height="36" />}
value="87.500" value="87.500"
title="Visitors" title="Visitors"
progressColor="info" progressColor="info"
@ -182,7 +333,7 @@ const Widgets = () => {
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidgetProgressIcon <CWidgetProgressIcon
icon={<CIcon name="cil-userFollow" height="36"/>} icon={<CIcon name="cil-userFollow" height="36" />}
value="385" value="385"
title="New Clients" title="New Clients"
progressColor="success" progressColor="success"
@ -191,7 +342,7 @@ const Widgets = () => {
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidgetProgressIcon <CWidgetProgressIcon
icon={<CIcon name="cil-basket" height="36"/>} icon={<CIcon name="cil-basket" height="36" />}
value="1238" value="1238"
title="Products sold" title="Products sold"
progressColor="warning" progressColor="warning"
@ -200,7 +351,7 @@ const Widgets = () => {
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidgetProgressIcon <CWidgetProgressIcon
icon={<CIcon name="cil-chartPie" height="36"/>} icon={<CIcon name="cil-chartPie" height="36" />}
value="28%" value="28%"
title="Returning Visitors" title="Returning Visitors"
progressColor="primary" progressColor="primary"
@ -209,7 +360,7 @@ const Widgets = () => {
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidgetProgressIcon <CWidgetProgressIcon
icon={<CIcon name="cil-speedometer" height="36"/>} icon={<CIcon name="cil-speedometer" height="36" />}
value="5:34:11" value="5:34:11"
title="Avg. Time" title="Avg. Time"
progressColor="danger" progressColor="danger"
@ -218,7 +369,7 @@ const Widgets = () => {
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidgetProgressIcon <CWidgetProgressIcon
icon={<CIcon name="cil-speech" height="36"/>} icon={<CIcon name="cil-speech" height="36" />}
value="972" value="972"
title="comments" title="comments"
progressColor="info" progressColor="info"
@ -230,7 +381,7 @@ const Widgets = () => {
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidgetProgressIcon <CWidgetProgressIcon
color="info" color="info"
icon={<CIcon name="cil-people" height="36"/>} icon={<CIcon name="cil-people" height="36" />}
value="87.500" value="87.500"
title="Visitors" title="Visitors"
progressValue={75} progressValue={75}
@ -240,7 +391,7 @@ const Widgets = () => {
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidgetProgressIcon <CWidgetProgressIcon
color="success" color="success"
icon={<CIcon name="cil-userFollow" height="36"/>} icon={<CIcon name="cil-userFollow" height="36" />}
value="385" value="385"
title="New Clients" title="New Clients"
progressValue={75} progressValue={75}
@ -250,7 +401,7 @@ const Widgets = () => {
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidgetProgressIcon <CWidgetProgressIcon
color="warning" color="warning"
icon={<CIcon name="cil-basket" height="36"/>} icon={<CIcon name="cil-basket" height="36" />}
value="1238" value="1238"
title="Products sold" title="Products sold"
progressValue={75} progressValue={75}
@ -260,7 +411,7 @@ const Widgets = () => {
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidgetProgressIcon <CWidgetProgressIcon
color="primary" color="primary"
icon={<CIcon name="cil-chartPie" height="36"/>} icon={<CIcon name="cil-chartPie" height="36" />}
value="28%" value="28%"
title="Returning Visitors" title="Returning Visitors"
progressValue={75} progressValue={75}
@ -270,7 +421,7 @@ const Widgets = () => {
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidgetProgressIcon <CWidgetProgressIcon
color="danger" color="danger"
icon={<CIcon name="cil-speedometer" height="36"/>} icon={<CIcon name="cil-speedometer" height="36" />}
value="5:34:11" value="5:34:11"
title="Avg. Time" title="Avg. Time"
progressValue={75} progressValue={75}
@ -280,7 +431,7 @@ const Widgets = () => {
<CCol sm="6" md="2"> <CCol sm="6" md="2">
<CWidgetProgressIcon <CWidgetProgressIcon
color="info" color="info"
icon={<CIcon name="cil-speech" height="36"/>} icon={<CIcon name="cil-speech" height="36" />}
value="972" value="972"
title="comments" title="comments"
progressValue={75} progressValue={75}
@ -291,32 +442,32 @@ const Widgets = () => {
<CRow> <CRow>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123"> <CWidgetSimple title="title" value="1,123">
<ChartLineSimple style={{ height: '40px' }} borderColor="danger"/> <ChartLineSimple style={{ height: '40px' }} borderColor="danger" />
</CWidgetSimple> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123"> <CWidgetSimple title="title" value="1,123">
<ChartLineSimple style={{ height: '40px' }} borderColor="primary"/> <ChartLineSimple style={{ height: '40px' }} borderColor="primary" />
</CWidgetSimple> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123"> <CWidgetSimple title="title" value="1,123">
<ChartLineSimple style={{ height: '40px' }} borderColor="success"/> <ChartLineSimple style={{ height: '40px' }} borderColor="success" />
</CWidgetSimple> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123"> <CWidgetSimple title="title" value="1,123">
<ChartBarSimple style={{ height: '40px' }} backgroundColor="danger"/> <ChartBarSimple style={{ height: '40px' }} backgroundColor="danger" />
</CWidgetSimple> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123"> <CWidgetSimple title="title" value="1,123">
<ChartBarSimple style={{ height: '40px' }} backgroundColor="primary"/> <ChartBarSimple style={{ height: '40px' }} backgroundColor="primary" />
</CWidgetSimple> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123"> <CWidgetSimple title="title" value="1,123">
<ChartBarSimple style={{ height: '40px' }} backgroundColor="success"/> <ChartBarSimple style={{ height: '40px' }} backgroundColor="success" />
</CWidgetSimple> </CWidgetSimple>
</CCol> </CCol>
</CRow> </CRow>

330
src/views/widgets/WidgetsBrand.js
View File

@ -1,187 +1,173 @@
import React from 'react'; import React from 'react'
import PropTypes from 'prop-types'; import PropTypes from 'prop-types'
import { CWidgetBrand, CRow, CCol } from '@coreui/react-ts'; import { CWidgetBrand, CRow, CCol } from '@coreui/react-ts'
import CIcon from '@coreui/icons-react'; import CIcon from '@coreui/icons-react'
import ChartLineSimple from '../charts/ChartLineSimple'; import ChartLineSimple from '../charts/ChartLineSimple'
const WidgetsBrand = ({withCharts})=>{
const WidgetsBrand = ({ withCharts }) => {
// render // render
return withCharts ? return withCharts ? (
<CRow> <CRow>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetBrand <CWidgetBrand
className="mb-4" className="mb-4"
headerChildren={ headerChildren={
<> <>
<CIcon <CIcon name="cib-facebook" height="52" className="my-4 text-white" />
name="cib-facebook" <ChartLineSimple
height="52" className="position-absolute w-100 h-100"
className="my-4 text-white" backgroundColor="rgba(255,255,255,.1)"
/> dataPoints={[65, 59, 84, 84, 51, 55, 40]}
<ChartLineSimple label="Friends"
className="position-absolute w-100 h-100" labels="months"
backgroundColor="rgba(255,255,255,.1)" />
dataPoints={[65, 59, 84, 84, 51, 55, 40]} </>
label="Friends" }
labels="months" values={[
/> ['89k', 'friends'],
</> ['459', 'feeds'],
} ]}
values={[['89k', 'friends'], ['459', 'feeds']]} style={{
style={{ '--cui-card-cap-bg': '#3b5998',
"--cui-card-cap-bg": "#3b5998" }}
}} />
/> </CCol>
</CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetBrand <CWidgetBrand
className="mb-4" className="mb-4"
headerChildren={ headerChildren={
<> <>
<CIcon <CIcon name="cib-twitter" height="52" className="my-4 text-white" />
name="cib-twitter" <ChartLineSimple
height="52" className="position-absolute w-100 h-100"
className="my-4 text-white" backgroundColor="rgba(255,255,255,.1)"
/> dataPoints={[1, 13, 9, 17, 34, 41, 38]}
<ChartLineSimple label="Followers"
className="position-absolute w-100 h-100" labels="months"
backgroundColor="rgba(255,255,255,.1)" />
dataPoints={[1, 13, 9, 17, 34, 41, 38]} </>
label="Followers" }
labels="months" values={[
/> ['973k', 'followers'],
</> ['1.792', 'tweets'],
} ]}
values={[['973k', 'followers'], ['1.792', 'tweets']]} style={{
style={{ '--cui-card-cap-bg': '#00aced',
"--cui-card-cap-bg": "#00aced" }}
}} />
/> </CCol>
</CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetBrand <CWidgetBrand
className="mb-4" className="mb-4"
headerChildren={ headerChildren={
<> <>
<CIcon <CIcon name="cib-linkedin" height="52" className="my-4 text-white" />
name="cib-linkedin" <ChartLineSimple
height="52" className="position-absolute w-100 h-100"
className="my-4 text-white" backgroundColor="rgba(255,255,255,.1)"
/> dataPoints={[78, 81, 80, 45, 34, 12, 40]}
<ChartLineSimple label="Contacts"
className="position-absolute w-100 h-100" labels="months"
backgroundColor="rgba(255,255,255,.1)" />
dataPoints={[78, 81, 80, 45, 34, 12, 40]} </>
label="Contacts" }
labels="months" values={[
/> ['500+', 'contacts'],
</> ['292', 'feeds'],
} ]}
values={[['500+', 'contacts'], ['292', 'feeds']]} style={{
style={{ '--cui-card-cap-bg': '#4875b4',
"--cui-card-cap-bg": "#4875b4" }}
}} />
/> </CCol>
</CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetBrand <CWidgetBrand
className="mb-4" className="mb-4"
color="warning" color="warning"
headerChildren={ headerChildren={
<> <>
<CIcon <CIcon name="cil-calendar" height="52" className="my-4 text-white" />
name="cil-calendar" <ChartLineSimple
height="52" className="position-absolute w-100 h-100"
className="my-4 text-white" backgroundColor="rgba(255,255,255,.1)"
/> dataPoints={[35, 23, 56, 22, 97, 23, 64]}
<ChartLineSimple label="Followers"
className="position-absolute w-100 h-100" labels="months"
backgroundColor="rgba(255,255,255,.1)" />
dataPoints={[35, 23, 56, 22, 97, 23, 64]} </>
label="Followers" }
labels="months" values={[
/> ['12+', 'events'],
</> ['4', 'meetings'],
} ]}
values={[['12+', 'events'], ['4', 'meetings']]} />
/> </CCol>
</CCol> </CRow>
</CRow> : <CRow> ) : (
<CCol sm="6" lg="3"> <CRow>
<CWidgetBrand <CCol sm="6" lg="3">
className="mb-4" <CWidgetBrand
headerChildren={ className="mb-4"
<CIcon headerChildren={<CIcon name="cib-twitter" height="52" className="my-4 text-white" />}
name="cib-twitter" values={[
height="52" ['89k', 'friends'],
className="my-4 text-white" ['459', 'feeds'],
/> ]}
} style={{
values={[['89k', 'friends'], ['459', 'feeds']]} '--cui-card-cap-bg': '#3b5998',
style={{ }}
"--cui-card-cap-bg": "#3b5998" />
}} </CCol>
/>
</CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetBrand <CWidgetBrand
className="mb-4" className="mb-4"
headerChildren={ headerChildren={<CIcon name="cib-twitter" height="52" className="my-4 text-white" />}
<CIcon values={[
name="cib-twitter" ['973k', 'followers'],
height="52" ['1.792', 'tweets'],
className="my-4 text-white" ]}
/> style={{
} '--cui-card-cap-bg': '#00aced',
values={[['973k', 'followers'], ['1.792', 'tweets']]} }}
style={{ />
"--cui-card-cap-bg": "#00aced" </CCol>
}}
/>
</CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetBrand <CWidgetBrand
className="mb-4" className="mb-4"
headerChildren={ headerChildren={<CIcon name="cib-linkedin" height="52" className="my-4 text-white" />}
<CIcon values={[
name="cib-linkedin" ['500+', 'contacts'],
height="52" ['292', 'feeds'],
className="my-4 text-white" ]}
/> style={{
} '--cui-card-cap-bg': '#4875b4',
values={[['500+', 'contacts'], ['292', 'feeds']]} }}
style={{ />
"--cui-card-cap-bg": "#4875b4" </CCol>
}}
/>
</CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetBrand <CWidgetBrand
className="mb-4" className="mb-4"
color="warning" color="warning"
headerChildren={ headerChildren={<CIcon name="cil-calendar" height="52" className="my-4 text-white" />}
<CIcon values={[
name="cil-calendar" ['12+', 'events'],
height="52" ['4', 'meetings'],
className="my-4 text-white" ]}
/> />
} </CCol>
values={[['12+', 'events'], ['4', 'meetings']]} </CRow>
/> )
</CCol>
</CRow>
} }
WidgetsBrand.propTypes = { WidgetsBrand.propTypes = {
withCharts: PropTypes.bool withCharts: PropTypes.bool,
} }
export default WidgetsBrand export default WidgetsBrand

34
src/views/widgets/WidgetsDropdown.js
View File

@ -6,7 +6,7 @@ import {
CDropdownMenu, CDropdownMenu,
CDropdownItem, CDropdownItem,
CDropdownToggle, CDropdownToggle,
CWidgetDropdown CWidgetDropdown,
} from '@coreui/react-ts' } from '@coreui/react-ts'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
import ChartLineSimple from '../charts/ChartLineSimple' import ChartLineSimple from '../charts/ChartLineSimple'
@ -17,14 +17,15 @@ const WidgetsDropdown = () => {
return ( return (
<CRow> <CRow>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetDropdown className="mb-4" <CWidgetDropdown
className="mb-4"
color="primary" color="primary"
value="9.823" value="9.823"
title="Members online" title="Members online"
action={ action={
<CDropdown> <CDropdown>
<CDropdownToggle color="transparent" caret={false}> <CDropdownToggle color="transparent" caret={false}>
<CIcon name="cil-options" className="text-high-emphasis-inverse"/> <CIcon name="cil-options" className="text-high-emphasis-inverse" />
</CDropdownToggle> </CDropdownToggle>
{/* TODO: placement doesn't work */} {/* TODO: placement doesn't work */}
<CDropdownMenu placement="bottom-end"> <CDropdownMenu placement="bottom-end">
@ -39,7 +40,7 @@ const WidgetsDropdown = () => {
<ChartLineSimple <ChartLineSimple
pointed pointed
className="chart-wrapper mt-3 mx-3" className="chart-wrapper mt-3 mx-3"
style={{height: '70px'}} style={{ height: '70px' }}
dataPoints={[65, 59, 84, 84, 51, 55, 40]} dataPoints={[65, 59, 84, 84, 51, 55, 40]}
pointHoverBackgroundColor="primary" pointHoverBackgroundColor="primary"
label="Members" label="Members"
@ -50,14 +51,15 @@ const WidgetsDropdown = () => {
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetDropdown className="mb-4" <CWidgetDropdown
className="mb-4"
color="info" color="info"
value="9.823" value="9.823"
title="Members online" title="Members online"
action={ action={
<CDropdown> <CDropdown>
<CDropdownToggle color="transparent" caret={false}> <CDropdownToggle color="transparent" caret={false}>
<CIcon name="cil-options" className="text-high-emphasis-inverse"/> <CIcon name="cil-options" className="text-high-emphasis-inverse" />
</CDropdownToggle> </CDropdownToggle>
<CDropdownMenu placement="bottom-end"> <CDropdownMenu placement="bottom-end">
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
@ -71,10 +73,10 @@ const WidgetsDropdown = () => {
<ChartLineSimple <ChartLineSimple
pointed pointed
className="mt-3 mx-3" className="mt-3 mx-3"
style={{height: '70px'}} style={{ height: '70px' }}
dataPoints={[1, 18, 9, 17, 34, 22, 11]} dataPoints={[1, 18, 9, 17, 34, 22, 11]}
pointHoverBackgroundColor="info" pointHoverBackgroundColor="info"
options={{ elements: { line: { tension: 0.00001 }}}} options={{ elements: { line: { tension: 0.00001 } } }}
label="Members" label="Members"
labels="months" labels="months"
/> />
@ -83,14 +85,15 @@ const WidgetsDropdown = () => {
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetDropdown className="mb-4" <CWidgetDropdown
className="mb-4"
color="warning" color="warning"
value="9.823" value="9.823"
title="Members online" title="Members online"
action={ action={
<CDropdown> <CDropdown>
<CDropdownToggle color="transparent" caret={false}> <CDropdownToggle color="transparent" caret={false}>
<CIcon name="cil-options" className="text-high-emphasis-inverse"/> <CIcon name="cil-options" className="text-high-emphasis-inverse" />
</CDropdownToggle> </CDropdownToggle>
<CDropdownMenu placement="bottom-end"> <CDropdownMenu placement="bottom-end">
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
@ -103,10 +106,10 @@ const WidgetsDropdown = () => {
chart={ chart={
<ChartLineSimple <ChartLineSimple
className="mt-3" className="mt-3"
style={{height: '70px'}} style={{ height: '70px' }}
backgroundColor="rgba(255,255,255,.2)" backgroundColor="rgba(255,255,255,.2)"
dataPoints={[78, 81, 80, 45, 34, 12, 40]} dataPoints={[78, 81, 80, 45, 34, 12, 40]}
options={{ elements: { line: { borderWidth: 2.5 }}}} options={{ elements: { line: { borderWidth: 2.5 } } }}
pointHoverBackgroundColor="warning" pointHoverBackgroundColor="warning"
label="Members" label="Members"
labels="months" labels="months"
@ -116,14 +119,15 @@ const WidgetsDropdown = () => {
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetDropdown className="mb-4" <CWidgetDropdown
className="mb-4"
color="danger" color="danger"
value="9.823" value="9.823"
title="Members online" title="Members online"
action={ action={
<CDropdown> <CDropdown>
<CDropdownToggle color="transparent" caret={false}> <CDropdownToggle color="transparent" caret={false}>
<CIcon name="cil-options" className="text-high-emphasis-inverse"/> <CIcon name="cil-options" className="text-high-emphasis-inverse" />
</CDropdownToggle> </CDropdownToggle>
<CDropdownMenu placement="bottom-end"> <CDropdownMenu placement="bottom-end">
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
@ -136,7 +140,7 @@ const WidgetsDropdown = () => {
chart={ chart={
<ChartBarSimple <ChartBarSimple
className="mt-3 mx-3" className="mt-3 mx-3"
style={{height: '70px'}} style={{ height: '70px' }}
backgroundColor="rgb(250, 152, 152)" backgroundColor="rgb(250, 152, 152)"
label="Members" label="Members"
labels="months" labels="months"