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

refactor: update to CoreUI v4

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-04-09 23:01:47 +02:00
parent 2a2fc79524
commit f502f58695
29 changed files with 883 additions and 1429 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.js
View File

@ -9,7 +9,7 @@ const loading = (
)
// Containers
const TheLayout = React.lazy(() => import('./containers/TheLayout'));
const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'));
// Pages
const Login = React.lazy(() => import('./views/pages/login/Login'));
@ -28,7 +28,7 @@ class App extends Component {
<Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />
<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 => <TheLayout {...props}/>} />
<Route path="/" name="Home" render={props => <DefaultLayout {...props}/>} />
</Switch>
</React.Suspense>
</HashRouter>

52
src/components/AppBreadcrumb.js Normal file
View File

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

4
src/containers/TheFooter.js → src/components/AppFooter.js
View File

@ -1,7 +1,7 @@
import React from 'react'
import { CFooter } from '@coreui/react-ts'
const TheFooter = () => {
const AppFooter = () => {
return (
<CFooter>
<div>
@ -16,4 +16,4 @@ const TheFooter = () => {
)
}
export default React.memo(TheFooter)
export default React.memo(AppFooter)

54
src/containers/TheHeader.js → src/components/AppHeader.js
View File

@ -1,29 +1,27 @@
import React from "react";
import { NavLink } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { CToggler, CBreadcrumbRouter } from "@coreui/react";
import {
CContainer,
CHeader,
CHeaderBrand,
CHeaderDivider,
CHeaderNav,
CHeaderToggler,
CNavLink,
CNavItem,
} from "@coreui/react-ts";
import CIcon from "@coreui/icons-react";
// routes config
import routes from "../routes";
import {
TheHeaderDropdown,
TheHeaderDropdownMssg,
TheHeaderDropdownNotif,
TheHeaderDropdownTasks,
} from "./index";
AppBreadcrumb,
AppHeaderDropdown,
AppHeaderDropdownMssg,
AppHeaderDropdownNotif,
AppHeaderDropdownTasks,
} from "../containers/index";
const TheHeader = () => {
const AppHeader = () => {
const dispatch = useDispatch();
const sidebarShow = useSelector((state) => state.sidebarShow);
@ -44,12 +42,12 @@ const TheHeader = () => {
return (
<CHeader position="sticky" className="mb-4">
<CContainer fluid>
<CToggler
<CHeaderToggler
inHeader
className="ms-md-3 d-lg-none"
onClick={toggleSidebarMobile}
/>
<CToggler
<CHeaderToggler
inHeader
className="ms-3 d-md-down-none"
onClick={toggleSidebar}
@ -79,38 +77,18 @@ const TheHeader = () => {
</CHeaderNav>
<CHeaderNav>
<TheHeaderDropdownNotif />
<TheHeaderDropdownTasks />
<TheHeaderDropdownMssg />
<TheHeaderDropdown />
<AppHeaderDropdownNotif />
<AppHeaderDropdownTasks />
<AppHeaderDropdownMssg />
<AppHeaderDropdown />
</CHeaderNav>
</CContainer>
<CHeaderDivider />
<CContainer fluid>
<CBreadcrumbRouter
className="border-0 c-subheader-nav m-0 px-0 px-md-3"
routes={routes}
/>
{/* <CHeaderNav>
<CNavItem>
<CNavLink href="#">
<CIcon name="cil-speech" alt="Settings" />
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink to="/users" component={NavLink} activeClassName="active">
<CIcon name="cil-graph" alt="Dashboard" />&nbsp;Dashboard
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">
<CIcon name="cil-settings" alt="Settings" />&nbsp;Settings
</CNavLink>
</CNavItem>
</CHeaderNav> */}
<AppBreadcrumb/>
</CContainer>
</CHeader>
);
};
export default TheHeader;
export default AppHeader

33
src/containers/TheSidebar.js → src/components/AppSidebar.js
View File

@ -1,63 +1,52 @@
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import {
// CCreateElement,
// CSidebarNavDivider,
// CSidebarNavTitle,
CSidebarMinimizer,
// CSidebarNavDropdown,
// CSidebarNavItem,
} from '@coreui/react'
import {
CSidebar,
CSidebarBrand,
CSidebarNav,
CSidebarToggler,
CCreateNavItem,
} from '@coreui/react-ts'
import CIcon from '@coreui/icons-react'
// sidebar nav config
import navigation from './_nav'
import navigation from '../containers/_nav'
const TheSidebar = () => {
const AppSidebar = () => {
const dispatch = useDispatch()
const show = useSelector(state => state.sidebarShow)
const unfoldable = useSelector(state => state.sidebarUnfoldable)
// const visible = useSelector(state => state.sidebarUnfoldable)
return (
<CSidebar
position="fixed"
selfHiding="md"
unfoldable={unfoldable}
// show={show}
// onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })}
>
<CSidebarBrand className="d-md-down-none" to="/">
<CIcon
className="c-sidebar-brand-full"
className="sidebar-brand-full"
name="logo-negative"
height={35}
/>
<CIcon
className="c-sidebar-brand-minimized"
className="sidebar-brand-narrow"
name="sygnet"
height={35}
/>
</CSidebarBrand>
<CSidebarNav>
<CCreateNavItem
items={navigation}
// components={{
// CSidebarNavDivider,
// CSidebarNavDropdown,
// CSidebarNavItem,
// CSidebarNavTitle
// }}
/>
</CSidebarNav>
<CSidebarMinimizer className="c-d-md-down-none"/>
<CSidebarToggler className="c-d-md-down-none" onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}/>
</CSidebar>
)
}
export default React.memo(TheSidebar)
export default React.memo(AppSidebar)

4
src/containers/TheHeaderDropdown.js → src/components/header/AppHeaderDropdown.js
View File

@ -11,7 +11,7 @@ import {
} from '@coreui/react-ts'
import CIcon from '@coreui/icons-react'
const TheHeaderDropdown = () => {
const AppHeaderDropdown = () => {
return (
<CDropdown
variant="nav-item"
@ -73,4 +73,4 @@ const TheHeaderDropdown = () => {
)
}
export default TheHeaderDropdown
export default AppHeaderDropdown

45
src/containers/TheHeaderDropdownMssg.js → src/components/header/AppHeaderDropdownMssg.js
View File

@ -1,17 +1,16 @@
import React from 'react'
import {
CAvatar,
CBadge,
CDropdown,
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
CImage
} from '@coreui/react-ts'
import {
CImg
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
const TheHeaderDropdownMssg = () => {
const AppHeaderDropdownMssg = () => {
const itemsCount = 4
return (
<CDropdown
@ -32,14 +31,7 @@ const TheHeaderDropdownMssg = () => {
<CDropdownItem href="#">
<div className="message">
<div className="pt-3 me-3 float-start">
<div className="c-avatar">
<CImg
src={'avatars/7.jpg'}
className="c-avatar-img"
alt="admin@bootstrapmaster.com"
/>
<span className="c-avatar-status bg-success"></span>
</div>
<CAvatar image={'avatars/7.jpg'} status="success" />
</div>
<div>
<small className="text-muted">John Doe</small>
@ -57,14 +49,7 @@ const TheHeaderDropdownMssg = () => {
<CDropdownItem href="#">
<div className="message">
<div className="pt-3 me-3 float-start">
<div className="c-avatar">
<CImg
src={'avatars/6.jpg'}
className="c-avatar-img"
alt="admin@bootstrapmaster.com"
/>
<span className="c-avatar-status bg-warning"></span>
</div>
<CAvatar image={'avatars/6.jpg'} status="warning" />
</div>
<div>
<small className="text-muted">Jane Dovve</small>
@ -79,14 +64,7 @@ const TheHeaderDropdownMssg = () => {
<CDropdownItem href="#">
<div className="message">
<div className="pt-3 me-3 float-start">
<div className="c-avatar">
<CImg
src={'avatars/5.jpg'}
className="c-avatar-img"
alt="admin@bootstrapmaster.com"
/>
<span className="c-avatar-status bg-danger"></span>
</div>
<CAvatar image={'avatars/5.jpg'} status="danger" />
</div>
<div>
<small className="text-muted">Janet Doe</small>
@ -101,14 +79,7 @@ const TheHeaderDropdownMssg = () => {
<CDropdownItem href="#">
<div className="message">
<div className="pt-3 me-3 float-start">
<div className="c-avatar">
<CImg
src={'avatars/4.jpg'}
className="c-avatar-img"
alt="admin@bootstrapmaster.com"
/>
<span className="c-avatar-status bg-info"></span>
</div>
<CAvatar image={'avatars/4.jpg'} status="info" />
</div>
<div>
<small className="text-muted">Joe Doe</small>
@ -125,4 +96,4 @@ const TheHeaderDropdownMssg = () => {
)
}
export default TheHeaderDropdownMssg
export default AppHeaderDropdownMssg

4
src/containers/TheHeaderDropdownNotif.js → src/components/header/AppHeaderDropdownNotif.js
View File

@ -9,7 +9,7 @@ import {
} from '@coreui/react-ts'
import CIcon from '@coreui/icons-react'
const TheHeaderDropdownNotif = () => {
const AppHeaderDropdownNotif = () => {
const itemsCount = 5
return (
<CDropdown
@ -66,4 +66,4 @@ const TheHeaderDropdownNotif = () => {
)
}
export default TheHeaderDropdownNotif
export default AppHeaderDropdownNotif

4
src/containers/TheHeaderDropdownTasks.js → src/components/header/AppHeaderDropdownTasks.js
View File

@ -9,7 +9,7 @@ import {
} from '@coreui/react-ts'
import CIcon from '@coreui/icons-react'
const TheHeaderDropdownTasks = () => {
const AppHeaderDropdownTasks = () => {
const itemsCount = 5
return (
<CDropdown
@ -55,4 +55,4 @@ const TheHeaderDropdownTasks = () => {
)
}
export default TheHeaderDropdownTasks
export default AppHeaderDropdownTasks

5
src/containers/TheContent.js
View File

@ -4,8 +4,7 @@ import {
Route,
Switch
} from 'react-router-dom'
import { CFade } from '@coreui/react'
import { CContainer } from '@coreui/react-ts'
import { CContainer, CFade } from '@coreui/react-ts'
// routes config
import routes from '../routes'
@ -19,7 +18,7 @@ const loading = (
const TheContent = () => {
return (
<main className="c-main">
<CContainer fluid>
<CContainer>
<Suspense fallback={loading}>
<Switch>
{routes.map((route, idx) => {

6
src/containers/_nav.js
View File

@ -115,12 +115,6 @@ const _nav = [
anchor: 'Progress',
to: '/base/progress-bar',
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Switches',
to: '/base/switches',
},
{
_component: 'CNavItem',
as: NavLink,

34
src/containers/index.js
View File

@ -1,21 +1,23 @@
import AppBreadcrumb from '../components/AppBreadcrumb'
import TheContent from './TheContent'
import TheFooter from './TheFooter'
import TheHeader from './TheHeader'
import TheHeaderDropdown from './TheHeaderDropdown'
import TheHeaderDropdownMssg from './TheHeaderDropdownMssg'
import TheHeaderDropdownNotif from './TheHeaderDropdownNotif'
import TheHeaderDropdownTasks from './TheHeaderDropdownTasks'
import TheLayout from './TheLayout'
import TheSidebar from './TheSidebar'
import AppFooter from '../components/AppFooter'
import AppHeader from '../components/AppHeader'
import AppHeaderDropdown from '../components/header/AppHeaderDropdown'
import AppHeaderDropdownMssg from '../components/header/AppHeaderDropdownMssg'
import AppHeaderDropdownNotif from '../components/header/AppHeaderDropdownNotif'
import AppHeaderDropdownTasks from '../components/header/AppHeaderDropdownTasks'
import DefaultLayout from '../layout/DefaultLayout'
import AppSidebar from '../components/AppSidebar'
export {
AppBreadcrumb,
TheContent,
TheFooter,
TheHeader,
TheHeaderDropdown,
TheHeaderDropdownMssg,
TheHeaderDropdownNotif,
TheHeaderDropdownTasks,
TheLayout,
TheSidebar
AppFooter,
AppHeader,
AppHeaderDropdown,
AppHeaderDropdownMssg,
AppHeaderDropdownNotif,
AppHeaderDropdownTasks,
DefaultLayout,
AppSidebar
}

18
src/containers/TheLayout.js → src/layout/DefaultLayout.js
View File

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

2
src/reusable/DocsLink.js
View File

@ -1,5 +1,5 @@
import React from 'react'
import { CLink } from '@coreui/react'
import { CLink } from '@coreui/react-ts'
const DocsLink = props => {
const {

2
src/routes.js
View File

@ -16,7 +16,6 @@ const Navs = React.lazy(() => import('./views/base/navs/Navs'));
const Paginations = React.lazy(() => import('./views/base/paginations/Pagnations'));
const Popovers = React.lazy(() => import('./views/base/popovers/Popovers'));
const ProgressBar = React.lazy(() => import('./views/base/progress-bar/ProgressBar'));
const Switches = React.lazy(() => import('./views/base/switches/Switches'));
const Tabs = React.lazy(() => import('./views/base/tabs/Tabs'));
const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips'));
@ -60,7 +59,6 @@ const routes = [
{ path: '/base/paginations', name: 'Paginations', component: Paginations },
{ path: '/base/popovers', name: 'Popovers', component: Popovers },
{ path: '/base/progress-bar', name: 'Progress Bar', component: ProgressBar },
{ path: '/base/switches', name: 'Switches', component: Switches },
{ path: '/base/tables', name: 'Tables', component: Tables },
{ path: '/base/tabs', name: 'Tabs', component: Tabs },
{ path: '/base/tooltips', name: 'Tooltips', component: Tooltips },

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

@ -9,9 +9,7 @@ import {
CRow,
CLink,
} from "@coreui/react-ts";
import { CBreadcrumbRouter } from '@coreui/react'
import { DocsLink } from "src/reusable";
import routes from "../../../routes";
const Breadcrumbs = () => {
return (
@ -23,9 +21,6 @@ const Breadcrumbs = () => {
<DocsLink name="CBreadcrumb" />
</CCardHeader>
<CCardBody>
<h6>CBreadcrumbRouter wrapper component</h6>
<CBreadcrumbRouter routes={routes} />
<h6>Manual</h6>
<CBreadcrumb>
<CBreadcrumbItem>
<CLink href="#">Home</CLink>

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

@ -6,11 +6,9 @@ import {
CCardFooter,
CCardHeader,
CCol,
CFormCheck,
CRow,
CCollapse,
CLink
} from '@coreui/react-ts'
import { CFade, CSwitch } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { DocsLink } from 'src/reusable'
@ -62,7 +60,7 @@ const Cards = () => {
<CCard className="mb-4">
<CCardHeader>
Card with switch
<CSwitch className={'float-end mb-0'} color={'info'} defaultChecked size={'sm'} tabIndex="0" />
<CFormCheck switch className="float-end" id="formSwitchCheckDefault"/>
</CCardHeader>
<CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

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

@ -7,11 +7,9 @@ import {
CCardHeader,
CCol,
CCollapse,
CFade,
CRow
} from '@coreui/react-ts';
import {
CFade,
} from '@coreui/react';
import { DocsLink } from 'src/reusable'
const Collapses = () => {

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

@ -1,10 +1,4 @@
import React from 'react'
import {
CFade,
CValidFeedback,
CInvalidFeedback,
CSwitch
} from '@coreui/react'
import {
CButton,
CCard,
@ -17,9 +11,11 @@ import {
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
CFade,
CForm,
CFormCheck,
CFormControl,
CFormFeedback,
CFormLabel,
CFormText,
CFormSelect,
@ -181,7 +177,7 @@ const BasicForms = () => {
</CCol>
<CCol xs="12" md="9">
<CFormControl type="email" id="email-input" name="email-input" placeholder="Enter Email" autoComplete="email"/>
<CFormText className="help-block">Please enter your email</CFormText>
<CFormText>Please enter your email</CFormText>
</CCol>
</CRow>
<CRow className="mb-3">
@ -190,7 +186,7 @@ const BasicForms = () => {
</CCol>
<CCol xs="12" md="9">
<CFormControl type="password" id="password-input" name="password-input" placeholder="Password" autoComplete="new-password" />
<CFormText className="help-block">Please enter a complex password</CFormText>
<CFormText>Please enter a complex password</CFormText>
</CCol>
</CRow>
<CRow className="mb-3">
@ -288,43 +284,10 @@ const BasicForms = () => {
Switch checkboxes
</CCol>
<CCol sm="9">
<CSwitch
className="me-1"
color="primary"
defaultChecked
/>
<CSwitch
className="me-1"
color="success"
defaultChecked
variant="outline"
/>
<CSwitch
className="me-1"
color="warning"
defaultChecked
variant="opposite"
/>
<CSwitch
className="me-1"
color="danger"
defaultChecked
shape="rounded-pill"
/>
<CSwitch
className="me-1"
color="info"
defaultChecked
shape="rounded-pill"
variant="outline"
/>
<CSwitch
className="me-1"
color="dark"
defaultChecked
shape="rounded-pill"
variant="opposite"
/>
<CFormCheck switch label="Default switch checkbox input" 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>
</CRow>
<CRow className="mb-3">
@ -466,7 +429,7 @@ const BasicForms = () => {
</CCol>
<CCol xs="12" md="9">
<CFormControl type="email" id="hf-email" name="hf-email" placeholder="Enter Email..." autoComplete="email" />
<CFormText className="help-block">Please enter your email</CFormText>
<CFormText>Please enter your email</CFormText>
</CCol>
</CRow>
<CRow className="mb-3">
@ -475,7 +438,7 @@ const BasicForms = () => {
</CCol>
<CCol xs="12" md="9">
<CFormControl type="password" id="hf-password" name="hf-password" placeholder="Enter Password..." autoComplete="current-password"/>
<CFormText className="help-block">Please enter your password</CFormText>
<CFormText>Please enter your password</CFormText>
</CCol>
</CRow>
</CForm>
@ -494,12 +457,12 @@ const BasicForms = () => {
<div className="mb-3">
<CFormLabel htmlFor="nf-email">Email</CFormLabel>
<CFormControl type="email" id="nf-email" name="nf-email" placeholder="Enter Email.." autoComplete="email"/>
<CFormText className="help-block">Please enter your email</CFormText>
<CFormText>Please enter your email</CFormText>
</div>
<div className="mb-3">
<CFormLabel htmlFor="nf-password">Password</CFormLabel>
<CFormControl type="password" id="nf-password" name="nf-password" placeholder="Enter Password.." autoComplete="current-password"/>
<CFormText className="help-block">Please enter your password</CFormText>
<CFormText>Please enter your password</CFormText>
</div>
</CForm>
</CCardBody>
@ -615,12 +578,12 @@ const BasicForms = () => {
<div className="mb-3">
<CFormLabel htmlFor="inputIsValid">Input is valid</CFormLabel>
<CFormControl valid id="inputIsValid" />
<CValidFeedback>Cool! Input is valid</CValidFeedback>
<CFormFeedback valid>Cool! Input is valid</CFormFeedback>
</div>
<div className="mb-3">
<CFormLabel htmlFor="inputIsInvalid">Input is invalid</CFormLabel>
<CFormControl invalid id="inputIsInvalid" />
<CInvalidFeedback>Houston, we have a problem...</CInvalidFeedback>
<CFormFeedback invalid>Houston, we have a problem...</CFormFeedback>
</div>
</CCardBody>
</CCard>
@ -634,16 +597,16 @@ const BasicForms = () => {
<CForm className="was-validated">
<div className="mb-3">
<CFormLabel htmlFor="inputSuccess2i">Non-required input</CFormLabel>
<CFormControl className="form-control-success" id="inputSuccess2i" />
<CValidFeedback>Non-required</CValidFeedback>
<CFormControl id="inputSuccess2i" />
<CFormFeedback valid>Non-required</CFormFeedback>
</div>
<div className="mb-3">
<CFormLabel htmlFor="inputWarning2i">Required input</CFormLabel>
<CFormControl className="form-control-warning" id="inputWarning2i" required />
<CInvalidFeedback className="help-block">
<CFormControl id="inputWarning2i" required />
<CFormFeedback invalid>
Please provide a valid information
</CInvalidFeedback>
<CValidFeedback className="help-block">Input provided</CValidFeedback>
</CFormFeedback>
<CFormFeedback valid>Input provided</CFormFeedback>
</div>
</CForm>
</CCardBody>
@ -1077,7 +1040,7 @@ const BasicForms = () => {
<CInputGroupText>@</CInputGroupText>
<CFormControl id="prependedInput" size="16" type="text" />
</CInputGroup>
<p className="help-block">Here's some help text</p>
<p>Here's some help text</p>
</div>
</div>
<div className="mb-3">
@ -1087,7 +1050,7 @@ const BasicForms = () => {
<CFormControl id="appendedInput" size="16" type="text" />
<CInputGroupText>.00</CInputGroupText>
</CInputGroup>
<span className="help-block">Here's more help text</span>
<span>Here's more help text</span>
</div>
</div>
<div className="mb-3">

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

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

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

@ -1,9 +1,4 @@
import React from 'react'
import {
CJumbotron,
CEmbed,
CEmbedItem
} from '@coreui/react'
import {
CButton,
CCard,
@ -19,58 +14,35 @@ const Jumbotrons = () => {
return (
<>
<CRow>
<CCol xs>
<CCard className="mb-4">
<CCardHeader>
Jumbotron
<DocsLink name="CJumbotron"/>
</CCardHeader>
<CCardBody>
<CJumbotron className="border">
<h1 className="display-3">Hello, world!</h1>
<p className="lead">This is a simple hero unit, a simple Jumbotron - style component for calling extra
attention to featured content or information.</p>
<hr className="my-2" />
<p>It uses utility classes for typgraphy and spacing to space content out within the larger container.</p>
<p className="lead">
<CButton color="primary" size="lg">Learn More</CButton>
</p>
</CJumbotron>
</CCardBody>
</CCard>
</CCol>
<CCol xs>
<CCard className="mb-4">
<CCardHeader>
Jumbotron
<small> fluid</small>
</CCardHeader>
<CCardBody>
<CJumbotron fluid>
<CContainer fluid>
<h1 className="display-3">Fluid jumbotron</h1>
<p className="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
<CContainer className="py-5" fluid>
<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>
<CButton size="lg">Example button</CButton>
</CContainer>
</CJumbotron>
</CCardBody>
</CCard>
<CRow className="align-items-md-stretch">
<CCol md="6">
<div className="h-100 p-5 text-white bg-dark rounded-3">
<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>
<CButton color="light" variant="outline">Example button</CButton>
</div>
</CCol>
<CCol md="6">
<div className="h-100 p-5 bg-light border rounded-3">
<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>
<CButton color="secondary" variant="outline">Example button</CButton>
</div>
</CCol>
</CRow>
<CRow>
<CCol xs>
<CCard className="mb-4">
<CCardHeader>
Embed
</CCardHeader>
<CCardBody>
<CEmbed>
<CEmbedItem src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"/>
</CEmbed>
</CCardBody>
</CCard>
</CCol>
</CRow>
</>
)
}

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

@ -1,8 +1,4 @@
import React, { useState } from 'react'
import {
CToggler,
CImg
} from '@coreui/react'
import {
CCard,
CCardBody,
@ -13,10 +9,12 @@ import {
CDropdownToggle,
CForm,
CFormControl,
CImage,
CNavbar,
CNavbarNav,
CNavbarBrand,
CNavbarText,
CNavbarToggler,
CNavLink,
CDropdown,
CButton,
@ -24,13 +22,12 @@ import {
import { DocsLink } from 'src/reusable'
const CNavbars = () => {
const [isOpen, setIsOpen] = useState(false)
const [visible, setVisible] = useState(false)
const [isOpenDropdown, setIsOpenDropdown] = useState(false)
const [navbarText, setNavbarText] = useState(false)
return (
<>
<CCard className="mb-4">
<CCardHeader>
CNavbar
@ -38,11 +35,11 @@ const CNavbars = () => {
</CCardHeader>
<CCardBody>
<CNavbar expandable="sm" color="info" >
<CToggler inNavbar onClick={() => setIsOpen(!isOpen)}/>
<CNavbarToggler onClick={() => setVisible(!visible)} />
<CNavbarBrand>
NavbarBrand
</CNavbarBrand>
<CCollapse show={isOpen} navbar>
<CCollapse show={visible} navbar>
<CNavbarNav>
<CNavLink>Home</CNavLink>
<CNavLink>Link</CNavLink>
@ -93,7 +90,7 @@ const CNavbars = () => {
<CCardBody>
<CNavbar color="faded" light>
<CNavbarBrand>
<CImg
<CImage
src="https://placekitten.com/g/30/30"
className="d-inline-block align-top"
alt="CoreuiVue"
@ -110,7 +107,7 @@ const CNavbars = () => {
</CCardHeader>
<CCardBody>
<CNavbar toggleable="sm" light color="light">
<CToggler
<CNavbarToggler
inNavbar
onClick={()=>{ setNavbarText(!navbarText)}}
/>
@ -130,7 +127,7 @@ const CNavbars = () => {
</CCardHeader>
<CCardBody>
<CNavbar expandable="false" color="primary" >
<CToggler inNavbar onClick={()=>{setIsOpenDropdown(!isOpenDropdown)}} />
<CNavbarToggler inNavbar onClick={()=>{setIsOpenDropdown(!isOpenDropdown)}} />
<CCollapse show={isOpenDropdown} navbar>
<CNavbarNav>
<CNavLink>Home</CNavLink>

485
src/views/base/switches/Switches.js
View File

@ -1,485 +0,0 @@
import React from 'react'
import {
CCard,
CCardBody,
CCardHeader,
CCol,
CRow,
CSwitch
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const Switches = () => {
return (
<CRow>
<CCol xs="12" md="12">
<CCard className="mb-4">
<CCardHeader>
3d Switch
<DocsLink name="CSwitch"/>
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked onChange={(e)=>console.log(e.target.checked)}/>
<CSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked />
<CSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked />
<CSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked />
<CSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked />
<CSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked />
<CSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked />
<CSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked />
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
Switch default
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} color={'primary'} defaultChecked />
<CSwitch className={'mx-1'} color={'secondary'} defaultChecked />
<CSwitch className={'mx-1'} color={'success'} defaultChecked />
<CSwitch className={'mx-1'} color={'warning'} defaultChecked />
<CSwitch className={'mx-1'} color={'info'} defaultChecked />
<CSwitch className={'mx-1'} color={'danger'} defaultChecked />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
Switch default - pills
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} shape={'pill'} color={'primary'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'success'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'warning'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'info'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'danger'} defaultChecked />
</CCardBody>
</CCard>
</CCol>
<CCol md="12">
<h4>Outline</h4>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
Switch outline
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} color={'primary'} variant="outline" defaultChecked />
<CSwitch className={'mx-1'} color={'secondary'} variant="outline" defaultChecked />
<CSwitch className={'mx-1'} color={'success'} variant="outline" defaultChecked />
<CSwitch className={'mx-1'} color={'warning'} variant="outline" defaultChecked />
<CSwitch className={'mx-1'} color={'info'} variant="outline" defaultChecked />
<CSwitch className={'mx-1'} color={'danger'} variant="outline" defaultChecked />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
Switch outline pills
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant="outline" defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant="outline" defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant="outline" defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant="outline" defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant="outline" defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant="outline" defaultChecked />
</CCardBody>
</CCard>
</CCol>
<CCol md="12">
<h4>Opposite</h4>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
Switch outline alternative
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} color={'primary'} variant="opposite" defaultChecked />
<CSwitch className={'mx-1'} color={'secondary'} variant="opposite" defaultChecked />
<CSwitch className={'mx-1'} color={'success'} variant="opposite" defaultChecked />
<CSwitch className={'mx-1'} color={'warning'} variant="opposite" defaultChecked />
<CSwitch className={'mx-1'} color={'info'} variant="opposite" defaultChecked />
<CSwitch className={'mx-1'} color={'danger'} variant="opposite" defaultChecked />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
Switch outline alternative - pills
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant={'opposite'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant={'opposite'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant={'opposite'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant={'opposite'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant={'opposite'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant={'opposite'} defaultChecked />
</CCardBody>
</CCard>
</CCol>
<CCol md="12">
<h4>With text</h4>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
Switch with text
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} color={'primary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'secondary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'success'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'warning'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'info'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'danger'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
Switch with text pills
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} shape={'pill'} color={'primary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'success'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'warning'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'info'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'danger'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
Switch with text outline
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} color={'primary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'secondary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'success'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'warning'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'info'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'danger'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
Switch with text outline pills
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
Switch with text outline alternative
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} color={'primary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'secondary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'success'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'warning'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'info'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'danger'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
Switch with text outline alternative pills
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
</CCardBody>
</CCard>
</CCol>
<CCol md="12">
<h4>With icon</h4>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
Switch with text
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} color={'primary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'secondary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'success'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'warning'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'info'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'danger'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
Switch with text pills
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} shape={'pill'} color={'primary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'success'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'warning'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'info'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'danger'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
Switch with text outline
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} color={'primary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'secondary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'success'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'warning'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'info'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'danger'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
Switch with text outline pills
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
Switch with text outline alternative
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} color={'primary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'secondary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'success'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'warning'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'info'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} color={'danger'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
Switch with text outline alternative pills
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
<CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
</CCardBody>
</CCard>
</CCol>
<CCol md="12">
<h4>Disabled</h4>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
3d Switch
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked disabled />
<CSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked disabled />
<CSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked disabled />
<CSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked disabled />
<CSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked disabled />
<CSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked disabled />
<CSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked disabled />
<CSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked disabled />
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
3d Switch
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} color={'primary'} defaultChecked variant="opposite" />
<CSwitch className={'mx-1'} color={'secondary'} defaultChecked variant="opposite" />
<CSwitch className={'mx-1'} color={'success'} defaultChecked variant="opposite" />
<CSwitch className={'mx-1'} color={'warning'} defaultChecked variant="opposite" />
<CSwitch className={'mx-1'} color={'info'} defaultChecked variant="opposite" />
<CSwitch className={'mx-1'} color={'danger'} defaultChecked variant="opposite" />
<CSwitch className={'mx-1'} color={'light'} defaultChecked variant="opposite" />
<CSwitch className={'mx-1'} color={'dark'} defaultChecked variant="opposite" />
<CSwitch className={'mx-1'} color={'primary'} variant="opposite" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol md="12">
<h4>3D</h4>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
3d Switch
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked />
<CSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked />
<CSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked />
<CSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked />
<CSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked />
<CSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked />
<CSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked />
<CSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked />
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
3d Switch
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'} />
<CSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
<CSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
<CSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
<CSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
<CSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
<CSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
<CSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} labelOn={'\u2713'} labelOff={'\u2715'}/>
</CCardBody>
</CCard>
</CCol>
<CCol md="12">
<h4>Sizes</h4>
</CCol>
<CCol xs="12">
<CCard className="mb-4">
<CCardHeader>
Sizes
</CCardHeader>
<CCardBody className="p-0">
<table className="table table-hover table-striped table-align-middle mb-0">
<thead>
<tr>
<th>Size</th>
<th>Example</th>
<th>Props</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Large
</td>
<td>
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked size={'lg'} />
</td>
<td>
Add <code>size={'lg'}</code>
</td>
</tr>
<tr>
<td>
Normal
</td>
<td>
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked />
</td>
<td>
-
</td>
</tr>
<tr>
<td>
Small
</td>
<td>
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked size={'sm'} />
</td>
<td>
Add <code>size={'sm'}</code>
</td>
</tr>
</tbody>
</table>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
export default Switches

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

@ -1,30 +1,20 @@
import React from 'react'
import {
CDataTable,
} from '@coreui/react'
import {
CBadge,
CCard,
CCardBody,
CCardHeader,
CCol,
CRow
CRow,
CTable,
CTableBody,
CTableDataCell,
CTableHead,
CTableHeaderCell,
CTableRow,
} from '@coreui/react-ts'
import { DocsLink } from 'src/reusable'
import usersData from '../../users/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 fields = ['name','registered', 'role', 'status']
const Tables = () => {
return (
<>
@ -36,23 +26,48 @@ const Tables = () => {
<DocsLink name="CModal"/>
</CCardHeader>
<CCardBody>
<CDataTable
items={usersData}
fields={fields}
itemsPerPage={5}
pagination
scopedSlots = {{
'status':
(item)=>(
<td>
<CBadge color={getBadge(item.status)}>
{item.status}
</CBadge>
</td>
)
}}
/>
<CTable responsive="sm">
<CTableHead>
<CTableRow>
<CTableHeaderCell>Username</CTableHeaderCell>
<CTableHeaderCell>Date registered</CTableHeaderCell>
<CTableHeaderCell>Role</CTableHeaderCell>
<CTableHeaderCell>Status</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableDataCell>Samppa Nori</CTableDataCell>
<CTableDataCell>2012/01/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell>
<CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Estavan Lykos</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell>
<CTableDataCell><CBadge color="danger">Banned</CBadge></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Chetan Mohamed</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Admin</CTableDataCell>
<CTableDataCell><CBadge color="secondary">Inactive</CBadge></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Derick Maximinus</CTableDataCell>
<CTableDataCell>2012/03/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell>
<CTableDataCell><CBadge color="warning">Pending</CBadge></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Friderik Dávid</CTableDataCell>
<CTableDataCell>2012/01/21</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell>
<CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</CCardBody>
</CCard>
</CCol>
@ -63,24 +78,48 @@ const Tables = () => {
Striped Table
</CCardHeader>
<CCardBody>
<CDataTable
items={usersData}
fields={fields}
striped
itemsPerPage={5}
pagination
scopedSlots = {{
'status':
(item)=>(
<td>
<CBadge color={getBadge(item.status)}>
{item.status}
</CBadge>
</td>
)
}}
/>
<CTable responsive="sm" striped>
<CTableHead>
<CTableRow>
<CTableHeaderCell>Username</CTableHeaderCell>
<CTableHeaderCell>Date registered</CTableHeaderCell>
<CTableHeaderCell>Role</CTableHeaderCell>
<CTableHeaderCell>Status</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableDataCell>Yiorgos Avraamu</CTableDataCell>
<CTableDataCell>2012/01/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell>
<CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Avram Tarasios</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell>
<CTableDataCell><CBadge color="danger">Banned</CBadge></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Quintin Ed</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Admin</CTableDataCell>
<CTableDataCell><CBadge color="secondary">Inactive</CBadge></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Enéas Kwadwo</CTableDataCell>
<CTableDataCell>2012/03/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell>
<CTableDataCell><CBadge color="warning">Pending</CBadge></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Agapetus Tadeáš</CTableDataCell>
<CTableDataCell>2012/01/21</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell>
<CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</CCardBody>
</CCard>
</CCol>
@ -94,24 +133,48 @@ const Tables = () => {
Condensed Table
</CCardHeader>
<CCardBody>
<CDataTable
items={usersData}
fields={fields}
size="sm"
itemsPerPage={5}
pagination
scopedSlots = {{
'status':
(item)=>(
<td>
<CBadge color={getBadge(item.status)}>
{item.status}
</CBadge>
</td>
)
}}
/>
<CTable responsive="sm" small>
<CTableHead>
<CTableRow>
<CTableHeaderCell>Username</CTableHeaderCell>
<CTableHeaderCell>Date registered</CTableHeaderCell>
<CTableHeaderCell>Role</CTableHeaderCell>
<CTableHeaderCell>Status</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableDataCell>Carwyn Fachtna</CTableDataCell>
<CTableDataCell>2012/01/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell>
<CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Nehemiah Tatius</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell>
<CTableDataCell><CBadge color="danger">Banned</CBadge></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Ebbe Gemariah</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Admin</CTableDataCell>
<CTableDataCell><CBadge color="secondary">Inactive</CBadge></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Eustorgios Amulius</CTableDataCell>
<CTableDataCell>2012/03/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell>
<CTableDataCell><CBadge color="warning">Pending</CBadge></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Leopold Gáspár</CTableDataCell>
<CTableDataCell>2012/01/21</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell>
<CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</CCardBody>
</CCard>
</CCol>
@ -122,24 +185,48 @@ const Tables = () => {
Bordered Table
</CCardHeader>
<CCardBody>
<CDataTable
items={usersData}
fields={fields}
bordered
itemsPerPage={5}
pagination
scopedSlots = {{
'status':
(item)=>(
<td>
<CBadge color={getBadge(item.status)}>
{item.status}
</CBadge>
</td>
)
}}
/>
<CTable responsive="sm" bordered>
<CTableHead>
<CTableRow>
<CTableHeaderCell>Username</CTableHeaderCell>
<CTableHeaderCell>Date registered</CTableHeaderCell>
<CTableHeaderCell>Role</CTableHeaderCell>
<CTableHeaderCell>Status</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableDataCell>Pompeius René</CTableDataCell>
<CTableDataCell>2012/01/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell>
<CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Paĉjo Jadon</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell>
<CTableDataCell><CBadge color="danger">Banned</CBadge></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Micheal Mercurius</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Admin</CTableDataCell>
<CTableDataCell><CBadge color="secondary">Inactive</CBadge></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Ganesha Dubhghall</CTableDataCell>
<CTableDataCell>2012/03/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell>
<CTableDataCell><CBadge color="warning">Pending</CBadge></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Hiroto Šimun</CTableDataCell>
<CTableDataCell>2012/01/21</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell>
<CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</CCardBody>
</CCard>
</CCol>
@ -153,58 +240,48 @@ const Tables = () => {
Combined All Table
</CCardHeader>
<CCardBody>
<CDataTable
items={usersData}
fields={fields}
hover
striped
bordered
size="sm"
itemsPerPage={10}
pagination
scopedSlots = {{
'status':
(item)=>(
<td>
<CBadge color={getBadge(item.status)}>
{item.status}
</CBadge>
</td>
)
}}
/>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol xs>
<CCard className="mb-4">
<CCardHeader>
Combined All dark Table
</CCardHeader>
<CCardBody>
<CDataTable
items={usersData}
fields={fields}
dark
hover
striped
bordered
size="sm"
itemsPerPage={10}
pagination
scopedSlots = {{
'status':
(item)=>(
<td>
<CBadge color={getBadge(item.status)}>
{item.status}
</CBadge>
</td>
)
}}
/>
<CTable responsive="sm" bordered striped small>
<CTableHead>
<CTableRow>
<CTableHeaderCell>Username</CTableHeaderCell>
<CTableHeaderCell>Date registered</CTableHeaderCell>
<CTableHeaderCell>Role</CTableHeaderCell>
<CTableHeaderCell>Status</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableDataCell>Vishnu Serghei</CTableDataCell>
<CTableDataCell>2012/01/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell>
<CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Zbyněk Phoibos</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell>
<CTableDataCell><CBadge color="danger">Banned</CBadge></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Einar Randall</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Admin</CTableDataCell>
<CTableDataCell><CBadge color="secondary">Inactive</CBadge></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Félix Troels</CTableDataCell>
<CTableDataCell>2012/03/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell>
<CTableDataCell><CBadge color="warning">Pending</CBadge></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Aulus Agmundr</CTableDataCell>
<CTableDataCell>2012/01/21</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell>
<CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</CCardBody>
</CCard>
</CCol>

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

@ -142,7 +142,7 @@ const Dashboard = () => {
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
<span className="text-medium-emphasis small">
Monday
</span>
</div>
@ -153,7 +153,7 @@ const Dashboard = () => {
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
<span className="text-medium-emphasis small">
Tuesday
</span>
</div>
@ -164,7 +164,7 @@ const Dashboard = () => {
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
<span className="text-medium-emphasis small">
Wednesday
</span>
</div>
@ -175,7 +175,7 @@ const Dashboard = () => {
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
<span className="text-medium-emphasis small">
Thursday
</span>
</div>
@ -186,7 +186,7 @@ const Dashboard = () => {
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
<span className="text-medium-emphasis small">
Friday
</span>
</div>
@ -197,7 +197,7 @@ const Dashboard = () => {
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
<span className="text-medium-emphasis small">
Saturday
</span>
</div>
@ -208,7 +208,7 @@ const Dashboard = () => {
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
<span className="text-medium-emphasis small">
Sunday
</span>
</div>
@ -217,15 +217,6 @@ const Dashboard = () => {
<CProgress className="progress-xs" color="danger" value="69" />
</div>
</div>
<div className="legend text-center">
<small>
<sup className="px-1"><CBadge shape="rounded-pill" color="info">&nbsp;</CBadge></sup>
New clients
&nbsp;
<sup className="px-1"><CBadge shape="rounded-pill" color="danger">&nbsp;</CBadge></sup>
Recurring clients
</small>
</div>
</CCol>
<CCol xs="12" md="6" xl="6">
@ -251,9 +242,9 @@ const Dashboard = () => {
<div className="progress-group mb-4">
<div className="progress-group-header">
<CIcon className="progress-group-icon" name="cil-user" />
<span className="title">Male</span>
<span className="ms-auto font-weight-bold">43%</span>
<CIcon className="icon icon-lg me-2" name="cil-user" />
<span>Male</span>
<span className="ms-auto font-semibold">43%</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="warning" value="43" />
@ -261,31 +252,30 @@ const Dashboard = () => {
</div>
<div className="progress-group mb-5">
<div className="progress-group-header">
<CIcon className="progress-group-icon" name="cil-user-female" />
<span className="title">Female</span>
<span className="ms-auto font-weight-bold">37%</span>
<CIcon className="icon icon-lg me-2" name="cil-user-female" />
<span>Female</span>
<span className="ms-auto font-semibold">37%</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="warning" value="37" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<CIcon className="progress-group-icon" name="cil-globe-alt" />
<span className="title">Organic Search</span>
<span className="ms-auto font-weight-bold">191,235 <span className="text-muted small">(56%)</span></span>
<CIcon className="icon icon-lg me-2" name="cib-google" />
<span>Organic Search</span>
<span className="ms-auto font-semibold">191,235 <span className="text-muted small">(56%)</span></span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="success" value="56" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<CIcon name="cib-facebook" className="progress-group-icon" />
<span className="title">Facebook</span>
<span className="ms-auto font-weight-bold">51,223 <span className="text-muted small">(15%)</span></span>
<CIcon name="cib-facebook" className="icon icon-lg me-2" />
<span>Facebook</span>
<span className="ms-auto font-semibold">51,223 <span className="text-muted small">(15%)</span></span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="success" value="15" />
@ -293,9 +283,9 @@ const Dashboard = () => {
</div>
<div className="progress-group">
<div className="progress-group-header">
<CIcon name="cib-twitter" className="progress-group-icon" />
<span className="title">Twitter</span>
<span className="ms-auto font-weight-bold">37,564 <span className="text-muted small">(11%)</span></span>
<CIcon name="cib-twitter" className="icon icon-lg me-2" />
<span>Twitter</span>
<span className="ms-auto font-semibold">37,564 <span className="text-muted small">(11%)</span></span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="success" value="11" />
@ -303,20 +293,14 @@ const Dashboard = () => {
</div>
<div className="progress-group">
<div className="progress-group-header">
<CIcon name="cib-linkedin" className="progress-group-icon" />
<span className="title">LinkedIn</span>
<span className="ms-auto font-weight-bold">27,319 <span className="text-muted small">(8%)</span></span>
<CIcon name="cib-linkedin" className="icon icon-lg me-2" />
<span>LinkedIn</span>
<span className="ms-auto font-semibold">27,319 <span className="text-muted small">(8%)</span></span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="success" value="8" />
</div>
</div>
<div className="divider text-center">
<CButton color="link" size="sm" className="text-muted">
<CIcon name="cil-options" />
</CButton>
</div>
</CCol>
</CRow>

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

@ -3,43 +3,43 @@ import {
CCard,
CCardHeader,
CCardBody,
CToast,
CToastBody,
CToastHeader,
CToaster,
CForm,
CInput,
CInputCheckbox,
CFormControl,
CFormCheck,
CFormSelect,
CButton,
CContainer,
CRow,
CCol,
CFormGroup,
CLabel
} from '@coreui/react'
CFormLabel,
CToast,
CToastBody,
CToastHeader,
CToaster
} from '@coreui/react-ts'
import { DocsLink } from 'src/reusable'
const Toaster = () => {
const positions = [
'static',
'top-left',
const placements = [
'top-start',
'top-center',
'top-right',
'top-full',
'bottom-left',
'top-end',
'middle-start',
'middle-center',
'middle-end',
'bottom-start',
'bottom-center',
'bottom-right',
'bottom-full'
'bottom-end'
]
const [toasts, setToasts] = useState([
{ position: 'static'},
{ position: 'static'},
{ position: 'top-right', autohide: 3000 }
{ placement: 'static'},
{ placement: 'static'},
{ placement: 'top-right', autohide: 3000 }
])
const [position, setPosition] = useState('top-right')
const [placement, setPlacement] = useState('top-right')
const [autohide, setAutohide] = useState(true)
const [autohideValue, setAutohideValue] = useState(5000)
const [closeButton, setCloseButton] = useState(true)
@ -48,15 +48,15 @@ const Toaster = () => {
const addToast = () => {
setToasts([
...toasts,
{ position, autohide: autohide && autohideValue, closeButton, fade }
{ placement, autohide: autohide && autohideValue, closeButton, fade }
])
}
const toasters = (()=>{
return toasts.reduce((toasters, toast) => {
toasters[toast.position] = toasters[toast.position] || []
toasters[toast.position].push(toast)
toasters[toast.placement] = toasters[toast.placement] || []
toasters[toast.placement].push(toast)
return toasters
}, {})
})()
@ -75,67 +75,67 @@ const Toaster = () => {
<CForm>
<h5>Add toast with following props:</h5>
<CFormGroup variant="custom-checkbox" className="my-2 mt-4">
<CInputCheckbox
<div variant="custom-checkbox" className="my-2 mt-4">
<CFormCheck
id="autohide"
checked={autohide}
onChange={e => { setAutohide(e.target.checked) }}
custom
/>
<CLabel variant="custom-checkbox" htmlFor="autohide">
<CFormLabel variant="custom-checkbox" htmlFor="autohide">
Autohide of the toast
</CLabel>
</CFormGroup>
</CFormLabel>
</div>
{
autohide &&
<CFormGroup className="my-2">
<CLabel htmlFor="ccyear">Time to autohide</CLabel>
<CInput
<div className="my-2">
<CFormLabel htmlFor="ccyear">Time to autohide</CFormLabel>
<CFormControl
type="number"
value={autohideValue}
onChange={e => {
setAutohideValue(Number(e.target.value))
}}
/>
</CFormGroup>
</div>
}
<CFormGroup className="my-2">
<CLabel htmlFor="ccyear">Position</CLabel>
<select
<div className="my-2">
<CFormLabel htmlFor="ccyear">Placement</CFormLabel>
<CFormSelect
className="form-control"
value={position}
onChange={e => {setPosition(e.target.value)}}
value={placement}
onChange={e => {setPlacement(e.target.value)}}
>
{
positions.map((position, i)=>(
<option key={i}>{position}</option>
placements.map((placement, i)=>(
<option key={i}>{placement}</option>
))
}
</select>
</CFormGroup>
</CFormSelect>
</div>
<CFormGroup variant="custom-checkbox" className="my-2">
<CInputCheckbox
<div variant="custom-checkbox" className="my-2">
<CFormCheck
id="fade"
checked={fade}
onChange={e => { setFade(e.target.checked) }}
custom
/>
<CLabel variant="custom-checkbox" htmlFor="fade">fade</CLabel>
</CFormGroup>
<CFormLabel variant="custom-checkbox" htmlFor="fade">fade</CFormLabel>
</div>
<CFormGroup variant="custom-checkbox" className="my-2">
<CInputCheckbox
<div variant="custom-checkbox" className="my-2">
<CFormCheck
id="close"
custom
checked={closeButton}
onChange={e=> { setCloseButton(e.target.checked) }}
/>
<CLabel variant="custom-checkbox" htmlFor="close">
<CFormLabel variant="custom-checkbox" htmlFor="close">
closeButton
</CLabel>
</CFormGroup>
</CFormLabel>
</div>
<CButton
className="me-1 w-25"
@ -150,7 +150,7 @@ const Toaster = () => {
<CCol sm="12" lg="6">
{Object.keys(toasters).map((toasterKey) => (
<CToaster
position={toasterKey}
placement={toasterKey}
key={'toaster' + toasterKey}
>
{
@ -158,17 +158,38 @@ const Toaster = () => {
return(
<CToast
key={'toast' + key}
show={true}
autohide={toast.autohide}
fade={toast.fade}
icon={
<svg
className="rounded me-2"
width="20"
height="20"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice"
focusable="false"
role="img"
>
<CToastHeader closeButton={toast.closeButton}>
Toast title
</CToastHeader>
<CToastBody>
{`This is a toast in ${toasterKey} positioned toaster number ${key + 1}.`}
</CToastBody>
<rect width="100%" height="100%" fill="#007aff"></rect>
</svg>
}
title="CoreUI for React.js"
time="7 min ago"
autohide={toast.autohide}
>
{`Hello, ${toasterKey} world! This is a toast ${toasterKey} message.`}
</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>
)
})
}

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

@ -1,19 +1,15 @@
import React from 'react'
import {
CCardFooter,
CCardGroup,
CCol,
CLink,
CRow,
CProgress
} from '@coreui/react-ts'
import {
CWidgetProgress,
CWidgetIcon,
CWidgetProgress,
CWidgetProgressIcon,
CWidgetSimple
} from '@coreui/react'
} from '@coreui/react-ts'
import WidgetsBrand from './WidgetsBrand'
import WidgetsDropdown from './WidgetsDropdown'
@ -28,92 +24,47 @@ const Widgets = () => {
<WidgetsDropdown />
<CRow>
<CCol xs="12" sm="6" lg="3">
<CWidgetProgress className="mb-4" color="success" header="89.9%" text="Lorem ipsum..." footer="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 xs="12" sm="6" lg="3">
<CWidgetProgress className="mb-4" color="info" header="12.124" text="Lorem ipsum..." footer="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 xs="12" sm="6" lg="3">
<CWidgetProgress className="mb-4" color="warning" header="$98.111,00" text="Lorem ipsum..." footer="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 xs="12" sm="6" lg="3">
<CWidgetProgress className="mb-4" header="2 TB" text="Lorem ipsum..." footer="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 xs="12" sm="6" lg="3">
<CWidgetProgress className="mb-4" inverse color="success" variant="inverse" header="89.9%" text="Lorem ipsum..." footer="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 xs="12" sm="6" lg="3">
<CWidgetProgress className="mb-4" inverse color="info" variant="inverse" header="12.124" text="Lorem ipsum..." footer="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 xs="12" sm="6" lg="3">
<CWidgetProgress className="mb-4" inverse color="warning" variant="inverse" header="$98.111,00" text="Lorem ipsum..." footer="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 xs="12" sm="6" lg="3">
<CWidgetProgress className="mb-4" inverse color="danger" variant="inverse" value={95} header="2 TB" text="Lorem ipsum..." footer="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>
</CRow>
<CRow>
<CCol xs="12" sm="6" lg="3">
<CWidgetIcon text="income" header="$1.999,50" color="primary">
<CIcon width={24} name="cil-settings"/>
</CWidgetIcon>
<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 xs="12" sm="6" lg="3">
<CWidgetIcon text="income" header="$1.999,50" color="info">
<CIcon width={24} name="cil-user"/>
</CWidgetIcon>
<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 xs="12" sm="6" lg="3">
<CWidgetIcon text="income" header="$1.999,50" color="warning">
<CIcon width={24} name="cil-moon"/>
</CWidgetIcon>
<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 xs="12" sm="6" lg="3">
<CWidgetIcon text="income" header="$1.999,50" color="danger">
<CIcon width={24} name="cil-bell"/>
</CWidgetIcon>
<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 xs="12" sm="6" lg="3">
<CWidgetIcon text="income" header="$1.999,50" color="primary" iconPadding={false}>
<CIcon width={24} name="cil-settings"/>
</CWidgetIcon>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetIcon text="income" header="$1.999,50" color="info" iconPadding={false}>
<CIcon width={24} name="cil-laptop"/>
</CWidgetIcon>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetIcon text="income" header="$1.999,50" color="warning" iconPadding={false}>
<CIcon width={24} name="cil-moon"/>
</CWidgetIcon>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetIcon text="income" header="$1.999,50" color="danger" iconPadding={false}>
<CIcon width={24} name="cil-bell"/>
</CWidgetIcon>
</CCol>
<CCol xs="12" sm="6" lg="4">
<CWidgetIcon text="income" header="$1.999,50" color="primary" iconPadding={false}>
<CIcon width={24} name="cil-settings" className="mx-5"/>
</CWidgetIcon>
</CCol>
<CCol xs="12" sm="6" lg="4">
<CWidgetIcon text="income" header="$1.999,50" color="info" iconPadding={false}>
<CIcon width={24} name="cil-laptop" className="mx-5"/>
</CWidgetIcon>
</CCol>
<CCol xs="12" sm="6" lg="4">
<CWidgetIcon
text="income"
header="$1.999,50"
color="warning"
iconPadding={false}
footerSlot={
<CCardFooter className="card-footer px-3 py-2">
<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={
<CLink
className="font-weight-bold font-xs btn-block text-muted"
href="https://coreui.io/"
@ -123,242 +74,248 @@ const Widgets = () => {
View more
<CIcon name="cil-arrow-right" className="float-end" width="16"/>
</CLink>
</CCardFooter>
}
/>
</CCol>
<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={
<CLink
className="font-weight-bold font-xs btn-block text-muted"
href="https://coreui.io/"
rel="noopener norefferer"
target="_blank"
>
<CIcon width={24} name="cil-moon" className="mx-5"/>
</CWidgetIcon>
View more
<CIcon name="cil-arrow-right" className="float-end" width="16"/>
</CLink>
}
/>
</CCol>
<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={
<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 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={
<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 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" />
</CCol>
<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"/>
</CCol>
<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"/>
</CCol>
<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"/>
</CCol>
</CRow>
<WidgetsBrand/>
<WidgetsBrand withCharts/>
<CCardGroup className="mb-4">
<CWidgetProgressIcon
header="87.500"
text="Visitors"
color="info"
>
<CIcon name="cil-people" height="36"/>
</CWidgetProgressIcon>
icon={<CIcon name="cil-people" className="icon icon-2xl"/>}
value="87.500"
title="Visitors"
progressColor="info"
progressValue={75}
/>
<CWidgetProgressIcon
header="385"
text="New Clients"
color="success"
>
<CIcon name="cil-userFollow" height="36"/>
</CWidgetProgressIcon>
icon={<CIcon name="cil-userFollow" className="icon icon-2xl"/>}
value="385"
title="New Clients"
progressColor="success"
progressValue={75}
/>
<CWidgetProgressIcon
header="1238"
text="Products sold"
color="warning"
>
<CIcon name="cil-basket" height="36"/>
</CWidgetProgressIcon>
icon={<CIcon name="cil-basket" className="icon icon-2xl"/>}
value="1238"
title="Products sold"
progressColor="warning"
progressValue={75}
/>
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
>
<CIcon name="cil-chartPie" height="36"/>
</CWidgetProgressIcon>
icon={<CIcon name="cil-chartPie" className="icon icon-2xl"/>}
value="28%"
title="Returning Visitors"
progressValue={75}
/>
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
color="danger"
progressSlot={
<CProgress color="danger" size="xs" value={75} animated className="my-3"
/>}
>
<CIcon name="cil-speedometer" height="36"/>
</CWidgetProgressIcon>
</CCardGroup>
<CCardGroup className="mb-4">
<CWidgetProgressIcon
header="87.500"
text="Visitors"
color="info"
inverse
>
<CIcon name="cil-people" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="385"
text="New Clients"
color="success"
inverse
>
<CIcon name="cil-userFollow" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="1238"
text="Products sold"
color="warning"
inverse
>
<CIcon name="cil-basket" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
color="primary"
inverse
>
<CIcon name="cil-chartPie" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
color="danger"
inverse
>
<CIcon name="cil-speedometer" height="36"/>
</CWidgetProgressIcon>
icon={<CIcon name="cil-speedometer" className="icon icon-2xl"/>}
value="5:34:11"
title="Avg. Time"
progressColor="danger"
progressValue={75}
/>
</CCardGroup>
<CRow>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="87.500"
text="Visitors"
color="info"
>
<CIcon name="cil-people" height="36"/>
</CWidgetProgressIcon>
icon={<CIcon name="cil-people" height="36"/>}
value="87.500"
title="Visitors"
progressColor="info"
progressValue={75}
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="385"
text="New Clients"
color="success"
>
<CIcon name="cil-userFollow" height="36"/>
</CWidgetProgressIcon>
icon={<CIcon name="cil-userFollow" height="36"/>}
value="385"
title="New Clients"
progressColor="success"
progressValue={75}
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="1238"
text="Products sold"
color="warning"
>
<CIcon name="cil-basket" height="36"/>
</CWidgetProgressIcon>
icon={<CIcon name="cil-basket" height="36"/>}
value="1238"
title="Products sold"
progressColor="warning"
progressValue={75}
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
color="primary"
>
<CIcon name="cil-chartPie" height="36"/>
</CWidgetProgressIcon>
icon={<CIcon name="cil-chartPie" height="36"/>}
value="28%"
title="Returning Visitors"
progressColor="primary"
progressValue={75}
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
color="danger"
>
<CIcon name="cil-speedometer" height="36"/>
</CWidgetProgressIcon>
icon={<CIcon name="cil-speedometer" height="36"/>}
value="5:34:11"
title="Avg. Time"
progressColor="danger"
progressValue={75}
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="972"
text="comments"
color="info"
>
<CIcon name="cil-speech" height="36"/>
</CWidgetProgressIcon>
icon={<CIcon name="cil-speech" height="36"/>}
value="972"
title="comments"
progressColor="info"
progressValue={75}
/>
</CCol>
</CRow>
<CRow>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="87.500"
text="Visitors"
color="info"
inverse
>
<CIcon name="cil-people" height="36"/>
</CWidgetProgressIcon>
icon={<CIcon name="cil-people" height="36"/>}
value="87.500"
title="Visitors"
progressValue={75}
progressWhite
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="385"
text="New Clients"
color="success"
inverse
>
<CIcon name="cil-userFollow" height="36"/>
</CWidgetProgressIcon>
icon={<CIcon name="cil-userFollow" height="36"/>}
value="385"
title="New Clients"
progressValue={75}
progressWhite
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="1238"
text="Products sold"
color="warning"
inverse
>
<CIcon name="cil-basket" height="36"/>
</CWidgetProgressIcon>
icon={<CIcon name="cil-basket" height="36"/>}
value="1238"
title="Products sold"
progressValue={75}
progressWhite
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
color="primary"
inverse
>
<CIcon name="cil-chartPie" height="36"/>
</CWidgetProgressIcon>
icon={<CIcon name="cil-chartPie" height="36"/>}
value="28%"
title="Returning Visitors"
progressValue={75}
progressWhite
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
color="danger"
inverse
>
<CIcon name="cil-speedometer" height="36"/>
</CWidgetProgressIcon>
icon={<CIcon name="cil-speedometer" height="36"/>}
value="5:34:11"
title="Avg. Time"
progressValue={75}
progressWhite
/>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="972"
text="comments"
color="info"
inverse
>
<CIcon name="cil-speech" height="36"/>
</CWidgetProgressIcon>
icon={<CIcon name="cil-speech" height="36"/>}
value="972"
title="comments"
progressValue={75}
progressWhite
/>
</CCol>
</CRow>
<CRow>
<CCol sm="4" lg="2">
<CWidgetSimple header="title" text="1,123">
<CWidgetSimple title="title" value="1,123">
<ChartLineSimple style={{ height: '40px' }} borderColor="danger"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header="title" text="1,123">
<CWidgetSimple title="title" value="1,123">
<ChartLineSimple style={{ height: '40px' }} borderColor="primary"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header="title" text="1,123">
<CWidgetSimple title="title" value="1,123">
<ChartLineSimple style={{ height: '40px' }} borderColor="success"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header="title" text="1,123">
<CWidgetSimple title="title" value="1,123">
<ChartBarSimple style={{ height: '40px' }} backgroundColor="danger"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header="title" text="1,123">
<CWidgetSimple title="title" value="1,123">
<ChartBarSimple style={{ height: '40px' }} backgroundColor="primary"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header="title" text="1,123">
<CWidgetSimple title="title" value="1,123">
<ChartBarSimple style={{ height: '40px' }} backgroundColor="success"/>
</CWidgetSimple>
</CCol>

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

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { CWidgetBrand, CRow, CCol } from '@coreui/react';
import { CWidgetBrand, CRow, CCol } from '@coreui/react-ts';
import CIcon from '@coreui/icons-react';
import ChartLineSimple from '../charts/ChartLineSimple';
@ -13,18 +13,12 @@ const WidgetsBrand = ({withCharts})=>{
<CCol sm="6" lg="3">
<CWidgetBrand
className="mb-4"
rightHeader="89k"
rightFooter="friends"
leftHeader="459"
leftFooter="feeds"
style={{
"--cui-card-cap-bg": "#3b5998"
}}
>
headerChildren={
<>
<CIcon
name="cib-facebook"
height="52"
className="my-4"
className="my-4 text-white"
/>
<ChartLineSimple
className="position-absolute w-100 h-100"
@ -33,24 +27,24 @@ const WidgetsBrand = ({withCharts})=>{
label="Friends"
labels="months"
/>
</CWidgetBrand>
</>
}
values={[['89k', 'friends'], ['459', 'feeds']]}
style={{
"--cui-card-cap-bg": "#3b5998"
}}
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetBrand
className="mb-4"
rightHeader="973k"
rightFooter="followers"
leftHeader="1.792"
leftFooter="tweets"
style={{
"--cui-card-cap-bg": "#00aced"
}}
>
headerChildren={
<>
<CIcon
name="cib-twitter"
height="52"
className="my-4"
className="my-4 text-white"
/>
<ChartLineSimple
className="position-absolute w-100 h-100"
@ -59,48 +53,51 @@ const WidgetsBrand = ({withCharts})=>{
label="Followers"
labels="months"
/>
</CWidgetBrand>
</>
}
values={[['973k', 'followers'], ['1.792', 'tweets']]}
style={{
"--cui-card-cap-bg": "#00aced"
}}
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetBrand
className="mb-4"
rightHeader="500+"
rightFooter="contracts"
leftHeader="292"
leftFooter="feeds"
style={{
"--cui-card-cap-bg": "#4875b4"
}}
>
headerChildren={
<>
<CIcon
name="cib-linkedin"
height="52"
className="my-4"
className="my-4 text-white"
/>
<ChartLineSimple
className="position-absolute w-100 h-100"
backgroundColor="rgba(255,255,255,.1)"
dataPoints={[78, 81, 80, 45, 34, 12, 40]}
label="Contracts"
label="Contacts"
labels="months"
/>
</CWidgetBrand>
</>
}
values={[['500+', 'contacts'], ['292', 'feeds']]}
style={{
"--cui-card-cap-bg": "#4875b4"
}}
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetBrand
className="mb-4"
rightHeader="12"
rightFooter="events"
leftHeader="4"
leftFooter="meetings"
color="warning"
>
headerChildren={
<>
<CIcon
name="cil-calendar"
height="52"
className="my-4"
className="my-4 text-white"
/>
<ChartLineSimple
className="position-absolute w-100 h-100"
@ -109,83 +106,76 @@ const WidgetsBrand = ({withCharts})=>{
label="Followers"
labels="months"
/>
</CWidgetBrand>
</>
}
values={[['12+', 'events'], ['4', 'meetings']]}
/>
</CCol>
</CRow> :
<CRow>
</CRow> : <CRow>
<CCol sm="6" lg="3">
<CWidgetBrand
className="mb-4"
rightHeader="89k"
rightFooter="friends"
leftHeader="459"
leftFooter="feeds"
headerChildren={
<CIcon
name="cib-twitter"
height="52"
className="my-4 text-white"
/>
}
values={[['89k', 'friends'], ['459', 'feeds']]}
style={{
"--cui-card-cap-bg": "#3b5998"
}}
>
<CIcon
name="cib-facebook"
height="56"
className="my-4"
/>
</CWidgetBrand>
</CCol>
<CCol sm="6" lg="3">
<CWidgetBrand
className="mb-4"
rightHeader="973k"
rightFooter="followers"
leftHeader="1.792"
leftFooter="tweets"
headerChildren={
<CIcon
name="cib-twitter"
height="52"
className="my-4 text-white"
/>
}
values={[['973k', 'followers'], ['1.792', 'tweets']]}
style={{
"--cui-card-cap-bg": "#00aced"
}}
>
<CIcon
name="cib-twitter"
height="56"
className="my-4"
/>
</CWidgetBrand>
</CCol>
<CCol sm="6" lg="3">
<CWidgetBrand
className="mb-4"
rightHeader="500+"
rightFooter="contracts"
leftHeader="292"
leftFooter="feeds"
headerChildren={
<CIcon
name="cib-linkedin"
height="52"
className="my-4 text-white"
/>
}
values={[['500+', 'contacts'], ['292', 'feeds']]}
style={{
"--cui-card-cap-bg": "#4875b4"
}}
>
<CIcon
name="cib-linkedin"
height="56"
className="my-4"
/>
</CWidgetBrand>
</CCol>
<CCol sm="6" lg="3">
<CWidgetBrand
className="mb-4"
rightHeader="12"
rightFooter="events"
leftHeader="4"
leftFooter="meetings"
color="warning"
>
headerChildren={
<CIcon
name="cil-calendar"
height="56"
className="my-4"
height="52"
className="my-4 text-white"
/>
}
values={[['12+', 'events'], ['4', 'meetings']]}
/>
</CWidgetBrand>
</CCol>
</CRow>
}

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

@ -1,12 +1,12 @@
import React from 'react'
import { CWidgetDropdown } from '@coreui/react'
import {
CRow,
CCol,
CDropdown,
CDropdownMenu,
CDropdownItem,
CDropdownToggle
CDropdownToggle,
CWidgetDropdown
} from '@coreui/react-ts'
import CIcon from '@coreui/icons-react'
import ChartLineSimple from '../charts/ChartLineSimple'
@ -19,12 +19,26 @@ const WidgetsDropdown = () => {
<CCol sm="6" lg="3">
<CWidgetDropdown className="mb-4"
color="primary"
header="9.823"
text="Members online"
footerSlot={
value="9.823"
title="Members online"
action={
<CDropdown>
<CDropdownToggle color="transparent" caret={false}>
<CIcon name="cil-options" className="text-high-emphasis-inverse"/>
</CDropdownToggle>
{/* TODO: placement doesn't work */}
<CDropdownMenu placement="bottom-end">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdownMenu>
</CDropdown>
}
chart={
<ChartLineSimple
pointed
className="c-chart-wrapper mt-3 mx-3"
className="chart-wrapper mt-3 mx-3"
style={{height: '70px'}}
dataPoints={[65, 59, 84, 84, 51, 55, 40]}
pointHoverBackgroundColor="primary"
@ -32,10 +46,18 @@ const WidgetsDropdown = () => {
labels="months"
/>
}
>
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown className="mb-4"
color="info"
value="9.823"
title="Members online"
action={
<CDropdown>
<CDropdownToggle color="transparent">
<CIcon name="cil-settings"/>
<CDropdownToggle color="transparent" caret={false}>
<CIcon name="cil-options" className="text-high-emphasis-inverse"/>
</CDropdownToggle>
<CDropdownMenu placement="bottom-end">
<CDropdownItem>Action</CDropdownItem>
@ -44,15 +66,8 @@ const WidgetsDropdown = () => {
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CWidgetDropdown>
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown className="mb-4"
color="info"
header="9.823"
text="Members online"
footerSlot={
}
chart={
<ChartLineSimple
pointed
className="mt-3 mx-3"
@ -64,10 +79,18 @@ const WidgetsDropdown = () => {
labels="months"
/>
}
>
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown className="mb-4"
color="warning"
value="9.823"
title="Members online"
action={
<CDropdown>
<CDropdownToggle caret={false} color="transparent">
<CIcon name="cil-location-pin"/>
<CDropdownToggle color="transparent" caret={false}>
<CIcon name="cil-options" className="text-high-emphasis-inverse"/>
</CDropdownToggle>
<CDropdownMenu placement="bottom-end">
<CDropdownItem>Action</CDropdownItem>
@ -76,15 +99,8 @@ const WidgetsDropdown = () => {
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CWidgetDropdown>
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown className="mb-4"
color="warning"
header="9.823"
text="Members online"
footerSlot={
}
chart={
<ChartLineSimple
className="mt-3"
style={{height: '70px'}}
@ -96,10 +112,18 @@ const WidgetsDropdown = () => {
labels="months"
/>
}
>
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown className="mb-4"
color="danger"
value="9.823"
title="Members online"
action={
<CDropdown>
<CDropdownToggle color="transparent">
<CIcon name="cil-settings"/>
<CDropdownToggle color="transparent" caret={false}>
<CIcon name="cil-options" className="text-high-emphasis-inverse"/>
</CDropdownToggle>
<CDropdownMenu placement="bottom-end">
<CDropdownItem>Action</CDropdownItem>
@ -108,15 +132,8 @@ const WidgetsDropdown = () => {
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CWidgetDropdown>
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown className="mb-4"
color="danger"
header="9.823"
text="Members online"
footerSlot={
}
chart={
<ChartBarSimple
className="mt-3 mx-3"
style={{height: '70px'}}
@ -125,19 +142,7 @@ const WidgetsDropdown = () => {
labels="months"
/>
}
>
<CDropdown>
<CDropdownToggle caret className="text-white" color="transparent">
<CIcon name="cil-settings"/>
</CDropdownToggle>
<CDropdownMenu placement="bottom-end">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CWidgetDropdown>
/>
</CCol>
</CRow>
)