Skip to content

Commit 2e1d16d

Browse files
mrholekmrholek
committed
refactor: update routes
1 parent caa46b8 commit 2e1d16d

File tree

8 files changed

+1683
-502
lines changed

8 files changed

+1683
-502
lines changed

‎src/containers/_nav.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,12 @@ const _nav = [
4343
to: '/to',
4444
icon: <CIcon name="cil-puzzle" customClasses="nav-icon" />,
4545
items: [
46+
{
47+
_component: 'CNavItem',
48+
as: NavLink,
49+
anchor: 'Accordion',
50+
to: '/base/accordion',
51+
},
4652
{
4753
_component: 'CNavItem',
4854
as: NavLink,

‎src/reusable/Example.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react'
2+
import { CLink, CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react'
3+
4+
const Example = (props) => {
5+
const { children, href, ...rest } = props
6+
7+
// const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href
8+
9+
return (
10+
<>
11+
<CNav variant="tabs">
12+
<CNavItem>
13+
<CNavLink href="#" active>
14+
Preview
15+
</CNavLink>
16+
</CNavItem>
17+
<CNavItem>
18+
<CNavLink href={href} target="_blank">
19+
Code
20+
</CNavLink>
21+
</CNavItem>
22+
</CNav>
23+
<CTabContent>
24+
<CTabPane visible>{children}</CTabPane>
25+
</CTabContent>
26+
</>
27+
)
28+
}
29+
30+
export default React.memo(Example)

‎src/reusable/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
import DocsLink from './DocsLink'
2+
import Example from './Example'
23

3-
export { DocsLink }
4+
export { DocsLink, Example }

‎src/routes.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from 'react'
33
const Toaster = React.lazy(() => import('./views/notifications/toaster/Toaster'))
44
const Tables = React.lazy(() => import('./views/base/tables/Tables'))
55

6+
const Accordion = React.lazy(() => import('./views/base/accordion/Accordion'))
67
const Breadcrumbs = React.lazy(() => import('./views/base/breadcrumbs/Breadcrumbs'))
78
const Cards = React.lazy(() => import('./views/base/cards/Cards'))
89
const Carousels = React.lazy(() => import('./views/base/carousels/Carousels'))
@@ -44,6 +45,7 @@ const routes = [
4445
{ path: '/theme/colors', name: 'Colors', component: Colors },
4546
{ path: '/theme/typography', name: 'Typography', component: Typography },
4647
{ path: '/base', name: 'Base', component: Cards, exact: true },
48+
{ path: '/base/accordion', name: 'Accordion', component: Accordion },
4749
{ path: '/base/breadcrumbs', name: 'Breadcrumbs', component: Breadcrumbs },
4850
{ path: '/base/cards', name: 'Cards', component: Cards },
4951
{ path: '/base/carousels', name: 'Carousel', component: Carousels },

‎src/views/base/accordion/Accordion.js‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
import React, { useState } from 'react'
2+
import {
3+
CCard,
4+
CCardBody,
5+
CCardHeader,
6+
CCol,
7+
CRow,
8+
CAccordion,
9+
CAccordionBody,
10+
CAccordionButton,
11+
CAccordionCollapse,
12+
CAccordionHeader,
13+
CAccordionItem,
14+
} from '@coreui/react'
15+
import { DocsLink, Example } from 'src/reusable'
16+
17+
const Accordion = () => {
18+
const [activeKey, setActiveKey] = useState(0)
19+
const [activeKey2, setActiveKey2] = useState(0)
20+
21+
return (
22+
<CRow>
23+
<CCol>
24+
<CCard className="mb-4">
25+
<CCardHeader>
26+
<strong>React Accordion</strong>
27+
</CCardHeader>
28+
<CCardBody>
29+
<p class="text-medium-emphasis small">
30+
Click the accordions below to expand/collapse the accordion content.
31+
</p>
32+
<Example href="https://coreui.io/react/docs/4.0/components/accordion">
33+
<CAccordion>
34+
<CAccordionItem>
35+
<CAccordionHeader>
36+
<CAccordionButton
37+
collapsed={activeKey !== 1}
38+
onClick={() => (activeKey === 1 ? setActiveKey(0) : setActiveKey(1))}
39+
>
40+
Accordion Item #1
41+
</CAccordionButton>
42+
</CAccordionHeader>
43+
<CAccordionCollapse visible={activeKey === 1}>
44+
<CAccordionBody>
45+
<strong>This is the first item's accordion body.</strong> It is hidden by
46+
default, until the collapse plugin adds the appropriate classes that we use to
47+
style each element. These classes control the overall appearance, as well as
48+
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+
</CAccordionBody>
53+
</CAccordionCollapse>
54+
</CAccordionItem>
55+
<CAccordionItem>
56+
<CAccordionHeader>
57+
<CAccordionButton
58+
collapsed={activeKey !== 2}
59+
onClick={() => (activeKey === 2 ? setActiveKey(0) : setActiveKey(2))}
60+
>
61+
Accordion Item #2
62+
</CAccordionButton>
63+
</CAccordionHeader>
64+
<CAccordionCollapse visible={activeKey === 2}>
65+
<CAccordionBody>
66+
<strong>This is the second item's accordion body.</strong> It is hidden by
67+
default, until the collapse plugin adds the appropriate classes that we use to
68+
style each element. These classes control the overall appearance, as well as
69+
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+
</CAccordionBody>
74+
</CAccordionCollapse>
75+
</CAccordionItem>
76+
<CAccordionItem>
77+
<CAccordionHeader>
78+
<CAccordionButton
79+
collapsed={activeKey !== 3}
80+
onClick={() => (activeKey === 3 ? setActiveKey(0) : setActiveKey(3))}
81+
>
82+
Accordion Item #3
83+
</CAccordionButton>
84+
</CAccordionHeader>
85+
<CAccordionCollapse visible={activeKey === 3}>
86+
<CAccordionBody>
87+
<strong>This is the third item's accordion body.</strong> It is hidden by
88+
default, until the collapse plugin adds the appropriate classes that we use to
89+
style each element. These classes control the overall appearance, as well as
90+
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+
</CAccordionBody>
95+
</CAccordionCollapse>
96+
</CAccordionItem>
97+
</CAccordion>
98+
</Example>
99+
</CCardBody>
100+
</CCard>
101+
<CCard className="mb-4">
102+
<CCardHeader>
103+
<strong>React Accordion</strong> <small>Flush</small>
104+
</CCardHeader>
105+
<CCardBody>
106+
<p class="text-medium-emphasis small">
107+
Add <code class="css-0">flush</code> to remove the default{' '}
108+
<code class="css-0">background-color</code>, some borders, and some rounded corners to
109+
render accordions edge-to-edge with their parent container.
110+
</p>
111+
<Example href="https://coreui.io/react/docs/4.0/components/accordion">
112+
<CAccordion flush>
113+
<CAccordionItem>
114+
<CAccordionHeader>
115+
<CAccordionButton
116+
collapsed={activeKey2 !== 1}
117+
onClick={() => (activeKey2 === 1 ? setActiveKey2(0) : setActiveKey2(1))}
118+
>
119+
Accordion Item #1
120+
</CAccordionButton>
121+
</CAccordionHeader>
122+
<CAccordionCollapse visible={activeKey2 === 1}>
123+
<CAccordionBody>
124+
<strong>This is the first item's accordion body.</strong> It is hidden by
125+
default, until the collapse plugin adds the appropriate classes that we use to
126+
style each element. These classes control the overall appearance, as well as
127+
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+
</CAccordionBody>
132+
</CAccordionCollapse>
133+
</CAccordionItem>
134+
<CAccordionItem>
135+
<CAccordionHeader>
136+
<CAccordionButton
137+
collapsed={activeKey2 !== 2}
138+
onClick={() => (activeKey2 === 2 ? setActiveKey2(0) : setActiveKey2(2))}
139+
>
140+
Accordion Item #2
141+
</CAccordionButton>
142+
</CAccordionHeader>
143+
<CAccordionCollapse visible={activeKey2 === 2}>
144+
<CAccordionBody>
145+
<strong>This is the second item's accordion body.</strong> It is hidden by
146+
default, until the collapse plugin adds the appropriate classes that we use to
147+
style each element. These classes control the overall appearance, as well as
148+
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+
</CAccordionBody>
153+
</CAccordionCollapse>
154+
</CAccordionItem>
155+
<CAccordionItem>
156+
<CAccordionHeader>
157+
<CAccordionButton
158+
collapsed={activeKey2 !== 3}
159+
onClick={() => (activeKey2 === 3 ? setActiveKey2(0) : setActiveKey2(3))}
160+
>
161+
Accordion Item #3
162+
</CAccordionButton>
163+
</CAccordionHeader>
164+
<CAccordionCollapse visible={activeKey2 === 3}>
165+
<CAccordionBody>
166+
<strong>This is the third item's accordion body.</strong> It is hidden by
167+
default, until the collapse plugin adds the appropriate classes that we use to
168+
style each element. These classes control the overall appearance, as well as
169+
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+
</CAccordionBody>
174+
</CAccordionCollapse>
175+
</CAccordionItem>
176+
</CAccordion>
177+
</Example>
178+
</CCardBody>
179+
</CCard>
180+
</CCol>
181+
</CRow>
182+
)
183+
}
184+
185+
export default Accordion

0 commit comments

Comments
 (0)