docs: update links to documentation

Author: mrholek

src/assets/images/components.webp

@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import ComponentsImg from 'src/assets/images/components.webp'
+
+const DocsComponents = (props) => (
+  <div className="bg-primary bg-opacity-10 border border-2 border-primary rounded mb-4">
+    <div className="row d-flex align-items-center p-3 px-xl-4 flex-xl-nowrap">
+      <div className="col-xl-auto col-12 d-none d-xl-block p-0">
+        <img
+          className="img-fluid"
+          src={ComponentsImg}
+          width="160px"
+          height="160px"
+          alt="CoreUI PRO hexagon"
+        />
+      </div>
+      <div className="col-md col-12 px-lg-4">
+        Our Admin Panel isn’t just a mix of third-party components. It’s{' '}
+        <strong>
+          the only open-source React dashboard built on a professional, enterprise-grade UI
+          Components Library
+        </strong>
+        . This component is part of this library, and we present only the basic usage of it here. To
+        explore extended examples, detailed API documentation, and customization options, refer to
+        our docs.
+      </div>
+      <div className="col-md-auto col-12 mt-3 mt-lg-0">
+        <a
+          className="btn btn-primary text-nowrap text-white"
+          href={`https://coreui.io/react/docs/${props.href}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Explore Documentation
+        </a>
+      </div>
+    </div>
+  </div>
+)
+
+DocsComponents.propTypes = {
+  href: PropTypes.string,
+}
+
+export default DocsComponents

src/assets/images/icons.webp

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import IconsImg from 'src/assets/images/icons.webp'
+
+const DocsIcons = () => (
+  <div className="bg-warning bg-opacity-10 border border-2 border-warning rounded mb-4">
+    <div className="row d-flex align-items-center p-3 px-xl-4 flex-xl-nowrap">
+      <div className="col-xl-auto col-12 d-none d-xl-block p-0">
+        <img className="img-fluid" src={IconsImg} width="160px" height="160px" alt="CoreUI Icons" />
+      </div>
+      <div className="col-md col-12 px-lg-4">
+        CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG,
+        and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You
+        can use them in your digital products for web or mobile app. For more information please
+        visit our documentation.
+      </div>
+      <div className="col-md-auto col-12 mt-3 mt-lg-0">
+        <a
+          className="btn btn-warning text-nowrap text-white"
+          href="https://coreui.io/react/docs/components/icon/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Explore Documentation
+        </a>
+      </div>
+    </div>
+  </div>
+)
+
+export default DocsIcons

src/components/DocsCallout.js

@@ -4,7 +4,8 @@ import AppFooter from './AppFooter'
 import AppHeader from './AppHeader'
 import AppHeaderDropdown from './header/AppHeaderDropdown'
 import AppSidebar from './AppSidebar'
-import DocsCallout from './DocsCallout'
+import DocsComponents from './DocsComponents'
+import DocsIcons from './DocsIcons'
 import DocsLink from './DocsLink'
 import DocsExample from './DocsExample'
 
@@ -15,7 +16,8 @@ export {
   AppHeader,
   AppHeaderDropdown,
   AppSidebar,
-  DocsCallout,
+  DocsComponents,
+  DocsIcons,
   DocsLink,
   DocsExample,
 }

src/components/DocsComponents.js

@@ -10,12 +10,13 @@ import {
   CAccordionHeader,
   CAccordionItem,
 } from '@coreui/react'
-import { DocsExample } from 'src/components'
+import { DocsComponents, DocsExample } from 'src/components'
 
 const Accordion = () => {
   return (
     <CRow>
       <CCol xs={12}>
+        <DocsComponents href="components/accordion" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Accordion</strong>

src/components/DocsIcons.js

@@ -9,12 +9,13 @@ import {
   CRow,
   CLink,
 } from '@coreui/react'
-import { DocsExample } from 'src/components'
+import { DocsComponents, DocsExample } from 'src/components'
 
 const Breadcrumbs = () => {
   return (
     <CRow>
       <CCol xs={12}>
+        <DocsComponents href="components/breadcrumb" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Breadcrumb</strong>

src/components/index.js

@@ -19,14 +19,15 @@ import {
   CCol,
   CRow,
 } from '@coreui/react'
-import { DocsExample } from 'src/components'
+import { DocsComponents, DocsExample } from 'src/components'
 
 import ReactImg from 'src/assets/images/react.jpg'
 
 const Cards = () => {
   return (
     <CRow>
       <CCol xs={12}>
+        <DocsComponents href="components/card" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>Card</strong> <small>Example</small>

src/views/base/accordion/Accordion.js

@@ -9,7 +9,7 @@ import {
   CCol,
   CRow,
 } from '@coreui/react'
-import { DocsExample } from 'src/components'
+import { DocsComponents, DocsExample } from 'src/components'
 
 import AngularImg from 'src/assets/images/angular.jpg'
 import ReactImg from 'src/assets/images/react.jpg'
@@ -25,6 +25,7 @@ const Carousels = () => {
   return (
     <CRow>
       <CCol xs={12}>
+        <DocsComponents href="components/carousel" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>Carousel</strong> <small>Slide only</small>