refactor: update examples

src/reusable/DocsCallout.js

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { CCallout, CLink } from '@coreui/react'
+
+import packageJson from '../../package.json'
+
+const DocsCallout = (props) => {
+  const { href, name } = props
+
+  const plural = name.slice(-1) === 's' ? true : false
+
+  const _href = `https://coreui.io/react/docs/${packageJson.config.coreui_library_short_version}/${href}`
+
+  return (
+    <CCallout color="info" className="bg-white">
+      A React {name} component {plural ? 'have' : 'has'} been created as a native React.js version
+      of Bootstrap {name}. {name} {plural ? 'are' : 'is'} delivered with some new features,
+      variants, and unique design that matches CoreUI Design System requirements.
+      <br />
+      <br />
+      For more information please visit our official{' '}
+      <CLink href={_href} target="_blank">
+        documentation of CoreUI Components Library for React.js
+      </CLink>
+      .
+    </CCallout>
+  )
+}
+
+DocsCallout.propTypes = {
+  href: PropTypes.string,
+  name: PropTypes.string,
+}
+
+export default React.memo(DocsCallout)

src/reusable/Example.js

@@ -3,9 +3,13 @@ import React from 'react'
 import { CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
 
+import packageJson from '../../package.json'
+
 const Example = (props) => {
   const { children, href } = props
 
+  const _href = `https://coreui.io/react/docs/${packageJson.config.coreui_library_short_version}/${href}`
+
   return (
     <div className="example">
       <CNav variant="tabs">
@@ -16,7 +20,7 @@ const Example = (props) => {
           </CNavLink>
         </CNavItem>
         <CNavItem>
-          <CNavLink href={href} target="_blank">
+          <CNavLink href={_href} target="_blank">
             <CIcon name="cil-code" className="me-2" />
             Code
           </CNavLink>

src/reusable/index.js

@@ -1,4 +1,5 @@
+import DocsCallout from './DocsCallout'
 import DocsLink from './DocsLink'
 import Example from './Example'
 
-export { DocsLink, Example }
+export { DocsCallout, DocsLink, Example }