refactor: update CIcons
This commit is contained in:
Łukasz Holeczek
parent
9ee84678bf
commit
7108efcc88
36
src/_nav.js
36
src/_nav.js
@ -1,12 +1,24 @@
|
||||
import React from 'react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import {
|
||||
cilBell,
|
||||
cilCalculator,
|
||||
cilChartPie,
|
||||
cilCursor,
|
||||
cilDrop,
|
||||
cilNotes,
|
||||
cilPencil,
|
||||
cilPuzzle,
|
||||
cilSpeedometer,
|
||||
cilStar,
|
||||
} from '@coreui/icons'
|
||||
|
||||
const _nav = [
|
||||
{
|
||||
component: 'CNavItem',
|
||||
name: 'Dashboard',
|
||||
to: '/dashboard',
|
||||
icon: <CIcon icon="cil-speedometer" customClassName="nav-icon" />,
|
||||
icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon" />,
|
||||
badge: {
|
||||
color: 'info',
|
||||
text: 'NEW',
|
||||
@ -20,13 +32,13 @@ const _nav = [
|
||||
component: 'CNavItem',
|
||||
name: 'Colors',
|
||||
to: '/theme/colors',
|
||||
icon: <CIcon icon="cil-drop" customClassName="nav-icon" />,
|
||||
icon: <CIcon icon={cilDrop} customClassName="nav-icon" />,
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
name: 'Typography',
|
||||
to: '/theme/typography',
|
||||
icon: <CIcon icon="cil-pencil" customClassName="nav-icon" />,
|
||||
icon: <CIcon icon={cilPencil} customClassName="nav-icon" />,
|
||||
},
|
||||
{
|
||||
component: 'CNavTitle',
|
||||
@ -36,17 +48,15 @@ const _nav = [
|
||||
component: 'CNavGroup',
|
||||
name: 'Base',
|
||||
to: '/base',
|
||||
icon: 'cil-puzzle',
|
||||
icon: <CIcon icon={cilPuzzle} customClassName="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
name: 'Accordion',
|
||||
to: '/base/accordion',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
name: 'Breadcrumb',
|
||||
to: '/base/breadcrumbs',
|
||||
},
|
||||
@ -122,7 +132,7 @@ const _nav = [
|
||||
component: 'CNavGroup',
|
||||
name: 'Buttons',
|
||||
to: '/buttons',
|
||||
icon: <CIcon icon="cil-cursor" customClassName="nav-icon" />,
|
||||
icon: <CIcon icon={cilCursor} customClassName="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
component: 'CNavItem',
|
||||
@ -147,7 +157,7 @@ const _nav = [
|
||||
{
|
||||
component: 'CNavGroup',
|
||||
name: 'Forms',
|
||||
icon: <CIcon icon="cil-notes" customClassName="nav-icon" />,
|
||||
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
component: 'CNavItem',
|
||||
@ -203,12 +213,12 @@ const _nav = [
|
||||
component: 'CNavItem',
|
||||
name: 'Charts',
|
||||
to: '/charts',
|
||||
icon: <CIcon icon="cil-chart-pie" customClassName="nav-icon" />,
|
||||
icon: <CIcon icon={cilChartPie} customClassName="nav-icon" />,
|
||||
},
|
||||
{
|
||||
component: 'CNavGroup',
|
||||
name: 'Icons',
|
||||
icon: <CIcon icon="cil-star" customClassName="nav-icon" />,
|
||||
icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
component: 'CNavItem',
|
||||
@ -237,7 +247,7 @@ const _nav = [
|
||||
{
|
||||
component: 'CNavGroup',
|
||||
name: 'Notifications',
|
||||
icon: <CIcon icon="cil-bell" customClassName="nav-icon" />,
|
||||
icon: <CIcon icon={cilBell} customClassName="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
component: 'CNavItem',
|
||||
@ -269,7 +279,7 @@ const _nav = [
|
||||
component: 'CNavItem',
|
||||
name: 'Widgets',
|
||||
to: '/widgets',
|
||||
icon: <CIcon icon="cil-calculator" customClassName="nav-icon" />,
|
||||
icon: <CIcon icon={cilCalculator} customClassName="nav-icon" />,
|
||||
badge: {
|
||||
color: 'info',
|
||||
text: 'NEW',
|
||||
@ -282,7 +292,7 @@ const _nav = [
|
||||
{
|
||||
component: 'CNavGroup',
|
||||
name: 'Pages',
|
||||
icon: <CIcon icon="cil-star" customClassName="nav-icon" />,
|
||||
icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
@ -1,259 +0,0 @@
|
||||
import {
|
||||
cibSkype,
|
||||
cibFacebook,
|
||||
cibTwitter,
|
||||
cibLinkedin,
|
||||
cibFlickr,
|
||||
cibTumblr,
|
||||
cibXing,
|
||||
cibGithub,
|
||||
cibStackoverflow,
|
||||
cibYoutube,
|
||||
cibDribbble,
|
||||
cibInstagram,
|
||||
cibPinterest,
|
||||
cibVk,
|
||||
cibYahoo,
|
||||
cibBehance,
|
||||
cibReddit,
|
||||
cibVimeo,
|
||||
cibCcMastercard,
|
||||
cibCcVisa,
|
||||
cibCcStripe,
|
||||
cibCcPaypal,
|
||||
cibCcApplePay,
|
||||
cibCcAmex,
|
||||
cibGoogle,
|
||||
} from '@coreui/icons'
|
||||
import { cifUs, cifBr, cifIn, cifFr, cifEs, cifPl } from '@coreui/icons'
|
||||
import {
|
||||
cilAlignCenter,
|
||||
cilAlignLeft,
|
||||
cilAlignRight,
|
||||
cilApplicationsSettings,
|
||||
cilArrowBottom,
|
||||
cilArrowRight,
|
||||
cilArrowTop,
|
||||
cilAsterisk,
|
||||
cilBan,
|
||||
cilBasket,
|
||||
cilBell,
|
||||
cilBold,
|
||||
cilBookmark,
|
||||
cilCalculator,
|
||||
cilCalendar,
|
||||
cilCloudDownload,
|
||||
cilChartPie,
|
||||
cilCheck,
|
||||
cilChevronBottom,
|
||||
cilChevronLeft,
|
||||
cilChevronRight,
|
||||
cilChevronTop,
|
||||
cilCircle,
|
||||
cilCheckCircle,
|
||||
cilCode,
|
||||
cilCommentSquare,
|
||||
cilCreditCard,
|
||||
cilCursor,
|
||||
cilCursorMove,
|
||||
cilDrop,
|
||||
cilDollar,
|
||||
cilEnvelopeClosed,
|
||||
cilEnvelopeLetter,
|
||||
cilEnvelopeOpen,
|
||||
cilEuro,
|
||||
cilGlobeAlt,
|
||||
cilGrid,
|
||||
cilFile,
|
||||
cilFullscreen,
|
||||
cilFullscreenExit,
|
||||
cilGraph,
|
||||
cilHome,
|
||||
cilInbox,
|
||||
cilIndentDecrease,
|
||||
cilIndentIncrease,
|
||||
cilInputPower,
|
||||
cilItalic,
|
||||
cilJustifyCenter,
|
||||
cilJustifyLeft,
|
||||
cilLaptop,
|
||||
cilLayers,
|
||||
cilLightbulb,
|
||||
cilList,
|
||||
cilListNumbered,
|
||||
cilListRich,
|
||||
cilLocationPin,
|
||||
cilLockLocked,
|
||||
cilMagnifyingGlass,
|
||||
cilMap,
|
||||
cilMediaPlay,
|
||||
cilMenu,
|
||||
cilMoon,
|
||||
cilNotes,
|
||||
cilOptions,
|
||||
cilPaperclip,
|
||||
cilPaperPlane,
|
||||
cilPencil,
|
||||
cilPeople,
|
||||
cilPhone,
|
||||
cilPrint,
|
||||
cilPuzzle,
|
||||
cilSave,
|
||||
cilScrubber,
|
||||
cilSettings,
|
||||
cilShare,
|
||||
cilShareAll,
|
||||
cilShareBoxed,
|
||||
cilShieldAlt,
|
||||
cilSpeech,
|
||||
cilSpeedometer,
|
||||
cilSpreadsheet,
|
||||
cilStar,
|
||||
cilSun,
|
||||
cilTags,
|
||||
cilTask,
|
||||
cilTrash,
|
||||
cilUnderline,
|
||||
cilUser,
|
||||
cilUserFemale,
|
||||
cilUserFollow,
|
||||
cilUserUnfollow,
|
||||
cilX,
|
||||
cilXCircle,
|
||||
cilWarning,
|
||||
} from '@coreui/icons'
|
||||
|
||||
export const icons = Object.assign(
|
||||
{},
|
||||
{
|
||||
cilAlignCenter,
|
||||
cilAlignLeft,
|
||||
cilAlignRight,
|
||||
cilApplicationsSettings,
|
||||
cilArrowBottom,
|
||||
cilArrowRight,
|
||||
cilArrowTop,
|
||||
cilAsterisk,
|
||||
cilBan,
|
||||
cilBasket,
|
||||
cilBell,
|
||||
cilBold,
|
||||
cilBookmark,
|
||||
cilCalculator,
|
||||
cilCalendar,
|
||||
cilCloudDownload,
|
||||
cilChartPie,
|
||||
cilCheck,
|
||||
cilChevronBottom,
|
||||
cilChevronLeft,
|
||||
cilChevronRight,
|
||||
cilChevronTop,
|
||||
cilCircle,
|
||||
cilCheckCircle,
|
||||
cilCode,
|
||||
cilCommentSquare,
|
||||
cilCreditCard,
|
||||
cilCursor,
|
||||
cilCursorMove,
|
||||
cilDrop,
|
||||
cilDollar,
|
||||
cilEnvelopeClosed,
|
||||
cilEnvelopeLetter,
|
||||
cilEnvelopeOpen,
|
||||
cilEuro,
|
||||
cilGlobeAlt,
|
||||
cilGrid,
|
||||
cilFile,
|
||||
cilFullscreen,
|
||||
cilFullscreenExit,
|
||||
cilGraph,
|
||||
cilHome,
|
||||
cilInbox,
|
||||
cilIndentDecrease,
|
||||
cilIndentIncrease,
|
||||
cilInputPower,
|
||||
cilItalic,
|
||||
cilJustifyCenter,
|
||||
cilJustifyLeft,
|
||||
cilLaptop,
|
||||
cilLayers,
|
||||
cilLightbulb,
|
||||
cilList,
|
||||
cilListNumbered,
|
||||
cilListRich,
|
||||
cilLocationPin,
|
||||
cilLockLocked,
|
||||
cilMagnifyingGlass,
|
||||
cilMap,
|
||||
cilMediaPlay,
|
||||
cilMenu,
|
||||
cilMoon,
|
||||
cilNotes,
|
||||
cilOptions,
|
||||
cilPaperclip,
|
||||
cilPaperPlane,
|
||||
cilPencil,
|
||||
cilPeople,
|
||||
cilPhone,
|
||||
cilPrint,
|
||||
cilPuzzle,
|
||||
cilSave,
|
||||
cilScrubber,
|
||||
cilSettings,
|
||||
cilShare,
|
||||
cilShareAll,
|
||||
cilShareBoxed,
|
||||
cilShieldAlt,
|
||||
cilSpeech,
|
||||
cilSpeedometer,
|
||||
cilSpreadsheet,
|
||||
cilStar,
|
||||
cilSun,
|
||||
cilTags,
|
||||
cilTask,
|
||||
cilTrash,
|
||||
cilUnderline,
|
||||
cilUser,
|
||||
cilUserFemale,
|
||||
cilUserFollow,
|
||||
cilUserUnfollow,
|
||||
cilX,
|
||||
cilXCircle,
|
||||
cilWarning,
|
||||
},
|
||||
{
|
||||
cifUs,
|
||||
cifBr,
|
||||
cifIn,
|
||||
cifFr,
|
||||
cifEs,
|
||||
cifPl,
|
||||
},
|
||||
{
|
||||
cibSkype,
|
||||
cibFacebook,
|
||||
cibTwitter,
|
||||
cibLinkedin,
|
||||
cibFlickr,
|
||||
cibTumblr,
|
||||
cibXing,
|
||||
cibGithub,
|
||||
cibStackoverflow,
|
||||
cibYoutube,
|
||||
cibDribbble,
|
||||
cibInstagram,
|
||||
cibPinterest,
|
||||
cibVk,
|
||||
cibYahoo,
|
||||
cibBehance,
|
||||
cibReddit,
|
||||
cibVimeo,
|
||||
cibCcMastercard,
|
||||
cibCcVisa,
|
||||
cibCcStripe,
|
||||
cibCcPaypal,
|
||||
cibCcApplePay,
|
||||
cibCcAmex,
|
||||
cibGoogle,
|
||||
},
|
||||
)
|
||||
@ -12,6 +12,7 @@ import {
|
||||
CNavItem,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilBell, cilEnvelopeOpen, cilList, cilMenu } from '@coreui/icons'
|
||||
|
||||
import { AppBreadcrumb } from './index'
|
||||
import { AppHeaderDropdown } from './header/index'
|
||||
@ -28,7 +29,7 @@ const AppHeader = () => {
|
||||
className="ps-1"
|
||||
onClick={() => dispatch({ type: 'set', sidebarShow: !sidebarShow })}
|
||||
>
|
||||
<CIcon icon="cil-menu" size="lg" />
|
||||
<CIcon icon={cilMenu} size="lg" />
|
||||
</CHeaderToggler>
|
||||
<CHeaderBrand className="mx-auto d-md-none" to="/">
|
||||
<CIcon icon={logo} height={48} alt="Logo" />
|
||||
@ -49,17 +50,17 @@ const AppHeader = () => {
|
||||
<CHeaderNav>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">
|
||||
<CIcon icon="cil-bell" size="lg" />
|
||||
<CIcon icon={cilBell} size="lg" />
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">
|
||||
<CIcon icon="cil-list" size="lg" />
|
||||
<CIcon icon={cilList} size="lg" />
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">
|
||||
<CIcon icon="cil-envelope-open" size="lg" />
|
||||
<CIcon icon={cilEnvelopeOpen} size="lg" />
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CHeaderNav>
|
||||
|
||||
@ -3,7 +3,6 @@ import { NavLink, useLocation } from 'react-router-dom'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import { CBadge, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle } from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
export const AppSidebarNav = ({ items }) => {
|
||||
const components = { CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle }
|
||||
@ -12,7 +11,7 @@ export const AppSidebarNav = ({ items }) => {
|
||||
const navLink = (name, icon, badge) => {
|
||||
return (
|
||||
<>
|
||||
{icon && typeof icon === 'string' ? <CIcon icon={icon} customClassName="nav-icon" /> : icon}
|
||||
{icon && icon}
|
||||
{name && name}
|
||||
{badge && (
|
||||
<CBadge color={badge.color} className="ms-auto">
|
||||
|
||||
@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
|
||||
import React from 'react'
|
||||
import { CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilCode, cilMediaPlay } from '@coreui/icons'
|
||||
|
||||
import packageJson from '../../package.json'
|
||||
|
||||
@ -15,13 +16,13 @@ const DocsExample = (props) => {
|
||||
<CNav variant="tabs">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
<CIcon icon="cil-media-play" className="me-2" />
|
||||
<CIcon icon={cilMediaPlay} className="me-2" />
|
||||
Preview
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href={_href} target="_blank">
|
||||
<CIcon icon="cil-code" className="me-2" />
|
||||
<CIcon icon={cilCode} className="me-2" />
|
||||
Code
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
|
||||
@ -9,6 +9,16 @@ import {
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
} from '@coreui/react'
|
||||
import {
|
||||
cilBell,
|
||||
cilCreditCard,
|
||||
cilCommentSquare,
|
||||
cilFile,
|
||||
cilLockLocked,
|
||||
cilSettings,
|
||||
cilTask,
|
||||
cilUser,
|
||||
} from '@coreui/icons'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const AppHeaderDropdown = () => {
|
||||
@ -20,28 +30,28 @@ const AppHeaderDropdown = () => {
|
||||
<CDropdownMenu className="pt-0" placement="bottom-end">
|
||||
<CDropdownHeader className="bg-light fw-semibold py-2">Account</CDropdownHeader>
|
||||
<CDropdownItem href="#">
|
||||
<CIcon icon="cil-bell" className="me-2" />
|
||||
<CIcon name={cilBell} className="me-2" />
|
||||
Updates
|
||||
<CBadge color="info" className="ms-2">
|
||||
42
|
||||
</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem href="#">
|
||||
<CIcon icon="cil-envelope-open" className="me-2" />
|
||||
<CIcon name="cil-envelope-open" className="me-2" />
|
||||
Messages
|
||||
<CBadge color="success" className="ms-2">
|
||||
42
|
||||
</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem href="#">
|
||||
<CIcon icon="cil-task" className="me-2" />
|
||||
<CIcon name={cilTask} className="me-2" />
|
||||
Tasks
|
||||
<CBadge color="danger" className="ms-2">
|
||||
42
|
||||
</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem href="#">
|
||||
<CIcon icon="cil-comment-square" className="me-2" />
|
||||
<CIcon name={cilCommentSquare} className="me-2" />
|
||||
Comments
|
||||
<CBadge color="warning" className="ms-2">
|
||||
42
|
||||
@ -49,22 +59,22 @@ const AppHeaderDropdown = () => {
|
||||
</CDropdownItem>
|
||||
<CDropdownHeader className="bg-light fw-semibold py-2">Settings</CDropdownHeader>
|
||||
<CDropdownItem href="#">
|
||||
<CIcon icon="cil-user" className="me-2" />
|
||||
<CIcon name={cilUser} className="me-2" />
|
||||
Profile
|
||||
</CDropdownItem>
|
||||
<CDropdownItem href="#">
|
||||
<CIcon icon="cil-settings" className="me-2" />
|
||||
<CIcon name={cilSettings} className="me-2" />
|
||||
Settings
|
||||
</CDropdownItem>
|
||||
<CDropdownItem href="#">
|
||||
<CIcon icon="cil-credit-card" className="me-2" />
|
||||
<CIcon name={cilCreditCard} className="me-2" />
|
||||
Payments
|
||||
<CBadge color="secondary" className="ms-2">
|
||||
42
|
||||
</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem href="#">
|
||||
<CIcon icon="cil-file" className="me-2" />
|
||||
<CIcon name={cilFile} className="me-2" />
|
||||
Projects
|
||||
<CBadge color="primary" className="ms-2">
|
||||
42
|
||||
@ -72,7 +82,7 @@ const AppHeaderDropdown = () => {
|
||||
</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">
|
||||
<CIcon icon="cil-lock-locked" className="me-2" />
|
||||
<CIcon name={cilLockLocked} className="me-2" />
|
||||
Lock Account
|
||||
</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
|
||||
@ -4,14 +4,9 @@ import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import App from './App'
|
||||
import * as serviceWorker from './serviceWorker'
|
||||
|
||||
import { icons } from './assets/icons'
|
||||
|
||||
import { Provider } from 'react-redux'
|
||||
import store from './store'
|
||||
|
||||
React.icons = icons
|
||||
|
||||
ReactDOM.render(
|
||||
<Provider store={store}>
|
||||
<App />
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React from 'react'
|
||||
import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilBell } from '@coreui/icons'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const Buttons = () => {
|
||||
@ -87,12 +88,12 @@ const Buttons = () => {
|
||||
active={state === 'active'}
|
||||
disabled={state === 'disabled'}
|
||||
>
|
||||
<CIcon icon="cil-bell" className="me-2" />
|
||||
<CIcon icon={cilBell} className="me-2" />
|
||||
{color.charAt(0).toUpperCase() + color.slice(1)}
|
||||
</CButton>
|
||||
))}
|
||||
<CButton color="link">
|
||||
<CIcon icon="cil-bell" className="me-2" />
|
||||
<CIcon icon={cilBell} className="me-2" />
|
||||
Link
|
||||
</CButton>
|
||||
</CCol>
|
||||
|
||||
@ -11,6 +11,20 @@ import {
|
||||
} from '@coreui/react'
|
||||
import { getStyle } from '@coreui/utils'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import {
|
||||
cilArrowRight,
|
||||
cilBasket,
|
||||
cilBell,
|
||||
cilChartPie,
|
||||
cilMoon,
|
||||
cilLaptop,
|
||||
cilPeople,
|
||||
cilSettings,
|
||||
cilSpeech,
|
||||
cilSpeedometer,
|
||||
cilUser,
|
||||
cilUserFollow,
|
||||
} from '@coreui/icons'
|
||||
import { CChartBar, CChartLine } from '@coreui/react-chartjs'
|
||||
|
||||
import WidgetsBrand from './WidgetsBrand'
|
||||
@ -447,7 +461,7 @@ const Widgets = () => {
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} icon="cil-settings" size="xl" />}
|
||||
icon={<CIcon width={24} icon={cilSettings} size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -457,7 +471,7 @@ const Widgets = () => {
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} icon="cil-user" size="xl" />}
|
||||
icon={<CIcon width={24} icon={cilUser} size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -467,7 +481,7 @@ const Widgets = () => {
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} icon="cil-moon" size="xl" />}
|
||||
icon={<CIcon width={24} icon={cilMoon} size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -477,7 +491,7 @@ const Widgets = () => {
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} icon="cil-bell" size="xl" />}
|
||||
icon={<CIcon width={24} icon={cilBell} size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -487,7 +501,7 @@ const Widgets = () => {
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} icon="cil-settings" size="xl" />}
|
||||
icon={<CIcon width={24} icon={cilSettings} size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -500,7 +514,7 @@ const Widgets = () => {
|
||||
target="_blank"
|
||||
>
|
||||
View more
|
||||
<CIcon icon="cil-arrow-right" className="float-end" width={16} />
|
||||
<CIcon icon={cilArrowRight} className="float-end" width={16} />
|
||||
</CLink>
|
||||
}
|
||||
/>
|
||||
@ -508,7 +522,7 @@ const Widgets = () => {
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} icon="cil-laptop" size="xl" />}
|
||||
icon={<CIcon width={24} icon={cilLaptop} size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -521,7 +535,7 @@ const Widgets = () => {
|
||||
target="_blank"
|
||||
>
|
||||
View more
|
||||
<CIcon icon="cil-arrow-right" className="float-end" width={16} />
|
||||
<CIcon icon={cilArrowRight} className="float-end" width={16} />
|
||||
</CLink>
|
||||
}
|
||||
/>
|
||||
@ -529,7 +543,7 @@ const Widgets = () => {
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} icon="cil-moon" size="xl" />}
|
||||
icon={<CIcon width={24} icon={cilMoon} size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -542,7 +556,7 @@ const Widgets = () => {
|
||||
target="_blank"
|
||||
>
|
||||
View more
|
||||
<CIcon icon="cil-arrow-right" className="float-end" width={16} />
|
||||
<CIcon icon={cilArrowRight} className="float-end" width={16} />
|
||||
</CLink>
|
||||
}
|
||||
/>
|
||||
@ -550,7 +564,7 @@ const Widgets = () => {
|
||||
<CCol xs={12} sm={6} lg={3}>
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
icon={<CIcon width={24} icon="cil-bell" size="xl" />}
|
||||
icon={<CIcon width={24} icon={cilBell} size="xl" />}
|
||||
iconPadding={3}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -563,7 +577,7 @@ const Widgets = () => {
|
||||
target="_blank"
|
||||
>
|
||||
View more
|
||||
<CIcon icon="cil-arrow-right" className="float-end" width={16} />
|
||||
<CIcon icon={cilArrowRight} className="float-end" width={16} />
|
||||
</CLink>
|
||||
}
|
||||
/>
|
||||
@ -572,7 +586,7 @@ const Widgets = () => {
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
padding={0}
|
||||
icon={<CIcon width={24} icon="cil-settings" size="xl" />}
|
||||
icon={<CIcon width={24} icon={cilSettings} size="xl" />}
|
||||
iconPadding={4}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -583,7 +597,7 @@ const Widgets = () => {
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
padding={0}
|
||||
icon={<CIcon width={24} icon="cil-user" size="xl" />}
|
||||
icon={<CIcon width={24} icon={cilUser} size="xl" />}
|
||||
iconPadding={4}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -594,7 +608,7 @@ const Widgets = () => {
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
padding={0}
|
||||
icon={<CIcon width={24} icon="cil-moon" size="xl" />}
|
||||
icon={<CIcon width={24} icon={cilMoon} size="xl" />}
|
||||
iconPadding={4}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -605,7 +619,7 @@ const Widgets = () => {
|
||||
<CWidgetIcon
|
||||
className="mb-3"
|
||||
padding={0}
|
||||
icon={<CIcon width={24} icon="cil-bell" size="xl" />}
|
||||
icon={<CIcon width={24} icon={cilBell} size="xl" />}
|
||||
iconPadding={4}
|
||||
title="income"
|
||||
value="$1.999,50"
|
||||
@ -617,34 +631,34 @@ const Widgets = () => {
|
||||
<WidgetsBrand withCharts />
|
||||
<CCardGroup className="mb-4">
|
||||
<CWidgetProgressIcon
|
||||
icon={<CIcon icon="cil-people" height={36} />}
|
||||
icon={<CIcon icon={cilPeople} height={36} />}
|
||||
value="87.500"
|
||||
title="Visitors"
|
||||
progressColor="info"
|
||||
progressValue={75}
|
||||
/>
|
||||
<CWidgetProgressIcon
|
||||
icon={<CIcon icon="cil-userFollow" height={36} />}
|
||||
icon={<CIcon icon={cilUserFollow} height={36} />}
|
||||
value="385"
|
||||
title="New Clients"
|
||||
progressColor="success"
|
||||
progressValue={75}
|
||||
/>
|
||||
<CWidgetProgressIcon
|
||||
icon={<CIcon icon="cil-basket" height={36} />}
|
||||
icon={<CIcon icon={cilBasket} height={36} />}
|
||||
value="1238"
|
||||
title="Products sold"
|
||||
progressColor="warning"
|
||||
progressValue={75}
|
||||
/>
|
||||
<CWidgetProgressIcon
|
||||
icon={<CIcon icon="cil-chartPie" height={36} />}
|
||||
icon={<CIcon icon={cilChartPie} height={36} />}
|
||||
value="28%"
|
||||
title="Returning Visitors"
|
||||
progressValue={75}
|
||||
/>
|
||||
<CWidgetProgressIcon
|
||||
icon={<CIcon icon="cil-speedometer" height={36} />}
|
||||
icon={<CIcon icon={cilSpeedometer} height={36} />}
|
||||
value="5:34:11"
|
||||
title="Avg. Time"
|
||||
progressColor="danger"
|
||||
@ -654,7 +668,7 @@ const Widgets = () => {
|
||||
<CRow>
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
icon={<CIcon icon="cil-people" height={36} />}
|
||||
icon={<CIcon icon={cilPeople} height={36} />}
|
||||
value="87.500"
|
||||
title="Visitors"
|
||||
progressColor="info"
|
||||
@ -664,7 +678,7 @@ const Widgets = () => {
|
||||
</CCol>
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
icon={<CIcon icon="cil-userFollow" height={36} />}
|
||||
icon={<CIcon icon={cilUserFollow} height={36} />}
|
||||
value="385"
|
||||
title="New Clients"
|
||||
progressColor="success"
|
||||
@ -674,7 +688,7 @@ const Widgets = () => {
|
||||
</CCol>
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
icon={<CIcon icon="cil-basket" height={36} />}
|
||||
icon={<CIcon icon={cilBasket} height={36} />}
|
||||
value="1238"
|
||||
title="Products sold"
|
||||
progressColor="warning"
|
||||
@ -684,7 +698,7 @@ const Widgets = () => {
|
||||
</CCol>
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
icon={<CIcon icon="cil-chartPie" height={36} />}
|
||||
icon={<CIcon icon={cilChartPie} height={36} />}
|
||||
value="28%"
|
||||
title="Returning Visitors"
|
||||
progressColor="primary"
|
||||
@ -694,7 +708,7 @@ const Widgets = () => {
|
||||
</CCol>
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
icon={<CIcon icon="cil-speedometer" height={36} />}
|
||||
icon={<CIcon icon={cilSpeedometer} height={36} />}
|
||||
value="5:34:11"
|
||||
title="Avg. Time"
|
||||
progressColor="danger"
|
||||
@ -704,7 +718,7 @@ const Widgets = () => {
|
||||
</CCol>
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
icon={<CIcon icon="cil-speech" height={36} />}
|
||||
icon={<CIcon icon={cilSpeech} height={36} />}
|
||||
value="972"
|
||||
title="comments"
|
||||
progressColor="info"
|
||||
@ -717,7 +731,7 @@ const Widgets = () => {
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
color="info"
|
||||
icon={<CIcon icon="cil-people" height={36} />}
|
||||
icon={<CIcon icon={cilPeople} height={36} />}
|
||||
value="87.500"
|
||||
title="Visitors"
|
||||
progressValue={75}
|
||||
@ -728,7 +742,7 @@ const Widgets = () => {
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
color="success"
|
||||
icon={<CIcon icon="cil-userFollow" height={36} />}
|
||||
icon={<CIcon icon={cilUserFollow} height={36} />}
|
||||
value="385"
|
||||
title="New Clients"
|
||||
progressValue={75}
|
||||
@ -739,7 +753,7 @@ const Widgets = () => {
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
color="warning"
|
||||
icon={<CIcon icon="cil-basket" height={36} />}
|
||||
icon={<CIcon icon={cilBasket} height={36} />}
|
||||
value="1238"
|
||||
title="Products sold"
|
||||
progressValue={75}
|
||||
@ -750,7 +764,7 @@ const Widgets = () => {
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
color="primary"
|
||||
icon={<CIcon icon="cil-chartPie" height={36} />}
|
||||
icon={<CIcon icon={cilChartPie} height={36} />}
|
||||
value="28%"
|
||||
title="Returning Visitors"
|
||||
progressValue={75}
|
||||
@ -761,7 +775,7 @@ const Widgets = () => {
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
color="danger"
|
||||
icon={<CIcon icon="cil-speedometer" height={36} />}
|
||||
icon={<CIcon icon={cilSpeedometer} height={36} />}
|
||||
value="5:34:11"
|
||||
title="Avg. Time"
|
||||
progressValue={75}
|
||||
@ -772,7 +786,7 @@ const Widgets = () => {
|
||||
<CCol sm={6} md={2}>
|
||||
<CWidgetProgressIcon
|
||||
color="info"
|
||||
icon={<CIcon icon="cil-speech" height={36} />}
|
||||
icon={<CIcon icon={cilSpeech} height={36} />}
|
||||
value="972"
|
||||
title="comments"
|
||||
progressValue={75}
|
||||
|
||||
@ -2,6 +2,7 @@ import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { CWidgetBrand, CRow, CCol } from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cibFacebook, cibLinkedin, cibTwitter, cilCalendar } from '@coreui/icons'
|
||||
import { CChart } from '@coreui/react-chartjs'
|
||||
|
||||
const WidgetsBrand = ({ withCharts }) => {
|
||||
@ -40,7 +41,7 @@ const WidgetsBrand = ({ withCharts }) => {
|
||||
className="mb-4"
|
||||
headerChildren={
|
||||
<>
|
||||
<CIcon icon="cib-facebook" height={52} className="my-4 text-white" />
|
||||
<CIcon icon={cibFacebook} height={52} className="my-4 text-white" />
|
||||
{withCharts && (
|
||||
<CChart
|
||||
className="position-absolute w-100 h-100"
|
||||
@ -78,7 +79,7 @@ const WidgetsBrand = ({ withCharts }) => {
|
||||
className="mb-4"
|
||||
headerChildren={
|
||||
<>
|
||||
<CIcon icon="cib-twitter" height={52} className="my-4 text-white" />
|
||||
<CIcon icon={cibTwitter} height={52} className="my-4 text-white" />
|
||||
{withCharts && (
|
||||
<CChart
|
||||
className="position-absolute w-100 h-100"
|
||||
@ -116,7 +117,7 @@ const WidgetsBrand = ({ withCharts }) => {
|
||||
className="mb-4"
|
||||
headerChildren={
|
||||
<>
|
||||
<CIcon icon="cib-linkedin" height={52} className="my-4 text-white" />
|
||||
<CIcon icon={cibLinkedin} height={52} className="my-4 text-white" />
|
||||
{withCharts && (
|
||||
<CChart
|
||||
className="position-absolute w-100 h-100"
|
||||
@ -155,7 +156,7 @@ const WidgetsBrand = ({ withCharts }) => {
|
||||
color="warning"
|
||||
headerChildren={
|
||||
<>
|
||||
<CIcon icon="cil-calendar" height={52} className="my-4 text-white" />
|
||||
<CIcon icon={cilCalendar} height={52} className="my-4 text-white" />
|
||||
{withCharts && (
|
||||
<CChart
|
||||
className="position-absolute w-100 h-100"
|
||||
|
||||
@ -11,6 +11,7 @@ import {
|
||||
import { getStyle } from '@coreui/utils'
|
||||
import { CChartBar, CChartLine } from '@coreui/react-chartjs'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilArrowBottom, cilArrowTop, cilOptions } from '@coreui/icons'
|
||||
|
||||
const WidgetsDropdown = () => {
|
||||
return (
|
||||
@ -22,14 +23,14 @@ const WidgetsDropdown = () => {
|
||||
value="26K"
|
||||
change={
|
||||
<>
|
||||
(-12.4% <CIcon icon="cil-arrow-bottom" />)
|
||||
(-12.4% <CIcon icon={cilArrowBottom} />)
|
||||
</>
|
||||
}
|
||||
title="Users"
|
||||
action={
|
||||
<CDropdown alignment="end">
|
||||
<CDropdownToggle color="transparent" caret={false} className="p-0">
|
||||
<CIcon icon="cil-options" className="text-high-emphasis-inverse" />
|
||||
<CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
@ -107,14 +108,14 @@ const WidgetsDropdown = () => {
|
||||
value="$6.200"
|
||||
change={
|
||||
<>
|
||||
(40.9% <CIcon icon="cil-arrow-top" />)
|
||||
(40.9% <CIcon icon={cilArrowTop} />)
|
||||
</>
|
||||
}
|
||||
title="Income"
|
||||
action={
|
||||
<CDropdown alignment="end">
|
||||
<CDropdownToggle color="transparent" caret={false} className="p-0">
|
||||
<CIcon icon="cil-options" className="text-high-emphasis-inverse" />
|
||||
<CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
@ -191,14 +192,14 @@ const WidgetsDropdown = () => {
|
||||
value="2.49%"
|
||||
change={
|
||||
<>
|
||||
(84.7% <CIcon icon="cil-arrow-top" />)
|
||||
(84.7% <CIcon icon={cilArrowTop} />)
|
||||
</>
|
||||
}
|
||||
title="Conversion Rate"
|
||||
action={
|
||||
<CDropdown alignment="end">
|
||||
<CDropdownToggle color="transparent" caret={false} className="p-0">
|
||||
<CIcon icon="cil-options" className="text-high-emphasis-inverse" />
|
||||
<CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
@ -262,14 +263,14 @@ const WidgetsDropdown = () => {
|
||||
value="44K"
|
||||
change={
|
||||
<>
|
||||
(-23.6% <CIcon icon="cil-arrow-bottom" />)
|
||||
(-23.6% <CIcon icon={cilArrowBottom} />)
|
||||
</>
|
||||
}
|
||||
title="Sessions"
|
||||
action={
|
||||
<CDropdown alignment="end">
|
||||
<CDropdownToggle color="transparent" caret={false} className="p-0">
|
||||
<CIcon icon="cil-options" className="text-high-emphasis-inverse" />
|
||||
<CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
|
||||
@ -21,6 +21,28 @@ import {
|
||||
import { CChartLine } from '@coreui/react-chartjs'
|
||||
import { getStyle, hexToRgba } from '@coreui/utils'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import {
|
||||
cibCcAmex,
|
||||
cibCcApplePay,
|
||||
cibCcMastercard,
|
||||
cibCcPaypal,
|
||||
cibCcStripe,
|
||||
cibCcVisa,
|
||||
cibGoogle,
|
||||
cibFacebook,
|
||||
cibLinkedin,
|
||||
cifBr,
|
||||
cifEs,
|
||||
cifFr,
|
||||
cifIn,
|
||||
cifPl,
|
||||
cifUs,
|
||||
cibTwitter,
|
||||
cilCloudDownload,
|
||||
cilPeople,
|
||||
cilUser,
|
||||
cilUserFemale,
|
||||
} from '@coreui/icons'
|
||||
|
||||
const WidgetsDropdown = lazy(() => import('../components/widgets/WidgetsDropdown.js'))
|
||||
const WidgetsBrand = lazy(() => import('../components/widgets/WidgetsBrand.js'))
|
||||
@ -44,7 +66,7 @@ const Dashboard = () => {
|
||||
</CCol>
|
||||
<CCol sm={7} className="d-none d-md-block">
|
||||
<CButton color="primary" className="float-end">
|
||||
<CIcon icon="cil-cloud-download" />
|
||||
<CIcon icon={cilCloudDownload} />
|
||||
</CButton>
|
||||
<CButtonGroup className="float-end me-3">
|
||||
{['Day', 'Month', 'Year'].map((value) => (
|
||||
@ -287,7 +309,7 @@ const Dashboard = () => {
|
||||
|
||||
<div className="progress-group mb-4">
|
||||
<div className="progress-group-header">
|
||||
<CIcon className="icon icon-lg me-2" icon="cil-user" />
|
||||
<CIcon className="icon icon-lg me-2" icon={cilUser} />
|
||||
<span>Male</span>
|
||||
<span className="ms-auto font-semibold">43%</span>
|
||||
</div>
|
||||
@ -297,7 +319,7 @@ const Dashboard = () => {
|
||||
</div>
|
||||
<div className="progress-group mb-5">
|
||||
<div className="progress-group-header">
|
||||
<CIcon className="icon icon-lg me-2" icon="cil-user-female" />
|
||||
<CIcon className="icon icon-lg me-2" icon={cilUserFemale} />
|
||||
<span>Female</span>
|
||||
<span className="ms-auto font-semibold">37%</span>
|
||||
</div>
|
||||
@ -308,7 +330,7 @@ const Dashboard = () => {
|
||||
|
||||
<div className="progress-group">
|
||||
<div className="progress-group-header">
|
||||
<CIcon className="icon icon-lg me-2" icon="cib-google" />
|
||||
<CIcon className="icon icon-lg me-2" icon={cibGoogle} />
|
||||
<span>Organic Search</span>
|
||||
<span className="ms-auto font-semibold">
|
||||
191,235 <span className="text-medium-emphasis small">(56%)</span>
|
||||
@ -320,7 +342,7 @@ const Dashboard = () => {
|
||||
</div>
|
||||
<div className="progress-group">
|
||||
<div className="progress-group-header">
|
||||
<CIcon icon="cib-facebook" className="icon icon-lg me-2" />
|
||||
<CIcon className="icon icon-lg me-2" icon={cibFacebook} />
|
||||
<span>Facebook</span>
|
||||
<span className="ms-auto font-semibold">
|
||||
51,223 <span className="text-medium-emphasis small">(15%)</span>
|
||||
@ -332,7 +354,7 @@ const Dashboard = () => {
|
||||
</div>
|
||||
<div className="progress-group">
|
||||
<div className="progress-group-header">
|
||||
<CIcon icon="cib-twitter" className="icon icon-lg me-2" />
|
||||
<CIcon className="icon icon-lg me-2" icon={cibTwitter} />
|
||||
<span>Twitter</span>
|
||||
<span className="ms-auto font-semibold">
|
||||
37,564 <span className="text-medium-emphasis small">(11%)</span>
|
||||
@ -344,7 +366,7 @@ const Dashboard = () => {
|
||||
</div>
|
||||
<div className="progress-group">
|
||||
<div className="progress-group-header">
|
||||
<CIcon icon="cib-linkedin" className="icon icon-lg me-2" />
|
||||
<CIcon className="icon icon-lg me-2" icon={cibLinkedin} />
|
||||
<span>LinkedIn</span>
|
||||
<span className="ms-auto font-semibold">
|
||||
27,319 <span className="text-medium-emphasis small">(8%)</span>
|
||||
@ -363,7 +385,7 @@ const Dashboard = () => {
|
||||
<CTableHead color="light">
|
||||
<CTableRow>
|
||||
<CTableHeaderCell className="text-center">
|
||||
<CIcon icon="cil-people" />
|
||||
<CIcon icon={cilPeople} />
|
||||
</CTableHeaderCell>
|
||||
<CTableHeaderCell>User</CTableHeaderCell>
|
||||
<CTableHeaderCell className="text-center">Country</CTableHeaderCell>
|
||||
@ -384,7 +406,7 @@ const Dashboard = () => {
|
||||
</div>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon="cif-us" title="us" id="us" />
|
||||
<CIcon size="xl" icon={cifUs} title="us" id="us" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="clearfix">
|
||||
@ -400,7 +422,7 @@ const Dashboard = () => {
|
||||
<CProgress thin color="success" value={50} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon="cib-cc-mastercard" />
|
||||
<CIcon size="xl" icon={cibCcMastercard} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
@ -418,7 +440,7 @@ const Dashboard = () => {
|
||||
</div>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon="cif-br" title="br" id="br" />
|
||||
<CIcon size="xl" icon={cifBr} title="br" id="br" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="clearfix">
|
||||
@ -434,7 +456,7 @@ const Dashboard = () => {
|
||||
<CProgress thin color="info" value={10} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon="cib-cc-visa" />
|
||||
<CIcon size="xl" icon={cibCcVisa} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
@ -452,7 +474,7 @@ const Dashboard = () => {
|
||||
</div>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon="cif-in" title="in" id="in" />
|
||||
<CIcon size="xl" icon={cifIn} title="in" id="in" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="clearfix">
|
||||
@ -468,7 +490,7 @@ const Dashboard = () => {
|
||||
<CProgress thin color="warning" value={74} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon="cib-cc-stripe" />
|
||||
<CIcon size="xl" icon={cibCcStripe} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
@ -486,7 +508,7 @@ const Dashboard = () => {
|
||||
</div>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon="cif-fr" title="fr" id="fr" />
|
||||
<CIcon size="xl" icon={cifFr} title="fr" id="fr" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="clearfix">
|
||||
@ -502,7 +524,7 @@ const Dashboard = () => {
|
||||
<CProgress thin color="danger" value={98} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon="cib-cc-paypal" />
|
||||
<CIcon size="xl" icon={cibCcPaypal} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
@ -520,7 +542,7 @@ const Dashboard = () => {
|
||||
</div>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon="cif-es" title="es" id="es" />
|
||||
<CIcon size="xl" icon={cifEs} title="es" id="es" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="clearfix">
|
||||
@ -536,7 +558,7 @@ const Dashboard = () => {
|
||||
<CProgress thin color="info" value={22} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon="cib-cc-apple-pay" />
|
||||
<CIcon size="xl" icon={cibCcApplePay} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
@ -554,7 +576,7 @@ const Dashboard = () => {
|
||||
</div>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon="cif-pl" title="pl" id="pl" />
|
||||
<CIcon size="xl" icon={cifPl} title="pl" id="pl" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="clearfix">
|
||||
@ -570,7 +592,7 @@ const Dashboard = () => {
|
||||
<CProgress thin color="success" value={43} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon="cib-cc-amex" />
|
||||
<CIcon size="xl" icon={cibCcAmex} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
|
||||
@ -14,6 +14,7 @@ import {
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilLockLocked, cilUser } from '@coreui/icons'
|
||||
|
||||
const Login = () => {
|
||||
return (
|
||||
@ -29,13 +30,13 @@ const Login = () => {
|
||||
<p className="text-medium-emphasis">Sign In to your account</p>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon="cil-user" />
|
||||
<CIcon icon={cilUser} />
|
||||
</CInputGroupText>
|
||||
<CFormInput placeholder="Username" autoComplete="username" />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-4">
|
||||
<CInputGroupText>
|
||||
<CIcon icon="cil-lock-locked" />
|
||||
<CIcon icon={cilLockLocked} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="password"
|
||||
|
||||
@ -9,6 +9,7 @@ import {
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilMagnifyingGlass } from '@coreui/icons'
|
||||
|
||||
const Page404 = () => {
|
||||
return (
|
||||
@ -25,7 +26,7 @@ const Page404 = () => {
|
||||
</div>
|
||||
<CInputGroup className="input-prepend">
|
||||
<CInputGroupText>
|
||||
<CIcon icon="cil-magnifying-glass" />
|
||||
<CIcon icon={cilMagnifyingGlass} />
|
||||
</CInputGroupText>
|
||||
<CFormInput size="16" type="text" placeholder="What are you looking for?" />
|
||||
<CButton color="info">Search</CButton>
|
||||
|
||||
@ -9,6 +9,7 @@ import {
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilMagnifyingGlass } from '@coreui/icons'
|
||||
|
||||
const Page500 = () => {
|
||||
return (
|
||||
@ -25,7 +26,7 @@ const Page500 = () => {
|
||||
</span>
|
||||
<CInputGroup className="input-prepend">
|
||||
<CInputGroupText>
|
||||
<CIcon icon="cil-magnifying-glass" />
|
||||
<CIcon icon={cilMagnifyingGlass} />
|
||||
</CInputGroupText>
|
||||
<CFormInput size="16" type="text" placeholder="What are you looking for?" />
|
||||
<CButton color="info">Search</CButton>
|
||||
|
||||
@ -12,6 +12,7 @@ import {
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilLockLocked, cilUser } from '@coreui/icons'
|
||||
|
||||
const Register = () => {
|
||||
return (
|
||||
@ -26,7 +27,7 @@ const Register = () => {
|
||||
<p className="text-medium-emphasis">Create your account</p>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon="cil-user" />
|
||||
<CIcon icon={cilUser} />
|
||||
</CInputGroupText>
|
||||
<CFormInput placeholder="Username" autoComplete="username" />
|
||||
</CInputGroup>
|
||||
@ -36,7 +37,7 @@ const Register = () => {
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon="cil-lock-locked" />
|
||||
<CIcon icon={cilLockLocked} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="password"
|
||||
@ -46,7 +47,7 @@ const Register = () => {
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-4">
|
||||
<CInputGroupText>
|
||||
<CIcon icon="cil-lock-locked" />
|
||||
<CIcon icon={cilLockLocked} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="password"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user