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

refactor: update some components to v4

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-02-18 23:40:31 +01:00
parent 76da5c50a7
commit e95c7e34bb
12 changed files with 681 additions and 751 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
migration.md
View File

@ -16,6 +16,16 @@
- variant="pill" --> shape="rounded-pill"
- variant="square" --> shape="rounded-0"
## Forms
- `CInput` => `CFormControl`
- `CLabel` => `CFormLabel`
- `CSelect` => `CFormSelect`
- Deprecated component `CFormGroup`
- Deprecated component `CInputGroupAppend`
- Deprecated component `CInputGroupPrepend`
## Header
- Deprecated pro `withSubheader`

2
src/containers/TheFooter.js
View File

@ -3,7 +3,7 @@ import { CFooter } from '@coreui/react-ts'
const TheFooter = () => {
return (
<CFooter fixed={false}>
<CFooter>
<div>
<a href="https://coreui.io" target="_blank" rel="noopener noreferrer">CoreUI</a>
<span className="ms-1">&copy; 2020 creativeLabs.</span>

6
src/containers/TheHeader.js
View File

@ -1,7 +1,7 @@
import React from "react";
import { NavLink } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { CToggler, CBreadcrumbRouter, CLink } from "@coreui/react";
import { CToggler, CBreadcrumbRouter } from "@coreui/react";
import {
CContainer,
CHeader,
@ -91,7 +91,7 @@ const TheHeader = () => {
className="border-0 c-subheader-nav m-0 px-0 px-md-3"
routes={routes}
/>
<CHeaderNav>
{/* <CHeaderNav>
<CNavItem>
<CNavLink href="#">
<CIcon name="cil-speech" alt="Settings" />
@ -107,7 +107,7 @@ const TheHeader = () => {
<CIcon name="cil-settings" alt="Settings" />&nbsp;Settings
</CNavLink>
</CNavItem>
</CHeaderNav>
</CHeaderNav> */}
</CContainer>
</CHeader>
);

2
src/containers/TheLayout.js
View File

@ -9,7 +9,7 @@ import {
const TheLayout = () => {
return (
<div className="d-flex">
<div className="d-flex bg-light">
<TheSidebar/>
<div className="wrapper">
<TheHeader/>

9
src/containers/TheSidebar.js
View File

@ -13,7 +13,7 @@ import {
CSidebar,
CSidebarBrand,
CSidebarNav,
CSidebarNavGenerator,
CCreateNavItem,
} from '@coreui/react-ts'
import CIcon from '@coreui/icons-react'
@ -27,8 +27,9 @@ const TheSidebar = () => {
return (
<CSidebar
show={show}
onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })}
position="sticky"
selfHiding="md"
// onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })}
>
<CSidebarBrand className="d-md-down-none" to="/">
<CIcon
@ -44,7 +45,7 @@ const TheSidebar = () => {
</CSidebarBrand>
<CSidebarNav>
<CSidebarNavGenerator
<CCreateNavItem
items={navigation}
// components={{
// CSidebarNavDivider,

312
src/containers/_nav.js
View File

@ -6,7 +6,7 @@ const _nav = [
{
_component: 'CNavItem',
as: NavLink,
anchorText: 'Dashboard',
anchor: 'Dashboard',
to: '/dashboard',
icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
badge: {
@ -14,217 +14,245 @@ const _nav = [
text: 'NEW',
}
},
// {
// _component: 'CSidebarNavTitle',
// items: ['Theme']
// },
{
_component: 'CNavTitle',
anchor: 'Theme'
},
{
_component: 'CNavItem',
as: NavLink,
anchorText: 'Colors',
anchor: 'Colors',
to: '/theme/colors',
icon: 'cil-drop',
},
{
_component: 'CNavItem',
as: NavLink,
anchorText: 'Typography',
anchor: 'Typography',
to: '/theme/typography',
icon: 'cil-pencil',
},
// {
// _component: 'CSidebarNavTitle',
// items: ['Components']
// },
{
_component: 'CNavTitle',
anchor: 'Components'
},
{
_component: 'CNavGroup',
anchorText: 'Base',
route: '/base',
as: NavLink,
anchor: 'Base',
to: '/to',
icon: 'cil-puzzle',
items: [
{
_component: 'CNavItem',
as: NavLink,
anchorText: 'Breadcrumb',
anchor: 'Breadcrumb',
to: '/base/breadcrumbs',
},
{
_component: 'CNavItem',
as: NavLink,
anchorText: 'Cards',
anchor: 'Cards',
to: '/base/cards',
},
{
_component: 'CNavItem',
anchorText: 'Carousel',
as: NavLink,
anchor: 'Carousel',
to: '/base/carousels',
},
{
_component: 'CNavItem',
anchorText: 'Collapse',
as: NavLink,
anchor: 'Collapse',
to: '/base/collapses',
},
{
_component: 'CNavItem',
anchorText: 'Forms',
as: NavLink,
anchor: 'Forms',
to: '/base/forms',
},
{
_component: 'CNavItem',
anchorText: 'Jumbotron',
as: NavLink,
anchor: 'Jumbotron',
to: '/base/jumbotrons',
},
{
_component: 'CNavItem',
anchorText: 'List group',
as: NavLink,
anchor: 'List group',
to: '/base/list-groups',
},
{
_component: 'CNavItem',
anchorText: 'Navs',
as: NavLink,
anchor: 'Navs',
to: '/base/navs',
},
{
_component: 'CNavItem',
anchorText: 'Navbars',
as: NavLink,
anchor: 'Navbars',
to: '/base/navbars',
},
{
_component: 'CNavItem',
anchorText: 'Pagination',
as: NavLink,
anchor: 'Pagination',
to: '/base/paginations',
},
{
_component: 'CNavItem',
anchorText: 'Popovers',
as: NavLink,
anchor: 'Popovers',
to: '/base/popovers',
},
{
_component: 'CNavItem',
anchorText: 'Progress',
as: NavLink,
anchor: 'Progress',
to: '/base/progress-bar',
},
{
_component: 'CNavItem',
anchorText: 'Switches',
as: NavLink,
anchor: 'Switches',
to: '/base/switches',
},
{
_component: 'CNavItem',
anchorText: 'Tables',
as: NavLink,
anchor: 'Tables',
to: '/base/tables',
},
{
_component: 'CNavItem',
anchorText: 'Tabs',
as: NavLink,
anchor: 'Tabs',
to: '/base/tabs',
},
{
_component: 'CNavItem',
anchorText: 'Tooltips',
as: NavLink,
anchor: 'Tooltips',
to: '/base/tooltips',
},
],
},
// {
// _component: 'CNavGroup',
// anchorText: 'Buttons',
{
_component: 'CNavGroup',
anchor: 'Buttons',
// route: '/buttons',
// icon: 'cil-cursor',
// items: [
// {
// _component: 'CNavItem',
// anchorText: 'Buttons',
// to: '/buttons/buttons',
// },
// {
// _component: 'CNavItem',
// anchorText: 'Brand buttons',
// to: '/buttons/brand-buttons',
// },
// {
// _component: 'CNavItem',
// anchorText: 'Buttons groups',
// to: '/buttons/button-groups',
// },
// {
// _component: 'CNavItem',
// anchorText: 'Dropdowns',
// to: '/buttons/button-dropdowns',
// }
// ],
// },
// {
// _component: 'CNavItem',
// anchorText: 'Charts',
// to: '/charts',
// icon: 'cil-chart-pie'
// },
// {
// _component: 'CNavGroup',
// anchorText: 'Icons',
icon: 'cil-cursor',
items: [
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Buttons',
to: '/buttons/buttons',
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Brand buttons',
to: '/buttons/brand-buttons',
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Buttons groups',
to: '/buttons/button-groups',
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Dropdowns',
to: '/buttons/button-dropdowns',
}
],
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Charts',
to: '/charts',
icon: 'cil-chart-pie'
},
{
_component: 'CNavGroup',
anchor: 'Icons',
// route: '/icons',
// icon: 'cil-star',
// items: [
// {
// _component: 'CNavItem',
// anchorText: 'CoreUI Free',
// to: '/icons/coreui-icons',
// badge: {
// color: 'success',
// text: 'NEW',
// },
// },
// {
// _component: 'CNavItem',
// anchorText: 'CoreUI Flags',
// to: '/icons/flags',
// },
// {
// _component: 'CNavItem',
// anchorText: 'CoreUI Brands',
// to: '/icons/brands',
// },
// ],
// },
// {
// _component: 'CNavGroup',
// anchorText: 'Notifications',
icon: 'cil-star',
items: [
{
_component: 'CNavItem',
as: NavLink,
anchor: 'CoreUI Free',
to: '/icons/coreui-icons',
badge: {
color: 'success',
text: 'NEW',
},
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'CoreUI Flags',
to: '/icons/flags',
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'CoreUI Brands',
to: '/icons/brands',
},
],
},
{
_component: 'CNavGroup',
anchor: 'Notifications',
// route: '/notifications',
// icon: 'cil-bell',
// items: [
// {
// _component: 'CNavItem',
// anchorText: 'Alerts',
// to: '/notifications/alerts',
// },
// {
// _component: 'CNavItem',
// anchorText: 'Badges',
// to: '/notifications/badges',
// },
// {
// _component: 'CNavItem',
// anchorText: 'Modal',
// to: '/notifications/modals',
// },
// {
// _component: 'CNavItem',
// anchorText: 'Toaster',
// to: '/notifications/toaster'
// }
// ]
// },
// {
// _component: 'CNavItem',
// anchorText: 'Widgets',
// to: '/widgets',
// icon: 'cil-calculator',
// badge: {
// color: 'info',
// text: 'NEW',
// },
// },
icon: 'cil-bell',
items: [
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Alerts',
to: '/notifications/alerts',
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Badges',
to: '/notifications/badges',
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Modal',
to: '/notifications/modals',
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Toaster',
to: '/notifications/toaster'
}
]
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Widgets',
to: '/widgets',
icon: 'cil-calculator',
badge: {
color: 'info',
text: 'NEW',
},
},
// {
// _component: 'CSidebarNavDivider'
// },
@ -234,35 +262,35 @@ const _nav = [
// },
// {
// _component: 'CNavGroup',
// anchorText: 'Pages',
// anchor: 'Pages',
// route: '/pages',
// icon: 'cil-star',
// items: [
// {
// _component: 'CNavItem',
// anchorText: 'Login',
// anchor: 'Login',
// to: '/login',
// },
// {
// _component: 'CNavItem',
// anchorText: 'Register',
// anchor: 'Register',
// to: '/register',
// },
// {
// _component: 'CNavItem',
// anchorText: 'Error 404',
// anchor: 'Error 404',
// to: '/404',
// },
// {
// _component: 'CNavItem',
// anchorText: 'Error 500',
// anchor: 'Error 500',
// to: '/500',
// },
// ],
// },
// {
// _component: 'CNavItem',
// anchorText: 'Disabled',
// anchor: 'Disabled',
// icon: 'cil-ban',
// badge: {
// color: 'secondary',
@ -273,7 +301,7 @@ const _nav = [
// },
// {
// _component: 'CSidebarNavDivider',
// classanchorText: 'm-2'
// classanchor: 'm-2'
// },
// {
// _component: 'CSidebarNavTitle',
@ -281,37 +309,37 @@ const _nav = [
// },
// {
// _component: 'CNavItem',
// anchorText: 'Label danger',
// anchor: 'Label danger',
// to: '',
// icon: {
// anchorText: 'cil-star',
// classanchorText: 'text-danger'
// anchor: 'cil-star',
// classanchor: 'text-danger'
// },
// label: true
// },
// {
// _component: 'CNavItem',
// anchorText: 'Label info',
// anchor: 'Label info',
// to: '',
// icon: {
// anchorText: 'cil-star',
// classanchorText: 'text-info'
// anchor: 'cil-star',
// classanchor: 'text-info'
// },
// label: true
// },
// {
// _component: 'CNavItem',
// anchorText: 'Label warning',
// anchor: 'Label warning',
// to: '',
// icon: {
// anchorText: 'cil-star',
// classanchorText: 'text-warning'
// anchor: 'cil-star',
// classanchor: 'text-warning'
// },
// label: true
// },
// {
// _component: 'CSidebarNavDivider',
// classanchorText: 'm-2'
// classanchor: 'm-2'
// }
]

2
src/reusable/DocsLink.js
View File

@ -11,7 +11,7 @@ const DocsLink = props => {
const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href
return (
<div className="card-header-actions">
<div className="float-end">
<CLink
{...rest}
href={href}

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

@ -1,17 +1,17 @@
import React from 'react'
import React from "react";
import {
CBreadcrumb,
CBreadcrumbItem,
CBreadcrumbRouter,
CCard,
CCardBody,
CCardHeader,
CCol,
CRow,
CLink
} from '@coreui/react-ts'
import { DocsLink } from 'src/reusable'
import routes from '../../../routes'
CLink,
} from "@coreui/react-ts";
import { CBreadcrumbRouter } from '@coreui/react'
import { DocsLink } from "src/reusable";
import routes from "../../../routes";
const Breadcrumbs = () => {
return (
@ -51,15 +51,13 @@ const Breadcrumbs = () => {
<CBreadcrumbItem>
<CLink href="#">Data</CLink>
</CBreadcrumbItem>
<CBreadcrumbItem active>
Bootstrap
</CBreadcrumbItem>
<CBreadcrumbItem active>Bootstrap</CBreadcrumbItem>
</CBreadcrumb>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
);
};
export default Breadcrumbs
export default Breadcrumbs;

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

@ -49,9 +49,7 @@ const Cards = () => {
<CCard className="mb-4">
<CCardHeader>
Card with icon
<div className="card-header-actions">
<CIcon name="cil-check" className="float-end"/>
</div>
</CCardHeader>
<CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
@ -64,9 +62,7 @@ const Cards = () => {
<CCard className="mb-4">
<CCardHeader>
Card with switch
<div className="card-header-actions">
<CSwitch className={'float-end mb-0'} color={'info'} defaultChecked size={'sm'} tabIndex="0" />
</div>
</CCardHeader>
<CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
@ -79,9 +75,7 @@ const Cards = () => {
<CCard className="mb-4">
<CCardHeader>
Card with label
<div className="card-header-actions">
<CBadge color="success" className="float-end">Success</CBadge>
</div>
</CCardHeader>
<CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
@ -94,9 +88,7 @@ const Cards = () => {
<CCard className="mb-4">
<CCardHeader>
Card with label
<div className="card-header-actions">
<CBadge shape="pill" color="danger" className="float-end">42</CBadge>
</div>
</CCardHeader>
<CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
@ -108,7 +100,7 @@ const Cards = () => {
</CRow>
<CRow>
<CCol xs="12" sm="6" md="4">
<CCard borderColor="primary">
<CCard className="mb-4 border-primary">
<CCardHeader>
Card outline primary
</CCardHeader>
@ -120,7 +112,7 @@ const Cards = () => {
</CCard>
</CCol>
<CCol xs="12" sm="6" md="4">
<CCard borderColor="secondary">
<CCard className="mb-4 border-secondary">
<CCardHeader>
Card outline secondary
</CCardHeader>
@ -132,7 +124,7 @@ const Cards = () => {
</CCard>
</CCol>
<CCol xs="12" sm="6" md="4">
<CCard borderColor="success">
<CCard className="mb-4 border-success">
<CCardHeader>
Card outline success
</CCardHeader>
@ -144,7 +136,7 @@ const Cards = () => {
</CCard>
</CCol>
<CCol xs="12" sm="6" md="4">
<CCard borderColor="info">
<CCard className="mb-4 border-info">
<CCardHeader>
Card outline info
</CCardHeader>
@ -156,7 +148,7 @@ const Cards = () => {
</CCard>
</CCol>
<CCol xs="12" sm="6" md="4">
<CCard borderColor="warning">
<CCard className="mb-4 border-warning">
<CCardHeader>
Card outline warning
</CCardHeader>
@ -168,7 +160,7 @@ const Cards = () => {
</CCard>
</CCol>
<CCol xs="12" sm="6" md="4">
<CCard borderColor="danger">
<CCard className="mb-4 border-danger">
<CCardHeader>
Card outline danger
</CCardHeader>
@ -183,7 +175,7 @@ const Cards = () => {
<CRow>
<CCol xs="12" sm="6" md="4">
<CCard accentColor="primary">
<CCard className="border-top-primary border-top-3 mb-4">
<CCardHeader>
Card with accent
</CCardHeader>
@ -195,7 +187,7 @@ const Cards = () => {
</CCard>
</CCol>
<CCol xs="12" sm="6" md="4">
<CCard accentColor="secondary">
<CCard className="border-top-secondary border-top-3 mb-4">
<CCardHeader>
Card with accent
</CCardHeader>
@ -207,7 +199,7 @@ const Cards = () => {
</CCard>
</CCol>
<CCol xs="12" sm="6" md="4">
<CCard accentColor="success">
<CCard className="border-top-success border-top-3 mb-4">
<CCardHeader>
Card with accent
</CCardHeader>
@ -219,7 +211,7 @@ const Cards = () => {
</CCard>
</CCol>
<CCol xs="12" sm="6" md="4">
<CCard accentColor="info">
<CCard className="border-top-info border-top-3 mb-4">
<CCardHeader>
Card with accent
</CCardHeader>
@ -231,7 +223,7 @@ const Cards = () => {
</CCard>
</CCol>
<CCol xs="12" sm="6" md="4">
<CCard accentColor="warning">
<CCard className="border-top-warning border-top-3 mb-4">
<CCardHeader>
Card with accent
</CCardHeader>
@ -243,7 +235,7 @@ const Cards = () => {
</CCard>
</CCol>
<CCol xs="12" sm="6" md="4">
<CCard accentColor="danger">
<CCard className="border-top-danger border-top-3 mb-4">
<CCardHeader>
Card with accent
</CCardHeader>
@ -257,7 +249,7 @@ const Cards = () => {
</CRow>
<CRow>
<CCol xs="12" sm="6" md="4">
<CCard color="primary" className="text-white text-center">
<CCard color="primary" className="text-white text-center mb-4">
<CCardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -267,7 +259,7 @@ const Cards = () => {
</CCard>
</CCol>
<CCol xs="12" sm="6" md="4">
<CCard color="success" className="text-white text-center">
<CCard color="success" className="text-white text-center mb-4">
<CCardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -277,7 +269,7 @@ const Cards = () => {
</CCard>
</CCol>
<CCol xs="12" sm="6" md="4">
<CCard color="info" className="text-white text-center">
<CCard color="info" className="text-white text-center mb-4">
<CCardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -287,7 +279,7 @@ const Cards = () => {
</CCard>
</CCol>
<CCol xs="12" sm="6" md="4">
<CCard color="warning" className="text-white text-center">
<CCard color="warning" className="text-white text-center mb-4">
<CCardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -297,7 +289,7 @@ const Cards = () => {
</CCard>
</CCol>
<CCol xs="12" sm="6" md="4">
<CCard color="danger" className="text-white text-center">
<CCard color="danger" className="text-white text-center mb-4">
<CCardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -307,7 +299,7 @@ const Cards = () => {
</CCard>
</CCol>
<CCol xs="12" sm="6" md="4">
<CCard color="primary" className="text-white text-center">
<CCard color="primary" className="text-white text-center mb-4">
<CCardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -319,7 +311,7 @@ const Cards = () => {
</CRow>
<CRow>
<CCol xs="12" sm="6" md="4">
<CCard color="primary" className="text-white">
<CCard color="primary" className="text-white mb-4">
<CCardHeader>
Card title
</CCardHeader>
@ -331,7 +323,7 @@ const Cards = () => {
</CCard>
</CCol>
<CCol xs="12" sm="6" md="4">
<CCard color="success" className="text-white">
<CCard color="success" className="text-white mb-4">
<CCardHeader>
Card title
</CCardHeader>
@ -343,7 +335,7 @@ const Cards = () => {
</CCard>
</CCol>
<CCol xs="12" sm="6" md="4">
<CCard color="info" className="text-white">
<CCard color="info" className="text-white mb-4">
<CCardHeader>
Card title
</CCardHeader>
@ -355,7 +347,7 @@ const Cards = () => {
</CCard>
</CCol>
<CCol xs="12" sm="6" md="4">
<CCard color="warning" className="text-white">
<CCard color="warning" className="text-white mb-4">
<CCardHeader>
Card title
</CCardHeader>
@ -366,45 +358,6 @@ const Cards = () => {
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" sm="6" md="4">
<CCard color="gradient-secondary">
<CCardHeader>
Card title - gradient
</CCardHeader>
<CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" sm="6" md="4">
<CFade in={showCard}>
<CCard className="mb-4">
<CCardHeader>
Card actions
<div className="card-header-actions">
<CLink className="card-header-action">
<CIcon name="cil-settings" />
</CLink>
<CLink className="card-header-action" onClick={() => setCollapsed(!collapsed)}>
<CIcon name={collapsed ? 'cil-chevron-bottom':'cil-chevron-top'} />
</CLink>
<CLink className="card-header-action" onClick={() => setShowCard(false)}>
<CIcon name="cil-x-circle" />
</CLink>
</div>
</CCardHeader>
<CCollapse show={collapsed}>
<CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCardBody>
</CCollapse>
</CCard>
</CFade>
</CCol>
</CRow>
</>
)

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

File diff suppressed because it is too large Load Diff

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

@ -1,4 +1,10 @@
import React, { useState } from 'react'
import {
CToggler,
CForm,
CInput,
CImg
} from '@coreui/react'
import {
CCard,
CCardBody,
@ -11,14 +17,10 @@ import {
CNavbarNav,
CNavbarBrand,
CNavbarText,
CToggler,
CNavLink,
CDropdown,
CForm,
CInput,
CButton,
CImg
} from '@coreui/react'
} from '@coreui/react-ts'
import { DocsLink } from 'src/reusable'
const CNavbars = () => {

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

@ -154,7 +154,7 @@ const Alerts = () => {
color="warning"
show={visible}
closeButton
onShowChange={setVisible}
visible={setVisible}
>
I will be closed in {visible} seconds!
<CProgress