Skip to content

Commit d7c4c3b

Browse files
mrholekmrholek
committed
refactor: update example views
1 parent 730bd30 commit d7c4c3b

File tree

23 files changed

+595
-297
lines changed

23 files changed

+595
-297
lines changed

‎src/assets/icons/index.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,11 @@ import {
2323
cibVimeo,
2424
cibCcMastercard,
2525
cibCcVisa,
26-
cibStripe,
27-
cibPaypal,
28-
cibGooglePay,
26+
cibCcStripe,
27+
cibCcPaypal,
28+
cibCcApplePay,
2929
cibCcAmex,
30+
cibGoogle,
3031
} from '@coreui/icons'
3132
import { cifUs, cifBr, cifIn, cifFr, cifEs, cifPl } from '@coreui/icons'
3233
import {
@@ -254,9 +255,10 @@ export const icons = Object.assign(
254255
cibVimeo,
255256
cibCcMastercard,
256257
cibCcVisa,
257-
cibStripe,
258-
cibPaypal,
259-
cibGooglePay,
258+
cibCcStripe,
259+
cibCcPaypal,
260+
cibCcApplePay,
260261
cibCcAmex,
262+
cibGoogle,
261263
},
262264
)

‎src/containers/_nav.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,12 @@ const _nav = [
103103
anchor: 'Progress',
104104
to: '/base/progress',
105105
},
106+
{
107+
_component: 'CNavItem',
108+
as: NavLink,
109+
anchor: 'Spinners',
110+
to: '/base/spinners',
111+
},
106112
{
107113
_component: 'CNavItem',
108114
as: NavLink,
@@ -178,6 +184,12 @@ const _nav = [
178184
anchor: 'Input Group',
179185
to: '/forms/input-group',
180186
},
187+
{
188+
_component: 'CNavItem',
189+
as: NavLink,
190+
anchor: 'Floating Labels',
191+
to: '/forms/floating-labels',
192+
},
181193
{
182194
_component: 'CNavItem',
183195
as: NavLink,

‎src/routes.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const Navs = React.lazy(() => import('./views/examples/base/navs/Navs'))
1515
const Paginations = React.lazy(() => import('./views/examples/base/paginations/Paginations'))
1616
const Popovers = React.lazy(() => import('./views/examples/base/popovers/Popovers'))
1717
const Progress = React.lazy(() => import('./views/examples/base/progress/Progress'))
18+
const Spinners = React.lazy(() => import('./views/examples/base/spinners/Spinners'))
1819
const Tables = React.lazy(() => import('./views/examples/base/tables/Tables'))
1920
const Tooltips = React.lazy(() => import('./views/examples/base/tooltips/Tooltips'))
2021

@@ -23,6 +24,9 @@ const ButtonGroups = React.lazy(() => import('./views/examples/buttons/button-gr
2324
const Dropdowns = React.lazy(() => import('./views/examples/buttons/dropdowns/Dropdowns'))
2425

2526
const ChecksRadios = React.lazy(() => import('./views/examples/forms/checks-radios/ChecksRadios'))
27+
const FloatingLabels = React.lazy(() =>
28+
import('./views/examples/forms/floating-labels/FloatingLabels'),
29+
)
2630
const FormControl = React.lazy(() => import('./views/examples/forms/form-control/FormControl'))
2731
const InputGroup = React.lazy(() => import('./views/examples/forms/input-group/InputGroup'))
2832
const Layout = React.lazy(() => import('./views/examples/forms/layout/Layout'))
@@ -39,10 +43,10 @@ const Badges = React.lazy(() => import('./views/examples/notifications/badges/Ba
3943
const Modals = React.lazy(() => import('./views/examples/notifications/modals/Modals'))
4044
const Toasts = React.lazy(() => import('./views/examples/notifications/toasts/Toasts'))
4145

42-
const Login = React.lazy(() => import('./views/examples/pages/login/Login'))
43-
const Register = React.lazy(() => import('./views/examples/pages/register/Register'))
44-
const Page404 = React.lazy(() => import('./views/examples/pages/page404/Page404'))
45-
const Page500 = React.lazy(() => import('./views/examples/pages/page500/Page500'))
46+
// const Login = React.lazy(() => import('./views/examples/pages/login/Login'))
47+
// const Register = React.lazy(() => import('./views/examples/pages/register/Register'))
48+
// const Page404 = React.lazy(() => import('./views/examples/pages/page404/Page404'))
49+
// const Page500 = React.lazy(() => import('./views/examples/pages/page500/Page500'))
4650

4751
const Widgets = React.lazy(() => import('./views/examples/widgets/Widgets'))
4852

@@ -66,6 +70,7 @@ const routes = [
6670
{ path: '/base/paginations', name: 'Paginations', component: Paginations },
6771
{ path: '/base/popovers', name: 'Popovers', component: Popovers },
6872
{ path: '/base/progress', name: 'Progress', component: Progress },
73+
{ path: '/base/spinners', name: 'Spinners', component: Spinners },
6974
{ path: '/base/tables', name: 'Tables', component: Tables },
7075
{ path: '/base/tooltips', name: 'Tooltips', component: Tooltips },
7176
{ path: '/buttons', name: 'Buttons', component: Buttons, exact: true },
@@ -79,6 +84,7 @@ const routes = [
7984
{ path: '/forms/checks-radios', name: 'Checks & Radios', component: ChecksRadios },
8085
{ path: '/forms/range', name: 'Range', component: Range },
8186
{ path: '/forms/input-group', name: 'Input Group', component: InputGroup },
87+
{ path: '/forms/floating-labels', name: 'Floating Labels', component: FloatingLabels },
8288
{ path: '/forms/layout', name: 'Layout', component: Layout },
8389
{ path: '/forms/validation', name: 'Validation', component: Validation },
8490
{ path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons },

‎src/scss/_example.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@
2626
}
2727

2828
// Components examples
29-
.preview {
29+
.preview,
30+
.preview .col {
3031
+ p {
3132
margin-top: 2rem;
3233
}

‎src/views/dashboard/Dashboard.js‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -210,62 +210,62 @@ const Dashboard = () => {
210210
<span className="text-medium-emphasis small">Monday</span>
211211
</div>
212212
<div className="progress-group-bars">
213-
<CProgress className="progress-xs" color="info" value="34" />
214-
<CProgress className="progress-xs" color="danger" value="78" />
213+
<CProgress className="progress-xs" color="info" value={34} />
214+
<CProgress className="progress-xs" color="danger" value={78} />
215215
</div>
216216
</div>
217217
<div className="progress-group mb-4">
218218
<div className="progress-group-prepend">
219219
<span className="text-medium-emphasis small">Tuesday</span>
220220
</div>
221221
<div className="progress-group-bars">
222-
<CProgress className="progress-xs" color="info" value="56" />
223-
<CProgress className="progress-xs" color="danger" value="94" />
222+
<CProgress className="progress-xs" color="info" value={56} />
223+
<CProgress className="progress-xs" color="danger" value={94} />
224224
</div>
225225
</div>
226226
<div className="progress-group mb-4">
227227
<div className="progress-group-prepend">
228228
<span className="text-medium-emphasis small">Wednesday</span>
229229
</div>
230230
<div className="progress-group-bars">
231-
<CProgress className="progress-xs" color="info" value="12" />
232-
<CProgress className="progress-xs" color="danger" value="67" />
231+
<CProgress className="progress-xs" color="info" value={12} />
232+
<CProgress className="progress-xs" color="danger" value={67} />
233233
</div>
234234
</div>
235235
<div className="progress-group mb-4">
236236
<div className="progress-group-prepend">
237237
<span className="text-medium-emphasis small">Thursday</span>
238238
</div>
239239
<div className="progress-group-bars">
240-
<CProgress className="progress-xs" color="info" value="43" />
241-
<CProgress className="progress-xs" color="danger" value="91" />
240+
<CProgress className="progress-xs" color="info" value={43} />
241+
<CProgress className="progress-xs" color="danger" value={91} />
242242
</div>
243243
</div>
244244
<div className="progress-group mb-4">
245245
<div className="progress-group-prepend">
246246
<span className="text-medium-emphasis small">Friday</span>
247247
</div>
248248
<div className="progress-group-bars">
249-
<CProgress className="progress-xs" color="info" value="22" />
250-
<CProgress className="progress-xs" color="danger" value="73" />
249+
<CProgress className="progress-xs" color="info" value={22} />
250+
<CProgress className="progress-xs" color="danger" value={73} />
251251
</div>
252252
</div>
253253
<div className="progress-group mb-4">
254254
<div className="progress-group-prepend">
255255
<span className="text-medium-emphasis small">Saturday</span>
256256
</div>
257257
<div className="progress-group-bars">
258-
<CProgress className="progress-xs" color="info" value="53" />
259-
<CProgress className="progress-xs" color="danger" value="82" />
258+
<CProgress className="progress-xs" color="info" value={53} />
259+
<CProgress className="progress-xs" color="danger" value={82} />
260260
</div>
261261
</div>
262262
<div className="progress-group mb-4">
263263
<div className="progress-group-prepend">
264264
<span className="text-medium-emphasis small">Sunday</span>
265265
</div>
266266
<div className="progress-group-bars">
267-
<CProgress className="progress-xs" color="info" value="9" />
268-
<CProgress className="progress-xs" color="danger" value="69" />
267+
<CProgress className="progress-xs" color="info" value={9} />
268+
<CProgress className="progress-xs" color="danger" value={69} />
269269
</div>
270270
</div>
271271
</CCol>
@@ -295,7 +295,7 @@ const Dashboard = () => {
295295
<span className="ms-auto font-semibold">43%</span>
296296
</div>
297297
<div className="progress-group-bars">
298-
<CProgress className="progress-xs" color="warning" value="43" />
298+
<CProgress className="progress-xs" color="warning" value={43} />
299299
</div>
300300
</div>
301301
<div className="progress-group mb-5">
@@ -305,7 +305,7 @@ const Dashboard = () => {
305305
<span className="ms-auto font-semibold">37%</span>
306306
</div>
307307
<div className="progress-group-bars">
308-
<CProgress className="progress-xs" color="warning" value="37" />
308+
<CProgress className="progress-xs" color="warning" value={37} />
309309
</div>
310310
</div>
311311

@@ -318,7 +318,7 @@ const Dashboard = () => {
318318
</span>
319319
</div>
320320
<div className="progress-group-bars">
321-
<CProgress className="progress-xs" color="success" value="56" />
321+
<CProgress className="progress-xs" color="success" value={56} />
322322
</div>
323323
</div>
324324
<div className="progress-group">
@@ -330,7 +330,7 @@ const Dashboard = () => {
330330
</span>
331331
</div>
332332
<div className="progress-group-bars">
333-
<CProgress className="progress-xs" color="success" value="15" />
333+
<CProgress className="progress-xs" color="success" value={15} />
334334
</div>
335335
</div>
336336
<div className="progress-group">
@@ -342,7 +342,7 @@ const Dashboard = () => {
342342
</span>
343343
</div>
344344
<div className="progress-group-bars">
345-
<CProgress className="progress-xs" color="success" value="11" />
345+
<CProgress className="progress-xs" color="success" value={11} />
346346
</div>
347347
</div>
348348
<div className="progress-group">
@@ -354,15 +354,15 @@ const Dashboard = () => {
354354
</span>
355355
</div>
356356
<div className="progress-group-bars">
357-
<CProgress className="progress-xs" color="success" value="8" />
357+
<CProgress className="progress-xs" color="success" value={8} />
358358
</div>
359359
</div>
360360
</CCol>
361361
</CRow>
362362

363363
<br />
364364

365-
<CTable hover responsive className="mb-0 border">
365+
<CTable hover responsive align="middle" className="mb-0 border">
366366
<CTableHead color="light">
367367
<CTableRow>
368368
<CTableHeaderCell className="text-center">
@@ -400,7 +400,7 @@ const Dashboard = () => {
400400
</small>
401401
</div>
402402
</div>
403-
<CProgress className="progress-xs" color="success" value="50" />
403+
<CProgress className="progress-xs" color="success" value={50} />
404404
</CTableDataCell>
405405
<CTableDataCell className="text-center">
406406
<CIcon size="xl" name="cib-cc-mastercard" />
@@ -434,7 +434,7 @@ const Dashboard = () => {
434434
</small>
435435
</div>
436436
</div>
437-
<CProgress className="progress-xs" color="info" value="10" />
437+
<CProgress className="progress-xs" color="info" value={10} />
438438
</CTableDataCell>
439439
<CTableDataCell className="text-center">
440440
<CIcon size="xl" name="cib-cc-visa" />
@@ -468,10 +468,10 @@ const Dashboard = () => {
468468
</small>
469469
</div>
470470
</div>
471-
<CProgress className="progress-xs" color="warning" value="74" />
471+
<CProgress className="progress-xs" color="warning" value={74} />
472472
</CTableDataCell>
473473
<CTableDataCell className="text-center">
474-
<CIcon size="xl" name="cib-stripe" />
474+
<CIcon size="xl" name="cib-cc-stripe" />
475475
</CTableDataCell>
476476
<CTableDataCell>
477477
<div className="small text-medium-emphasis">Last login</div>
@@ -502,10 +502,10 @@ const Dashboard = () => {
502502
</small>
503503
</div>
504504
</div>
505-
<CProgress className="progress-xs" color="danger" value="98" />
505+
<CProgress className="progress-xs" color="danger" value={98} />
506506
</CTableDataCell>
507507
<CTableDataCell className="text-center">
508-
<CIcon size="xl" name="cib-paypal" />
508+
<CIcon size="xl" name="cib-cc-paypal" />
509509
</CTableDataCell>
510510
<CTableDataCell>
511511
<div className="small text-medium-emphasis">Last login</div>
@@ -536,10 +536,10 @@ const Dashboard = () => {
536536
</small>
537537
</div>
538538
</div>
539-
<CProgress className="progress-xs" color="info" value="22" />
539+
<CProgress className="progress-xs" color="info" value={22} />
540540
</CTableDataCell>
541541
<CTableDataCell className="text-center">
542-
<CIcon size="xl" name="cib-google-pay" />
542+
<CIcon size="xl" name="cib-cc-apple-pay" />
543543
</CTableDataCell>
544544
<CTableDataCell>
545545
<div className="small text-medium-emphasis">Last login</div>
@@ -570,7 +570,7 @@ const Dashboard = () => {
570570
</small>
571571
</div>
572572
</div>
573-
<CProgress className="progress-xs" color="success" value="43" />
573+
<CProgress className="progress-xs" color="success" value={43} />
574574
</CTableDataCell>
575575
<CTableDataCell className="text-center">
576576
<CIcon size="xl" name="cib-cc-amex" />

‎src/views/examples/base/cards/Cards.js‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -639,13 +639,8 @@ const Cards = () => {
639639
{ color: 'light' },
640640
{ color: 'dark', textColor: 'white' },
641641
].map((item, index) => (
642-
<CCol lg={4}>
643-
<CCard
644-
color={item.color}
645-
textColor={item.textColor}
646-
className="mb-3"
647-
key={index}
648-
>
642+
<CCol lg={4} key={index}>
643+
<CCard color={item.color} textColor={item.textColor} className="mb-3">
649644
<CCardHeader>Header</CCardHeader>
650645
<CCardBody>
651646
<CCardTitle>{item.color} card title</CCardTitle>
@@ -678,12 +673,8 @@ const Cards = () => {
678673
{ color: 'light' },
679674
{ color: 'dark' },
680675
].map((item, index) => (
681-
<CCol lg={4}>
682-
<CCard
683-
textColor={item.textColor}
684-
className={`mb-3 border-${item.color}`}
685-
key={index}
686-
>
676+
<CCol lg={4} key={index}>
677+
<CCard textColor={item.textColor} className={`mb-3 border-${item.color}`}>
687678
<CCardHeader>Header</CCardHeader>
688679
<CCardBody>
689680
<CCardTitle>{item.color} card title</CCardTitle>
@@ -716,11 +707,10 @@ const Cards = () => {
716707
{ color: 'light' },
717708
{ color: 'dark' },
718709
].map((item, index) => (
719-
<CCol lg={4}>
710+
<CCol lg={4} key={index}>
720711
<CCard
721712
textColor={item.textColor}
722713
className={`mb-3 border-top-${item.color} border-top-3`}
723-
key={index}
724714
>
725715
<CCardHeader>Header</CCardHeader>
726716
<CCardBody>

0 commit comments

Comments
 (0)