Skip to content

Commit 9adc776

Browse files
mrholekmrholek
committed
refactor: update example views
1 parent 2d75b27 commit 9adc776

File tree

56 files changed

+626
-1098
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+626
-1098
lines changed

‎src/App.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ const loading = (
1212
const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
1313

1414
// Pages
15-
const Login = React.lazy(() => import('./views/examples/pages/login/Login'))
16-
const Register = React.lazy(() => import('./views/examples/pages/register/Register'))
17-
const Page404 = React.lazy(() => import('./views/examples/pages/page404/Page404'))
18-
const Page500 = React.lazy(() => import('./views/examples/pages/page500/Page500'))
15+
const Login = React.lazy(() => import('./views/pages/login/Login'))
16+
const Register = React.lazy(() => import('./views/pages/register/Register'))
17+
const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
18+
const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
1919

2020
class App extends Component {
2121
render() {

‎src/components/AppHeader.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ const AppHeader = () => {
3131
<CHeaderBrand className="mx-auto d-md-none" to="/">
3232
<CIcon name="logo" height="48" alt="Logo" />
3333
</CHeaderBrand>
34-
3534
<CHeaderNav className="d-none d-md-flex me-auto">
3635
<CNavItem>
3736
<CNavLink to="/dashboard" component={NavLink} activeClassName="active">
@@ -45,7 +44,6 @@ const AppHeader = () => {
4544
<CNavLink>Settings</CNavLink>
4645
</CNavItem>
4746
</CHeaderNav>
48-
4947
<CHeaderNav>
5048
<CNavItem>
5149
<CNavLink>
@@ -63,7 +61,7 @@ const AppHeader = () => {
6361
</CNavLink>
6462
</CNavItem>
6563
</CHeaderNav>
66-
<CHeaderNav>
64+
<CHeaderNav className="ms-3">
6765
<AppHeaderDropdown />
6866
</CHeaderNav>
6967
</CContainer>

‎src/reusable/DocsLink.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
1+
import PropTypes from 'prop-types'
12
import React from 'react'
23
import { CLink } from '@coreui/react'
34

45
const DocsLink = (props) => {
5-
const { name, text, ...rest } = props
6+
const { href, name, text, ...rest } = props
67

7-
const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href
8+
const _href = name ? `https://coreui.io/react/docs/components/${name}` : href
89

910
return (
1011
<div className="float-end">
1112
<CLink
1213
{...rest}
13-
href={href}
14+
href={_href}
1415
rel="noreferrer noopener"
1516
target="_blank"
1617
className="card-header-action"
@@ -21,4 +22,10 @@ const DocsLink = (props) => {
2122
)
2223
}
2324

25+
DocsLink.propTypes = {
26+
href: PropTypes.string,
27+
name: PropTypes.string,
28+
text: PropTypes.string,
29+
}
30+
2431
export default React.memo(DocsLink)

‎src/reusable/Example.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
1+
import PropTypes from 'prop-types'
12
import React from 'react'
2-
import { CLink, CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react'
3+
import { CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react'
4+
import CIcon from '@coreui/icons-react'
35

46
const Example = (props) => {
5-
const { children, href, ...rest } = props
6-
7-
// const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href
7+
const { children, href } = props
88

99
return (
1010
<div className="example">
1111
<CNav variant="tabs">
1212
<CNavItem>
1313
<CNavLink href="#" active>
14+
<CIcon name="cil-media-play" className="me-2" />
1415
Preview
1516
</CNavLink>
1617
</CNavItem>
1718
<CNavItem>
1819
<CNavLink href={href} target="_blank">
20+
<CIcon name="cil-code" className="me-2" />
1921
Code
2022
</CNavLink>
2123
</CNavItem>
@@ -29,4 +31,9 @@ const Example = (props) => {
2931
)
3032
}
3133

34+
Example.propTypes = {
35+
children: PropTypes.node,
36+
href: PropTypes.string,
37+
}
38+
3239
export default React.memo(Example)

src/views/examples/base/accordion/Accordion.js renamed to src/views/components/base/accordion/Accordion.js

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,18 @@ import {
1212
CAccordionHeader,
1313
CAccordionItem,
1414
} from '@coreui/react'
15-
import { Example } from 'src/reusable'
15+
import { DocsCallout, Example } from 'src/reusable'
1616

1717
const Accordion = () => {
1818
const [activeKey, setActiveKey] = useState(0)
1919
const [activeKey2, setActiveKey2] = useState(0)
2020

2121
return (
2222
<CRow>
23-
<CCol>
23+
<CCol xs={12}>
24+
<DocsCallout name="Accordion" href="components/accordion" />
25+
</CCol>
26+
<CCol xs={12}>
2427
<CCard className="mb-4">
2528
<CCardHeader>
2629
<strong>React Accordion</strong>
@@ -29,7 +32,7 @@ const Accordion = () => {
2932
<p className="text-medium-emphasis small">
3033
Click the accordions below to expand/collapse the accordion content.
3134
</p>
32-
<Example href="https://coreui.io/react/docs/4.0/components/accordion">
35+
<Example href="components/accordion">
3336
<CAccordion>
3437
<CAccordionItem>
3538
<CAccordionHeader>
@@ -42,13 +45,13 @@ const Accordion = () => {
4245
</CAccordionHeader>
4346
<CAccordionCollapse visible={activeKey === 1}>
4447
<CAccordionBody>
45-
<strong>This is the first item's accordion body.</strong> It is hidden by
48+
<strong>This is the first item&#39;s accordion body.</strong> It is hidden by
4649
default, until the collapse plugin adds the appropriate classes that we use to
4750
style each element. These classes control the overall appearance, as well as
4851
the showing and hiding via CSS transitions. You can modify any of this with
49-
custom CSS or overriding our default variables. It's also worth noting that
50-
just about any HTML can go within the <code>.accordion-body</code>, though the
51-
transition does limit overflow.
52+
custom CSS or overriding our default variables. It&#39;s also worth noting
53+
that just about any HTML can go within the <code>.accordion-body</code>,
54+
though the transition does limit overflow.
5255
</CAccordionBody>
5356
</CAccordionCollapse>
5457
</CAccordionItem>
@@ -63,13 +66,13 @@ const Accordion = () => {
6366
</CAccordionHeader>
6467
<CAccordionCollapse visible={activeKey === 2}>
6568
<CAccordionBody>
66-
<strong>This is the second item's accordion body.</strong> It is hidden by
69+
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by
6770
default, until the collapse plugin adds the appropriate classes that we use to
6871
style each element. These classes control the overall appearance, as well as
6972
the showing and hiding via CSS transitions. You can modify any of this with
70-
custom CSS or overriding our default variables. It's also worth noting that
71-
just about any HTML can go within the <code>.accordion-body</code>, though the
72-
transition does limit overflow.
73+
custom CSS or overriding our default variables. It&#39;s also worth noting
74+
that just about any HTML can go within the <code>.accordion-body</code>,
75+
though the transition does limit overflow.
7376
</CAccordionBody>
7477
</CAccordionCollapse>
7578
</CAccordionItem>
@@ -84,13 +87,13 @@ const Accordion = () => {
8487
</CAccordionHeader>
8588
<CAccordionCollapse visible={activeKey === 3}>
8689
<CAccordionBody>
87-
<strong>This is the third item's accordion body.</strong> It is hidden by
90+
<strong>This is the third item&#39;s accordion body.</strong> It is hidden by
8891
default, until the collapse plugin adds the appropriate classes that we use to
8992
style each element. These classes control the overall appearance, as well as
9093
the showing and hiding via CSS transitions. You can modify any of this with
91-
custom CSS or overriding our default variables. It's also worth noting that
92-
just about any HTML can go within the <code>.accordion-body</code>, though the
93-
transition does limit overflow.
94+
custom CSS or overriding our default variables. It&#39;s also worth noting
95+
that just about any HTML can go within the <code>.accordion-body</code>,
96+
though the transition does limit overflow.
9497
</CAccordionBody>
9598
</CAccordionCollapse>
9699
</CAccordionItem>
@@ -108,7 +111,7 @@ const Accordion = () => {
108111
borders, and some rounded corners to render accordions edge-to-edge with their parent
109112
container.
110113
</p>
111-
<Example href="https://coreui.io/react/docs/4.0/components/accordion">
114+
<Example href="components/accordion#flush">
112115
<CAccordion flush>
113116
<CAccordionItem>
114117
<CAccordionHeader>
@@ -121,13 +124,13 @@ const Accordion = () => {
121124
</CAccordionHeader>
122125
<CAccordionCollapse visible={activeKey2 === 1}>
123126
<CAccordionBody>
124-
<strong>This is the first item's accordion body.</strong> It is hidden by
127+
<strong>This is the first item&#39;s accordion body.</strong> It is hidden by
125128
default, until the collapse plugin adds the appropriate classes that we use to
126129
style each element. These classes control the overall appearance, as well as
127130
the showing and hiding via CSS transitions. You can modify any of this with
128-
custom CSS or overriding our default variables. It's also worth noting that
129-
just about any HTML can go within the <code>.accordion-body</code>, though the
130-
transition does limit overflow.
131+
custom CSS or overriding our default variables. It&#39;s also worth noting
132+
that just about any HTML can go within the <code>.accordion-body</code>,
133+
though the transition does limit overflow.
131134
</CAccordionBody>
132135
</CAccordionCollapse>
133136
</CAccordionItem>
@@ -142,13 +145,13 @@ const Accordion = () => {
142145
</CAccordionHeader>
143146
<CAccordionCollapse visible={activeKey2 === 2}>
144147
<CAccordionBody>
145-
<strong>This is the second item's accordion body.</strong> It is hidden by
148+
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by
146149
default, until the collapse plugin adds the appropriate classes that we use to
147150
style each element. These classes control the overall appearance, as well as
148151
the showing and hiding via CSS transitions. You can modify any of this with
149-
custom CSS or overriding our default variables. It's also worth noting that
150-
just about any HTML can go within the <code>.accordion-body</code>, though the
151-
transition does limit overflow.
152+
custom CSS or overriding our default variables. It&#39;s also worth noting
153+
that just about any HTML can go within the <code>.accordion-body</code>,
154+
though the transition does limit overflow.
152155
</CAccordionBody>
153156
</CAccordionCollapse>
154157
</CAccordionItem>
@@ -163,13 +166,13 @@ const Accordion = () => {
163166
</CAccordionHeader>
164167
<CAccordionCollapse visible={activeKey2 === 3}>
165168
<CAccordionBody>
166-
<strong>This is the third item's accordion body.</strong> It is hidden by
169+
<strong>This is the third item&#39;s accordion body.</strong> It is hidden by
167170
default, until the collapse plugin adds the appropriate classes that we use to
168171
style each element. These classes control the overall appearance, as well as
169172
the showing and hiding via CSS transitions. You can modify any of this with
170-
custom CSS or overriding our default variables. It's also worth noting that
171-
just about any HTML can go within the <code>.accordion-body</code>, though the
172-
transition does limit overflow.
173+
custom CSS or overriding our default variables. It&#39;s also worth noting
174+
that just about any HTML can go within the <code>.accordion-body</code>,
175+
though the transition does limit overflow.
173176
</CAccordionBody>
174177
</CAccordionCollapse>
175178
</CAccordionItem>

src/views/examples/base/breadcrumbs/Breadcrumbs.js renamed to src/views/components/base/breadcrumbs/Breadcrumbs.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,15 @@ import {
99
CRow,
1010
CLink,
1111
} from '@coreui/react'
12-
import { Example } from 'src/reusable'
12+
import { DocsCallout, Example } from 'src/reusable'
1313

1414
const Breadcrumbs = () => {
1515
return (
1616
<CRow>
17-
<CCol>
17+
<CCol xs={12}>
18+
<DocsCallout name="Breadcrumb" href="components/breadcrumb" />
19+
</CCol>
20+
<CCol xs={12}>
1821
<CCard className="mb-4">
1922
<CCardHeader>
2023
<strong>React Breadcrumb</strong>
@@ -35,7 +38,7 @@ const Breadcrumbs = () => {
3538
</a>
3639
.
3740
</p>
38-
<Example href="https://coreui.io/react/docs/4.0/components/breadcrumb">
41+
<Example href="components/breadcrumb">
3942
<CBreadcrumb>
4043
<CBreadcrumbItem>
4144
<CLink href="#">Home</CLink>

0 commit comments

Comments
 (0)