refactor: update components to CoreUI 4

This commit is contained in:
Łukasz Holeczek 2021-04-05 23:17:19 +02:00
parent 9870bfdf7e
commit 2a2fc79524
28 changed files with 117 additions and 121 deletions

View File

@ -4,11 +4,12 @@ import {
Route,
Switch
} from 'react-router-dom'
import { CContainer, CFade } from '@coreui/react'
import { CFade } from '@coreui/react'
import { CContainer } from '@coreui/react-ts'
// routes config
import routes from '../routes'
const loading = (
<div className="pt-3 text-center">
<div className="sk-spinner sk-spinner-pulse"></div>

View File

@ -5,6 +5,8 @@ import {
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
} from '@coreui/react-ts'
import {
CImg
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
@ -17,7 +19,7 @@ const TheHeaderDropdownMssg = () => {
direction="down"
>
<CDropdownToggle className="c-header-nav-link" caret={false}>
<CIcon name="cil-envelope-open" /><CBadge shape="pill" color="info">{itemsCount}</CBadge>
<CIcon name="cil-envelope-open" /><CBadge shape="rounded-pill" color="info">{itemsCount}</CBadge>
</CDropdownToggle>
<CDropdownMenu className="pt-0" placement="bottom-end">
<CDropdownItem

View File

@ -17,7 +17,7 @@ const TheHeaderDropdownNotif = () => {
>
<CDropdownToggle className="c-header-nav-link" caret={false}>
<CIcon name="cil-bell"/>
<CBadge shape="pill" color="danger">{itemsCount}</CBadge>
<CBadge shape="rounded-pill" color="danger">{itemsCount}</CBadge>
</CDropdownToggle>
<CDropdownMenu placement="bottom-end" className="pt-0">
<CDropdownItem

View File

@ -17,7 +17,7 @@ const TheHeaderDropdownTasks = () => {
>
<CDropdownToggle>
<CIcon name="cil-list" />
<CBadge shape="pill" color="warning">{itemsCount}</CBadge>
<CBadge shape="rounded-pill" color="warning">{itemsCount}</CBadge>
</CDropdownToggle>
<CDropdownMenu placement="bottom-end" className="pt-0">
<CDropdownItem

View File

@ -8,7 +8,7 @@ const _nav = [
as: NavLink,
anchor: 'Dashboard',
to: '/dashboard',
icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
icon: <CIcon name="cil-speedometer" customClasses="nav-icon"/>,
badge: {
color: 'info',
text: 'NEW',
@ -23,14 +23,14 @@ const _nav = [
as: NavLink,
anchor: 'Colors',
to: '/theme/colors',
icon: 'cil-drop',
icon: <CIcon name="cil-drop" customClasses="nav-icon"/>,
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Typography',
to: '/theme/typography',
icon: 'cil-pencil',
icon: <CIcon name="cil-pencil" customClasses="nav-icon"/>,
},
{
_component: 'CNavTitle',
@ -41,7 +41,7 @@ const _nav = [
as: NavLink,
anchor: 'Base',
to: '/to',
icon: 'cil-puzzle',
icon: <CIcon name="cil-puzzle" customClasses="nav-icon"/>,
items: [
{
_component: 'CNavItem',
@ -145,7 +145,7 @@ const _nav = [
_component: 'CNavGroup',
anchor: 'Buttons',
// route: '/buttons',
icon: 'cil-cursor',
icon: <CIcon name="cil-cursor" customClasses="nav-icon"/>,
items: [
{
_component: 'CNavItem',
@ -178,13 +178,13 @@ const _nav = [
as: NavLink,
anchor: 'Charts',
to: '/charts',
icon: 'cil-chart-pie'
icon: <CIcon name="cil-chart-pie" customClasses="nav-icon"/>
},
{
_component: 'CNavGroup',
anchor: 'Icons',
// route: '/icons',
icon: 'cil-star',
icon: <CIcon name="cil-star" customClasses="nav-icon"/>,
items: [
{
_component: 'CNavItem',
@ -214,7 +214,7 @@ const _nav = [
_component: 'CNavGroup',
anchor: 'Notifications',
// route: '/notifications',
icon: 'cil-bell',
icon: <CIcon name="cil-bell" customClasses="nav-icon"/>,
items: [
{
_component: 'CNavItem',
@ -247,7 +247,7 @@ const _nav = [
as: NavLink,
anchor: 'Widgets',
to: '/widgets',
icon: 'cil-calculator',
icon: <CIcon name="cil-calculator" customClasses="nav-icon"/>,
badge: {
color: 'info',
text: 'NEW',
@ -263,7 +263,7 @@ const _nav = [
{
_component: 'CNavGroup',
anchor: 'Pages',
icon: 'cil-star',
icon: <CIcon name="cil-star" customClasses="nav-icon"/>,
items: [
{
_component: 'CNavItem',
@ -294,7 +294,7 @@ const _nav = [
// {
// _component: 'CNavItem',
// anchor: 'Disabled',
// icon: 'cil-ban',
// icon: <CIcon name="cil-ban" customClasses="nav-icon"/>,
// badge: {
// color: 'secondary',
// text: 'NEW',
@ -315,7 +315,7 @@ const _nav = [
// anchor: 'Label danger',
// to: '',
// icon: {
// anchor: 'cil-star',
// anchor: <CIcon name="cil-star" customClasses="nav-icon"/>,
// classanchor: 'text-danger'
// },
// label: true
@ -325,7 +325,7 @@ const _nav = [
// anchor: 'Label info',
// to: '',
// icon: {
// anchor: 'cil-star',
// anchor: <CIcon name="cil-star" customClasses="nav-icon"/>,
// classanchor: 'text-info'
// },
// label: true
@ -335,7 +335,7 @@ const _nav = [
// anchor: 'Label warning',
// to: '',
// icon: {
// anchor: 'cil-star',
// anchor: <CIcon name="cil-star" customClasses="nav-icon"/>,
// classanchor: 'text-warning'
// },
// label: true

View File

@ -88,7 +88,7 @@ const Cards = () => {
<CCard className="mb-4">
<CCardHeader>
Card with label
<CBadge shape="pill" color="danger" className="float-end">42</CBadge>
<CBadge shape="rounded-pill" color="danger" className="float-end">42</CBadge>
</CCardHeader>
<CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

View File

@ -11,7 +11,7 @@ import {
CCarouselItem,
CCol,
CRow
} from '@coreui/react'
} from '@coreui/react-ts'
import { DocsLink } from 'src/reusable'
const slides = [

View File

@ -7,8 +7,10 @@ import {
CCardHeader,
CCol,
CCollapse,
CFade,
CRow
} from '@coreui/react-ts';
import {
CFade,
} from '@coreui/react';
import { DocsLink } from 'src/reusable'

View File

@ -309,20 +309,20 @@ const BasicForms = () => {
className="me-1"
color="danger"
defaultChecked
shape="pill"
shape="rounded-pill"
/>
<CSwitch
className="me-1"
color="info"
defaultChecked
shape="pill"
shape="rounded-pill"
variant="outline"
/>
<CSwitch
className="me-1"
color="dark"
defaultChecked
shape="pill"
shape="rounded-pill"
variant="opposite"
/>
</CCol>

View File

@ -1,4 +1,9 @@
import React from 'react'
import {
CJumbotron,
CEmbed,
CEmbedItem
} from '@coreui/react'
import {
CButton,
CCard,
@ -6,11 +11,8 @@ import {
CCardHeader,
CCol,
CContainer,
CJumbotron,
CRow,
CEmbed,
CEmbedItem
} from '@coreui/react'
} from '@coreui/react-ts'
import { DocsLink } from 'src/reusable'
const Jumbotrons = () => {

View File

@ -159,15 +159,15 @@ const ListGroups = () => {
<CListGroup>
<CListGroupItem className="justify-content-between">
Cras justo odio
<CBadge className="float-end" shape="pill" color="primary">14</CBadge>
<CBadge className="float-end" shape="rounded-pill" color="primary">14</CBadge>
</CListGroupItem>
<CListGroupItem className="justify-content-between">
Dapibus ac facilisis in
<CBadge className="float-end" shape="pill" color="primary">2</CBadge>
<CBadge className="float-end" shape="rounded-pill" color="primary">2</CBadge>
</CListGroupItem>
<CListGroupItem className="justify-content-between">
Morbi leo risus
<CBadge className="float-end" shape="pill" color="primary">1</CBadge>
<CBadge className="float-end" shape="rounded-pill" color="primary">1</CBadge>
</CListGroupItem>
</CListGroup>
</CCardBody>

View File

@ -3,8 +3,9 @@ import {
CCard,
CCardBody,
CCardHeader,
CPagination
} from '@coreui/react'
CPagination,
CPaginationItem
} from '@coreui/react-ts'
import { DocsLink } from 'src/reusable'
@ -20,11 +21,13 @@ const Paginations = () => {
</CCardHeader>
<CCardBody>
<h6>Default</h6>
<CPagination
activePage={currentPage}
pages={10}
onActivePageChange={setCurrentPage}
/>
<CPagination>
<CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
<br></br>
<h6>Small</h6>

View File

@ -4,11 +4,11 @@ import {
CCard,
CCardBody,
CCardHeader,
CLink,
CPopover,
CRow,
CCol,
} from '@coreui/react-ts'
import { CLink } from '@coreui/react'
import { DocsLink } from 'src/reusable'
const Popovers = () => {

View File

@ -1,13 +1,15 @@
import React from 'react'
import {
CDataTable,
} from '@coreui/react'
import {
CBadge,
CCard,
CCardBody,
CCardHeader,
CCol,
CDataTable,
CRow
} from '@coreui/react'
} from '@coreui/react-ts'
import { DocsLink } from 'src/reusable'
import usersData from '../../users/UsersData'

View File

@ -4,13 +4,11 @@ import {
CCard,
CCardBody,
CCardHeader,
CLink,
CTooltip,
CRow,
CCol,
} from '@coreui/react-ts'
import {
CLink
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const Tooltips = () => {

View File

@ -6,7 +6,7 @@ import {
CCardHeader,
CCol,
CRow
} from '@coreui/react'
} from '@coreui/react-ts'
import CIcon from '@coreui/icons-react'
const BrandButtons = () => {

View File

@ -1,8 +1,10 @@
import React from 'react'
import {
CButton,
CCallout,
CDropdown,
CButtonGroup,
CButtonToolbar,
CCard,
CCardBody,
CCardHeader,
@ -15,10 +17,6 @@ import {
CInputGroupText,
CRow,
} from '@coreui/react-ts'
import {
CButtonToolbar,
CCallout
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const ButtonGroups = () => {

View File

@ -436,31 +436,31 @@ const Buttons = () => {
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="pill" color="primary">Primary</CButton>
<CButton shape="rounded-pill" color="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="pill" color="secondary">Secondary</CButton>
<CButton shape="rounded-pill" color="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="pill" color="success">Success</CButton>
<CButton shape="rounded-pill" color="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="pill" color="warning">Warning</CButton>
<CButton shape="rounded-pill" color="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="pill" color="danger">Danger</CButton>
<CButton shape="rounded-pill" color="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="pill" color="info">Info</CButton>
<CButton shape="rounded-pill" color="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="pill" color="light">Light</CButton>
<CButton shape="rounded-pill" color="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="pill" color="dark">Dark</CButton>
<CButton shape="rounded-pill" color="dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="pill" color="link">Link</CButton>
<CButton shape="rounded-pill" color="link">Link</CButton>
</CCol>
</CRow>
<CRow className="align-items-center mt-3">
@ -468,31 +468,31 @@ const Buttons = () => {
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active shape="pill" color="primary" aria-pressed="true">Primary</CButton>
<CButton active shape="rounded-pill" color="primary" aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active shape="pill" color="secondary" aria-pressed="true">Secondary</CButton>
<CButton active shape="rounded-pill" color="secondary" aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active shape="pill" color="success" aria-pressed="true">Success</CButton>
<CButton active shape="rounded-pill" color="success" aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active shape="pill" color="warning" aria-pressed="true">Warning</CButton>
<CButton active shape="rounded-pill" color="warning" aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active shape="pill" color="danger" aria-pressed="true">Danger</CButton>
<CButton active shape="rounded-pill" color="danger" aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active shape="pill" color="info" aria-pressed="true">Info</CButton>
<CButton active shape="rounded-pill" color="info" aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active shape="pill" color="light" aria-pressed="true">Light</CButton>
<CButton active shape="rounded-pill" color="light" aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active shape="pill" color="dark" aria-pressed="true">Dark</CButton>
<CButton active shape="rounded-pill" color="dark" aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active shape="pill" color="link" aria-pressed="true">Link</CButton>
<CButton active shape="rounded-pill" color="link" aria-pressed="true">Link</CButton>
</CCol>
</CRow>
<CRow className="align-items-center mt-3">
@ -500,31 +500,31 @@ const Buttons = () => {
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="pill" color="primary" disabled>Primary</CButton>
<CButton shape="rounded-pill" color="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="pill" color="secondary" disabled>Secondary</CButton>
<CButton shape="rounded-pill" color="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="pill" color="success" disabled>Success</CButton>
<CButton shape="rounded-pill" color="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="pill" color="warning" disabled>Warning</CButton>
<CButton shape="rounded-pill" color="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="pill" color="danger" disabled>Danger</CButton>
<CButton shape="rounded-pill" color="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="pill" color="info" disabled>Info</CButton>
<CButton shape="rounded-pill" color="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="pill" color="light" disabled>Light</CButton>
<CButton shape="rounded-pill" color="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="pill" color="dark" disabled>Dark</CButton>
<CButton shape="rounded-pill" color="dark" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="pill" color="link" disabled>Link</CButton>
<CButton shape="rounded-pill" color="link" disabled>Link</CButton>
</CCol>
</CRow>
</CCardBody>
@ -553,7 +553,7 @@ const Buttons = () => {
<CButton shape="square" color="warning" size="sm">Square Button</CButton>
</CCol>
<CCol col="2" className="mb-3 mb-xl-0 text-center">
<CButton shape="pill" color="danger" size="sm">Pill Button</CButton>
<CButton shape="rounded-pill" color="danger" size="sm">Pill Button</CButton>
</CCol>
</CRow>
<CRow className="align-items-center mt-3">
@ -573,7 +573,7 @@ const Buttons = () => {
<CButton shape="square" color="warning">Square Button</CButton>
</CCol>
<CCol col="2" className="mb-3 mb-xl-0 text-center">
<CButton shape="pill" color="danger">Pill Button</CButton>
<CButton shape="rounded-pill" color="danger">Pill Button</CButton>
</CCol>
</CRow>
<CRow className="align-items-center mt-3">
@ -593,7 +593,7 @@ const Buttons = () => {
<CButton shape="square" color="warning" size="lg">Square Button</CButton>
</CCol>
<CCol col="2" className="mb-3 mb-xl-0 text-center">
<CButton shape="pill" color="danger" size="lg">Pill Button</CButton>
<CButton shape="rounded-pill" color="danger" size="lg">Pill Button</CButton>
</CCol>
</CRow>
</CCardBody>
@ -626,7 +626,7 @@ const Buttons = () => {
</CButton>
</CCol>
<CCol col="2" className="text-center mt-3">
<CButton shape="pill" color="danger">
<CButton shape="rounded-pill" color="danger">
<CIcon name="cil-lightbulb" />Pill Button
</CButton>
</CCol>

View File

@ -4,7 +4,7 @@ import {
CCardBody,
CCardGroup,
CCardHeader
} from '@coreui/react'
} from '@coreui/react-ts'
import {
CChartBar,
CChartLine,

View File

@ -1,13 +1,11 @@
import React, { lazy } from 'react'
import {
CCallout
} from '@coreui/react'
import {
CAvatar,
CBadge,
CButton,
CButtonGroup,
CCallout,
CCard,
CCardBody,
CCardFooter,
@ -221,10 +219,10 @@ const Dashboard = () => {
</div>
<div className="legend text-center">
<small>
<sup className="px-1"><CBadge shape="pill" color="info">&nbsp;</CBadge></sup>
<sup className="px-1"><CBadge shape="rounded-pill" color="info">&nbsp;</CBadge></sup>
New clients
&nbsp;
<sup className="px-1"><CBadge shape="pill" color="danger">&nbsp;</CBadge></sup>
<sup className="px-1"><CBadge shape="rounded-pill" color="danger">&nbsp;</CBadge></sup>
Recurring clients
</small>
</div>

View File

@ -1,7 +1,4 @@
import React from 'react'
import {
CLink,
} from '@coreui/react'
import {
CAlert,
CAlertHeading,
@ -10,6 +7,7 @@ import {
CCardBody,
CCardHeader,
CCol,
CLink,
CProgress,
CRow,
} from '@coreui/react-ts'

View File

@ -30,7 +30,7 @@ const Badges = () => {
</CCardBody>
<CCardFooter>
<CButton color="secondary">
Notifications <CBadge color="primary" shape="pill" style={{ position: 'static' }}>9</CBadge>
Notifications <CBadge color="primary" shape="rounded-pill" style={{ position: 'static' }}>9</CBadge>
</CButton>
</CCardFooter>
</CCard>

View File

@ -3,13 +3,11 @@ import {
CButton,
CCol,
CContainer,
CInput,
CFormControl,
CInputGroup,
CInputGroupPrepend,
CInputGroupAppend,
CInputGroupText,
CRow
} from '@coreui/react'
CRow,
} from '@coreui/react-ts'
import CIcon from '@coreui/icons-react'
const Page404 = () => {
@ -24,15 +22,13 @@ const Page404 = () => {
<p className="text-muted float-start">The page you are looking for was not found.</p>
</div>
<CInputGroup className="input-prepend">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-magnifying-glass" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput size="16" type="text" placeholder="What are you looking for?" />
<CInputGroupAppend>
<CInputGroupText>
<CIcon name="cil-magnifying-glass" />
</CInputGroupText>
<CFormControl size="16" type="text" placeholder="What are you looking for?" />
<CInputGroupText>
<CButton color="info">Search</CButton>
</CInputGroupAppend>
</CInputGroupText>
</CInputGroup>
</CCol>
</CRow>

View File

@ -3,13 +3,11 @@ import {
CButton,
CCol,
CContainer,
CInput,
CFormControl,
CInputGroup,
CInputGroupAppend,
CInputGroupPrepend,
CInputGroupText,
CRow
} from '@coreui/react'
} from '@coreui/react-ts'
import CIcon from '@coreui/icons-react'
const Page500 = () => {
@ -24,15 +22,13 @@ const Page500 = () => {
<p className="text-muted float-start">The page you are looking for is temporarily unavailable.</p>
</span>
<CInputGroup className="input-prepend">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-magnifying-glass" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput size="16" type="text" placeholder="What are you looking for?" />
<CInputGroupAppend>
<CInputGroupText>
<CIcon name="cil-magnifying-glass" />
</CInputGroupText>
<CFormControl size="16" type="text" placeholder="What are you looking for?" />
<CInputGroupText>
<CButton color="info">Search</CButton>
</CInputGroupAppend>
</CInputGroupText>
</CInputGroup>
</CCol>
</CRow>

View File

@ -6,7 +6,7 @@ import {
CCard,
CCardHeader,
CCardBody
} from '@coreui/react'
} from '@coreui/react-ts'
import { rgbToHex } from '@coreui/utils'
import { DocsLink } from 'src/reusable'

View File

@ -3,7 +3,7 @@ import {
CCard,
CCardHeader,
CCardBody
} from '@coreui/react'
} from '@coreui/react-ts'
import { DocsLink } from 'src/reusable'
const Typography = () => {

View File

@ -1,5 +1,5 @@
import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react-ts'
import CIcon from '@coreui/icons-react'
import usersData from './UsersData'

View File

@ -1,14 +1,14 @@
import React from 'react'
import {
CCardFooter,
CCardGroup,
CCol,
CLink,
CRow,
CProgress
} from '@coreui/react-ts'
import {
CCardGroup,
CLink,
CWidgetProgress,
CWidgetIcon,
CWidgetProgressIcon,