From a8de3d3d2c39f5daf65e4cc71db6886a9117b41f Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 8 Jul 2024 17:02:57 +0200
Subject: [PATCH] feat: add blocks
---
packages/docs/content/blocks/footers.mdx | 34 ++++++
.../content/blocks/footers/FreeFooter1.tsx | 81 ++++++++++++++
.../content/blocks/footers/FreeFooter2.tsx | 80 +++++++++++++
.../content/blocks/footers/ProFooter1.tsx | 105 ++++++++++++++++++
.../content/blocks/footers/ProFooter2.tsx | 103 +++++++++++++++++
packages/docs/content/blocks/paginations.mdx | 13 +++
.../blocks/paginations/FreePagination1.tsx | 42 +++++++
packages/docs/content/blocks/stats.mdx | 34 ++++++
.../docs/content/blocks/stats/FreeStats1.tsx | 99 +++++++++++++++++
.../docs/content/blocks/stats/FreeStats2.tsx | 98 ++++++++++++++++
.../docs/content/blocks/stats/FreeStats3.tsx | 83 ++++++++++++++
.../docs/content/blocks/stats/FreeStats4.tsx | 105 ++++++++++++++++++
packages/docs/src/components/Banner.tsx | 6 +-
packages/docs/src/components/Block.tsx | 99 +++++++++++++++++
packages/docs/src/components/Footer.tsx | 5 +-
packages/docs/src/components/Header.tsx | 2 +-
packages/docs/src/components/index.ts | 2 +
packages/docs/src/nav.tsx | 29 +++++
packages/docs/src/styles/_block.scss | 47 ++++++++
packages/docs/src/styles/_layout.scss | 20 ++++
packages/docs/src/styles/styles.scss | 1 +
packages/docs/src/templates/DocsLayout.tsx | 16 ++-
packages/docs/src/templates/MdxLayout.tsx | 7 +-
23 files changed, 1104 insertions(+), 7 deletions(-)
create mode 100644 packages/docs/content/blocks/footers.mdx
create mode 100644 packages/docs/content/blocks/footers/FreeFooter1.tsx
create mode 100644 packages/docs/content/blocks/footers/FreeFooter2.tsx
create mode 100644 packages/docs/content/blocks/footers/ProFooter1.tsx
create mode 100644 packages/docs/content/blocks/footers/ProFooter2.tsx
create mode 100644 packages/docs/content/blocks/paginations.mdx
create mode 100644 packages/docs/content/blocks/paginations/FreePagination1.tsx
create mode 100644 packages/docs/content/blocks/stats.mdx
create mode 100644 packages/docs/content/blocks/stats/FreeStats1.tsx
create mode 100644 packages/docs/content/blocks/stats/FreeStats2.tsx
create mode 100644 packages/docs/content/blocks/stats/FreeStats3.tsx
create mode 100644 packages/docs/content/blocks/stats/FreeStats4.tsx
create mode 100644 packages/docs/src/components/Block.tsx
create mode 100644 packages/docs/src/styles/_block.scss
diff --git a/packages/docs/content/blocks/footers.mdx b/packages/docs/content/blocks/footers.mdx
new file mode 100644
index 00000000..931d6b08
--- /dev/null
+++ b/packages/docs/content/blocks/footers.mdx
@@ -0,0 +1,34 @@
+---
+title: CoreUI React.js Footers
+name: Footers
+description: Use these CoreUI footer examples, built with CoreUI and CoreUI UI React Components, to add valuable information at the bottom of each page. Include a sitemap to enhance site navigation, links to your social media profiles, or a newsletter sign-up form. These examples, crafted by the CoreUI team, showcase various styles and layouts to fit your needs.
+full_width: true
+---
+
+import { default as Footer1 } from './footers/FreeFooter1.tsx'
+import { default as Footer1Src } from '!raw-loader!./footers/FreeFooter1.tsx'
+
+<Block className="p-0" code={Footer1Src} title="5-column with company mission and socials">
+ <Footer1 />
+</Block>
+
+import { default as Footer2 } from './footers/FreeFooter2.tsx'
+import { default as Footer2Src } from '!raw-loader!./footers/FreeFooter2.tsx'
+
+<Block className="p-0 overflow-hidden" code={Footer2Src} title="5-column with company mission and socials">
+ <Footer2 />
+</Block>
+
+import { default as Footer3 } from './footers/ProFooter1.tsx'
+import { default as Footer3Src } from '!raw-loader!./footers/ProFooter1.tsx'
+
+<Block className="p-0" code={Footer3Src} pro title="5-column with company mission, newsletter, and socials">
+ <Footer3 />
+</Block>
+
+import { default as Footer4 } from './footers/ProFooter2.tsx'
+import { default as Footer4Src } from '!raw-loader!./footers/ProFooter2.tsx'
+
+<Block className="p-0" code={Footer4Src} pro title="5-column with company mission, newsletter, and socials">
+ <Footer4 />
+</Block>
diff --git a/packages/docs/content/blocks/footers/FreeFooter1.tsx b/packages/docs/content/blocks/footers/FreeFooter1.tsx
new file mode 100644
index 00000000..6df321aa
--- /dev/null
+++ b/packages/docs/content/blocks/footers/FreeFooter1.tsx
@@ -0,0 +1,81 @@
+import React from 'react'
+import { cibFacebookF, cibGithub, cibInstagram, cibLinkedin, cibYoutube } from '@coreui/icons'
+import CIcon from '@coreui/icons-react'
+import { CCol, CRow } from '@coreui/react'
+
+import CoreUISignetImg from './../../assets/images/brand/coreui-signet.svg'
+
+export default function FreeFooter1() {
+ return (
+ <div className="p-5">
+ <CRow className="py-3">
+ <CCol className="mb-5 mb-lg-0" lg={3}>
+ <img src={CoreUISignetImg} alt="" width="44" height="48" />
+ <div className="small text-body-secondary mt-3">
+ Building elegant UI components to improve the world.
+ </div>
+ </CCol>
+ <CCol xs={6} md={3} lg={{ span: 2, offset: 1 }}>
+ <h3 className="fs-6 fw-semibold mb-3">Company</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">About us</li>
+ <li className="py-1">Careers</li>
+ <li className="py-1">Commerce</li>
+ <li className="py-1">Contact</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Product</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Support</li>
+ <li className="py-1">Download</li>
+ <li className="py-1">Pricing</li>
+ <li className="py-1">Documentation</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Services</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Consulting</li>
+ <li className="py-1">Analytics</li>
+ <li className="py-1">Development</li>
+ <li className="py-1">Design</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Legal</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Cookies</li>
+ <li className="py-1">Privacy</li>
+ <li className="py-1">Terms</li>
+ <li className="py-1">Licenses</li>
+ </ul>
+ </CCol>
+ </CRow>
+ <hr />
+ <div className="d-flex flex-wrap align-items-center gap-3 text-body-secondary py-3">
+ <div className="small me-auto">
+ © {new Date().getFullYear()} Your Company, Inc. All rights reserved.
+ </div>
+ <div className="d-flex gap-3">
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibFacebookF} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibInstagram} size="lg" />
+ </a>
+
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibGithub} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibYoutube} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibLinkedin} size="lg" />
+ </a>
+ </div>
+ </div>
+ </div>
+ )
+}
diff --git a/packages/docs/content/blocks/footers/FreeFooter2.tsx b/packages/docs/content/blocks/footers/FreeFooter2.tsx
new file mode 100644
index 00000000..da9dbec3
--- /dev/null
+++ b/packages/docs/content/blocks/footers/FreeFooter2.tsx
@@ -0,0 +1,80 @@
+import React from 'react'
+import { cibFacebookF, cibGithub, cibInstagram, cibLinkedin, cibYoutube } from '@coreui/icons'
+import CIcon from '@coreui/icons-react'
+import { CCol, CRow } from '@coreui/react'
+
+import CoreUISignetImg from './../../assets/images/brand/coreui-signet.svg'
+
+export default function FreeFooter2() {
+ return (
+ <div>
+ <CRow className="p-5">
+ <CCol className="mb-5 mb-lg-0" lg={3}>
+ <img src={CoreUISignetImg} alt="" width="44" height="48" />
+ <div className="small text-body-secondary mt-3">
+ Building elegant UI components to improve the world.
+ </div>
+ </CCol>
+ <CCol xs={6} md={3} lg={{ span: 2, offset: 1 }}>
+ <h3 className="fs-6 fw-semibold mb-3">Company</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">About us</li>
+ <li className="py-1">Careers</li>
+ <li className="py-1">Commerce</li>
+ <li className="py-1">Contact</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Product</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Support</li>
+ <li className="py-1">Download</li>
+ <li className="py-1">Pricing</li>
+ <li className="py-1">Documentation</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Services</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Support</li>
+ <li className="py-1">Download</li>
+ <li className="py-1">Pricing</li>
+ <li className="py-1">Documentation</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Legal</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Cookies</li>
+ <li className="py-1">Privacy</li>
+ <li className="py-1">Terms</li>
+ <li className="py-1">Licenses</li>
+ </ul>
+ </CCol>
+ </CRow>
+ <div className="d-flex flex-wrap align-items-center gap-3 bg-body-tertiary text-body-secondary py-4 px-5">
+ <div className="small me-auto">
+ © {new Date().getFullYear()} Your Company, Inc. All rights reserved.
+ </div>
+ <div className="d-flex gap-3">
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibFacebookF} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibInstagram} size="lg" />
+ </a>
+
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibGithub} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibYoutube} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibLinkedin} size="lg" />
+ </a>
+ </div>
+ </div>
+ </div>
+ )
+}
diff --git a/packages/docs/content/blocks/footers/ProFooter1.tsx b/packages/docs/content/blocks/footers/ProFooter1.tsx
new file mode 100644
index 00000000..38afe8e6
--- /dev/null
+++ b/packages/docs/content/blocks/footers/ProFooter1.tsx
@@ -0,0 +1,105 @@
+import React from 'react'
+import { cibFacebookF, cibGithub, cibInstagram, cibLinkedin, cibYoutube } from '@coreui/icons'
+import CIcon from '@coreui/icons-react'
+import { CButton, CCol, CForm, CFormInput, CRow } from '@coreui/react'
+
+import CoreUISignetImg from './../../assets/images/brand/coreui-signet.svg'
+
+export default function ProFooter1() {
+ return (
+ <div className="p-5">
+ <CRow className="py-3">
+ <CCol className="mb-5 mb-lg-0" lg={3}>
+ <img src={CoreUISignetImg} alt="" width="44" height="48" />
+ <div className="small text-body-secondary mt-3">
+ Building elegant UI components to improve the world.
+ </div>
+ </CCol>
+ <CCol xs={6} md={3} lg={{ span: 2, offset: 1 }}>
+ <h3 className="fs-6 fw-semibold mb-3">Company</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">About us</li>
+ <li className="py-1">Careers</li>
+ <li className="py-1">Commerce</li>
+ <li className="py-1">Contact</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Product</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Support</li>
+ <li className="py-1">Download</li>
+ <li className="py-1">Pricing</li>
+ <li className="py-1">Documentation</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Services</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Support</li>
+ <li className="py-1">Download</li>
+ <li className="py-1">Pricing</li>
+ <li className="py-1">Documentation</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Legal</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Cookies</li>
+ <li className="py-1">Privacy</li>
+ <li className="py-1">Terms</li>
+ <li className="py-1">Licenses</li>
+ </ul>
+ </CCol>
+ </CRow>
+ <hr />
+ <div className="d-flex align-items-center py-3">
+ <div className="me-auto">
+ <h3 className="fs-6 fw-semibold">Join our newsletter</h3>
+ <div className="small text-body-secondary">
+ Get the most recent news, articles, and resources delivered to your inbox every week.
+ </div>
+ </div>
+ <CForm className="row g-3">
+ <CCol xs="auto">
+ <CFormInput
+ type="email"
+ id="newsletter"
+ placeholder="Enter your email"
+ aria-describedby="exampleFormControlInputHelpInline"
+ />
+ </CCol>
+ <CCol xs="auto">
+ <CButton color="primary" type="submit">
+ Subscribe
+ </CButton>
+ </CCol>
+ </CForm>
+ </div>
+ <hr />
+ <div className="d-flex flex-wrap align-items-center gap-3 text-body-secondary py-3">
+ <div className="small me-auto">
+ © {new Date().getFullYear()} Your Company, Inc. All rights reserved.
+ </div>
+ <div className="d-flex gap-3">
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibFacebookF} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibInstagram} size="lg" />
+ </a>
+
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibGithub} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibYoutube} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibLinkedin} size="lg" />
+ </a>
+ </div>
+ </div>
+ </div>
+ )
+}
diff --git a/packages/docs/content/blocks/footers/ProFooter2.tsx b/packages/docs/content/blocks/footers/ProFooter2.tsx
new file mode 100644
index 00000000..b2a35f6d
--- /dev/null
+++ b/packages/docs/content/blocks/footers/ProFooter2.tsx
@@ -0,0 +1,103 @@
+import React from 'react'
+import { cibFacebookF, cibGithub, cibInstagram, cibLinkedin, cibYoutube } from '@coreui/icons'
+import CIcon from '@coreui/icons-react'
+import { CButton, CCol, CForm, CFormInput, CRow } from '@coreui/react'
+
+import CoreUISignetImg from './../../assets/images/brand/coreui-signet.svg'
+
+export default function ProFooter2() {
+ return (
+ <div>
+ <CRow className="p-5">
+ <CCol className="mb-5 mb-lg-0" lg={3}>
+ <img src={CoreUISignetImg} alt="" width="44" height="48" />
+ <div className="small text-body-secondary mt-3">
+ Building elegant UI components to improve the world.
+ </div>
+ </CCol>
+ <CCol xs={6} md={3} lg={{ span: 2, offset: 1 }}>
+ <h3 className="fs-6 fw-semibold mb-3">Company</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">About us</li>
+ <li className="py-1">Careers</li>
+ <li className="py-1">Commerce</li>
+ <li className="py-1">Contact</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Product</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Support</li>
+ <li className="py-1">Download</li>
+ <li className="py-1">Pricing</li>
+ <li className="py-1">Documentation</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Services</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Support</li>
+ <li className="py-1">Download</li>
+ <li className="py-1">Pricing</li>
+ <li className="py-1">Documentation</li>
+ </ul>
+ </CCol>
+ <CCol xs={6} md={3} lg={2}>
+ <h3 className="fs-6 fw-semibold mb-3">Legal</h3>
+ <ul className="list-unstyled text-body-secondary">
+ <li className="py-1">Cookies</li>
+ <li className="py-1">Privacy</li>
+ <li className="py-1">Terms</li>
+ <li className="py-1">Licenses</li>
+ </ul>
+ </CCol>
+ </CRow>
+ <div className="d-flex align-items-center bg-body-tertiary py-4 px-5">
+ <div className="me-auto">
+ <h3 className="fs-6 fw-semibold">Join our newsletter</h3>
+ <div className="small text-body-secondary">
+ Get the most recent news, articles, and resources delivered to your inbox every week.
+ </div>
+ </div>
+ <CForm className="row g-3">
+ <CCol xs="auto">
+ <CFormInput
+ type="email"
+ id="newsletter"
+ placeholder="Enter your email"
+ aria-describedby="exampleFormControlInputHelpInline"
+ />
+ </CCol>
+ <CCol xs="auto">
+ <CButton color="primary" type="submit">
+ Subscribe
+ </CButton>
+ </CCol>
+ </CForm>
+ </div>
+ <div className="d-flex flex-wrap align-items-center gap-3 text-body-secondary py-4 px-5">
+ <div className="small me-auto">
+ © {new Date().getFullYear()} Your Company, Inc. All rights reserved.
+ </div>
+ <div className="d-flex gap-3">
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibFacebookF} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibInstagram} size="lg" />
+ </a>
+
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibGithub} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibYoutube} size="lg" />
+ </a>
+ <a href="#" className="link-secondary">
+ <CIcon icon={cibLinkedin} size="lg" />
+ </a>
+ </div>
+ </div>
+ </div>
+ )
+}
diff --git a/packages/docs/content/blocks/paginations.mdx b/packages/docs/content/blocks/paginations.mdx
new file mode 100644
index 00000000..76aeee84
--- /dev/null
+++ b/packages/docs/content/blocks/paginations.mdx
@@ -0,0 +1,13 @@
+---
+title: CoreUI React Pagination
+name: Pagination
+description: Use these CoreUI pagination components to add page navigation controls to your application's resource pages, featuring page numbers, next/previous buttons, and ellipses for handling large amounts of pages. These components are built with CoreUI and CoreUI UI React Components, and include a variety of different styles and layouts to fit your needs.
+full_width: true
+---
+
+import { default as FreePagination1 } from './paginations/FreePagination1.tsx'
+import { default as FreePagination1Src } from '!raw-loader!./paginations/FreePagination1.tsx'
+
+<Block className="bg-body-tertiary" code={FreePagination1Src} title="Card footer with pagination">
+ <FreePagination1 />
+</Block>
diff --git a/packages/docs/content/blocks/paginations/FreePagination1.tsx b/packages/docs/content/blocks/paginations/FreePagination1.tsx
new file mode 100644
index 00000000..5905d040
--- /dev/null
+++ b/packages/docs/content/blocks/paginations/FreePagination1.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import {
+ CCard,
+ CCardFooter,
+ CListGroup,
+ CListGroupItem,
+ CPagination,
+ CPaginationItem,
+} from '@coreui/react'
+
+export default function FreePagination1() {
+ return (
+ <CCard className="mx-auto" style={{ maxWidth: '50rem' }}>
+ <CListGroup flush className="opacity-25">
+ <CListGroupItem>1. Cras justo odio</CListGroupItem>
+ <CListGroupItem>2. Dapibus ac facilisis in</CListGroupItem>
+ <CListGroupItem>...</CListGroupItem>
+ <CListGroupItem>...</CListGroupItem>
+ <CListGroupItem>...</CListGroupItem>
+ <CListGroupItem>10. Vestibulum at eros</CListGroupItem>
+ </CListGroup>
+ <CCardFooter className="d-flex align-items-center">
+ <div className="small text-secondary me-auto">Showing 1 to 10 of 200 results</div>
+ <CPagination className="mb-0" aria-label="Page navigation example">
+ <CPaginationItem aria-label="Previous">
+ <span aria-hidden="true">«</span>
+ </CPaginationItem>
+ <CPaginationItem>1</CPaginationItem>
+ <CPaginationItem>2</CPaginationItem>
+ <CPaginationItem>3</CPaginationItem>
+ <CPaginationItem>...</CPaginationItem>
+ <CPaginationItem>18</CPaginationItem>
+ <CPaginationItem>19</CPaginationItem>
+ <CPaginationItem>20</CPaginationItem>
+ <CPaginationItem aria-label="Next">
+ <span aria-hidden="true">»</span>
+ </CPaginationItem>
+ </CPagination>
+ </CCardFooter>
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/blocks/stats.mdx b/packages/docs/content/blocks/stats.mdx
new file mode 100644
index 00000000..422bc104
--- /dev/null
+++ b/packages/docs/content/blocks/stats.mdx
@@ -0,0 +1,34 @@
+---
+title: CoreUI React Stats
+name: Stats
+description: Use these CoreUI stats components to display key metrics and data insights on your application's dashboard. Featuring various layouts and styles, these components help you present statistics, progress indicators, and performance summaries effectively. Built with CoreUI and CoreUI UI React Components, these stats modules are designed to seamlessly integrate with your application’s interface.
+full_width: true
+---
+
+import { default as Stats1 } from './stats/FreeStats1.tsx'
+import { default as Stats1Src } from '!raw-loader!./stats/FreeStats1.tsx'
+
+<Block className="p-5 bg-body-tertiary" code={Stats1Src} title="Primary card with data and chart">
+ <Stats1 />
+</Block>
+
+import { default as Stats2 } from './stats/FreeStats2.tsx'
+import { default as Stats2Src } from '!raw-loader!./stats/FreeStats2.tsx'
+
+<Block className="p-5 bg-body-tertiary" code={Stats2Src} title="Info card with data and chart">
+ <Stats2 />
+</Block>
+
+import { default as Stats3 } from './stats/FreeStats3.tsx'
+import { default as Stats3Src } from '!raw-loader!./stats/FreeStats3.tsx'
+
+<Block className="p-5 bg-body-tertiary" code={Stats3Src} title="Warning card with data and chart">
+ <Stats3 />
+</Block>
+
+import { default as Stats4 } from './stats/FreeStats4.tsx'
+import { default as Stats4Src } from '!raw-loader!./stats/FreeStats4.tsx'
+
+<Block className="p-5 bg-body-tertiary" code={Stats4Src} title="Danger card with data and chart">
+ <Stats4 />
+</Block>
diff --git a/packages/docs/content/blocks/stats/FreeStats1.tsx b/packages/docs/content/blocks/stats/FreeStats1.tsx
new file mode 100644
index 00000000..8c05bb80
--- /dev/null
+++ b/packages/docs/content/blocks/stats/FreeStats1.tsx
@@ -0,0 +1,99 @@
+import React from 'react'
+import CIcon from '@coreui/icons-react'
+import { cilArrowTop, cilOptions } from '@coreui/icons'
+import { CChartLine } from '@coreui/react-chartjs'
+
+import {
+ CCard,
+ CCardBody,
+ CDropdown,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react/src/index'
+
+export default function FreeStats1() {
+ return (
+ <CCard className="mx-auto" color="primary" textColor="white" style={{ maxWidth: '24rem' }}>
+ <CCardBody className="pb-0 d-flex justify-content-between align-items-start">
+ <div>
+ <span className="fs-4 fw-semibold">$9.000</span>
+ <span className="fs-6 ms-2">
+ (40.9% <CIcon icon={cilArrowTop} />)
+ </span>
+ <div>Widget title</div>
+ </div>
+ <CDropdown alignment="end">
+ <CDropdownToggle color="transparent" caret={false} className="p-0">
+ <CIcon icon={cilOptions} className="text-white" />
+ </CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem>Action</CDropdownItem>
+ <CDropdownItem>Another action</CDropdownItem>
+ <CDropdownItem>Something else here...</CDropdownItem>
+ <CDropdownItem disabled>Disabled action</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </CCardBody>
+ <CChartLine
+ className="mt-3 mx-3"
+ style={{ height: '70px' }}
+ data={{
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [
+ {
+ label: 'My First dataset',
+ backgroundColor: 'transparent',
+ borderColor: 'rgba(255,255,255,.55)',
+ pointBackgroundColor: '#5856d6',
+ data: [65, 59, 84, 84, 51, 55, 40],
+ },
+ ],
+ }}
+ options={{
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ maintainAspectRatio: false,
+ scales: {
+ x: {
+ border: {
+ display: false,
+ },
+ grid: {
+ display: false,
+ },
+ ticks: {
+ display: false,
+ },
+ },
+ y: {
+ min: 30,
+ max: 89,
+ display: false,
+ grid: {
+ display: false,
+ },
+ ticks: {
+ display: false,
+ },
+ },
+ },
+ elements: {
+ line: {
+ borderWidth: 1,
+ tension: 0.4,
+ },
+ point: {
+ radius: 4,
+ hitRadius: 10,
+ hoverRadius: 4,
+ },
+ },
+ }}
+ />
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/blocks/stats/FreeStats2.tsx b/packages/docs/content/blocks/stats/FreeStats2.tsx
new file mode 100644
index 00000000..c9674ceb
--- /dev/null
+++ b/packages/docs/content/blocks/stats/FreeStats2.tsx
@@ -0,0 +1,98 @@
+import React from 'react'
+import CIcon from '@coreui/icons-react'
+import { cilArrowTop, cilOptions } from '@coreui/icons'
+import { CChartLine } from '@coreui/react-chartjs'
+
+import {
+ CCard,
+ CCardBody,
+ CDropdown,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react/src/index'
+
+export default function FreeStats2() {
+ return (
+ <CCard className="mx-auto" color="info" textColor="white" style={{ maxWidth: '24rem' }}>
+ <CCardBody className="pb-0 d-flex justify-content-between align-items-start">
+ <div>
+ <span className="fs-4 fw-semibold">$9.000</span>
+ <span className="fs-6 ms-2">
+ (40.9% <CIcon icon={cilArrowTop} />)
+ </span>
+ <div>Widget title</div>
+ </div>
+ <CDropdown alignment="end">
+ <CDropdownToggle color="transparent" caret={false} className="p-0">
+ <CIcon icon={cilOptions} className="text-white" />
+ </CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem>Action</CDropdownItem>
+ <CDropdownItem>Another action</CDropdownItem>
+ <CDropdownItem>Something else here...</CDropdownItem>
+ <CDropdownItem disabled>Disabled action</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </CCardBody>
+ <CChartLine
+ className="mt-3 mx-3"
+ style={{ height: '70px' }}
+ data={{
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [
+ {
+ label: 'My First dataset',
+ backgroundColor: 'transparent',
+ borderColor: 'rgba(255,255,255,.55)',
+ pointBackgroundColor: '#39f',
+ data: [1, 18, 9, 17, 34, 22, 11],
+ },
+ ],
+ }}
+ options={{
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ maintainAspectRatio: false,
+ scales: {
+ x: {
+ border: {
+ display: false,
+ },
+ grid: {
+ display: false,
+ },
+ ticks: {
+ display: false,
+ },
+ },
+ y: {
+ min: -9,
+ max: 39,
+ display: false,
+ grid: {
+ display: false,
+ },
+ ticks: {
+ display: false,
+ },
+ },
+ },
+ elements: {
+ line: {
+ borderWidth: 1,
+ },
+ point: {
+ radius: 4,
+ hitRadius: 10,
+ hoverRadius: 4,
+ },
+ },
+ }}
+ />
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/blocks/stats/FreeStats3.tsx b/packages/docs/content/blocks/stats/FreeStats3.tsx
new file mode 100644
index 00000000..7bd87cb9
--- /dev/null
+++ b/packages/docs/content/blocks/stats/FreeStats3.tsx
@@ -0,0 +1,83 @@
+import React from 'react'
+import CIcon from '@coreui/icons-react'
+import { cilArrowTop, cilOptions } from '@coreui/icons'
+import { CChartLine } from '@coreui/react-chartjs'
+
+import {
+ CCard,
+ CCardBody,
+ CDropdown,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react/src/index'
+
+export default function FreeStats3() {
+ return (
+ <CCard className="mx-auto" color="warning" textColor="white" style={{ maxWidth: '24rem' }}>
+ <CCardBody className="pb-0 d-flex justify-content-between align-items-start">
+ <div>
+ <span className="fs-4 fw-semibold">$9.000</span>
+ <span className="fs-6 ms-2">
+ (40.9% <CIcon icon={cilArrowTop} />)
+ </span>
+ <div>Widget title</div>
+ </div>
+ <CDropdown alignment="end">
+ <CDropdownToggle color="transparent" caret={false} className="p-0">
+ <CIcon icon={cilOptions} className="text-white" />
+ </CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem>Action</CDropdownItem>
+ <CDropdownItem>Another action</CDropdownItem>
+ <CDropdownItem>Something else here...</CDropdownItem>
+ <CDropdownItem disabled>Disabled action</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </CCardBody>
+ <CChartLine
+ className="mt-3"
+ style={{ height: '70px' }}
+ data={{
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [
+ {
+ label: 'My First dataset',
+ backgroundColor: 'rgba(255,255,255,.2)',
+ borderColor: 'rgba(255,255,255,.55)',
+ data: [78, 81, 80, 45, 34, 12, 40],
+ fill: true,
+ },
+ ],
+ }}
+ options={{
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ maintainAspectRatio: false,
+ scales: {
+ x: {
+ display: false,
+ },
+ y: {
+ display: false,
+ },
+ },
+ elements: {
+ line: {
+ borderWidth: 2,
+ tension: 0.4,
+ },
+ point: {
+ radius: 0,
+ hitRadius: 10,
+ hoverRadius: 4,
+ },
+ },
+ }}
+ />
+ </CCard>
+ )
+}
diff --git a/packages/docs/content/blocks/stats/FreeStats4.tsx b/packages/docs/content/blocks/stats/FreeStats4.tsx
new file mode 100644
index 00000000..6352bbcf
--- /dev/null
+++ b/packages/docs/content/blocks/stats/FreeStats4.tsx
@@ -0,0 +1,105 @@
+import React from 'react'
+import CIcon from '@coreui/icons-react'
+import { cilArrowTop, cilOptions } from '@coreui/icons'
+import { CChartBar } from '@coreui/react-chartjs'
+
+import {
+ CCard,
+ CCardBody,
+ CDropdown,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+} from '@coreui/react/src/index'
+
+export default function FreeStats4() {
+ return (
+ <CCard className="mx-auto" color="danger" textColor="white" style={{ maxWidth: '24rem' }}>
+ <CCardBody className="pb-0 d-flex justify-content-between align-items-start">
+ <div>
+ <span className="fs-4 fw-semibold">$9.000</span>
+ <span className="fs-6 ms-2">
+ (40.9% <CIcon icon={cilArrowTop} />)
+ </span>
+ <div>Widget title</div>
+ </div>
+ <CDropdown alignment="end">
+ <CDropdownToggle color="transparent" caret={false} className="p-0">
+ <CIcon icon={cilOptions} className="text-white" />
+ </CDropdownToggle>
+ <CDropdownMenu>
+ <CDropdownItem>Action</CDropdownItem>
+ <CDropdownItem>Another action</CDropdownItem>
+ <CDropdownItem>Something else here...</CDropdownItem>
+ <CDropdownItem disabled>Disabled action</CDropdownItem>
+ </CDropdownMenu>
+ </CDropdown>
+ </CCardBody>
+ <CChartBar
+ className="mt-3 mx-3"
+ style={{ height: '70px' }}
+ data={{
+ labels: [
+ 'January',
+ 'February',
+ 'March',
+ 'April',
+ 'May',
+ 'June',
+ 'July',
+ 'August',
+ 'September',
+ 'October',
+ 'November',
+ 'December',
+ 'January',
+ 'February',
+ 'March',
+ 'April',
+ ],
+ datasets: [
+ {
+ label: 'My First dataset',
+ backgroundColor: 'rgba(255,255,255,.2)',
+ borderColor: 'rgba(255,255,255,.55)',
+ data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
+ barPercentage: 0.6,
+ },
+ ],
+ }}
+ options={{
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ scales: {
+ x: {
+ grid: {
+ display: false,
+ drawTicks: false,
+ },
+ ticks: {
+ display: false,
+ },
+ },
+ y: {
+ border: {
+ display: false,
+ },
+ grid: {
+ display: false,
+ drawBorder: false,
+ drawTicks: false,
+ },
+ ticks: {
+ display: false,
+ },
+ },
+ },
+ }}
+ />
+ </CCard>
+ )
+}
diff --git a/packages/docs/src/components/Banner.tsx b/packages/docs/src/components/Banner.tsx
index 4d0fc3a0..b67776df 100644
--- a/packages/docs/src/components/Banner.tsx
+++ b/packages/docs/src/components/Banner.tsx
@@ -11,7 +11,9 @@ const Banner: FC<BannerProps> = ({ pro }) => {
<h3 className="mb-4">CoreUI PRO Component</h3>
<p>
To use this component you must have a CoreUI PRO license. Buy the{' '}
- <a href="https://coreui.io/pricing/?framework=react&docs=coreui-banner-pro">CoreUI PRO</a>{' '}
+ <a href="https://coreui.io/pricing/?framework=react&src=react-docs&cta=coreui-banner-pro">
+ CoreUI PRO
+ </a>{' '}
and get access to all PRO components, features, templates, and dedicated support.
</p>
</div>
@@ -27,7 +29,7 @@ const Banner: FC<BannerProps> = ({ pro }) => {
<ul>
<li>
Buy the{' '}
- <CLink href="https://coreui.io/pricing/?framework=react&docs=coreui-banner-free">
+ <CLink href="https://coreui.io/pricing/?framework=react&src=react-docs&cta=coreui-banner-free">
CoreUI PRO
</CLink>
, and get access to PRO components, and dedicated support.
diff --git a/packages/docs/src/components/Block.tsx b/packages/docs/src/components/Block.tsx
new file mode 100644
index 00000000..77880aa7
--- /dev/null
+++ b/packages/docs/src/components/Block.tsx
@@ -0,0 +1,99 @@
+import React, { FC, ReactNode } from 'react'
+import { Highlight } from 'prism-react-renderer'
+import { cilClone, cilCode, cilMediaPlay } from '@coreui/icons'
+import CIcon from '@coreui/icons-react'
+import { CTab, CTabContent, CTabList, CTabPanel, CTabs, CTooltip } from '@coreui/react/src/index'
+
+interface BlockProps {
+ children: ReactNode
+ className?: string
+ code?: string
+ pro?: boolean
+ title?: string
+}
+
+const Block: FC<BlockProps> = ({ children, className, code, pro, title, ...rest }) => {
+ return pro ? (
+ <>
+ <div className="d-flex align-items-baseline">
+ <h2 className="fs-5 mb-4 me-auto">{title}</h2>
+ <a
+ className="link-primary link-underline link-underline-opacity-0 fw-semibold"
+ href="https://coreui.io/pricing/?framework=react&src=react-docs&cta=blocks"
+ >
+ Get the code →
+ </a>
+ </div>
+ <div
+ className={`docs-block mb-5 ${className} ${className && className.includes('p-') ? '' : 'p-3'}`}
+ {...rest}
+ >
+ {children}
+ </div>
+ </>
+ ) : (
+ <CTabs activeItemKey="preview" className="mb-5">
+ <div className="d-flex align-items-baseline mb-3">
+ <h2 className="fs-5 me-auto">{title}</h2>
+ <div className="actions d-flex flex-nowrap">
+ <CTabList className="tabs-blocks flex-nowrap">
+ <CTab className="flex-nowrap" itemKey="preview">
+ <CIcon icon={cilMediaPlay} className="me-2" /> Preview
+ </CTab>
+ <CTab className="flex-nowrap" itemKey="code">
+ <CIcon icon={cilCode} className="me-2" />
+ Code
+ </CTab>
+ </CTabList>
+ <div
+ className="d-flex vr mx-4 my-auto text-body text-opacity-75"
+ style={{ height: '1.5rem' }}
+ ></div>
+ <CTooltip content="Copied!" placement="top" trigger={['click', 'focus']}>
+ <button
+ className="btn-clipboard"
+ onClick={() => {
+ code && navigator.clipboard.writeText(code)
+ }}
+ >
+ <CIcon icon={cilClone} />
+ </button>
+ </CTooltip>
+ </div>
+ </div>
+ <CTabContent>
+ <CTabPanel itemKey="preview">
+ <div
+ className={`docs-block ${className} ${className && className.includes('p-') ? '' : 'p-3'}`}
+ {...rest}
+ >
+ {children}
+ </div>
+ </CTabPanel>
+ {code && (
+ <CTabPanel itemKey="code">
+ <div className="highlight blocks">
+ <Highlight code={code?.trim()} language="tsx" theme={{ plain: {}, styles: [] }}>
+ {({ className, style, tokens, getLineProps, getTokenProps }) => (
+ <pre className={className} style={{ ...style }}>
+ {tokens.map((line, i) => (
+ <div key={i} {...getLineProps({ line, key: i })}>
+ {line.map((token, key) => (
+ <span key={key} {...getTokenProps({ token, key })} />
+ ))}
+ </div>
+ ))}
+ </pre>
+ )}
+ </Highlight>
+ </div>
+ </CTabPanel>
+ )}
+ </CTabContent>
+ </CTabs>
+ )
+}
+
+Block.displayName = 'Block'
+
+export default Block
diff --git a/packages/docs/src/components/Footer.tsx b/packages/docs/src/components/Footer.tsx
index 0533513f..a11b7d97 100644
--- a/packages/docs/src/components/Footer.tsx
+++ b/packages/docs/src/components/Footer.tsx
@@ -43,7 +43,10 @@ const Footer: FC = () => {
.{' '}
<strong>
CoreUI PRO requires a{' '}
- <a href="https://coreui.io/pricing/?framework=react&docs=footer">commercial license</a>.
+ <a href="https://coreui.io/pricing/?framework=react&src=react-docs&cta=footer">
+ commercial license
+ </a>
+ .
</strong>
</p>
</CContainer>
diff --git a/packages/docs/src/components/Header.tsx b/packages/docs/src/components/Header.tsx
index 8edc0938..4b14b6d7 100644
--- a/packages/docs/src/components/Header.tsx
+++ b/packages/docs/src/components/Header.tsx
@@ -127,7 +127,7 @@ const Header: FC = () => {
<CButton
className="d-lg-inline-block my-2 my-md-0 ms-md-3"
color="primary"
- href="https://coreui.io/pricing/?framework=react&docs=coreui-header-button"
+ href="https://coreui.io/pricing/?framework=react&src=react-docs&cta=coreui-header-button"
>
Get CoreUI PRO
</CButton>
diff --git a/packages/docs/src/components/index.ts b/packages/docs/src/components/index.ts
index fe8398f8..0603969e 100644
--- a/packages/docs/src/components/index.ts
+++ b/packages/docs/src/components/index.ts
@@ -1,5 +1,6 @@
import Ads from './Ads'
import Banner from './Banner'
+import Block from './Block'
import Callout from './Callout'
import CodeBlock from './CodeBlock'
import Example from './Example'
@@ -14,6 +15,7 @@ import Toc from './Toc'
export {
Ads,
Banner,
+ Block,
Callout,
CodeBlock,
Example,
diff --git a/packages/docs/src/nav.tsx b/packages/docs/src/nav.tsx
index 6aebda1d..41115706 100644
--- a/packages/docs/src/nav.tsx
+++ b/packages/docs/src/nav.tsx
@@ -315,6 +315,35 @@ const nav = [
},
],
},
+ {
+ name: 'Blocks',
+ to: '/blocks/',
+ icon: (
+ <CIcon
+ customClassName="nav-icon text-primary"
+ icon={[
+ '512 512',
+ "<path fill='var(--ci-primary-color, currentColor)' d='M16,496H200V312H16ZM48,344H168V464H48Z' class='ci-primary'/><path fill='var(--ci-primary-color, currentColor)' d='M16,248H200V64H16ZM48,96H168V216H48Z' class='ci-primary'/><path fill='var(--ci-primary-color, currentColor)' d='M272,496H456V312H272Zm32-152H424V464H304Z' class='ci-primary'/><path fill='var(--ci-primary-color, currentColor)' d='M493.588,156.52,363.48,26.411,233.373,156.52,363.48,286.628ZM363.48,71.667l84.853,84.853L363.48,241.372,278.627,156.52Z' class='ci-primary'/>",
+ ]}
+ width={64}
+ height={64}
+ />
+ ),
+ items: [
+ {
+ name: 'Footers',
+ to: '/blocks/footers/',
+ },
+ {
+ name: 'Paginations',
+ to: '/blocks/paginations/',
+ },
+ {
+ name: 'Stats',
+ to: '/blocks/stats/',
+ },
+ ],
+ },
{
name: 'Templates',
to: '/templates/',
diff --git a/packages/docs/src/styles/_block.scss b/packages/docs/src/styles/_block.scss
new file mode 100644
index 00000000..e3231079
--- /dev/null
+++ b/packages/docs/src/styles/_block.scss
@@ -0,0 +1,47 @@
+.docs-block {
+ border: 1px solid var(--#{$prefix}border-color);
+ @include border-radius(var(--#{$prefix}border-radius));
+}
+
+.tabs-blocks {
+ display: inline-flex;
+ flex-wrap: nowrap;
+ background-color: var(--#{$prefix}secondary-bg);
+ padding: .125rem;
+ border-radius: var(--#{$prefix}border-radius);
+ gap: .125rem;
+
+ .nav-link {
+ padding: .375rem .75rem;
+ color: var(--#{$prefix}body-color);
+ white-space: nowrap;
+
+ &.active .icon {
+ color: var(--#{$prefix}primary);
+ }
+
+ &.active,
+ &:hover {
+ background-color: var(--#{$prefix}body-bg);
+ border-radius: var(--#{$prefix}border-radius-sm);
+ }
+ }
+}
+
+.btn-clipboard {
+ display: block;
+ padding: 0;
+ line-height: 1;
+ color: var(--cui-body-color);
+ background-color: transparent;
+ border: 0;
+ @include border-radius(.25rem);
+
+ &:hover {
+ color: var(--#{$prefix}primary);
+ }
+}
+
+.highlight.blocks pre {
+ max-height: initial !important;
+}
diff --git a/packages/docs/src/styles/_layout.scss b/packages/docs/src/styles/_layout.scss
index 2ee63995..85712dd0 100644
--- a/packages/docs/src/styles/_layout.scss
+++ b/packages/docs/src/styles/_layout.scss
@@ -40,6 +40,26 @@
}
}
+.docs-main-full-width {
+ grid-area: main;
+
+ @include media-breakpoint-up(md) {
+ display: grid;
+ grid-template-areas:
+ "intro"
+ "content";
+ grid-template-rows: auto 1fr;
+ gap: $grid-gutter-width;
+ }
+
+ @include media-breakpoint-up(lg) {
+ grid-template-areas:
+ "intro"
+ "content";
+ grid-template-rows: auto 1fr;
+ }
+}
+
.docs-intro {
grid-area: intro;
}
diff --git a/packages/docs/src/styles/styles.scss b/packages/docs/src/styles/styles.scss
index d90d130a..94bfab00 100644
--- a/packages/docs/src/styles/styles.scss
+++ b/packages/docs/src/styles/styles.scss
@@ -6,6 +6,7 @@
@import "variables";
@import "ads";
@import "anchor";
+@import "block";
@import "callouts";
@import "component-examples";
@import "footer";
diff --git a/packages/docs/src/templates/DocsLayout.tsx b/packages/docs/src/templates/DocsLayout.tsx
index f0c53da6..ed7414eb 100644
--- a/packages/docs/src/templates/DocsLayout.tsx
+++ b/packages/docs/src/templates/DocsLayout.tsx
@@ -1,4 +1,5 @@
import React, { FC } from 'react'
+import classNames from 'classnames'
import { Ads, Banner, Seo, Toc } from '../components'
import { CContainer } from '@coreui/react/src/'
@@ -24,6 +25,7 @@ const humanize = (text: string) => {
const DocsLayout: FC<DocsLayoutProps> = ({ children, data, pageContext }) => {
const title = pageContext.frontmatter ? pageContext.frontmatter.title : ''
const description = pageContext.frontmatter ? pageContext.frontmatter.description : ''
+ const full_width = pageContext.frontmatter ? pageContext.frontmatter.full_width : false
const name = pageContext.frontmatter ? pageContext.frontmatter.name : ''
const other_frameworks = pageContext.frontmatter ? pageContext.frontmatter.other_frameworks : ''
const pro_component = pageContext.frontmatter ? pageContext.frontmatter.pro_component : ''
@@ -35,7 +37,15 @@ const DocsLayout: FC<DocsLayoutProps> = ({ children, data, pageContext }) => {
<>
<Seo title={title} description={description} name={name} />
<CContainer lg className="my-md-4 flex-grow-1">
- <main className="docs-main order-1">
+ <main
+ className={classNames(
+ {
+ 'docs-main': !full_width,
+ 'docs-main-full-width': full_width,
+ },
+ 'order-1',
+ )}
+ >
<div className="docs-intro ps-lg-4">
<Banner pro={pro_component} />
{name && name !== title ? (
@@ -80,7 +90,9 @@ const DocsLayout: FC<DocsLayoutProps> = ({ children, data, pageContext }) => {
</>
)}
</div>
- {data && data.mdx && <Toc items={data.mdx.tableOfContents.items} />}
+ {data && data.mdx && data.mdx.tableOfContents.items && (
+ <Toc items={data.mdx.tableOfContents.items} />
+ )}
<div className="docs-content ps-lg-4">{children}</div>
</main>
</CContainer>
diff --git a/packages/docs/src/templates/MdxLayout.tsx b/packages/docs/src/templates/MdxLayout.tsx
index cfe62f86..bf001726 100644
--- a/packages/docs/src/templates/MdxLayout.tsx
+++ b/packages/docs/src/templates/MdxLayout.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react'
import { graphql } from 'gatsby'
import { MDXProvider } from '@mdx-js/react'
import { CBadge, CTable } from '@coreui/react/src/index'
-import { Callout, CodeBlock, Example, ScssDocs } from '../components'
+import { Block, Callout, CodeBlock, Example, ScssDocs } from '../components'
interface MdxLayoutProps {
data: any // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -48,6 +48,11 @@ const MdxLayout: FC<MdxLayoutProps> = ({ children }) => {
)
},
// eslint-disable-next-line @typescript-eslint/no-explicit-any
+ Block: (props: any) => {
+ const { children, ...rest } = props
+ return <Block {...rest}>{children}</Block>
+ },
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
Callout: (props: any) => {
const { children, title, ...rest } = props
return (