diff --git a/packages/docs/content/blocks/assets/images/brand/coreui-signet.svg b/packages/docs/content/blocks/assets/images/brand/coreui-signet.svg new file mode 100755 index 00000000..6c49210b --- /dev/null +++ b/packages/docs/content/blocks/assets/images/brand/coreui-signet.svg @@ -0,0 +1,11 @@ + + + + Untitled 3 + + + + + + + \ No newline at end of file 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..3cb609d5 --- /dev/null +++ b/packages/docs/content/blocks/footers/FreeFooter1.tsx @@ -0,0 +1,82 @@ +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() { + console.log(CoreUISignetImg) + 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..3d5c2c5d --- /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..3cc06ddf --- /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..440bc650 --- /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..4d836102 --- /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' + +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..2e5d723b --- /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' + +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..e5628d6e --- /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' + +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..a2bca4ad --- /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' + +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/assets/images/brand/coreui-react.svg b/packages/docs/src/assets/images/brand/coreui-react.svg new file mode 100755 index 00000000..00738947 --- /dev/null +++ b/packages/docs/src/assets/images/brand/coreui-react.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/docs/src/components/Block.tsx b/packages/docs/src/components/Block.tsx new file mode 100644 index 00000000..c07f3836 --- /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' + +interface BlockProps { + children: ReactNode + className?: string + code?: string + pro?: boolean + title?: string +} + +const Block: FC = ({ children, className, code, pro, title, ...rest }) => { + return pro ? ( + <> +
+

{title}

+ + Get the code → + +
+
+ {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 d5282cff..7dbdbc96 100644 --- a/packages/docs/src/components/Footer.tsx +++ b/packages/docs/src/components/Footer.tsx @@ -34,7 +34,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 9b13856d..ba39ffbd 100644 --- a/packages/docs/src/components/Header.tsx +++ b/packages/docs/src/components/Header.tsx @@ -137,7 +137,7 @@ const Header = forwardRef(({}, ref) => { Get CoreUI PRO diff --git a/packages/docs/src/components/index.ts b/packages/docs/src/components/index.ts index 3770af70..f08fd420 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 ClassNamesDocs from './ClassNamesDocs' @@ -18,6 +19,7 @@ import Toc from './Toc' export { Ads, Banner, + Block, Callout, CodeBlock, ClassNamesDocs, 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..a4e853bb --- /dev/null +++ b/packages/docs/src/styles/_block.scss @@ -0,0 +1,50 @@ +@use "@coreui/coreui/scss/mixins/border-radius" as *; +@use "@coreui/coreui/scss/variables" as *; + +.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/styles.scss b/packages/docs/src/styles/styles.scss index 40a7a1dd..d0b4c9f5 100644 --- a/packages/docs/src/styles/styles.scss +++ b/packages/docs/src/styles/styles.scss @@ -9,6 +9,7 @@ @forward "root"; @forward "ads"; @forward "anchor"; +@forward "block"; @forward "callouts"; @forward "component-examples"; @forward "component-sub-nav"; diff --git a/packages/docs/src/templates/MdxLayout.tsx b/packages/docs/src/templates/MdxLayout.tsx index 00aa6f11..a8895730 100644 --- a/packages/docs/src/templates/MdxLayout.tsx +++ b/packages/docs/src/templates/MdxLayout.tsx @@ -2,6 +2,7 @@ import React, { FC, useMemo } from 'react' import { graphql, PageProps } from 'gatsby' import { MDXProvider } from '@mdx-js/react' import { + Block, Callout, CodeBlock, ClassNamesDocs, @@ -50,6 +51,11 @@ interface Toc { const MdxLayout: FC> = ({ children }) => { const components = useMemo( () => ({ + // eslint-disable-next-line @typescript-eslint/no-explicit-any + Block: (props: any) => { + const { children, ...rest } = props + return {children} + }, Callout: (props: CalloutProps) => { const { children, title, ...rest } = props return ( @@ -83,7 +89,7 @@ const MdxLayout: FC> = ({ children }) => { ), }), - [], + [] ) return {children} }