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>

src/views/base/breadcrumbs/Breadcrumbs.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { CButton, CCard, CCardBody, CCardHeader, CCol, CCollapse, CRow } from '@coreui/react'
-import { DocsExample } from 'src/components'
+import { DocsComponents, DocsExample } from 'src/components'
 
 const Collapses = () => {
   const [visible, setVisible] = useState(false)
@@ -11,6 +11,7 @@ const Collapses = () => {
   return (
     <CRow>
       <CCol xs={12}>
+        <DocsComponents href="components/collapse" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Collapse</strong>

src/views/base/cards/Cards.js

@@ -10,12 +10,13 @@ import {
   CListGroupItem,
   CRow,
 } from '@coreui/react'
-import { DocsExample } from 'src/components'
+import { DocsComponents, DocsExample } from 'src/components'
 
 const ListGroups = () => {
   return (
     <CRow>
       <CCol xs={12}>
+        <DocsComponents href="components/list-group" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React List Group</strong> <small>Basic example</small>

src/views/base/carousels/Carousels.js

@@ -13,12 +13,13 @@ import {
   CNavItem,
   CNavLink,
 } from '@coreui/react'
-import { DocsExample } from 'src/components'
+import { DocsComponents, DocsExample } from 'src/components'
 
 const Navs = () => {
   return (
     <CRow>
       <CCol xs={12}>
+        <DocsComponents href="components/nav" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Navs</strong> <small>Base navs</small>

src/views/base/collapses/Collapses.js

@@ -8,12 +8,13 @@ import {
   CPaginationItem,
   CRow,
 } from '@coreui/react'
-import { DocsExample } from 'src/components'
+import { DocsComponents, DocsExample } from 'src/components'
 
 const Paginations = () => {
   return (
     <CRow>
       <CCol xs={12}>
+        <DocsComponents href="components/pagination" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Pagination</strong>

src/views/base/list-groups/ListGroups.js

@@ -11,14 +11,15 @@ import {
   CPlaceholder,
   CRow,
 } from '@coreui/react'
-import { DocsExample } from 'src/components'
+import { DocsComponents, DocsExample } from 'src/components'
 
 import ReactImg from 'src/assets/images/react.jpg'
 
 const Placeholders = () => {
   return (
     <CRow>
       <CCol xs={12}>
+        <DocsComponents href="components/placeholder" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Placeholder</strong>
@@ -45,11 +46,10 @@ const Placeholders = () => {
                   </CCardBody>
                 </CCard>
                 <CCard style={{ width: '18rem' }}>
-                  <CCardImage
-                    component="svg"
-                    orientation="top"
+                  <svg
+                    className="card-img-top"
                     width="100%"
-                    height="162"
+                    height="180"
                     xmlns="http://www.w3.org/2000/svg"
                     role="img"
                     aria-label="Placeholder"
@@ -58,7 +58,7 @@ const Placeholders = () => {
                   >
                     <title>Placeholder</title>
                     <rect width="100%" height="100%" fill="#868e96"></rect>
-                  </CCardImage>
+                  </svg>
                   <CCardBody>
                     <CPlaceholder component={CCardTitle} animation="glow" xs={7}>
                       <CPlaceholder xs={6} />

src/views/base/navs/Navs.js

@@ -1,11 +1,12 @@
 import React from 'react'
 import { CButton, CCard, CCardBody, CCardHeader, CPopover, CRow, CCol } from '@coreui/react'
-import { DocsExample } from 'src/components'
+import { DocsComponents, DocsExample } from 'src/components'
 
 const Popovers = () => {
   return (
     <CRow>
       <CCol xs={12}>
+        <DocsComponents href="components/popover" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Popover</strong> <small>Basic example</small>

src/views/base/paginations/Paginations.js

@@ -1,11 +1,12 @@
 import React from 'react'
 import { CCard, CCardBody, CCardHeader, CCol, CProgress, CProgressBar, CRow } from '@coreui/react'
-import { DocsExample } from 'src/components'
+import { DocsComponents, DocsExample } from 'src/components'
 
 const Progress = () => {
   return (
     <CRow>
       <CCol xs={12}>
+        <DocsComponents href="components/progress" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Progress</strong> <small>Basic example</small>

src/views/base/placeholders/Placeholders.js

@@ -1,11 +1,12 @@
 import React from 'react'
 import { CButton, CCard, CCardBody, CCardHeader, CCol, CSpinner, CRow } from '@coreui/react'
-import { DocsExample } from 'src/components'
+import { DocsComponents, DocsExample } from 'src/components'
 
 const Spinners = () => {
   return (
     <CRow>
       <CCol xs={12}>
+        <DocsComponents href="components/spinner" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Spinner</strong> <small>Border</small>

src/views/base/popovers/Popovers.js

@@ -13,12 +13,13 @@ import {
   CTableHeaderCell,
   CTableRow,
 } from '@coreui/react'
-import { DocsExample } from 'src/components'
+import { DocsComponents, DocsExample } from 'src/components'
 
 const Tables = () => {
   return (
     <CRow>
       <CCol xs={12}>
+        <DocsComponents href="components/table" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Table</strong> <small>Basic example</small>

src/views/base/progress/Progress.js

@@ -11,12 +11,13 @@ import {
   CTabPanel,
   CTabs,
 } from '@coreui/react'
-import { DocsExample } from 'src/components'
+import { DocsComponents, DocsExample } from 'src/components'
 
 const Navs = () => {
   return (
     <CRow>
       <CCol xs={12}>
+        <DocsComponents href="components/tabs" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Tabs</strong>

src/views/base/spinners/Spinners.js

@@ -1,11 +1,12 @@
 import React from 'react'
 import { CButton, CCard, CCardBody, CCardHeader, CLink, CTooltip, CRow, CCol } from '@coreui/react'
-import { DocsExample } from 'src/components'
+import { DocsComponents, DocsExample } from 'src/components'
 
 const Tooltips = () => {
   return (
     <CRow>
       <CCol xs={12}>
+        <DocsComponents href="components/tooltip" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Tooltip</strong> <small>Basic example</small>