From a8de3d3d2c39f5daf65e4cc71db6886a9117b41f Mon Sep 17 00:00:00 2001 From: mrholek 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' + + + + + +import { default as Footer2 } from './footers/FreeFooter2.tsx' +import { default as Footer2Src } from '!raw-loader!./footers/FreeFooter2.tsx' + + + + + +import { default as Footer3 } from './footers/ProFooter1.tsx' +import { default as Footer3Src } from '!raw-loader!./footers/ProFooter1.tsx' + + + + + +import { default as Footer4 } from './footers/ProFooter2.tsx' +import { default as Footer4Src } from '!raw-loader!./footers/ProFooter2.tsx' + + + + 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 ( +
+ + + +
+ Building elegant UI components to improve the world. +
+ + +

Company

+
    +
  • About us
    • +
  • Careers
    • +
  • Commerce
    • +
  • Contact
    • +
+ + +

Product

+
    +
  • Support
    • +
  • Download
    • +
  • Pricing
    • +
  • Documentation
    • +
+ + +

Services

+
    +
  • Consulting
    • +
  • Analytics
    • +
  • Development
    • +
  • Design
    • +
+ + +

Legal

+
    +
  • Cookies
    • +
  • Privacy
    • +
  • Terms
    • +
  • Licenses
    • +
+ + +
+
+
+ © {new Date().getFullYear()} Your Company, Inc. All rights reserved. +
+
+ + + + + + + + + + + + + + + + +
+
+
+ ) +} 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 ( +
+ + + +
+ Building elegant UI components to improve the world. +
+ + +

Company

+
    +
  • About us
    • +
  • Careers
    • +
  • Commerce
    • +
  • Contact
    • +
+ + +

Product

+
    +
  • Support
    • +
  • Download
    • +
  • Pricing
    • +
  • Documentation
    • +
+ + +

Services

+
    +
  • Support
    • +
  • Download
    • +
  • Pricing
    • +
  • Documentation
    • +
+ + +

Legal

+
    +
  • Cookies
    • +
  • Privacy
    • +
  • Terms
    • +
  • Licenses
    • +
+ + +
+
+ © {new Date().getFullYear()} Your Company, Inc. All rights reserved. +
+
+ + + + + + + + + + + + + + + + +
+
+
+ ) +} 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 ( +
+ + + +
+ Building elegant UI components to improve the world. +
+ + +

Company

+
    +
  • About us
    • +
  • Careers
    • +
  • Commerce
    • +
  • Contact
    • +
+ + +

Product

+
    +
  • Support
    • +
  • Download
    • +
  • Pricing
    • +
  • Documentation
    • +
+ + +

Services

+
    +
  • Support
    • +
  • Download
    • +
  • Pricing
    • +
  • Documentation
    • +
+ + +

Legal

+
    +
  • Cookies
    • +
  • Privacy
    • +
  • Terms
    • +
  • Licenses
    • +
+ + +
+
+
+

Join our newsletter

+
+ Get the most recent news, articles, and resources delivered to your inbox every week. +
+
+ + + + + + + Subscribe + + + +
+
+
+
+ © {new Date().getFullYear()} Your Company, Inc. All rights reserved. +
+
+ + + + + + + + + + + + + + + + +
+
+
+ ) +} 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 ( +
+ + + +
+ Building elegant UI components to improve the world. +
+ + +

Company

+
    +
  • About us
    • +
  • Careers
    • +
  • Commerce
    • +
  • Contact
    • +
+ + +

Product

+
    +
  • Support
    • +
  • Download
    • +
  • Pricing
    • +
  • Documentation
    • +
+ + +

Services

+
    +
  • Support
    • +
  • Download
    • +
  • Pricing
    • +
  • Documentation
    • +
+ + +

Legal

+
    +
  • Cookies
    • +
  • Privacy
    • +
  • Terms
    • +
  • Licenses
    • +
+ + +
+
+

Join our newsletter

+
+ Get the most recent news, articles, and resources delivered to your inbox every week. +
+
+ + + + + + + Subscribe + + + +
+
+
+ © {new Date().getFullYear()} Your Company, Inc. All rights reserved. +
+
+ + + + + + + + + + + + + + + + +
+
+
+ ) +} 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' + + + + 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 ( + + + 1. Cras justo odio + 2. Dapibus ac facilisis in + ... + ... + ... + 10. Vestibulum at eros + + +
Showing 1 to 10 of 200 results
+ + + + + 1 + 2 + 3 + ... + 18 + 19 + 20 + + + + + + + ) +} 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' + + + + + +import { default as Stats2 } from './stats/FreeStats2.tsx' +import { default as Stats2Src } from '!raw-loader!./stats/FreeStats2.tsx' + + + + + +import { default as Stats3 } from './stats/FreeStats3.tsx' +import { default as Stats3Src } from '!raw-loader!./stats/FreeStats3.tsx' + + + + + +import { default as Stats4 } from './stats/FreeStats4.tsx' +import { default as Stats4Src } from '!raw-loader!./stats/FreeStats4.tsx' + + + + 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 ( + + +
+ $9.000 + + (40.9% ) + +
Widget title
+
+ + + + + + Action + Another action + Something else here... + Disabled action + + + + + + ) +} 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 ( + + +
+ $9.000 + + (40.9% ) + +
Widget title
+
+ + + + + + Action + Another action + Something else here... + Disabled action + + + + + + ) +} 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 ( + + +
+ $9.000 + + (40.9% ) + +
Widget title
+
+ + + + + + Action + Another action + Something else here... + Disabled action + + + + + + ) +} 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 ( + + +
+ $9.000 + + (40.9% ) + +
Widget title
+
+ + + + + + Action + Another action + Something else here... + Disabled action + + + + + + ) +} 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 = ({ pro }) => {

CoreUI PRO Component

To use this component you must have a CoreUI PRO license. Buy the{' '} - CoreUI PRO{' '} + + CoreUI PRO + {' '} and get access to all PRO components, features, templates, and dedicated support.

@@ -27,7 +29,7 @@ const Banner: FC = ({ pro }) => {
  • Buy the{' '} - + CoreUI PRO , 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 = ({ children, className, code, pro, title, ...rest }) => { + return pro ? ( + <> + +
    + {children} +
    + + ) : ( + +
    +

    {title}

    +
    + + + Preview + + + + Code + + +
    + + + +
    +
    + + +
    + {children} +
    +     + {code && ( + +
    + + {({ className, style, tokens, getLineProps, getTokenProps }) => ( + 
    +                    {tokens.map((line, i) => (
+                      
    
+                        {line.map((token, key) => (
+                          
+                        ))}
+                      
    
+                    ))}
+
    + )} +     +
    +     + )} +     +     + ) +} + +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 = () => { .{' '} CoreUI PRO requires a{' '} - commercial license. + + commercial license + + .

    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 = () => { Get CoreUI PRO 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: ( + ", + ]} + 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 = ({ 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 = ({ children, data, pageContext }) => { <> -
    +
    {name && name !== title ? ( @@ -80,7 +90,9 @@ const DocsLayout: FC = ({ children, data, pageContext }) => { )}
    - {data && data.mdx && } + {data && data.mdx && data.mdx.tableOfContents.items && ( + + )}
    {children}
    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 = ({ children }) => { ) }, // eslint-disable-next-line @typescript-eslint/no-explicit-any + Block: (props: any) => { + const { children, ...rest } = props + return {children} + }, + // eslint-disable-next-line @typescript-eslint/no-explicit-any Callout: (props: any) => { const { children, title, ...rest } = props return (