coreui-free-react-admin-template

1
import React from 'react'
2
import {
3
  CAlert,
4
  CAlertHeading,
5
  CAlertLink,
6
  CCard,
7
  CCardBody,
8
  CCardHeader,
9
  CCol,
10
  CRow,
11
} from '@coreui/react'
12
import { DocsExample } from 'src/components'
13

14
const Alerts = () => {
15
  return (
16
    <CRow>
17
      <CCol xs={12}>
18
        <CCard className="mb-4">
19
          <CCardHeader>
20
            <strong>React Alert</strong>
21
          </CCardHeader>
22
          <CCardBody>
23
            <p className="text-body-secondary small">
24
              React Alert is prepared for any length of text, as well as an optional close button.
25
              For a styling, use one of the <strong>required</strong> contextual <code>color</code>{' '}
26
              props (e.g., <code>primary</code>). For inline dismissal, use the{' '}
27
              <a href="https://coreui.io/react/docs/components/alert#dismissing">dismissing prop</a>
28
              .
29
            </p>
30
            <DocsExample href="components/alert">
31
              <CAlert color="primary">A simple primary alert—check it out!</CAlert>
32
              <CAlert color="secondary">A simple secondary alert—check it out!</CAlert>
33
              <CAlert color="success">A simple success alert—check it out!</CAlert>
34
              <CAlert color="danger">A simple danger alert—check it out!</CAlert>
35
              <CAlert color="warning">A simple warning alert—check it out!</CAlert>
36
              <CAlert color="info">A simple info alert—check it out!</CAlert>
37
              <CAlert color="light">A simple light alert—check it out!</CAlert>
38
              <CAlert color="dark">A simple dark alert—check it out!</CAlert>
39
            </DocsExample>
40
          </CCardBody>
41
        </CCard>
42
      </CCol>
43
      <CCol xs={12}>
44
        <CCard className="mb-4">
45
          <CCardHeader>
46
            <strong>React Alert</strong> <small>Link color</small>
47
          </CCardHeader>
48
          <CCardBody>
49
            <p className="text-body-secondary small">
50
              Use the <code>&lt;CAlertLink&gt;</code> component to immediately give matching colored
51
              links inside any alert.
52
            </p>
53
            <DocsExample href="components/alert#link-color">
54
              <CAlert color="primary">
55
                A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give
56
                it a click if you like.
57
              </CAlert>
58
              <CAlert color="secondary">
59
                A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>.
60
                Give it a click if you like.
61
              </CAlert>
62
              <CAlert color="success">
63
                A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give
64
                it a click if you like.
65
              </CAlert>
66
              <CAlert color="danger">
67
                A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give
68
                it a click if you like.
69
              </CAlert>
70
              <CAlert color="warning">
71
                A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give
72
                it a click if you like.
73
              </CAlert>
74
              <CAlert color="info">
75
                A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it
76
                a click if you like.
77
              </CAlert>
78
              <CAlert color="light">
79
                A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it
80
                a click if you like.
81
              </CAlert>
82
              <CAlert color="dark">
83
                A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it
84
                a click if you like.
85
              </CAlert>
86
            </DocsExample>
87
          </CCardBody>
88
        </CCard>
89
      </CCol>
90
      <CCol xs={12}>
91
        <CCard className="mb-4">
92
          <CCardHeader>
93
            <strong>React Alert</strong> <small>Additional content</small>
94
          </CCardHeader>
95
          <CCardBody>
96
            <p className="text-body-secondary small">
97
              Alert can also incorporate supplementary components &amp; elements like heading,
98
              paragraph, and divider.
99
            </p>
100
            <DocsExample href="components/alert#additional-content">
101
              <CAlert color="success">
102
                <CAlertHeading as="h4">Well done!</CAlertHeading>
103
                <p>
104
                  Aww yeah, you successfully read this important alert message. This example text is
105
                  going to run a bit longer so that you can see how spacing within an alert works
106
                  with this kind of content.
107
                </p>
108
                <hr />
109
                <p className="mb-0">
110
                  Whenever you need to, be sure to use margin utilities to keep things nice and
111
                  tidy.
112
                </p>
113
              </CAlert>
114
            </DocsExample>
115
          </CCardBody>
116
        </CCard>
117
      </CCol>
118
      <CCol xs={12}>
119
        <CCard className="mb-4">
120
          <CCardHeader>
121
            <strong>React Alert</strong> <small>Dismissing</small>
122
          </CCardHeader>
123
          <CCardBody>
124
            <p className="text-body-secondary small">
125
              Alerts can also be easily dismissed. Just add the <code>dismissible</code> prop.
126
            </p>
127
            <DocsExample href="components/alert#dismissing">
128
              <CAlert
129
                color="warning"
130
                dismissible
131
                onClose={() => {
132
                  alert('👋 Well, hi there! Thanks for dismissing me.')
133
                }}
134
              >
135
                <strong>Go right ahead</strong> and click that dimiss over there on the right.
136
              </CAlert>
137
            </DocsExample>
138
          </CCardBody>
139
        </CCard>
140
      </CCol>
141
    </CRow>
142
  )
143
}
144

145
export default Alerts
146