최초 commit/push
This commit is contained in:
211
src/views/dashboard/Dashboard.js
Normal file
211
src/views/dashboard/Dashboard.js
Normal file
@@ -0,0 +1,211 @@
|
||||
import React from 'react'
|
||||
import classNames from 'classnames'
|
||||
|
||||
import {
|
||||
CAvatar,
|
||||
CButton,
|
||||
CButtonGroup,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardFooter,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CProgress,
|
||||
CRow,
|
||||
CTable,
|
||||
CTableBody,
|
||||
CTableDataCell,
|
||||
CTableHead,
|
||||
CTableHeaderCell,
|
||||
CTableRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import {
|
||||
cibCcAmex,
|
||||
cibCcApplePay,
|
||||
cibCcMastercard,
|
||||
cibCcPaypal,
|
||||
cibCcStripe,
|
||||
cibCcVisa,
|
||||
cibGoogle,
|
||||
cibFacebook,
|
||||
cibLinkedin,
|
||||
cifBr,
|
||||
cifEs,
|
||||
cifFr,
|
||||
cifIn,
|
||||
cifPl,
|
||||
cifUs,
|
||||
cibTwitter,
|
||||
cilCloudDownload,
|
||||
cilPeople,
|
||||
cilUser,
|
||||
cilUserFemale,
|
||||
} from '@coreui/icons'
|
||||
|
||||
import avatar1 from 'src/assets/images/avatars/1.jpg'
|
||||
import avatar2 from 'src/assets/images/avatars/2.jpg'
|
||||
import avatar3 from 'src/assets/images/avatars/3.jpg'
|
||||
import avatar4 from 'src/assets/images/avatars/4.jpg'
|
||||
import avatar5 from 'src/assets/images/avatars/5.jpg'
|
||||
import avatar6 from 'src/assets/images/avatars/6.jpg'
|
||||
|
||||
import MainChart from './MainChart'
|
||||
|
||||
const Dashboard = () => {
|
||||
const tableExample = [
|
||||
{
|
||||
avatar: { src: avatar1, status: 'success' },
|
||||
user: {
|
||||
name: 'Yiorgos Avraamu',
|
||||
new: true,
|
||||
registered: 'Jan 1, 2023',
|
||||
},
|
||||
country: { name: 'USA', flag: cifUs },
|
||||
usage: {
|
||||
value: 50,
|
||||
period: 'Jun 11, 2023 - Jul 10, 2023',
|
||||
color: 'success',
|
||||
},
|
||||
payment: { name: 'Mastercard', icon: cibCcMastercard },
|
||||
activity: '10 sec ago',
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar2, status: 'danger' },
|
||||
user: {
|
||||
name: 'Avram Tarasios',
|
||||
new: false,
|
||||
registered: 'Jan 1, 2023',
|
||||
},
|
||||
country: { name: 'Brazil', flag: cifBr },
|
||||
usage: {
|
||||
value: 22,
|
||||
period: 'Jun 11, 2023 - Jul 10, 2023',
|
||||
color: 'info',
|
||||
},
|
||||
payment: { name: 'Visa', icon: cibCcVisa },
|
||||
activity: '5 minutes ago',
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar3, status: 'warning' },
|
||||
user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2023' },
|
||||
country: { name: 'India', flag: cifIn },
|
||||
usage: {
|
||||
value: 74,
|
||||
period: 'Jun 11, 2023 - Jul 10, 2023',
|
||||
color: 'warning',
|
||||
},
|
||||
payment: { name: 'Stripe', icon: cibCcStripe },
|
||||
activity: '1 hour ago',
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar4, status: 'secondary' },
|
||||
user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2023' },
|
||||
country: { name: 'France', flag: cifFr },
|
||||
usage: {
|
||||
value: 98,
|
||||
period: 'Jun 11, 2023 - Jul 10, 2023',
|
||||
color: 'danger',
|
||||
},
|
||||
payment: { name: 'PayPal', icon: cibCcPaypal },
|
||||
activity: 'Last month',
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar5, status: 'success' },
|
||||
user: {
|
||||
name: 'Agapetus Tadeáš',
|
||||
new: true,
|
||||
registered: 'Jan 1, 2023',
|
||||
},
|
||||
country: { name: 'Spain', flag: cifEs },
|
||||
usage: {
|
||||
value: 22,
|
||||
period: 'Jun 11, 2023 - Jul 10, 2023',
|
||||
color: 'primary',
|
||||
},
|
||||
payment: { name: 'Google Wallet', icon: cibCcApplePay },
|
||||
activity: 'Last week',
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar6, status: 'danger' },
|
||||
user: {
|
||||
name: 'Friderik Dávid',
|
||||
new: true,
|
||||
registered: 'Jan 1, 2023',
|
||||
},
|
||||
country: { name: 'Poland', flag: cifPl },
|
||||
usage: {
|
||||
value: 43,
|
||||
period: 'Jun 11, 2023 - Jul 10, 2023',
|
||||
color: 'success',
|
||||
},
|
||||
payment: { name: 'Amex', icon: cibCcAmex },
|
||||
activity: 'Last week',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Traffic {' & '} Sales</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTable align="middle" className="mb-0 border" hover responsive>
|
||||
<CTableHead className="text-nowrap">
|
||||
<CTableRow>
|
||||
<CTableHeaderCell className="bg-body-tertiary text-center">
|
||||
<CIcon icon={cilPeople} />
|
||||
</CTableHeaderCell>
|
||||
<CTableHeaderCell className="bg-body-tertiary">User</CTableHeaderCell>
|
||||
<CTableHeaderCell className="bg-body-tertiary text-center">
|
||||
Country
|
||||
</CTableHeaderCell>
|
||||
<CTableHeaderCell className="bg-body-tertiary">Usage</CTableHeaderCell>
|
||||
<CTableHeaderCell className="bg-body-tertiary text-center">
|
||||
Payment Method
|
||||
</CTableHeaderCell>
|
||||
<CTableHeaderCell className="bg-body-tertiary">Activity</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
{tableExample.map((item, index) => (
|
||||
<CTableRow v-for="item in tableItems" key={index}>
|
||||
<CTableDataCell className="text-center">
|
||||
<CAvatar size="md" src={item.avatar.src} status={item.avatar.status} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div>{item.user.name}</div>
|
||||
<div className="small text-body-secondary text-nowrap">
|
||||
<span>{item.user.new ? 'New' : 'Recurring'}</span> | Registered:{' '}
|
||||
{item.user.registered}
|
||||
</div>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon={item.country.flag} title={item.country.name} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="d-flex justify-content-between text-nowrap">
|
||||
<div className="fw-semibold">{item.usage.value}%</div>
|
||||
<div className="ms-3">
|
||||
<small className="text-body-secondary">{item.usage.period}</small>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress thin color={item.usage.color} value={item.usage.value} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon={item.payment.icon} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-body-secondary text-nowrap">Last login</div>
|
||||
<div className="fw-semibold text-nowrap">{item.activity}</div>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
))}
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Dashboard
|
||||
137
src/views/dashboard/MainChart.js
Normal file
137
src/views/dashboard/MainChart.js
Normal file
@@ -0,0 +1,137 @@
|
||||
import React, { useEffect, useRef } from 'react'
|
||||
|
||||
import { CChartLine } from '@coreui/react-chartjs'
|
||||
import { getStyle } from '@coreui/utils'
|
||||
|
||||
const MainChart = () => {
|
||||
const chartRef = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
const handleColorSchemeChange = () => {
|
||||
if (chartRef.current) {
|
||||
setTimeout(() => {
|
||||
chartRef.current.options.scales.x.grid.borderColor = getStyle(
|
||||
'--cui-border-color-translucent',
|
||||
)
|
||||
chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
|
||||
chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color')
|
||||
chartRef.current.options.scales.y.grid.borderColor = getStyle(
|
||||
'--cui-border-color-translucent',
|
||||
)
|
||||
chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
|
||||
chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color')
|
||||
chartRef.current.update()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
|
||||
return () =>
|
||||
document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
|
||||
}, [chartRef])
|
||||
|
||||
const random = (min = 0, max = 100) => Math.floor(Math.random() * (max - min + 1)) + min
|
||||
|
||||
return (
|
||||
<>
|
||||
<CChartLine
|
||||
ref={chartRef}
|
||||
style={{ height: '300px', marginTop: '40px' }}
|
||||
data={{
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
|
||||
borderColor: getStyle('--cui-info'),
|
||||
pointHoverBackgroundColor: getStyle('--cui-info'),
|
||||
borderWidth: 2,
|
||||
data: [
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
],
|
||||
fill: true,
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: getStyle('--cui-success'),
|
||||
pointHoverBackgroundColor: getStyle('--cui-success'),
|
||||
borderWidth: 2,
|
||||
data: [
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
random(50, 200),
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'My Third dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: getStyle('--cui-danger'),
|
||||
pointHoverBackgroundColor: getStyle('--cui-danger'),
|
||||
borderWidth: 1,
|
||||
borderDash: [8, 5],
|
||||
data: [65, 65, 65, 65, 65, 65, 65],
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={{
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
color: getStyle('--cui-border-color-translucent'),
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
ticks: {
|
||||
color: getStyle('--cui-body-color'),
|
||||
},
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
border: {
|
||||
color: getStyle('--cui-border-color-translucent'),
|
||||
},
|
||||
grid: {
|
||||
color: getStyle('--cui-border-color-translucent'),
|
||||
},
|
||||
max: 250,
|
||||
ticks: {
|
||||
color: getStyle('--cui-body-color'),
|
||||
maxTicksLimit: 5,
|
||||
stepSize: Math.ceil(250 / 5),
|
||||
},
|
||||
},
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.4,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default MainChart
|
||||
86
src/views/pages/login/Login.js
Normal file
86
src/views/pages/login/Login.js
Normal file
@@ -0,0 +1,86 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardGroup,
|
||||
CCol,
|
||||
CContainer,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilLockLocked, cilUser } from '@coreui/icons'
|
||||
|
||||
const Login = () => {
|
||||
return (
|
||||
<div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
|
||||
<CContainer>
|
||||
<CRow className="justify-content-center">
|
||||
<CCol md={8}>
|
||||
<CCardGroup>
|
||||
<CCard className="p-4">
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<h1>Login</h1>
|
||||
<p className="text-body-secondary">Sign In to your account</p>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilUser} />
|
||||
</CInputGroupText>
|
||||
<CFormInput placeholder="Username" autoComplete="username" />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-4">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilLockLocked} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CRow>
|
||||
<CCol xs={6}>
|
||||
<CButton color="primary" className="px-4">
|
||||
Login
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol xs={6} className="text-right">
|
||||
<CButton color="link" className="px-0">
|
||||
Forgot password?
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="text-white bg-primary py-5" style={{ width: '44%' }}>
|
||||
<CCardBody className="text-center">
|
||||
<div>
|
||||
<h2>Sign up</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
<Link to="/register">
|
||||
<CButton color="primary" className="mt-3" active tabIndex={-1}>
|
||||
Register Now!
|
||||
</CButton>
|
||||
</Link>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Login
|
||||
41
src/views/pages/page404/Page404.js
Normal file
41
src/views/pages/page404/Page404.js
Normal file
@@ -0,0 +1,41 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CCol,
|
||||
CContainer,
|
||||
CFormInput,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilMagnifyingGlass } from '@coreui/icons'
|
||||
|
||||
const Page404 = () => {
|
||||
return (
|
||||
<div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
|
||||
<CContainer>
|
||||
<CRow className="justify-content-center">
|
||||
<CCol md={6}>
|
||||
<div className="clearfix">
|
||||
<h1 className="float-start display-3 me-4">404</h1>
|
||||
<h4 className="pt-3">Oops! You{"'"}re lost.</h4>
|
||||
<p className="text-body-secondary float-start">
|
||||
The page you are looking for was not found.
|
||||
</p>
|
||||
</div>
|
||||
<CInputGroup className="input-prepend">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilMagnifyingGlass} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text" placeholder="What are you looking for?" />
|
||||
<CButton color="info">Search</CButton>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Page404
|
||||
41
src/views/pages/page500/Page500.js
Normal file
41
src/views/pages/page500/Page500.js
Normal file
@@ -0,0 +1,41 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CCol,
|
||||
CContainer,
|
||||
CFormInput,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilMagnifyingGlass } from '@coreui/icons'
|
||||
|
||||
const Page500 = () => {
|
||||
return (
|
||||
<div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
|
||||
<CContainer>
|
||||
<CRow className="justify-content-center">
|
||||
<CCol md={6}>
|
||||
<span className="clearfix">
|
||||
<h1 className="float-start display-3 me-4">500</h1>
|
||||
<h4 className="pt-3">Houston, we have a problem!</h4>
|
||||
<p className="text-body-secondary float-start">
|
||||
The page you are looking for is temporarily unavailable.
|
||||
</p>
|
||||
</span>
|
||||
<CInputGroup className="input-prepend">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilMagnifyingGlass} />
|
||||
</CInputGroupText>
|
||||
<CFormInput type="text" placeholder="What are you looking for?" />
|
||||
<CButton color="info">Search</CButton>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Page500
|
||||
71
src/views/pages/register/Register.js
Normal file
71
src/views/pages/register/Register.js
Normal file
@@ -0,0 +1,71 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCol,
|
||||
CContainer,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilLockLocked, cilUser } from '@coreui/icons'
|
||||
|
||||
const Register = () => {
|
||||
return (
|
||||
<div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
|
||||
<CContainer>
|
||||
<CRow className="justify-content-center">
|
||||
<CCol md={9} lg={7} xl={6}>
|
||||
<CCard className="mx-4">
|
||||
<CCardBody className="p-4">
|
||||
<CForm>
|
||||
<h1>Register</h1>
|
||||
<p className="text-body-secondary">Create your account</p>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilUser} />
|
||||
</CInputGroupText>
|
||||
<CFormInput placeholder="Username" autoComplete="username" />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormInput placeholder="Email" autoComplete="email" />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilLockLocked} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-4">
|
||||
<CInputGroupText>
|
||||
<CIcon icon={cilLockLocked} />
|
||||
</CInputGroupText>
|
||||
<CFormInput
|
||||
type="password"
|
||||
placeholder="Repeat password"
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<div className="d-grid">
|
||||
<CButton color="success">Create Account</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Register
|
||||
91
src/views/theme/colors/Colors.js
Normal file
91
src/views/theme/colors/Colors.js
Normal file
@@ -0,0 +1,91 @@
|
||||
import React, { useEffect, useState, createRef } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import classNames from 'classnames'
|
||||
import { CRow, CCol, CCard, CCardHeader, CCardBody } from '@coreui/react'
|
||||
import { rgbToHex } from '@coreui/utils'
|
||||
import { DocsLink } from 'src/components'
|
||||
|
||||
const ThemeView = () => {
|
||||
const [color, setColor] = useState('rgb(255, 255, 255)')
|
||||
const ref = createRef()
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current.parentNode.firstChild
|
||||
const varColor = window.getComputedStyle(el).getPropertyValue('background-color')
|
||||
setColor(varColor)
|
||||
}, [ref])
|
||||
|
||||
return (
|
||||
<table className="table w-100" ref={ref}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="text-body-secondary">HEX:</td>
|
||||
<td className="font-weight-bold">{rgbToHex(color)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-body-secondary">RGB:</td>
|
||||
<td className="font-weight-bold">{color}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
)
|
||||
}
|
||||
|
||||
const ThemeColor = ({ className, children }) => {
|
||||
const classes = classNames(className, 'theme-color w-75 rounded mb-3')
|
||||
return (
|
||||
<CCol xs={12} sm={6} md={4} xl={2} className="mb-4">
|
||||
<div className={classes} style={{ paddingTop: '75%' }}></div>
|
||||
{children}
|
||||
<ThemeView />
|
||||
</CCol>
|
||||
)
|
||||
}
|
||||
|
||||
ThemeColor.propTypes = {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
}
|
||||
|
||||
const Colors = () => {
|
||||
return (
|
||||
<>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Theme colors
|
||||
<DocsLink href="https://coreui.io/docs/utilities/colors/" />
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<ThemeColor className="bg-primary">
|
||||
<h6>Brand Primary Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-secondary">
|
||||
<h6>Brand Secondary Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-success">
|
||||
<h6>Brand Success Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-danger">
|
||||
<h6>Brand Danger Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-warning">
|
||||
<h6>Brand Warning Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-info">
|
||||
<h6>Brand Info Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-light">
|
||||
<h6>Brand Light Color</h6>
|
||||
</ThemeColor>
|
||||
<ThemeColor className="bg-dark">
|
||||
<h6>Brand Dark Color</h6>
|
||||
</ThemeColor>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Colors
|
||||
229
src/views/theme/typography/Typography.js
Normal file
229
src/views/theme/typography/Typography.js
Normal file
@@ -0,0 +1,229 @@
|
||||
import React from 'react'
|
||||
import { CCard, CCardHeader, CCardBody } from '@coreui/react'
|
||||
import { DocsLink } from 'src/components'
|
||||
|
||||
const Typography = () => {
|
||||
return (
|
||||
<>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Headings
|
||||
<DocsLink href="https://coreui.io/docs/content/typography/" />
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Documentation and examples for Bootstrap typography, including global settings,
|
||||
headings, body text, lists, and more.
|
||||
</p>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Heading</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code className="highlighter-rouge"><h1></h1></code>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<span className="h1">h1. Bootstrap heading</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code className="highlighter-rouge"><h2></h2></code>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<span className="h2">h2. Bootstrap heading</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code className="highlighter-rouge"><h3></h3></code>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<span className="h3">h3. Bootstrap heading</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code className="highlighter-rouge"><h4></h4></code>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<span className="h4">h4. Bootstrap heading</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code className="highlighter-rouge"><h5></h5></code>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<span className="h5">h5. Bootstrap heading</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code className="highlighter-rouge"><h6></h6></code>
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<span className="h6">h6. Bootstrap heading</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Headings</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
<code className="highlighter-rouge">.h1</code> through
|
||||
<code className="highlighter-rouge">.h6</code>
|
||||
classes are also available, for when you want to match the font styling of a heading but
|
||||
cannot use the associated HTML element.
|
||||
</p>
|
||||
<div className="bd-example">
|
||||
<p className="h1">h1. Bootstrap heading</p>
|
||||
<p className="h2">h2. Bootstrap heading</p>
|
||||
<p className="h3">h3. Bootstrap heading</p>
|
||||
<p className="h4">h4. Bootstrap heading</p>
|
||||
<p className="h5">h5. Bootstrap heading</p>
|
||||
<p className="h6">h6. Bootstrap heading</p>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<div className="card-header">Display headings</div>
|
||||
<div className="card-body">
|
||||
<p>
|
||||
Traditional heading elements are designed to work best in the meat of your page content.
|
||||
When you need a heading to stand out, consider using a <strong>display heading</strong>
|
||||
—a larger, slightly more opinionated heading style.
|
||||
</p>
|
||||
<div className="bd-example bd-example-type">
|
||||
<table className="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span className="display-1">Display 1</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span className="display-2">Display 2</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span className="display-3">Display 3</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span className="display-4">Display 4</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Inline text elements</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Traditional heading elements are designed to work best in the meat of your page content.
|
||||
When you need a heading to stand out, consider using a <strong>display heading</strong>
|
||||
—a larger, slightly more opinionated heading style.
|
||||
</p>
|
||||
<div className="bd-example">
|
||||
<p>
|
||||
You can use the mark tag to <mark>highlight</mark> text.
|
||||
</p>
|
||||
<p>
|
||||
<del>This line of text is meant to be treated as deleted text.</del>
|
||||
</p>
|
||||
<p>
|
||||
<s>This line of text is meant to be treated as no longer accurate.</s>
|
||||
</p>
|
||||
<p>
|
||||
<ins>This line of text is meant to be treated as an addition to the document.</ins>
|
||||
</p>
|
||||
<p>
|
||||
<u>This line of text will render as underlined</u>
|
||||
</p>
|
||||
<p>
|
||||
<small>This line of text is meant to be treated as fine print.</small>
|
||||
</p>
|
||||
<p>
|
||||
<strong>This line rendered as bold text.</strong>
|
||||
</p>
|
||||
<p>
|
||||
<em>This line rendered as italicized text.</em>
|
||||
</p>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Description list alignment</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Align terms and descriptions horizontally by using our grid system’s predefined classes
|
||||
(or semantic mixins). For longer terms, you can optionally add a{' '}
|
||||
<code className="highlighter-rouge">.text-truncate</code> class to truncate the text
|
||||
with an ellipsis.
|
||||
</p>
|
||||
<div className="bd-example">
|
||||
<dl className="row">
|
||||
<dt className="col-sm-3">Description lists</dt>
|
||||
<dd className="col-sm-9">A description list is perfect for defining terms.</dd>
|
||||
|
||||
<dt className="col-sm-3">Euismod</dt>
|
||||
<dd className="col-sm-9">
|
||||
<p>
|
||||
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
|
||||
</p>
|
||||
<p>Donec id elit non mi porta gravida at eget metus.</p>
|
||||
</dd>
|
||||
|
||||
<dt className="col-sm-3">Malesuada porta</dt>
|
||||
<dd className="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
|
||||
|
||||
<dt className="col-sm-3 text-truncate">Truncated term is truncated</dt>
|
||||
<dd className="col-sm-9">
|
||||
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
|
||||
fermentum massa justo sit amet risus.
|
||||
</dd>
|
||||
|
||||
<dt className="col-sm-3">Nesting</dt>
|
||||
<dd className="col-sm-9">
|
||||
<dl className="row">
|
||||
<dt className="col-sm-4">Nested definition list</dt>
|
||||
<dd className="col-sm-8">
|
||||
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
|
||||
</dd>
|
||||
</dl>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Typography
|
||||
Reference in New Issue
Block a user