From 05cbb82601a702700ff61781fdd22eb64a7854a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= <lukasz@holeczek.pl>
Date: Mon, 24 May 2021 17:18:05 +0200
Subject: [PATCH] refactor: update examples

---
 src/reusable/DocsCallout.js | 35 +++++++++++++++++++++++++++++++++++
 src/reusable/Example.js     |  6 +++++-
 src/reusable/index.js       |  3 ++-
 3 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 src/reusable/DocsCallout.js

diff --git a/src/reusable/DocsCallout.js b/src/reusable/DocsCallout.js
new file mode 100644
index 0000000..63146a5
--- /dev/null
+++ b/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)
diff --git a/src/reusable/Example.js b/src/reusable/Example.js
index 1795893..789d500 100644
--- a/src/reusable/Example.js
+++ b/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>
diff --git a/src/reusable/index.js b/src/reusable/index.js
index 6afd13b..098eab5 100644
--- a/src/reusable/index.js
+++ b/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 }