diff --git a/package.json b/package.json index fccb0aebe9..ab90dc2fc8 100644 --- a/package.json +++ b/package.json @@ -19,14 +19,10 @@ "start": "vite" }, "dependencies": { - "@coreui/chartjs": "^4.1.0", - "@coreui/coreui": "^5.5.0", - "@coreui/icons": "^3.0.1", - "@coreui/icons-react": "^2.3.0", - "@coreui/react": "^5.9.2", - "@coreui/react-chartjs": "^3.0.0", - "@coreui/utils": "^2.0.2", - "@popperjs/core": "^2.11.8", + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.1", + "@mui/icons-material": "^7.3.7", + "@mui/material": "^7.3.7", "chart.js": "^4.5.1", "classnames": "^2.5.1", "core-js": "^3.47.0", @@ -35,8 +31,8 @@ "react-dom": "^19.2.3", "react-redux": "^9.2.0", "react-router-dom": "^7.11.0", - "redux": "5.0.1", - "simplebar-react": "^3.3.2" + "recharts": "^3.7.0", + "redux": "5.0.1" }, "devDependencies": { "@vitejs/plugin-react": "^5.1.2", diff --git a/src/App.js b/src/App.js index f5b22393e1..f38c28009e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,58 +1,51 @@ -import React, { Suspense, useEffect } from 'react' +import React, { Suspense, useMemo } from 'react' import { HashRouter, Route, Routes } from 'react-router-dom' import { useSelector } from 'react-redux' +import { ThemeProvider } from '@mui/material/styles' +import CssBaseline from '@mui/material/CssBaseline' +import CircularProgress from '@mui/material/CircularProgress' +import Box from '@mui/material/Box' +import getTheme from './theme' -import { CSpinner, useColorModes } from '@coreui/react' -import './scss/style.scss' - -// We use those styles to show code examples, you should remove them in your application. -import './scss/examples.scss' - -// Containers const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout')) -// Pages const Login = React.lazy(() => import('./views/pages/login/Login')) const Register = React.lazy(() => import('./views/pages/register/Register')) const Page404 = React.lazy(() => import('./views/pages/page404/Page404')) const Page500 = React.lazy(() => import('./views/pages/page500/Page500')) const App = () => { - const { isColorModeSet, setColorMode } = useColorModes('coreui-free-react-admin-template-theme') const storedTheme = useSelector((state) => state.theme) - - useEffect(() => { - const urlParams = new URLSearchParams(window.location.href.split('?')[1]) - const theme = urlParams.get('theme') && urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0] - if (theme) { - setColorMode(theme) - } - - if (isColorModeSet()) { - return - } - - setColorMode(storedTheme) - }, []) // eslint-disable-line react-hooks/exhaustive-deps + const theme = useMemo(() => getTheme(storedTheme), [storedTheme]) return ( - - - - - } - > - - } /> - } /> - } /> - } /> - } /> - - - + + + + + + + } + > + + } /> + } /> + } /> + } /> + } /> + + + + ) } diff --git a/src/_nav.js b/src/_nav.js index e43f1df1ee..b917a552d8 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -1,74 +1,61 @@ import React from 'react' -import CIcon from '@coreui/icons-react' -import { - cilBell, - cilCalculator, - cilChartPie, - cilCursor, - cilDescription, - cilDrop, - cilExternalLink, - cilNotes, - cilPencil, - cilPuzzle, - cilSpeedometer, - cilStar, -} from '@coreui/icons' -import { CNavGroup, CNavItem, CNavTitle } from '@coreui/react' +import DashboardIcon from '@mui/icons-material/Dashboard' +import PaletteIcon from '@mui/icons-material/Palette' +import TextFieldsIcon from '@mui/icons-material/TextFields' +import ExtensionIcon from '@mui/icons-material/Extension' +import TouchAppIcon from '@mui/icons-material/TouchApp' +import NotesIcon from '@mui/icons-material/Notes' +import PieChartIcon from '@mui/icons-material/PieChart' +import StarIcon from '@mui/icons-material/Star' +import NotificationsIcon from '@mui/icons-material/Notifications' +import WidgetsIcon from '@mui/icons-material/Widgets' +import DescriptionIcon from '@mui/icons-material/Description' +import OpenInNewIcon from '@mui/icons-material/OpenInNew' const _nav = [ { - component: CNavItem, name: 'Dashboard', to: '/dashboard', - icon: , + icon: , badge: { color: 'info', text: 'NEW', }, }, { - component: CNavTitle, name: 'Theme', }, { - component: CNavItem, name: 'Colors', to: '/theme/colors', - icon: , + icon: , }, { - component: CNavItem, name: 'Typography', to: '/theme/typography', - icon: , + icon: , }, { - component: CNavTitle, name: 'Components', }, { - component: CNavGroup, name: 'Base', to: '/base', - icon: , + icon: , items: [ { - component: CNavItem, name: 'Accordion', to: '/base/accordion', }, { - component: CNavItem, name: 'Breadcrumb', to: '/base/breadcrumbs', }, { - component: CNavItem, name: ( {'Calendar'} - + ), href: 'https://coreui.io/react/docs/components/calendar/', @@ -78,52 +65,42 @@ const _nav = [ }, }, { - component: CNavItem, name: 'Cards', to: '/base/cards', }, { - component: CNavItem, name: 'Carousel', to: '/base/carousels', }, { - component: CNavItem, name: 'Collapse', to: '/base/collapses', }, { - component: CNavItem, name: 'List group', to: '/base/list-groups', }, { - component: CNavItem, name: 'Navs & Tabs', to: '/base/navs', }, { - component: CNavItem, name: 'Pagination', to: '/base/paginations', }, { - component: CNavItem, name: 'Placeholders', to: '/base/placeholders', }, { - component: CNavItem, name: 'Popovers', to: '/base/popovers', }, { - component: CNavItem, name: 'Progress', to: '/base/progress', }, { - component: CNavItem, name: 'Smart Pagination', href: 'https://coreui.io/react/docs/components/smart-pagination/', badge: { @@ -132,11 +109,10 @@ const _nav = [ }, }, { - component: CNavItem, name: ( {'Smart Table'} - + ), href: 'https://coreui.io/react/docs/components/smart-table/', @@ -146,31 +122,26 @@ const _nav = [ }, }, { - component: CNavItem, name: 'Spinners', to: '/base/spinners', }, { - component: CNavItem, name: 'Tables', to: '/base/tables', }, { - component: CNavItem, name: 'Tabs', to: '/base/tabs', }, { - component: CNavItem, name: 'Tooltips', to: '/base/tooltips', }, { - component: CNavItem, name: ( {'Virtual Scroller'} - + ), href: 'https://coreui.io/react/docs/components/virtual-scroller/', @@ -182,32 +153,27 @@ const _nav = [ ], }, { - component: CNavGroup, name: 'Buttons', to: '/buttons', - icon: , + icon: , items: [ { - component: CNavItem, name: 'Buttons', to: '/buttons/buttons', }, { - component: CNavItem, name: 'Buttons groups', to: '/buttons/button-groups', }, { - component: CNavItem, name: 'Dropdowns', to: '/buttons/dropdowns', }, { - component: CNavItem, name: ( {'Loading Button'} - + ), href: 'https://coreui.io/react/docs/components/loading-button/', @@ -219,16 +185,14 @@ const _nav = [ ], }, { - component: CNavGroup, name: 'Forms', - icon: , + icon: , items: [ { - component: CNavItem, name: ( {'Autocomplete'} - + ), href: 'https://coreui.io/react/docs/forms/autocomplete/', @@ -238,16 +202,14 @@ const _nav = [ }, }, { - component: CNavItem, name: 'Checks & Radios', to: '/forms/checks-radios', }, { - component: CNavItem, name: ( {'Date Picker'} - + ), href: 'https://coreui.io/react/docs/forms/date-picker/', @@ -257,7 +219,6 @@ const _nav = [ }, }, { - component: CNavItem, name: 'Date Range Picker', href: 'https://coreui.io/react/docs/forms/date-range-picker/', badge: { @@ -266,26 +227,22 @@ const _nav = [ }, }, { - component: CNavItem, name: 'Floating Labels', to: '/forms/floating-labels', }, { - component: CNavItem, name: 'Form Control', to: '/forms/form-control', }, { - component: CNavItem, name: 'Input Group', to: '/forms/input-group', }, { - component: CNavItem, name: ( {'Multi Select'} - + ), href: 'https://coreui.io/react/docs/forms/multi-select/', @@ -295,11 +252,10 @@ const _nav = [ }, }, { - component: CNavItem, name: ( {'OTP Input'} - + ), href: 'https://coreui.io/react/docs/forms/one-time-password-input/', @@ -309,11 +265,10 @@ const _nav = [ }, }, { - component: CNavItem, name: ( {'Password Input'} - + ), href: 'https://coreui.io/react/docs/forms/password-input/', @@ -323,16 +278,14 @@ const _nav = [ }, }, { - component: CNavItem, name: 'Range', to: '/forms/range', }, { - component: CNavItem, name: ( {'Range Slider'} - + ), href: 'https://coreui.io/react/docs/forms/range-slider/', @@ -342,11 +295,10 @@ const _nav = [ }, }, { - component: CNavItem, name: ( {'Rating'} - + ), href: 'https://coreui.io/react/docs/forms/rating/', @@ -356,16 +308,14 @@ const _nav = [ }, }, { - component: CNavItem, name: 'Select', to: '/forms/select', }, { - component: CNavItem, name: ( {'Stepper'} - + ), href: 'https://coreui.io/react/docs/forms/stepper/', @@ -375,11 +325,10 @@ const _nav = [ }, }, { - component: CNavItem, name: ( {'Time Picker'} - + ), href: 'https://coreui.io/react/docs/forms/time-picker/', @@ -389,118 +338,98 @@ const _nav = [ }, }, { - component: CNavItem, name: 'Layout', to: '/forms/layout', }, { - component: CNavItem, name: 'Validation', to: '/forms/validation', }, ], }, { - component: CNavItem, name: 'Charts', to: '/charts', - icon: , + icon: , }, { - component: CNavGroup, name: 'Icons', - icon: , + icon: , items: [ { - component: CNavItem, - name: 'CoreUI Free', + name: 'Material Icons', to: '/icons/coreui-icons', }, { - component: CNavItem, - name: 'CoreUI Flags', + name: 'Flags', to: '/icons/flags', }, { - component: CNavItem, - name: 'CoreUI Brands', + name: 'Brands', to: '/icons/brands', }, ], }, { - component: CNavGroup, name: 'Notifications', - icon: , + icon: , items: [ { - component: CNavItem, name: 'Alerts', to: '/notifications/alerts', }, { - component: CNavItem, name: 'Badges', to: '/notifications/badges', }, { - component: CNavItem, name: 'Modal', to: '/notifications/modals', }, { - component: CNavItem, name: 'Toasts', to: '/notifications/toasts', }, ], }, { - component: CNavItem, name: 'Widgets', to: '/widgets', - icon: , + icon: , badge: { color: 'info', text: 'NEW', }, }, { - component: CNavTitle, name: 'Extras', }, { - component: CNavGroup, name: 'Pages', - icon: , + icon: , items: [ { - component: CNavItem, name: 'Login', to: '/login', }, { - component: CNavItem, name: 'Register', to: '/register', }, { - component: CNavItem, name: 'Error 404', to: '/404', }, { - component: CNavItem, name: 'Error 500', to: '/500', }, ], }, { - component: CNavItem, name: 'Docs', href: 'https://coreui.io/react/docs/templates/installation/', - icon: , + icon: , }, ] diff --git a/src/components/AppBreadcrumb.js b/src/components/AppBreadcrumb.js index d37de8ce9b..ab2e85031a 100644 --- a/src/components/AppBreadcrumb.js +++ b/src/components/AppBreadcrumb.js @@ -1,10 +1,12 @@ import React from 'react' -import { useLocation } from 'react-router-dom' +import { useLocation, Link as RouterLink } from 'react-router-dom' +import Breadcrumbs from '@mui/material/Breadcrumbs' +import Link from '@mui/material/Link' +import Typography from '@mui/material/Typography' +import HomeIcon from '@mui/icons-material/Home' import routes from '../routes' -import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react' - const AppBreadcrumb = () => { const currentLocation = useLocation().pathname @@ -32,19 +34,35 @@ const AppBreadcrumb = () => { const breadcrumbs = getBreadcrumbs(currentLocation) return ( - - Home + + + + Home + {breadcrumbs.map((breadcrumb, index) => { - return ( - + {breadcrumb.name} + + ) : ( + {breadcrumb.name} - + ) })} - + ) } diff --git a/src/components/AppContent.js b/src/components/AppContent.js index b9a39ef505..0e9df3ad01 100644 --- a/src/components/AppContent.js +++ b/src/components/AppContent.js @@ -1,14 +1,21 @@ import React, { Suspense } from 'react' import { Navigate, Route, Routes } from 'react-router-dom' -import { CContainer, CSpinner } from '@coreui/react' +import Container from '@mui/material/Container' +import CircularProgress from '@mui/material/CircularProgress' +import Box from '@mui/material/Box' -// routes config import routes from '../routes' const AppContent = () => { return ( - - }> + + + + + } + > {routes.map((route, idx) => { return ( @@ -26,7 +33,7 @@ const AppContent = () => { } /> - + ) } diff --git a/src/components/AppFooter.js b/src/components/AppFooter.js index 217c5a04c3..adf1a2daf2 100644 --- a/src/components/AppFooter.js +++ b/src/components/AppFooter.js @@ -1,22 +1,44 @@ import React from 'react' -import { CFooter } from '@coreui/react' +import Box from '@mui/material/Box' +import Typography from '@mui/material/Typography' +import Link from '@mui/material/Link' const AppFooter = () => { return ( - -
- + + + CoreUI - - © 2025 creativeLabs. -
- - + {' '} + © 2025 creativeLabs. + + + Powered by{' '} + + Material UI Admin Template + + + ) } diff --git a/src/components/AppHeader.js b/src/components/AppHeader.js index 534dadaa89..bad901fecf 100644 --- a/src/components/AppHeader.js +++ b/src/components/AppHeader.js @@ -1,144 +1,144 @@ -import React, { useEffect, useRef } from 'react' +import React from 'react' import { NavLink } from 'react-router-dom' import { useSelector, useDispatch } from 'react-redux' -import { - CContainer, - CDropdown, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CHeader, - CHeaderNav, - CHeaderToggler, - CNavLink, - CNavItem, - useColorModes, -} from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { - cilBell, - cilContrast, - cilEnvelopeOpen, - cilList, - cilMenu, - cilMoon, - cilSun, -} from '@coreui/icons' +import PropTypes from 'prop-types' +import AppBar from '@mui/material/AppBar' +import Toolbar from '@mui/material/Toolbar' +import IconButton from '@mui/material/IconButton' +import Typography from '@mui/material/Typography' +import Box from '@mui/material/Box' +import Menu from '@mui/material/Menu' +import MenuItem from '@mui/material/MenuItem' +import Badge from '@mui/material/Badge' +import Divider from '@mui/material/Divider' +import Button from '@mui/material/Button' +import MenuIcon from '@mui/icons-material/Menu' +import NotificationsIcon from '@mui/icons-material/Notifications' +import MailIcon from '@mui/icons-material/Mail' +import ListIcon from '@mui/icons-material/List' +import LightModeIcon from '@mui/icons-material/LightMode' +import DarkModeIcon from '@mui/icons-material/DarkMode' +import ContrastIcon from '@mui/icons-material/Contrast' import { AppBreadcrumb } from './index' import { AppHeaderDropdown } from './header/index' -const AppHeader = () => { - const headerRef = useRef() - const { colorMode, setColorMode } = useColorModes('coreui-free-react-admin-template-theme') - +const AppHeader = ({ drawerWidth }) => { const dispatch = useDispatch() const sidebarShow = useSelector((state) => state.sidebarShow) + const theme = useSelector((state) => state.theme) + + const [anchorEl, setAnchorEl] = React.useState(null) + const open = Boolean(anchorEl) + + const handleThemeMenuClick = (event) => { + setAnchorEl(event.currentTarget) + } + + const handleThemeMenuClose = () => { + setAnchorEl(null) + } - useEffect(() => { - const handleScroll = () => { - headerRef.current && - headerRef.current.classList.toggle('shadow-sm', document.documentElement.scrollTop > 0) - } + const handleThemeChange = (newTheme) => { + dispatch({ type: 'set', theme: newTheme }) + handleThemeMenuClose() + } - document.addEventListener('scroll', handleScroll) - return () => document.removeEventListener('scroll', handleScroll) - }, []) + const getThemeIcon = () => { + if (theme === 'dark') return + if (theme === 'auto') return + return + } return ( - - - + + dispatch({ type: 'set', sidebarShow: !sidebarShow })} - style={{ marginInlineStart: '-14px' }} + sx={{ mr: 2, display: { sm: 'none' } }} > - - - - - - Dashboard - - - - Users - - - Settings - - - - - - - - - - - - - - - - - - - - -
  • -
    -
    • - - - {colorMode === 'dark' ? ( - - ) : colorMode === 'auto' ? ( - - ) : ( - - )} - - - setColorMode('light')} - > - Light - - setColorMode('dark')} - > - Dark - - setColorMode('auto')} - > - Auto - - - -
  • -
    -
    • + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {getThemeIcon()} + + + handleThemeChange('light')} selected={theme === 'light'}> + Light + + handleThemeChange('dark')} selected={theme === 'dark'}> + Dark + + + + + -     -     - + + + - -     + + ) } +AppHeader.propTypes = { + drawerWidth: PropTypes.number, +} + export default AppHeader diff --git a/src/components/AppSidebar.js b/src/components/AppSidebar.js index 021cb52c34..63a3542a6d 100644 --- a/src/components/AppSidebar.js +++ b/src/components/AppSidebar.js @@ -1,59 +1,90 @@ import React from 'react' import { useSelector, useDispatch } from 'react-redux' - -import { - CCloseButton, - CSidebar, - CSidebarBrand, - CSidebarFooter, - CSidebarHeader, - CSidebarToggler, -} from '@coreui/react' -import CIcon from '@coreui/icons-react' +import PropTypes from 'prop-types' +import Drawer from '@mui/material/Drawer' +import Box from '@mui/material/Box' +import Typography from '@mui/material/Typography' +import IconButton from '@mui/material/IconButton' +import Divider from '@mui/material/Divider' +import CloseIcon from '@mui/icons-material/Close' +import ChevronLeftIcon from '@mui/icons-material/ChevronLeft' +import ChevronRightIcon from '@mui/icons-material/ChevronRight' import { AppSidebarNav } from './AppSidebarNav' -import { logo } from 'src/assets/brand/logo' -import { sygnet } from 'src/assets/brand/sygnet' - -// sidebar nav config import navigation from '../_nav' -const AppSidebar = () => { +const AppSidebar = ({ drawerWidth }) => { const dispatch = useDispatch() - const unfoldable = useSelector((state) => state.sidebarUnfoldable) const sidebarShow = useSelector((state) => state.sidebarShow) - return ( - { - dispatch({ type: 'set', sidebarShow: visible }) - }} - > - - - - - - dispatch({ type: 'set', sidebarShow: false })} - /> - + const handleDrawerClose = () => { + dispatch({ type: 'set', sidebarShow: false }) + } + + const drawerContent = ( + <> + + + CoreUI + + + + + + - - dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })} - /> - - + ) + + return ( + + + {drawerContent} + + + {drawerContent} + + + ) +} + +AppSidebar.propTypes = { + drawerWidth: PropTypes.number, } export default React.memo(AppSidebar) diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js index 7583abf49e..411e73f138 100644 --- a/src/components/AppSidebarNav.js +++ b/src/components/AppSidebarNav.js @@ -1,70 +1,205 @@ -import React from 'react' -import { NavLink } from 'react-router-dom' +import React, { useState } from 'react' +import { NavLink, useLocation } from 'react-router-dom' import PropTypes from 'prop-types' +import List from '@mui/material/List' +import ListItem from '@mui/material/ListItem' +import ListItemButton from '@mui/material/ListItemButton' +import ListItemIcon from '@mui/material/ListItemIcon' +import ListItemText from '@mui/material/ListItemText' +import Collapse from '@mui/material/Collapse' +import Chip from '@mui/material/Chip' +import Typography from '@mui/material/Typography' +import Box from '@mui/material/Box' +import ExpandLess from '@mui/icons-material/ExpandLess' +import ExpandMore from '@mui/icons-material/ExpandMore' +import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord' -import SimpleBar from 'simplebar-react' -import 'simplebar-react/dist/simplebar.min.css' +export const AppSidebarNav = ({ items }) => { + const location = useLocation() + const [openGroups, setOpenGroups] = useState({}) -import { CBadge, CNavLink, CSidebarNav } from '@coreui/react' + const handleGroupClick = (name) => { + setOpenGroups((prev) => ({ + ...prev, + [name]: !prev[name], + })) + } + + const isActive = (to) => { + return location.pathname === to + } + + const navItem = (item, index, indent = false) => { + const { name, badge, icon, to, href } = item + + if (href) { + return ( + + + + {icon || (indent && )} + + + {typeof name === 'string' ? name : name} + {badge && ( + + )} + + } + primaryTypographyProps={{ fontSize: '0.875rem' }} + /> + + + ) + } -export const AppSidebarNav = ({ items }) => { - const navLink = (name, icon, badge, indent = false) => { return ( - <> - {icon - ? icon - : indent && ( - - - - )} - {name && name} - {badge && ( - - {badge.text} - - )} - + + + + {icon || (indent && )} + + + {name} + {badge && ( + + )} + + } + primaryTypographyProps={{ fontSize: '0.875rem' }} + /> + + ) } - const navItem = (item, index, indent = false) => { - const { component, name, badge, icon, ...rest } = item - const Component = component + const navTitle = (item, index) => { return ( - - {rest.to || rest.href ? ( - - {navLink(name, icon, badge, indent)} - - ) : ( - navLink(name, icon, badge, indent) - )} - + + + {item.name} + + ) } const navGroup = (item, index) => { - const { component, name, icon, items, to, ...rest } = item - const Component = component + const { name, icon, items: subItems } = item + const isOpen = openGroups[name] || false + return ( - - {items?.map((item, index) => - item.items ? navGroup(item, index) : navItem(item, index, true), - )} - + + + handleGroupClick(name)} + sx={{ + color: 'rgba(255,255,255,0.87)', + '&:hover': { + bgcolor: 'rgba(255,255,255,0.08)', + }, + }} + > + + {icon} + + + {isOpen ? ( + + ) : ( + + )} + + + + + {subItems?.map((subItem, subIndex) => + subItem.items ? navGroup(subItem, subIndex) : navItem(subItem, subIndex, true), + )} + + + ) } + const renderNavItem = (item, index) => { + if (item.items) { + return navGroup(item, index) + } + if ( + item.component?.name === 'CNavTitle' || + (item.name && !item.to && !item.href && !item.items) + ) { + return navTitle(item, index) + } + return navItem(item, index) + } + return ( - - {items && - items.map((item, index) => (item.items ? navGroup(item, index) : navItem(item, index)))} - + + {items && items.map((item, index) => renderNavItem(item, index))} + ) } diff --git a/src/components/DocsExample.js b/src/components/DocsExample.js index 2adedad493..69532de866 100644 --- a/src/components/DocsExample.js +++ b/src/components/DocsExample.js @@ -1,36 +1,50 @@ import PropTypes from 'prop-types' import React from 'react' -import { CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { cilCode, cilMediaPlay } from '@coreui/icons' +import Box from '@mui/material/Box' +import Tabs from '@mui/material/Tabs' +import Tab from '@mui/material/Tab' +import Link from '@mui/material/Link' +import PlayArrowIcon from '@mui/icons-material/PlayArrow' +import CodeIcon from '@mui/icons-material/Code' const DocsExample = (props) => { const { children, href, tabContentClassName } = props - const _href = `https://coreui.io/react/docs/${href}` + const _href = `https://mui.com/material-ui/${href || ''}` return ( -
    - - - - - Preview - - - - - - Code - - - - - - {children} - - -
    + + + + } + iconPosition="start" + label="Preview" + sx={{ minHeight: 48 }} + /> + } + iconPosition="start" + label="Code" + component={Link} + href={_href} + target="_blank" + sx={{ minHeight: 48 }} + /> + + + + {children} + + ) } diff --git a/src/components/DocsLink.js b/src/components/DocsLink.js index 7c72aa1284..5e40f80d9e 100644 --- a/src/components/DocsLink.js +++ b/src/components/DocsLink.js @@ -1,24 +1,22 @@ import PropTypes from 'prop-types' import React from 'react' -import { CLink } from '@coreui/react' +import Box from '@mui/material/Box' +import Link from '@mui/material/Link' +import Typography from '@mui/material/Typography' const DocsLink = (props) => { const { href, name, text, ...rest } = props - const _href = name ? `https://coreui.io/react/docs/components/${name}` : href + const _href = name ? `https://mui.com/material-ui/react-${name}` : href return ( -
    - - {text || 'docs'} - -
    + + + + {text || 'docs'} + + + ) } diff --git a/src/components/header/AppHeaderDropdown.js b/src/components/header/AppHeaderDropdown.js index 30c0df82ba..7f456697be 100644 --- a/src/components/header/AppHeaderDropdown.js +++ b/src/components/header/AppHeaderDropdown.js @@ -1,95 +1,129 @@ import React from 'react' -import { - CAvatar, - CBadge, - CDropdown, - CDropdownDivider, - CDropdownHeader, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, -} from '@coreui/react' -import { - cilBell, - cilCreditCard, - cilCommentSquare, - cilEnvelopeOpen, - cilFile, - cilLockLocked, - cilSettings, - cilTask, - cilUser, -} from '@coreui/icons' -import CIcon from '@coreui/icons-react' +import IconButton from '@mui/material/IconButton' +import Avatar from '@mui/material/Avatar' +import Menu from '@mui/material/Menu' +import MenuItem from '@mui/material/MenuItem' +import ListItemIcon from '@mui/material/ListItemIcon' +import ListItemText from '@mui/material/ListItemText' +import Divider from '@mui/material/Divider' +import Typography from '@mui/material/Typography' +import Badge from '@mui/material/Badge' +import Box from '@mui/material/Box' +import NotificationsIcon from '@mui/icons-material/Notifications' +import MailIcon from '@mui/icons-material/Mail' +import AssignmentIcon from '@mui/icons-material/Assignment' +import CommentIcon from '@mui/icons-material/Comment' +import PersonIcon from '@mui/icons-material/Person' +import SettingsIcon from '@mui/icons-material/Settings' +import CreditCardIcon from '@mui/icons-material/CreditCard' +import FolderIcon from '@mui/icons-material/Folder' +import LockIcon from '@mui/icons-material/Lock' import avatar8 from './../../assets/images/avatars/8.jpg' const AppHeaderDropdown = () => { + const [anchorEl, setAnchorEl] = React.useState(null) + const open = Boolean(anchorEl) + + const handleClick = (event) => { + setAnchorEl(event.currentTarget) + } + + const handleClose = () => { + setAnchorEl(null) + } + return ( - - - - - - Account - - - Updates - - 42 - - - - - Messages - - 42 - - - - - Tasks - - 42 - - - - - Comments - - 42 - - - Settings - - - Profile - - - - Settings - - - - Payments - - 42 - - - - - Projects - - 42 - - - - - - Lock Account - - - + <> + + + + + + + Account + + + + + + + Updates + + + + + + + Messages + + + + + + + Tasks + + + + + + + Comments + + + + + Settings + + + + + + + Profile + + + + + + Settings + + + + + + Payments + + + + + + + Projects + + + + + + + + Lock Account + + + ) } diff --git a/src/layout/DefaultLayout.js b/src/layout/DefaultLayout.js index 19fbf225fd..cfc29c6ae5 100644 --- a/src/layout/DefaultLayout.js +++ b/src/layout/DefaultLayout.js @@ -1,18 +1,30 @@ import React from 'react' +import Box from '@mui/material/Box' import { AppContent, AppSidebar, AppFooter, AppHeader } from '../components/index' +const drawerWidth = 256 + const DefaultLayout = () => { return ( -
    - -
    - -
    + + + + + -
    + -
    -
    + + ) } diff --git a/src/theme.js b/src/theme.js new file mode 100644 index 0000000000..d6cdcf0162 --- /dev/null +++ b/src/theme.js @@ -0,0 +1,103 @@ +import { createTheme } from '@mui/material/styles' + +const getTheme = (mode) => + createTheme({ + palette: { + mode, + primary: { + main: '#321fdb', + light: '#5c4ce3', + dark: '#2316a0', + }, + secondary: { + main: '#9da5b1', + light: '#b1b7c1', + dark: '#6c757d', + }, + success: { + main: '#2eb85c', + light: '#51c97c', + dark: '#1f8040', + }, + info: { + main: '#39f', + light: '#66b0ff', + dark: '#2673b3', + }, + warning: { + main: '#f9b115', + light: '#fac144', + dark: '#ae7c0e', + }, + error: { + main: '#e55353', + light: '#eb7575', + dark: '#a03a3a', + }, + background: { + default: mode === 'dark' ? '#1e1e2f' : '#f8f9fa', + paper: mode === 'dark' ? '#27293d' : '#ffffff', + }, + }, + typography: { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + h1: { + fontSize: '2.5rem', + fontWeight: 500, + }, + h2: { + fontSize: '2rem', + fontWeight: 500, + }, + h3: { + fontSize: '1.75rem', + fontWeight: 500, + }, + h4: { + fontSize: '1.5rem', + fontWeight: 500, + }, + h5: { + fontSize: '1.25rem', + fontWeight: 500, + }, + h6: { + fontSize: '1rem', + fontWeight: 500, + }, + }, + components: { + MuiDrawer: { + styleOverrides: { + paper: { + backgroundColor: mode === 'dark' ? '#1e1e2f' : '#3c4b64', + color: 'rgba(255, 255, 255, 0.87)', + }, + }, + }, + MuiAppBar: { + styleOverrides: { + root: { + backgroundColor: mode === 'dark' ? '#27293d' : '#ffffff', + color: mode === 'dark' ? '#ffffff' : '#3c4b64', + }, + }, + }, + MuiButton: { + styleOverrides: { + root: { + textTransform: 'none', + }, + }, + }, + MuiCard: { + styleOverrides: { + root: { + borderRadius: 8, + }, + }, + }, + }, + }) + +export default getTheme diff --git a/src/views/base/accordion/Accordion.js b/src/views/base/accordion/Accordion.js index edcb5e7aeb..8080e4e975 100644 --- a/src/views/base/accordion/Accordion.js +++ b/src/views/base/accordion/Accordion.js @@ -1,177 +1,174 @@ import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, - CAccordion, - CAccordionBody, - CAccordionHeader, - CAccordionItem, -} from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import MuiAccordion from '@mui/material/Accordion' +import AccordionSummary from '@mui/material/AccordionSummary' +import AccordionDetails from '@mui/material/AccordionDetails' +import ExpandMoreIcon from '@mui/icons-material/ExpandMore' import { DocsComponents, DocsExample } from 'src/components' const Accordion = () => { return ( - - + + - - - React Accordion - - -

    + + MUI Accordion} /> + + Click the accordions below to expand/collapse the accordion content. -

    - - - - Accordion Item #1 - - This is the first item's accordion body. It is hidden by + + + + }> + Accordion Item #1 + + + + This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - - Accordion Item #2 - - This is the second item's accordion body. It is hidden by + showing and hiding via CSS transitions. + + + + + }> + Accordion Item #2 + + + + This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - - Accordion Item #3 - - This is the second item's accordion body. It is hidden by + showing and hiding via CSS transitions. + + + + + }> + Accordion Item #3 + + + + This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - + showing and hiding via CSS transitions. + + + -     -     - - - React Accordion Flush - - -

    - Add flush to remove the default background-color, some - borders, and some rounded corners to render accordions edge-to-edge with their parent - container. -

    - - - - Accordion Item #1 - - This is the first item's accordion body. It is hidden by - default, until the collapse plugin adds the appropriate classes that we use to - style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - - Accordion Item #2 - - This is the second item's accordion body. It is hidden by - default, until the collapse plugin adds the appropriate classes that we use to - style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - - Accordion Item #3 - - This is the second item's accordion body. It is hidden by - default, until the collapse plugin adds the appropriate classes that we use to - style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - + + + + + MUI Accordion Flush + + } + /> + + + Use disableGutters and square props to remove padding and + rounded corners for a flush appearance. + + + + }> + Accordion Item #1 + + + + This is the first item's accordion body. It is hidden by + default, until expanded. You can customize the appearance using MUI's + styling system. + + + + + }> + Accordion Item #2 + + + + This is the second item's accordion body. It is hidden by + default, until expanded. You can customize the appearance using MUI's + styling system. + + + + + }> + Accordion Item #3 + + + + This is the third item's accordion body. It is hidden by + default, until expanded. You can customize the appearance using MUI's + styling system. + + + -     -     - - - React Accordion Always open - - -

    - Add alwaysOpen property to make accordion items stay open when another - item is opened. -

    - - - - Accordion Item #1 - - This is the first item's accordion body. It is hidden by - default, until the collapse plugin adds the appropriate classes that we use to - style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - - Accordion Item #2 - - This is the second item's accordion body. It is hidden by - default, until the collapse plugin adds the appropriate classes that we use to - style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - - Accordion Item #3 - - This is the second item's accordion body. It is hidden by - default, until the collapse plugin adds the appropriate classes that we use to - style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - + + + + + MUI Accordion{' '} + Multiple Open + + } + /> + + + By default, MUI Accordions can stay open independently when another item is opened. + + + + }> + Accordion Item #1 + + + + This is the first item's accordion body. Multiple + accordions can be open at the same time by default in MUI. + + + + + }> + Accordion Item #2 + + + + This is the second item's accordion body. Multiple + accordions can be open at the same time by default in MUI. + + + + + }> + Accordion Item #3 + + + + This is the third item's accordion body. Multiple + accordions can be open at the same time by default in MUI. + + + -     -     -     -     + + + + ) } diff --git a/src/views/base/breadcrumbs/Breadcrumbs.js b/src/views/base/breadcrumbs/Breadcrumbs.js index 3e1df44754..5c0427fe6a 100644 --- a/src/views/base/breadcrumbs/Breadcrumbs.js +++ b/src/views/base/breadcrumbs/Breadcrumbs.js @@ -1,74 +1,59 @@ import React from 'react' -import { - CBreadcrumb, - CBreadcrumbItem, - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, - CLink, -} from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import MuiBreadcrumbs from '@mui/material/Breadcrumbs' +import Link from '@mui/material/Link' import { DocsComponents, DocsExample } from 'src/components' const Breadcrumbs = () => { return ( - - + + - - - React Breadcrumb - - -

    + + MUI Breadcrumbs} /> + + The breadcrumb navigation provides links back to each previous page the user navigated - through and shows the current location in a website or an application. You don’t have - to add separators, because they automatically added in CSS through{' '} - - {' '} - ::before - {' '} - and{' '} - - {' '} - content - - . -

    - - - - Home - - Library - - - - Home - - - Library - - Data - - - - Home - - - Library - - - Data - - Bootstrap - + through and shows the current location in a website or an application. Separators are + automatically added between items. + + + + + Home + + Library + + + + Home + + + Library + + Data + + + + Home + + + Library + + + Data + + MUI + -     -     -     -     + + + + ) } diff --git a/src/views/base/cards/Cards.js b/src/views/base/cards/Cards.js index daf44f60ef..6e36b8383d 100644 --- a/src/views/base/cards/Cards.js +++ b/src/views/base/cards/Cards.js @@ -1,934 +1,199 @@ import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardFooter, - CCardGroup, - CCardHeader, - CCardImage, - CCardLink, - CCardSubtitle, - CCardText, - CCardTitle, - CListGroup, - CListGroupItem, - CNav, - CNavItem, - CNavLink, - CCol, - CRow, -} from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import CardMedia from '@mui/material/CardMedia' +import CardActions from '@mui/material/CardActions' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' import ReactImg from 'src/assets/images/react.jpg' const Cards = () => { return ( - - + + - - - Card Example - - -

    - Cards are built with as little markup and styles as possible but still manage to - deliver a bunch of control and customization. Built with flexbox, they offer easy - alignment and mix well with other CoreUI components. Cards have no top, left, and - right margins by default, so use{' '} - spacing utilities as needed. - They have no fixed width to start, so they'll fill the full width of its parent. -

    -

    - Below is an example of a basic card with mixed content and a fixed width. Cards have - no fixed width to start, so they'll naturally fill the full width of its parent - element. -

    - - - - - Card title - + + MUI Card} /> + + + Cards contain content and actions about a single subject. + + + + + + + Card title + + Some quick example text to build on the card title and make up the bulk of the - card's content. - - + card's content. + + + + + + + + + +     + + + + MUI Card Body + + } + /> + + + The building block of a card is the CardContent. + + + + This is some text within a card body. + + + + + + + + + MUI Card{' '} + Titles, text, and links + + } + /> + + + Card titles and subtitles are used by adding Typography components. + + + + + + Card title + + + Card subtitle + + Some quick example text to build on the card title and make up the bulk of the - card's content. - - - - Cras justo odio - Dapibus ac facilisis in - Vestibulum at eros - - - Card link - Another link - - - - - -     - - - - Card Header and footer - - -

    + card's content. + + + + + + + + + + + + + + + MUI Card{' '} + Header and Footer + + } + /> + + Add an optional header and/or footer within a card. -

    - - - Header - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - -

    - Card headers can be styled by adding ex. as="h5". -

    - - - Header - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - - - - Quote - -
    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat - a ante. -

    -
    - Someone famous in Source Title -
    -
    -     -     -     - - - Header - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - 2 days ago - - -     -     -     - - - - Card Body - - -

    - Cards assume no specific width to start, so they'll be 100% wide - unless otherwise stated. You can adjust this as required with custom CSS, grid - classes, grid Sass mixins, or services. -

    -

    Using grid markup

    -

    - Using the grid, wrap cards in columns and rows as needed. -

    - - - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - - - -

    Using utilities

    -

    - Use some of{' '} - available sizing utilities to - rapidly set a card's width. -

    - - - - Card title - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - - - Card title - + + + + + + + Special title treatment + + With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - - Using custom CSS -

    - Use custom CSS in your stylesheets or as inline styles to set a width. -

    - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - -     -     -     - - - - Card Text alignment - - -

    - You can instantly change the text arrangement of any card—in its whole or specific - parts—with{' '} - text align classes - . -

    - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - -     -     -     - - - - Card Navigation - - -

    - Add some navigation to a <CCardHeader> with our{' '} - <CNav> component. -

    - - - - - - - Active - - - - Link - - - - Disabled - - - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - - - - - - - - Active - - - - Link - - - - Disabled - - - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - -     -     -     - - - - Card Image caps - - -

    - Similar to headers and footers, cards can include top and bottom "image - caps"—images at the top or bottom of a card. -

    - - - - - - - Card title - + + + + + + + + 2 days ago + + + + + + + + + + + MUI Card Grid Cards + + } + /> + + + Use MUI Grid to create a grid of cards. + + + + + + + + This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - Last updated 3 mins ago - -     -     -     - - - - Card title - + additional content. + + + + + Last updated 3 mins ago + + + + + + + + + This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - Last updated 3 mins ago - - - - - -     - - - - - - - - Card Card styles - - -

    - Cards include various options for customizing their backgrounds, borders, and color. -

    -

    Background and color

    -

    - Use color property to change the appearance of a card. -

    - - - {[ - { color: 'primary', textColor: 'white' }, - { color: 'secondary', textColor: 'white' }, - { color: 'success', textColor: 'white' }, - { color: 'danger', textColor: 'white' }, - { color: 'warning' }, - { color: 'info', textColor: 'white' }, - { color: 'light' }, - { color: 'dark', textColor: 'white' }, - ].map((item, index) => ( - - - Header - - {item.color} card title - - Some quick example text to build on the card title and make up the bulk of - the card's content. - - - - - ))} - - -

    Border

    -

    - Use border utilities to change - just the border-color of a card. Note that you can set{' '} - textColor property on the <CCard> or a subset of the - card's contents as shown below. -

    - - - {[ - { color: 'primary', textColor: 'primary' }, - { color: 'secondary', textColor: 'secondary' }, - { color: 'success', textColor: 'success' }, - { color: 'danger', textColor: 'danger' }, - { color: 'warning', textColor: 'warning' }, - { color: 'info', textColor: 'info' }, - { color: 'light' }, - { color: 'dark' }, - ].map((item, index) => ( - - - Header - - {item.color} card title - - Some quick example text to build on the card title and make up the bulk of - the card's content. - - - - - ))} - - -

    Top border

    -

    - Use border utilities to change - just the border-color of a card. Note that you can set{' '} - textColor property on the <CCard> or a subset of the - card's contents as shown below. -

    - - - {[ - { color: 'primary', textColor: 'primary' }, - { color: 'secondary', textColor: 'secondary' }, - { color: 'success', textColor: 'success' }, - { color: 'danger', textColor: 'danger' }, - { color: 'warning', textColor: 'warning' }, - { color: 'info', textColor: 'info' }, - { color: 'light' }, - { color: 'dark' }, - ].map((item, index) => ( - - - Header - - {item.color} card title - - Some quick example text to build on the card title and make up the bulk of - the card's content. - - - - - ))} - - -     -     -     - - - - Card Card groups - - -

    - Use card groups to render cards as a single, attached element with equal width and - height columns. Card groups start off stacked and use display: flex; to - become attached with uniform dimensions starting at the sm breakpoint. -

    - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - Last updated 3 mins ago - - - - - - - Card title - - This card has supporting text below as a natural lead-in to additional - content. - - - Last updated 3 mins ago - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This card has even longer content than the first to show - that equal height action. - - - Last updated 3 mins ago - - - - - -

    - When using card groups with footers, their content will automatically line up. -

    - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - Card title - - This card has supporting text below as a natural lead-in to additional - content. - - - - Last updated 3 mins ago - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This card has even longer content than the first to show - that equal height action. - - - - Last updated 3 mins ago - - - - -     -     -     - - - - Card Grid cards - - -

    - Use the CRow component and set{' '} - {xs|sm|md|lg|xl|xxl}={{ cols: * }} property - to control how many grid columns (wrapped around your cards) you show per row. For - example, here's xs={{cols: 1}} laying out the - cards on one column, and md={{cols: 1}} splitting - four cards to equal width across multiple rows, from the medium breakpoint up. -

    - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - -

    - Change it to md={{ cols: 3}} and you'll see the - fourth card wrap. -

    - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - -     -     -     - + additional content. + + + + + Last updated 3 mins ago + + + + + + + + + + ) } diff --git a/src/views/base/carousels/Carousels.js b/src/views/base/carousels/Carousels.js index 6d8763902d..26743988c1 100644 --- a/src/views/base/carousels/Carousels.js +++ b/src/views/base/carousels/Carousels.js @@ -1,212 +1,187 @@ -import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCarousel, - CCarouselCaption, - CCarouselItem, - CCol, - CRow, -} from '@coreui/react' +import React, { useState } from 'react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Box from '@mui/material/Box' +import MobileStepper from '@mui/material/MobileStepper' +import Button from '@mui/material/Button' +import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft' +import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight' import { DocsComponents, DocsExample } from 'src/components' import AngularImg from 'src/assets/images/angular.jpg' import ReactImg from 'src/assets/images/react.jpg' import VueImg from 'src/assets/images/vue.jpg' -const slidesLight = [ - 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23AAA%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23F5F5F5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', - 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23BBB%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23EEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', - 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23999%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23E5E5E5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', +const images = [ + { label: 'React', imgPath: ReactImg }, + { label: 'Angular', imgPath: AngularImg }, + { label: 'Vue', imgPath: VueImg }, ] +const SimpleCarousel = () => { + const [activeStep, setActiveStep] = useState(0) + const maxSteps = images.length + + const handleNext = () => { + setActiveStep((prevActiveStep) => prevActiveStep + 1) + } + + const handleBack = () => { + setActiveStep((prevActiveStep) => prevActiveStep - 1) + } + + return ( + + + + Next + + + } + backButton={ + + } + /> + + ) +} + +const CarouselWithCaptions = () => { + const [activeStep, setActiveStep] = useState(0) + const maxSteps = images.length + + const handleNext = () => { + setActiveStep((prevActiveStep) => prevActiveStep + 1) + } + + const handleBack = () => { + setActiveStep((prevActiveStep) => prevActiveStep - 1) + } + + return ( + + + + + {images[activeStep].label} + + Some representative placeholder content for slide {activeStep + 1}. + + + + + Next + + + } + backButton={ + + } + /> + + ) +} + const Carousels = () => { return ( - - + + - - - Carousel Slide only - - -

    Here’s a carousel with slides

    - - - - slide 1 - - - slide 2 - - - slide 3 - - - -     -     -     - - - - Carousel With controls - - -

    - Adding in the previous and next controls by controls property. -

    - - - - slide 1 - - - slide 2 - - - slide 3 - - - -     -     -     - - - - Carousel With indicators - - -

    - You can attach the indicators to the carousel, lengthwise the controls, too. -

    - - - - slide 1 - - - slide 2 - - - slide 3 - - - -     -     -     - - - - Carousel With captions - - -

    - You can add captions to slides with the <CCarouselCaption> element - within any <CCarouselItem>. They can be immediately hidden on - smaller viewports, as shown below, with optional{' '} - display utilities. We hide them - with .d-none and draw them back on medium-sized devices with{' '} - .d-md-block. -

    - - - - slide 1 - -
    First slide label
    -

    Some representative placeholder content for the first slide.

    -     -     - - slide 2 - -
    Second slide label
    -

    Some representative placeholder content for the first slide.

    -     -     - - slide 3 - -
    Third slide label
    -

    Some representative placeholder content for the first slide.

    -     -     -     -     -     -     -     - - - - Carousel Crossfade - - -

    - Add transition="crossfade" to your carousel to animate slides - with a fade transition instead of a slide. -

    - - - - slide 1 - - - slide 2 - - - slide 3 - - + + + MUI Carousel Basic + + } + /> + + + MUI provides MobileStepper component that can be used to create carousel-like + experiences. For more advanced carousels, consider using libraries like + react-material-ui-carousel. + + + -     -     -     - - - - Carousel Dark variant - - -

    - Add dark property to the CCarousel for darker controls, - indicators, and captions. Controls have been inverted from their default white fill - with the filter CSS property. Captions and controls have additional Sass - variables that customize the color and background-color. -

    - - - - slide 1 - -
    First slide label
    -

    Some representative placeholder content for the first slide.

    -     -     - - slide 2 - -
    Second slide label
    -

    Some representative placeholder content for the first slide.

    -     -     - - slide 3 - -
    Third slide label
    -

    Some representative placeholder content for the first slide.

    -     -     -     + + + + + + + MUI Carousel{' '} + With Captions + + } + /> + + + You can add captions to slides by overlaying text on the images. + + + -     -     -     -     + + + + ) } diff --git a/src/views/base/collapses/Collapses.js b/src/views/base/collapses/Collapses.js index d36f48f4a5..1a86fbf99a 100644 --- a/src/views/base/collapses/Collapses.js +++ b/src/views/base/collapses/Collapses.js @@ -1,5 +1,12 @@ import React, { useState } from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CCol, CCollapse, CRow } from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import Collapse from '@mui/material/Collapse' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const Collapses = () => { @@ -9,127 +16,127 @@ const Collapses = () => { const [visibleB, setVisibleB] = useState(false) return ( - - + + - - - React Collapse - - -

    You can use a link or a button component.

    - - { - e.preventDefault() - setVisible(!visible) - }} - > - Link - - setVisible(!visible)}> - Button - - - - + + MUI Collapse} /> + + + You can use a link or a button component to toggle the collapse. + + + + + + + + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. - - - + + + -     -     -     - - - - React Collapse Horizontal - - -

    You can use a link or a button component.

    - - + + + + + + MUI Collapse Horizontal + + } + /> + + + The collapse component supports horizontal collapsing with the orientation prop. + + + + + + + + This is some placeholder content for a horizontal collapse. It's hidden + by default and shown when triggered. + + + + -     -     -     - - - - React Collapse multi target - - -

    - A <CButton> can show and hide multiple elements. -

    - - setVisibleA(!visibleA)}> - Toggle first element - - setVisibleB(!visibleB)}> - Toggle second element - - { - setVisibleA(!visibleA) - setVisibleB(!visibleB) - }} - > - Toggle both elements - - - - - - + + + + + + + MUI Collapse Multi Target + + } + /> + + + A Button can show and hide multiple elements. + + + + + + + + + + + + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry - richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes - anderson cred nesciunt sapiente ea proident. - - - - - - - - + richardson ad squid. + + + + + + + + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry - richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes - anderson cred nesciunt sapiente ea proident. - - - - - + richardson ad squid. + + + + + -     -     -     -     + + + + ) } diff --git a/src/views/base/list-groups/ListGroups.js b/src/views/base/list-groups/ListGroups.js index a25e8bd6ef..cf5af0f0fc 100644 --- a/src/views/base/list-groups/ListGroups.js +++ b/src/views/base/list-groups/ListGroups.js @@ -1,346 +1,162 @@ import React from 'react' -import { - CBadge, - CCard, - CCardBody, - CCardHeader, - CCol, - CFormCheck, - CListGroup, - CListGroupItem, - CRow, -} from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import List from '@mui/material/List' +import ListItem from '@mui/material/ListItem' +import ListItemText from '@mui/material/ListItemText' +import ListItemButton from '@mui/material/ListItemButton' +import Chip from '@mui/material/Chip' +import Checkbox from '@mui/material/Checkbox' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const ListGroups = () => { return ( - - + + - - - React List Group Basic example - - -

    - The default list group is an unordered list with items and the proper CSS classes. - Build upon it with the options that follow, or with your CSS as required. -

    - - - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - Vestibulum at eros - + + + MUI List Basic example + + } + /> + + + The default list is built with List and ListItem components from MUI. + + + + + + + + + + + + + + + + + + + -     -     -     - - - - React List Group Active items - - -

    - Add active boolean property to a <CListGroupItem> to - show the current active selection. -

    - - - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - Vestibulum at eros - + + + + + + + MUI List With Badges + + } + /> + + + Add badges to any list item to show unread counts, activity, and more. + + + + } + > + + + }> + + + }> + + + -     -     -     - - - - React List Group Disabled items - - -

    - Add disabled boolean property to a <CListGroupItem> to - make it appear disabled. -

    - - - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - Vestibulum at eros - + + + + + + + MUI List Clickable Items + + } + /> + + + Use ListItemButton for clickable list items with hover states. + + + + + + + + + + + + + + + + -     -     -     - - - - React List Group Links and buttons - - -

    - Use <a>s or <button>s to create{' '} - actionable list group items with hover, disabled, and active states by adding{' '} - as="a|button". We separate these pseudo-classes to ensure list - groups made of non-interactive elements (like <li>s or{' '} - <div> - s) don'tprovide a click or tap affordance. -

    - - - - Cras justo odio - - - Dapibus ac facilisis in - - - Morbi leo risus - - - Porta ac consectetur ac - - - Vestibulum at eros - - + + + + + + + MUI List With Checkboxes + + } + /> + + + Place MUI checkboxes within list items. + + + + + + + + + + + + + + + + + + + + + + + + -     -     -     - - - - React List Group Flush - - -

    - Add flush boolean property to remove some borders and rounded corners to - render list group items edge-to-edge in a parent container (e.g., cards). -

    - - - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - Vestibulum at eros - - -     -     -     - - - - React List Group Horizontal - - -

    - Add layout="horizontal" to change the layout of list group items - from vertical to horizontal across all breakpoints. Alternatively, choose a responsive - variant .layout="horizontal-{sm | md | lg | xl | xxl}"{' '} - to make a list group horizontal starting at that breakpoint's{' '} - min-width. Currently{' '} - horizontal list groups cannot be combined with flush list groups. -

    - - {['', '-sm', '-md', '-lg', '-xl', '-xxl'].map((breakpoint, index) => ( - - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - - ))} - -     -     -     - - - - React List Group Contextual classes - - -

    - Use contextual classes to style list items with a stateful background and color. -

    - - - Dapibus ac facilisis in - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - A simple {color} list group item - - ))} - - -

    - Contextual classes also work with <a>s or{' '} - <button>s. Note the addition of the hover styles here not present - in the previous example. Also supported is the active state; apply it to - indicate an active selection on a contextual list group item. -

    - - - - Dapibus ac facilisis in - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - A simple {color} list group item - - ))} - - -     -     -     - - - - React List Group With badges - - -

    - Add badges to any list group item to show unread counts, activity, and more. -

    - - - - Cras justo odio - - 14 - - - - Dapibus ac facilisis in - - 2 - - - - Morbi leo risus - - 1 - - - - -     -     -     - - - - React List Group Custom content - - -

    - Add nearly any HTML within, even for linked list groups like the one below, with the - help of flexbox utilities. -

    - - - -
    -
    List group item heading
    - 3 days ago -
    -

    - Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus - varius blandit. -

    - Donec id elit non mi porta. -     - -
    -
    List group item heading
    - 3 days ago -
    -

    - Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus - varius blandit. -

    - Donec id elit non mi porta. -     - -
    -
    List group item heading
    - 3 days ago -
    -

    - Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus - varius blandit. -

    - Donec id elit non mi porta. -     -     -     -     -     -     - - - - React List Group Checkboxes and radios - - -

    - Place CoreUI's checkboxes and radios within list group items and customize as - needed. -

    - - - - - - - - - - - - - - - - - - - -     -     -     -     + + + + ) } diff --git a/src/views/base/navs/Navs.js b/src/views/base/navs/Navs.js index 052ed6fc5c..595598b22f 100644 --- a/src/views/base/navs/Navs.js +++ b/src/views/base/navs/Navs.js @@ -1,397 +1,152 @@ -import React from 'react' -import { - CRow, - CCol, - CCard, - CCardBody, - CCardHeader, - CDropdown, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CNav, - CNavItem, - CNavLink, -} from '@coreui/react' +import React, { useState } from 'react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Tabs from '@mui/material/Tabs' +import Tab from '@mui/material/Tab' +import Box from '@mui/material/Box' +import Button from '@mui/material/Button' +import Menu from '@mui/material/Menu' +import MenuItem from '@mui/material/MenuItem' import { DocsComponents, DocsExample } from 'src/components' const Navs = () => { + const [tabValue, setTabValue] = useState(0) + const [anchorEl, setAnchorEl] = useState(null) + + const handleTabChange = (event, newValue) => { + setTabValue(newValue) + } + + const handleMenuClick = (event) => { + setAnchorEl(event.currentTarget) + } + + const handleMenuClose = () => { + setAnchorEl(null) + } + return ( - - + + - - - React Navs Base navs - - -

    - The base .nav component is built with flexbox and provide a strong - foundation for building all types of navigation components. It includes some style - overrides (for working with lists), some link padding for larger hit areas, and basic - disabled styling. -

    - - - - - Active - - - - Link - - - Link - - - - Disabled - - - - -

    - Classes are used throughout, so your markup can be super flexible. Use{' '} - <ul>s like above, <ol> if the order of your - items is important, or roll your own with a <nav> element. Because - the .nav uses display: flex, the nav links behave the same as nav items would, but - without the extra markup. -

    - - - - Active - - Link - Link - - Disabled - - - -     -     -     - - - - React Navs Horizontal alignment - - -

    - Change the horizontal alignment of your nav with{' '} - - flexbox utilities - - . By default, navs are left-aligned, but you can easily change them to center or right - aligned. -

    -

    - Centered with .justify-content-center: -

    - - - - - Active - - - - Link - - - Link - - - - Disabled - - - + + + MUI Tabs Basic + + } + /> + + + MUI Tabs provide navigation between different views or sections. + + + + + + + + + + -

    - Right-aligned with .justify-content-end: -

    - - - - - Active - - - - Link - - - Link - - - - Disabled - - - +     +     + + + + + MUI Tabs Centered + + } + /> + + + Use the centered prop to center the tabs. + + + + + + + + + + -     -     -     - - - - React Navs Vertical - - -

    - Stack your navigation by changing the flex item direction with the{' '} - .flex-column utility. Need to stack them on some viewports but not - others? Use the responsive versions (e.g., .flex-sm-column). -

    - - - - - Active - - - - Link - - - Link - - - - Disabled - - - + + + + + + + MUI Tabs Vertical + + } + /> + + + Use the orientation prop to create vertical tabs. + + + + + + + + + + -     -     -     - - - - React Navs Tabs - - -

    - Takes the basic nav from above and adds the variant="tabs" class - to generate a tabbed interface -

    - - - - - Active - - - - Link - - - Link - - - - Disabled - - - - -     -     -     - - - - React Navs Pills - - -

    - Take that same HTML, but use variant="pills" instead: -

    - - - - - Active - - - - Link - - - Link - - - - Disabled - - - - -     -     -     - - - - React Navs Fill and justify - - -

    - Force your .nav's contents to extend the full available width one of - two modifier classes. To proportionately fill all available space with your{' '} - .nav-items, use layout="fill". Notice that all - horizontal space is occupied, but not every nav item has the same width. -

    - - - - - Active - - - - Link - - - Link - - - - Disabled - - - - -

    - For equal-width elements, use layout="justified". All horizontal - space will be occupied by nav links, but unlike the .nav-fill above, every nav item - will be the same width. -

    - - - - - Active - - - - Link - - - Link - - - - Disabled - - - - -     -     -     - - - - React Navs Working with flex utilities - - -

    - If you need responsive nav variations, consider using a series of{' '} - flexbox utilities. While more - verbose, these utilities offer greater customization across responsive breakpoints. In - the example below, our nav will be stacked on the lowest breakpoint, then adapt to a - horizontal layout that fills the available width starting from the small breakpoint. -

    - - - - Active - - Link - Link - + + + + + + + MUI Navigation With Menu + + } + /> + + + Combine tabs with dropdown menus for more complex navigation. + + + + + + + Action + Another action + Something else + + + + -     -     -     -     + + + + ) } diff --git a/src/views/base/paginations/Paginations.js b/src/views/base/paginations/Paginations.js index 24dc229a10..75c1d26b31 100644 --- a/src/views/base/paginations/Paginations.js +++ b/src/views/base/paginations/Paginations.js @@ -1,174 +1,97 @@ import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCol, - CPagination, - CPaginationItem, - CRow, -} from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Pagination from '@mui/material/Pagination' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const Paginations = () => { return ( - - + + - - - React Pagination - - -

    - We use a large block of connected links for our pagination, making links hard to miss - and easily scalable—all while providing large hit areas. Pagination is built with list - HTML elements so screen readers can announce the number of available links. Use a - wrapping <nav> element to identify it as a navigation section to - screen readers and other assistive technologies. -

    -

    - In addition, as pages likely have more than one such navigation section, it's - advisable to provide a descriptive aria-label for the{' '} - <nav> to reflect its purpose. For example, if the pagination - component is used to navigate between a set of search results, an appropriate label - could be aria-label="Search results pages". -

    - - - Previous - 1 - 2 - 3 - Next - + + MUI Pagination} /> + + + MUI Pagination component enables the user to select a specific page from a range of + pages. + + + -     -     -     - - - - React Pagination Working with icons - - -

    - Looking to use an icon or symbol in place of text for some pagination links? Be sure - to provide proper screen reader support with aria attributes. -

    - - - - - - 1 - 2 - 3 - - - - + + + + + + + MUI Pagination{' '} + With Arrows + + } + /> + + + Use showFirstButton and showLastButton props to show first/last page buttons. + + + -     -     -     - - - - React Pagination Disabled and active states - - -

    - Pagination links are customizable for different circumstances. Use{' '} - disabled for links that appear un-clickable and .active to - indicate the current page. -

    -

    - While the disabled prop uses pointer-events: none to{' '} - try to disable the link functionality of <a>s, that CSS - property is not yet standardized and doesn'taccount for keyboard navigation. As - such, we always add tabindex="-1" on disabled links and use - custom JavaScript to fully disable their functionality. -

    - - - - - - 1 - 2 - 3 - - - - + + + + + + + MUI Pagination Sizes + + } + /> + + + Use the size prop for different pagination sizes. + + + + + + + -     -     -     - - - - React Pagination Sizing - - -

    - Fancy larger or smaller pagination? Add size="lg" or{' '} - size="sm" for additional sizes. -

    - - - Previous - 1 - 2 - 3 - Next - + + + + + + + MUI Pagination Colors + + } + /> + + + Use the color prop for different pagination colors. + + + + + + - - - Previous - 1 - 2 - 3 - Next - - -     -     -     - - - - React Pagination Alignment - - -

    - Change the alignment of pagination components with{' '} - flexbox utilities. -

    - - - Previous - 1 - 2 - 3 - Next - - - - - Previous - 1 - 2 - 3 - Next - - -     -     -     -     + + + + ) } diff --git a/src/views/base/placeholders/Placeholders.js b/src/views/base/placeholders/Placeholders.js index 743416d93d..76c9720975 100644 --- a/src/views/base/placeholders/Placeholders.js +++ b/src/views/base/placeholders/Placeholders.js @@ -1,196 +1,111 @@ import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCardImage, - CCardText, - CCardTitle, - CCol, - CPlaceholder, - CRow, -} from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Skeleton from '@mui/material/Skeleton' +import Box from '@mui/material/Box' +import Button from '@mui/material/Button' import { DocsComponents, DocsExample } from 'src/components' import ReactImg from 'src/assets/images/react.jpg' const Placeholders = () => { return ( - - + + - - - React Placeholder - - -

    - In the example below, we take a typical card component and recreate it with - placeholders applied to create a "loading card". Size and proportions are the - same between the two. -

    - -
    - - - - Card title - - Some quick example text to build on the card title and make up the bulk of the - card's content. - - + + MUI Skeleton} /> + + + MUI Skeleton displays a placeholder preview of your content before the data gets + loaded to reduce load-time frustration. + + + + + + + Card title + + Some quick example text to build on the card title. + +
    + + + + + + + + + + + + + +     - - - - - React Placeholder - - -

    - Create placeholders with the <CPlaceholder> component and a grid - column propx (e.g., xs={6}) to set the width. They can - replace the text inside an element or be added as a modifier class to an existing - component. -

    - - - + + + + + + + MUI Skeleton Variants + + } + /> + + + The component supports 3 shape variants: text, circular, and rectangular. + + + + + + + + -     -     - - - React Placeholder Width - - -

    - You can change the width through grid column classes, width utilities, or - inline styles. -

    - - - - + + + + + + + MUI Skeleton Animation + + } + /> + + + By default, the skeleton pulsates. You can change the animation to a wave or disable + it entirely. + + + + + + + -     -     - - - React Placeholder Color - - -

    - By default, the <CPlaceholder> uses currentColor. This - can be overridden with a custom color or utility class. -

    - - - - - - - - - - - - -     -     - - - React Placeholder Sizing - - -

    - The size of <CPlaceholder>s are based on the typographic style of - the parent element. Customize them with size prop: lg,{' '} - sm, or xs. -

    - - - - - - -     -     - - - React Placeholder Animation - - -

    - Animate placeholders with animation="glow" or{' '} - animation="wave" to better convey the perception of something - being actively loaded. -

    - - - - - - - - - -     -     - - + + + + ) } diff --git a/src/views/base/popovers/Popovers.js b/src/views/base/popovers/Popovers.js index 794e100258..e17e5feba3 100644 --- a/src/views/base/popovers/Popovers.js +++ b/src/views/base/popovers/Popovers.js @@ -1,71 +1,116 @@ -import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CPopover, CRow, CCol } from '@coreui/react' +import React, { useState } from 'react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import Popover from '@mui/material/Popover' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const Popovers = () => { + const [anchorEl, setAnchorEl] = useState(null) + const [anchorElTop, setAnchorElTop] = useState(null) + const [anchorElBottom, setAnchorElBottom] = useState(null) + const [anchorElLeft, setAnchorElLeft] = useState(null) + return ( - - + + - - - React Popover Basic example - - - - + MUI Popover} /> + + + A Popover can be used to display some content on top of another. + + + + setAnchorEl(null)} + anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }} > - - Click to toggle popover - - + + + Popover title + + + And here's some amazing content. It's very engaging. Right? + + + - - - - - - - React Popover Four directions - - -

    - Four options are available: top, right, bottom, and left aligned. Directions are - mirrored when using CoreUI for React in RTL. -

    - - - Popover on top - - - Popover on right - - - Popover on bottom - - - Popover on left - + + + + + + + MUI Popover Directions + + } + /> + + + Use anchorOrigin and transformOrigin props to control popover placement. + + + + + setAnchorElTop(null)} + anchorOrigin={{ vertical: 'top', horizontal: 'center' }} + transformOrigin={{ vertical: 'bottom', horizontal: 'center' }} + > + + Top popover + + + + setAnchorElBottom(null)} + anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} + transformOrigin={{ vertical: 'top', horizontal: 'center' }} + > + + Bottom popover + + + + setAnchorElLeft(null)} + anchorOrigin={{ vertical: 'center', horizontal: 'left' }} + transformOrigin={{ vertical: 'center', horizontal: 'right' }} + > + + Left popover + + + -     -     -     -     + + + + ) } diff --git a/src/views/base/progress/Progress.js b/src/views/base/progress/Progress.js index 78715d305d..5e3be7649d 100644 --- a/src/views/base/progress/Progress.js +++ b/src/views/base/progress/Progress.js @@ -1,186 +1,87 @@ import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CProgress, CProgressBar, CRow } from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import LinearProgress from '@mui/material/LinearProgress' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const Progress = () => { return ( - - + + - - - React Progress Basic example - - -

    - Progress components are built with two HTML elements, some CSS to set the width, and a - few attributes. We don'tuse{' '} - - the HTML5 <progress> element - - , ensuring you can stack progress bars, animate them, and place text labels over them. -

    - - - - - - - - - - - - - - - - + + MUI Progress} /> + + + Progress indicators inform users about the status of ongoing processes. + + + + + + + + + -     -     -     - - - - React Progress Labels - - -

    - Add labels to your progress bars by placing text within the{' '} - <CProgressBar>. -

    - - - 25% - + + + + + + + MUI Progress With Labels + + } + /> + + + Add labels to your progress bars by placing text within. + + + + + + + + 25% + + -     -     -     - - - - React Progress Height - - -

    - We only set a height value on the <CProgress>, so if - you change that value the inner <CProgressBar> will automatically - resize accordingly. -

    - - - - - - - + + + + + + + MUI Progress Colors + + } + /> + + + Use color prop to change the progress bar color. + + + + + + + + -     -     -     - - - - React Progress Backgrounds - - -

    - Use color prop to change the appearance of individual progress bars. -

    - - - - - - - - - - - - - - -     -     -     - - - - React Progress Multiple bars - - -

    - Include multiple progress bars in a progress component if you need. -

    - - - - - - - -     -     -     - - - - React Progress Striped - - -

    - Add variant="striped" to any <CProgressBar> to - apply a stripe via CSS gradient over the progress bar's background color. -

    - - - - - - - - - - - - - - -     -     -     - - - - React Progress Animated stripes - - -

    - The striped gradient can also be animated. Add animated property to{' '} - <CProgressBar> to animate the stripes right to left via CSS3 - animations. -

    - - - - - - - - - - - - - - -     -     -     -     + + + + ) } diff --git a/src/views/base/spinners/Spinners.js b/src/views/base/spinners/Spinners.js index 5553dbc0f7..fd2fd1fb09 100644 --- a/src/views/base/spinners/Spinners.js +++ b/src/views/base/spinners/Spinners.js @@ -1,120 +1,115 @@ import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CCol, CSpinner, CRow } from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import CircularProgress from '@mui/material/CircularProgress' +import Box from '@mui/material/Box' +import Button from '@mui/material/Button' import { DocsComponents, DocsExample } from 'src/components' const Spinners = () => { return ( - - + + - - - React Spinner Border - - -

    - Use the border spinners for a lightweight loading indicator. -

    - - + + MUI Circular Progress} /> + + + Circular progress indicators inform users about the status of ongoing processes. + + + + + -

    - The border spinner uses currentColor for its border-color. - You can use any of our text color utilities on the standard spinner. -

    - - - - - - - - - +     +     +     + + + + MUI Circular Progress{' '} + Colors + + } + /> + + + Use the color prop to change the spinner color. + + + + + + + + + + - - -     - - - - React Spinner Growing - - -

    - If you don'tfancy a border spinner, switch to the grow spinner. While it - doesn't technically spin, it does repeatedly grow! -

    - - + + + + + + + MUI Circular Progress{' '} + Sizes + + } + /> + + + Use the size prop to change the spinner size. + + + + + + + + -

    - Once again, this spinner is built with currentColor, so you can easily - change its appearance. Here it is in blue, along with the supported variants. -

    - - - - - - - - - +     +     +     + + + + MUI Circular Progress{' '} + Buttons + + } + /> + + + Spinners can be used inside buttons to indicate a loading state. + + + + + + -     -     -     - - - - React Spinner Size - - -

    - Add size="sm" property to make a smaller spinner that can quickly - be used within other components. -

    - - - - -     -     -     - - - - React Spinner Buttons - - -

    - Use spinners within buttons to indicate an action is currently processing or taking - place. You may also swap the text out of the spinner element and utilize button text - as needed. -

    - - - - - - - - - - - - -     -     -     -     + + + + ) } diff --git a/src/views/base/tables/Tables.js b/src/views/base/tables/Tables.js index 3a3f7fd864..92f5a20334 100644 --- a/src/views/base/tables/Tables.js +++ b/src/views/base/tables/Tables.js @@ -1,986 +1,109 @@ import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, - CTable, - CTableBody, - CTableCaption, - CTableDataCell, - CTableHead, - CTableHeaderCell, - CTableRow, -} from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Table from '@mui/material/Table' +import TableBody from '@mui/material/TableBody' +import TableCell from '@mui/material/TableCell' +import TableContainer from '@mui/material/TableContainer' +import TableHead from '@mui/material/TableHead' +import TableRow from '@mui/material/TableRow' +import Paper from '@mui/material/Paper' import { DocsComponents, DocsExample } from 'src/components' const Tables = () => { return ( - - + + - - - React Table Basic example - - -

    - Using the most basic table CoreUI, here's how <CTable>-based - tables look in CoreUI. -

    - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - -     -     -     - - - - React Table Variants - - -

    - Use contextual classes to color tables, table rows or individual cells. -

    - - - - - Class - Heading - Heading - - - - - Default - Cell - Cell - - - Primary - Cell - Cell - - - Secondary - Cell - Cell - - - Success - Cell - Cell - - - Danger - Cell - Cell - - - Warning - Cell - Cell - - - Info - Cell - Cell - - - Light - Cell - Cell - - - Dark - Cell - Cell - - - - -     -     -     - - - - React Table Striped rows - - -

    - Use striped property to add zebra-striping to any table row within the{' '} - <CTableBody>. -

    - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - -

    - These classes can also be added to table variants: -

    - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - -     -     -     - - - - React Table Hoverable rows - - -

    - Use hover property to enable a hover state on table rows within a{' '} - <CTableBody>. -

    - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - -     -     -     - - - - React Table Active tables - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - - Larry the Bird - - @twitter - - - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - - Larry the Bird - - @twitter - - - - - - - - - - - React Table Bordered tables - - -

    - Add bordered property for borders on all sides of the table and cells. -

    - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - -

    - - Border color utilities - {' '} - can be added to change colors: -

    - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - -     -     -     - - - - React Table Tables without borders - - -

    - Add borderless property for a table without borders. -

    - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - -     -     -     - - - - React Table Small tables - - -

    - Add small property to make any <CTable> more compact - by cutting all cell padding in half. -

    - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - -     -     -     - - - - React Table Vertical alignment - - -

    - Table cells of <CTableHead> are always vertical aligned to the - bottom. Table cells in <CTableBody> inherit their alignment from{' '} - <CTable> and are aligned to the the top by default. Use the align - property to re-align where needed. -

    - - - - - - Heading 1 - - - Heading 2 - - - Heading 3 - - - Heading 4 - - - - - - - This cell inherits vertical-align: middle; from the table - - - This cell inherits vertical-align: middle; from the table - - - This cell inherits vertical-align: middle; from the table - - - This here is some placeholder text, intended to take up quite a bit of - vertical space, to demonsCTableRowate how the vertical alignment works in the - preceding cells. - - - - - This cell inherits vertical-align: bottom; from the table row - - - This cell inherits vertical-align: bottom; from the table row - - - This cell inherits vertical-align: bottom; from the table row - - - This here is some placeholder text, intended to take up quite a bit of - vertical space, to demonsCTableRowate how the vertical alignment works in the - preceding cells. - - - - - This cell inherits vertical-align: middle; from the table - - - This cell inherits vertical-align: middle; from the table - - This cell is aligned to the top. - - This here is some placeholder text, intended to take up quite a bit of - vertical space, to demonsCTableRowate how the vertical alignment works in the - preceding cells. - - - - - -     -     -     - - - - React Table Nesting - - -

    - Border styles, active styles, and table variants are not inherited by nested tables. -

    - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - - - - - Header - Header - Header - - - - - A - First - Last - - - B - First - Last - - - C - First - Last - - - - - - - 3 - Larry the Bird - @twitter - - - - -     -     -     - - - - React Table Table head - - -

    - Similar to tables and dark tables, use the modifier prop{' '} - color="light" or color="dark" to make{' '} - <CTableHead>s appear light or dark gray. -

    - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry - the Bird - @twitter - - - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - -     -     -     - - - - React Table Table foot - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - Footer - Footer - Footer - Footer - - - - - - - - - - - React Table Captions - - -

    - A <CTableCaption> functions like a heading for a table. It helps - users with screen readers to find a table and understand what it's about and - decide if they want to read it. -

    - - - List of users - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry - the Bird - @twitter - - - - -

    - You can also put the <CTableCaption> on the top of the table with{' '} - caption="top". -

    - - - List of users - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry - the Bird - @twitter - - - - -     -     -     -     + + MUI Table} /> + + + Tables display sets of data. They can be fully customized. + + + + + + + # + Class + Heading + Heading + + + + + 1 + Mark + Otto + @mdo + + + 2 + Jacob + Thornton + @fat + + + 3 + Larry the Bird + @twitter + + +
    +     +     +     +     + + + + + MUI Table Striped Rows + + } + /> + + + Use alternating row colors for better readability. + + + + + + + # + Class + Heading + Heading + + + + {[1, 2, 3].map((row) => ( + + {row} + Cell + Cell + Cell + + ))} + +
    +     +     +     +     +     + ) } diff --git a/src/views/base/tabs/Tabs.js b/src/views/base/tabs/Tabs.js index eae58d8f8c..abef30bd25 100644 --- a/src/views/base/tabs/Tabs.js +++ b/src/views/base/tabs/Tabs.js @@ -1,234 +1,95 @@ -import React from 'react' -import { - CRow, - CCol, - CCard, - CCardBody, - CCardHeader, - CTab, - CTabContent, - CTabList, - CTabPanel, - CTabs, -} from '@coreui/react' +import React, { useState } from 'react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Tabs from '@mui/material/Tabs' +import Tab from '@mui/material/Tab' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' -const Navs = () => { +function TabPanel(props) { + const { children, value, index, ...other } = props return ( - - + + ) +} + +const TabsView = () => { + const [value, setValue] = useState(0) + const [value2, setValue2] = useState(0) + + return ( + + - - - React Tabs - - -

    - The basic React tabs example uses the variant="tabs" props to - generate a tabbed interface. -

    - - - - Home - Profile - Contact - - Disabled - - - - - Home tab content - - - Profile tab content - - - Contact tab content - - - Disabled tab content - - - - -     -     -     - - - - React Tabs Unstyled - - -

    - If you don’t provide the variant prop, the component will default to a - basic style. -

    - - - - Home - Profile - Contact - - Disabled - - - - - Home tab content - - - Profile tab content - - - Contact tab content - - - Disabled tab content - - - - -     -     -     - - - - React Tabs Pills - - -

    - Take that same code, but use variant="pills" instead: -

    - - - - - Home - - - Profile - - - Contact - - - Disabled - - - - - Home tab content - - - Profile tab content - - - Contact tab content - - - Disabled tab content - - - - -     -     -     - - - - React Tabs Underline - - -

    - Take that same code, but use variant="underline" instead: -

    - - - - - Home - - - Profile - - - Contact - - - Disabled - - - - - Home tab content - - - Profile tab content - - - Contact tab content - - - Disabled tab content - - - + + MUI Tabs} /> + + + Tabs make it easy to explore and switch between different views. + + + + setValue(v)}> + + + + + + + + Home content + + + Profile content + + + Contact content + -     -     -     - - - - React Tabs Underline border - - -

    - Take that same code, but use variant="underline-border" instead: -

    - - - - - Home - - - Profile - - - Contact - - - Disabled - - - - - Home tab content - - - Profile tab content - - - Contact tab content - - - Disabled tab content - - - + + + + + + + MUI Tabs Variants + + } + /> + + + Use the variant prop to change the tabs appearance. + + + + setValue2(v)} variant="fullWidth"> + + + + + + + Home content (full width) + + + Profile content (full width) + + + Contact content (full width) + -     -     -     -     + + + + ) } -export default Navs +export default TabsView diff --git a/src/views/base/tooltips/Tooltips.js b/src/views/base/tooltips/Tooltips.js index 86a229420c..c4820adf39 100644 --- a/src/views/base/tooltips/Tooltips.js +++ b/src/views/base/tooltips/Tooltips.js @@ -1,77 +1,68 @@ import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CLink, CTooltip, CRow, CCol } from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import Tooltip from '@mui/material/Tooltip' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const Tooltips = () => { return ( - - + + - - - React Tooltip Basic example - - -

    Hover over the links below to see tooltips:

    - -

    - Tight pants next level keffiyeh - - you probably - - haven'theard of them. Photo booth beard raw denim letterpress vegan messenger - bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit - american apparel - - have a - - terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo - thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney''s - cleanse vegan chambray. A really ironic artisan - - whatever keytar - - scenester farm-to-table banksy Austin - - twitter handle - - freegan cred raw denim single-origin coffee viral. -

    + + MUI Tooltip} /> + + + Tooltips display informative text when users hover over, focus on, or tap an element. + + + + + + + + + + + + + + + + -

    - Hover over the buttons below to see the four tooltips directions: top, right, bottom, - and left. Directions are mirrored when using CoreUI in RTL. -

    - - - Tooltip on top - - - Tooltip on right - - - Tooltip on bottom - - - Tooltip on left - +     +     +     + + + + MUI Tooltip Arrow + + } + /> + + + You can use the arrow prop to add an arrow to the tooltip. + + + + + + + - - -     -     + + + + ) } diff --git a/src/views/buttons/button-groups/ButtonGroups.js b/src/views/buttons/button-groups/ButtonGroups.js index 1f366db2d0..0088b9f33d 100644 --- a/src/views/buttons/button-groups/ButtonGroups.js +++ b/src/views/buttons/button-groups/ButtonGroups.js @@ -1,439 +1,129 @@ import React from 'react' -import { - CButton, - CDropdown, - CDropdownDivider, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CButtonGroup, - CButtonToolbar, - CCard, - CCardBody, - CCardHeader, - CCol, - CFormCheck, - CFormInput, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import ButtonGroup from '@mui/material/ButtonGroup' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const ButtonGroups = () => { return ( - - + + - - - React Button Group Basic example - - -

    - Wrap a series of <CButton> components in{' '} - <CButtonGroup>.{' '} -

    - - - Left - Middle - Right - + + MUI Button Group} /> + + + The ButtonGroup component can be used to group related buttons. + + + + + + + -

    - These classes can also be added to groups of links, as an alternative to the{' '} - <CNav> components. -

    - - - - Active link - - - Link - - - Link - - +     +     +     + + + + MUI Button Group Outlined + + } + /> + + + Use the outlined variant for a lighter button group style. + + + + + + + + + + + + + + + + + + + - - -     - - - - React Button Group Mixed styles - - - - - Left - Middle - Right - + + + + + + + MUI Button Group Vertical + + } + /> + + + Use the orientation prop to create vertical button groups. + + + + + + + - - - - - - - React Button Group Outlined styles - - - - - - Left - - - Middle - - - Right - - + + + + + + + MUI Button Group Sizes + + } + /> + + + Use the size prop for different button group sizes. + + + + + + + + + + + + + + + + + + + - - - - - - - React Button Group Checkbox and radio button groups - - -

    - Combine button-like checkbox and radio toggle buttons into a seamless looking button - group. -

    - - - - - - - - - - - - - - -     -     -     - - - - React Button Group Button toolbar - - -

    - Join sets of button groups into button toolbars for more complicated components. Use - utility classes as needed to space out groups, buttons, and more. -

    - - - - 1 - 2 - 3 - 4 - - - 5 - 6 - 7 - - - 8 - - - -

    - Feel free to combine input groups with button groups in your toolbars. Similar to the - example above, you’ll likely need some utilities through to space items correctly. -

    - - - - - 1 - - - 2 - - - 3 - - - 4 - - - - @ - - - - - - - 1 - - - 2 - - - 3 - - - 4 - - - - @ - - - - -     -     -     - - - - React Button Group Sizing - - -

    - Alternatively, of implementing button sizing classes to each button in a group, set{' '} - size property to all <CButtonGroup>'s, including - each one when nesting multiple groups. -

    - - - - Left - - - Middle - - - Right - - -
    - - - Left - - - Middle - - - Right - - -
    - - - Left - - - Middle - - - Right - - -     -     -     -     - - - - React Button Group Nesting - - -

    - Put a <CButtonGroup> inside another{' '} - <CButtonGroup> when you need dropdown menus combined with a series - of buttons. -

    - - - 1 - 2 - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - -     -     -     - - - - React Button Group Vertical variation - - -

    - Create a set of buttons that appear vertically stacked rather than horizontally.{' '} - Split button dropdowns are not supported here. -

    - - - Button - Button - Button - Button - Button - Button - Button - - - - - Button - Button - - Dropdown - - Action - Another action - Something else here - - Separated link - - - Button - Button - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - - - - - - - - -     -     -     -     + + + + ) } diff --git a/src/views/buttons/buttons/Buttons.js b/src/views/buttons/buttons/Buttons.js index ff6190ab9b..1aac55bead 100644 --- a/src/views/buttons/buttons/Buttons.js +++ b/src/views/buttons/buttons/Buttons.js @@ -1,401 +1,151 @@ import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { cilBell } from '@coreui/icons' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import Box from '@mui/material/Box' +import IconButton from '@mui/material/IconButton' +import HomeIcon from '@mui/icons-material/Home' import { DocsComponents, DocsExample } from 'src/components' const Buttons = () => { return ( - - - - - - React Button - - -

    - CoreUI includes a bunch of predefined buttons components, each serving its own - semantic purpose. Buttons show what action will happen when the user clicks or touches - it. CoreUI buttons are used to initialize operations, both in the background or - foreground of an experience. -

    - - {['normal', 'active', 'disabled'].map((state, index) => ( - - - {state.charAt(0).toUpperCase() + state.slice(1)} - - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - {color.charAt(0).toUpperCase() + color.slice(1)} - - ))} - Link - - - ))} + + + + + MUI Button} /> + + + MUI includes several predefined button styles, each serving its own semantic purpose. + + + + + + + + + + + + -     -     -     - - - - React Button with icons - - -

    - You can combine button with our CoreUI Icons. -

    - - {['normal', 'active', 'disabled'].map((state, index) => ( - - - {state.charAt(0).toUpperCase() + state.slice(1)} - - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - - {color.charAt(0).toUpperCase() + color.slice(1)} - - ))} - - - Link - - - - ))} + + + + + + + MUI Button Outlined + + } + /> + + + Use the outlined variant for a lighter button style. + + + + + + + + + + -     -     -     - - - - React Button Button components - - -

    - The <CButton> component are designed for{' '} - <button> , <a> or <input>{' '} - elements (though some browsers may apply a slightly different rendering). -

    -

    - If you're using <CButton> component as <a>{' '} - elements that are used to trigger functionality ex. collapsing content, these links - should be given a role="button" to adequately communicate their - meaning to assistive technologies such as screen readers. -

    - - - Link - - - Button - - - - + + + + + + + MUI Button Sizes + + } + /> + + + Use the size prop for different button sizes. + + + + + + + -     -     -     - - - - React Button outline - - -

    - If you need a button, but without the strong background colors. Set{' '} - variant="outline" prop to remove all background colors. -

    - - {['normal', 'active', 'disabled'].map((state, index) => ( - - - {state.charAt(0).toUpperCase() + state.slice(1)} - - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - {color.charAt(0).toUpperCase() + color.slice(1)} - - ))} - - - ))} + + + + + + + MUI Button With Icons + + } + /> + + + Add icons to buttons using startIcon or endIcon props. + + + + + + + + -     -     -     - - - - React Button ghost - - -

    - If you need a ghost variant of button, set variant="ghost" prop - to remove all background colors. -

    - - {['normal', 'active', 'disabled'].map((state, index) => ( - - - {state.charAt(0).toUpperCase() + state.slice(1)} - - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - {color.charAt(0).toUpperCase() + color.slice(1)} - - ))} - - - ))} - -     -     -     - - - - React Button Sizes - - -

    - Larger or smaller buttons? Add size="lg" or{' '} - size="sm" for additional sizes. -

    - - - Large button - - - Large button - - - - - Small button - - - Small button - - -     -     -     - - - - React Button Pill - - - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - {color.charAt(0).toUpperCase() + color.slice(1)} - - ))} - - - - - - - - React Button Square - - - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - {color.charAt(0).toUpperCase() + color.slice(1)} - - ))} - - - - - - - - React Button Disabled state - - -

    - Add the disabled boolean prop to any <CButton>{' '} - component to make buttons look inactive. Disabled button has{' '} - pointer-events: none applied to, disabling hover and active states from - triggering. -

    - - - Primary button - - - Button - - -

    - Disabled buttons using the <a> component act a little different: -

    -

    - <a>s don'tsupport the disabled attribute, so - CoreUI has to add .disabled className to make buttons look inactive. - CoreUI also has to add to the disabled button component{' '} - aria-disabled="true" attribute to show the state of the component - to assistive technologies. -

    - - - Primary link - - - Link - - -     -     -     - - - - React Button Block buttons - - -

    - Create buttons that span the full width of a parent—by using utilities. -

    - -
    - Button - Button -
    -     -

    - Here we create a responsive variation, starting with vertically stacked buttons until - the md breakpoint, where .d-md-block replaces the{' '} - .d-grid class, thus nullifying the gap-2 utility. Resize - your browser to see them change. -

    - -
    - Button - Button -
    -     -

    - You can adjust the width of your block buttons with grid column width classes. For - example, for a half-width "block button", use .col-6. Center it - horizontally with .mx-auto, too. -

    - -
    - Button - Button -
    -     -

    - Additional utilities can be used to adjust the alignment of buttons when horizontal. - Here we've taken our previous responsive example and added some flex utilities and - a margin utility on the button to right align the buttons when they're no longer - stacked. -

    - -
    - - Button - - Button -
    -     -     -     -     -     + + + + ) } diff --git a/src/views/buttons/dropdowns/Dropdowns.js b/src/views/buttons/dropdowns/Dropdowns.js index a6885a416a..39f7d07aeb 100644 --- a/src/views/buttons/dropdowns/Dropdowns.js +++ b/src/views/buttons/dropdowns/Dropdowns.js @@ -1,338 +1,114 @@ -import React from 'react' -import { - CButton, - CButtonGroup, - CCard, - CCardBody, - CCardHeader, - CCol, - CDropdown, - CDropdownDivider, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CRow, -} from '@coreui/react' +import React, { useState } from 'react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import Menu from '@mui/material/Menu' +import MenuItem from '@mui/material/MenuItem' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const Dropdowns = () => { + const [anchorEl, setAnchorEl] = useState(null) + const [anchorEl2, setAnchorEl2] = useState(null) + return ( - - + + - - - React Dropdown Single button - - -

    - Here's how you can put them to work with either <button>{' '} - elements: -

    - - - Dropdown button - - Action - Another action - Something else here - - - -

    - The best part is you can do this with any button variant, too: -

    - - <> - {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map( - (color, index) => ( - - {color} - - Action - Another action - Something else here - - Separated link - - - ), - )} - + + MUI Menu (Dropdown)} /> + + + Menus display a list of choices on temporary surfaces. + + + + setAnchorEl(null)}> + setAnchorEl(null)}>Action + setAnchorEl(null)}>Another action + setAnchorEl(null)}>Something else here + -     -     -     - - - - React Dropdown Split button - - -

    - Similarly, create split button dropdowns with virtually the same markup as single - button dropdowns, but with the addition of boolean prop split for proper - spacing around the dropdown caret. -

    -

    - We use this extra class to reduce the horizontal padding on either side - of the caret by 25% and remove the margin-left that's attached for - normal button dropdowns. Those additional changes hold the caret centered in the split - button and implement a more properly sized hit area next to the main button. -

    - + + + + + + - {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map( - (color, index) => ( - - {color} - - - Action - Another action - Something else here - - Separated link - - - ), - )} + MUI Menu Colors + } + /> + + + Use different button colors with menus. + + + + + + + + + + setAnchorEl2(null)} + > + setAnchorEl2(null)}>Action + setAnchorEl2(null)}>Another action + setAnchorEl2(null)}>Something else here + + -     -     -     - - - - React Dropdown Sizing - - -

    - Button dropdowns work with buttons of all sizes, including default and split dropdown - buttons. -

    - - - - Large button - - - Action - Another action - Something else here - - Separated link - - - - - Large split button - - - - Action - Another action - Something else here - - Separated link - - - - - - - Small button - - - Action - Another action - Something else here - - Separated link - - - - - Small split button - - - - Action - Another action - Something else here - - Separated link - - - -     -     -     - - - - React Dropdown Single button - - -

    - Opt into darker dropdowns to match a dark navbar or custom style by set{' '} - dark property. No changes are required to the dropdown items. -

    - - - Dropdown button - - Action - Another action - Something else here - - Separated link - - - -

    And putting it to use in a navbar:

    - - - -     -     -     - - - - React Dropdown Dropup - - -

    - Trigger dropdown menus above elements by adding{' '} - direction="dropup" to the <CDropdown>{' '} - component. -

    - - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - Small split button - - - Action - Another action - Something else here - - Separated link - - - -     -     -     - - - - React Dropdown Dropright - - -

    - Trigger dropdown menus at the right of the elements by adding{' '} - direction="dropend" to the <CDropdown>{' '} - component. -

    - - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - Small split button - - - Action - Another action - Something else here - - Separated link - - - -     -     -     - - - - React Dropdown Dropleft - - -

    - Trigger dropdown menus at the left of the elements by adding{' '} - direction="dropstart" to the <CDropdown>{' '} - component. -

    - - - - - - Action - Another action - Something else here - - Separated link - - - Small split button - - -     -     -     -     + + + + ) } diff --git a/src/views/charts/Charts.js b/src/views/charts/Charts.js index d5df06bf70..e3b5d13a4f 100644 --- a/src/views/charts/Charts.js +++ b/src/views/charts/Charts.js @@ -1,182 +1,235 @@ import React from 'react' -import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react' +import Box from '@mui/material/Box' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' import { - CChartBar, - CChartDoughnut, - CChartLine, - CChartPie, - CChartPolarArea, - CChartRadar, -} from '@coreui/react-chartjs' -import { DocsLink } from 'src/components' + BarChart, + Bar, + LineChart, + Line, + PieChart, + Pie, + Cell, + RadarChart, + Radar, + PolarGrid, + PolarAngleAxis, + PolarRadiusAxis, + ResponsiveContainer, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, +} from 'recharts' -const Charts = () => { +const barData = [ + { name: 'January', commits: 40 }, + { name: 'February', commits: 20 }, + { name: 'March', commits: 12 }, + { name: 'April', commits: 39 }, + { name: 'May', commits: 10 }, + { name: 'June', commits: 40 }, + { name: 'July', commits: 39 }, +] + +const generateLineData = () => { const random = () => Math.round(Math.random() * 100) + return ['January', 'February', 'March', 'April', 'May', 'June', 'July'].map((month) => ({ + name: month, + dataset1: random(), + dataset2: random(), + })) +} + +const lineData = generateLineData() + +const doughnutData = [ + { name: 'VueJs', value: 40, color: '#41B883' }, + { name: 'EmberJs', value: 20, color: '#E46651' }, + { name: 'ReactJs', value: 80, color: '#00D8FF' }, + { name: 'AngularJs', value: 10, color: '#DD1B16' }, +] +const pieData = [ + { name: 'Red', value: 300, color: '#FF6384' }, + { name: 'Green', value: 50, color: '#36A2EB' }, + { name: 'Yellow', value: 100, color: '#FFCE56' }, +] + +const polarData = [ + { name: 'Red', value: 11, color: '#FF6384' }, + { name: 'Green', value: 16, color: '#4BC0C0' }, + { name: 'Yellow', value: 7, color: '#FFCE56' }, + { name: 'Grey', value: 3, color: '#E7E9ED' }, + { name: 'Blue', value: 14, color: '#36A2EB' }, +] + +const radarData = [ + { subject: 'Eating', A: 65, B: 28, fullMark: 150 }, + { subject: 'Drinking', A: 59, B: 48, fullMark: 150 }, + { subject: 'Sleeping', A: 90, B: 40, fullMark: 150 }, + { subject: 'Designing', A: 81, B: 19, fullMark: 150 }, + { subject: 'Coding', A: 56, B: 96, fullMark: 150 }, + { subject: 'Cycling', A: 55, B: 27, fullMark: 150 }, + { subject: 'Running', A: 40, B: 100, fullMark: 150 }, +] + +const Charts = () => { return ( - - - - - - Bar Chart - - - - - - - - - - Line Chart - - - - - - - - - - Doughnut Chart - - - - - - - - - - Pie Chart {' '} - - - - - - - - - - Polar Area Chart - - - - - - - - - - - Radar Chart - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {doughnutData.map((entry, index) => ( + + ))} + + + + + + + + + + + + + + + + + + {pieData.map((entry, index) => ( + + ))} + + + + + + + + + + + + + + + + + + {polarData.map((entry, index) => ( + + ))} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js index 57a55290d9..36a0605e3c 100644 --- a/src/views/dashboard/Dashboard.js +++ b/src/views/dashboard/Dashboard.js @@ -1,47 +1,28 @@ 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 Box from '@mui/material/Box' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import ButtonGroup from '@mui/material/ButtonGroup' +import Avatar from '@mui/material/Avatar' +import Table from '@mui/material/Table' +import TableBody from '@mui/material/TableBody' +import TableCell from '@mui/material/TableCell' +import TableContainer from '@mui/material/TableContainer' +import TableHead from '@mui/material/TableHead' +import TableRow from '@mui/material/TableRow' +import LinearProgress from '@mui/material/LinearProgress' +import CloudDownloadIcon from '@mui/icons-material/CloudDownload' +import PeopleIcon from '@mui/icons-material/People' +import PersonIcon from '@mui/icons-material/Person' +import PersonOutlineIcon from '@mui/icons-material/PersonOutline' +import GoogleIcon from '@mui/icons-material/Google' +import FacebookIcon from '@mui/icons-material/Facebook' +import TwitterIcon from '@mui/icons-material/Twitter' +import LinkedInIcon from '@mui/icons-material/LinkedIn' import avatar1 from 'src/assets/images/avatars/1.jpg' import avatar2 from 'src/assets/images/avatars/2.jpg' @@ -59,7 +40,7 @@ const Dashboard = () => { { title: 'Visits', value: '29.703 Users', percent: 40, color: 'success' }, { title: 'Unique', value: '24.093 Users', percent: 20, color: 'info' }, { title: 'Pageviews', value: '78.706 Views', percent: 60, color: 'warning' }, - { title: 'New Users', value: '22.123 Users', percent: 80, color: 'danger' }, + { title: 'New Users', value: '22.123 Users', percent: 80, color: 'error' }, { title: 'Bounce Rate', value: 'Average Rate', percent: 40.15, color: 'primary' }, ] @@ -74,312 +55,322 @@ const Dashboard = () => { ] const progressGroupExample2 = [ - { title: 'Male', icon: cilUser, value: 53 }, - { title: 'Female', icon: cilUserFemale, value: 43 }, + { title: 'Male', icon: , value: 53 }, + { title: 'Female', icon: , value: 43 }, ] const progressGroupExample3 = [ - { title: 'Organic Search', icon: cibGoogle, percent: 56, value: '191,235' }, - { title: 'Facebook', icon: cibFacebook, percent: 15, value: '51,223' }, - { title: 'Twitter', icon: cibTwitter, percent: 11, value: '37,564' }, - { title: 'LinkedIn', icon: cibLinkedin, percent: 8, value: '27,319' }, + { title: 'Organic Search', icon: , percent: 56, value: '191,235' }, + { title: 'Facebook', icon: , percent: 15, value: '51,223' }, + { title: 'Twitter', icon: , percent: 11, value: '37,564' }, + { title: 'LinkedIn', icon: , percent: 8, value: '27,319' }, ] 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 }, + user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2023' }, + country: { name: 'USA' }, + usage: { value: 50, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'success' }, + payment: { name: 'Mastercard' }, 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 }, + avatar: { src: avatar2, status: 'error' }, + user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2023' }, + country: { name: 'Brazil' }, + usage: { value: 22, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'info' }, + payment: { name: 'Visa' }, 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 }, + country: { name: 'India' }, + usage: { value: 74, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'warning' }, + payment: { name: 'Stripe' }, 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 }, + user: { name: 'Eneas Kwadwo', new: true, registered: 'Jan 1, 2023' }, + country: { name: 'France' }, + usage: { value: 98, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'error' }, + payment: { name: 'PayPal' }, 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 }, + user: { name: 'Agapetus Tadeas', new: true, registered: 'Jan 1, 2023' }, + country: { name: 'Spain' }, + usage: { value: 22, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'primary' }, + payment: { name: 'Google Wallet' }, 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 }, + avatar: { src: avatar6, status: 'error' }, + user: { name: 'Friderik David', new: true, registered: 'Jan 1, 2023' }, + country: { name: 'Poland' }, + usage: { value: 43, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'success' }, + payment: { name: 'Amex' }, activity: 'Last week', }, ] + const getStatusColor = (status) => { + const colors = { + success: '#2eb85c', + error: '#e55353', + warning: '#f9b115', + info: '#39f', + primary: '#321fdb', + secondary: '#9da5b1', + } + return colors[status] || colors.secondary + } + return ( <> - - - - - -

    + + + + + + Traffic -

    -
    January - July 2023
    -     - - - - - - {['Day', 'Month', 'Year'].map((value) => ( - - {value} - - ))} - - -     + + + January - July 2023 + + + + + + {['Day', 'Month', 'Year'].map((value) => ( + + ))} + + + + + -     - - - {progressExample.map((item, index, items) => ( - + + + {progressExample.map((item, index) => ( + -
    {item.title}
    -
    + + {item.title} + + {item.value} ({item.percent}%) -
    - -     + + + ))} -     -     -     - - - - - Traffic {' & '} Sales - - - - - -
    -
    New Clients
    -
    9,123
    -
    -     - -
    -
    - Recurring Clients -
    -
    22,643
    -
    -     -     -
    - {progressGroupExample1.map((item, index) => ( -
    -
    - {item.title} -
    -
    - - -
    -
    - ))} -     - - - -
    -
    Pageviews
    -
    78,623
    -
    -     - -
    -
    Organic
    -
    49,123
    -
    -     -     - -
    - - {progressGroupExample2.map((item, index) => ( -
    -
    - - {item.title} - {item.value}% -
    -
    - -
    -
    - ))} + +     + -
    + - {progressGroupExample3.map((item, index) => ( -
    -
    - - {item.title} - - {item.value}{' '} - ({item.percent}%) - -
    -
    - -
    -
    - ))} - - - -
    + + + + + + + + + + New Clients + + 9,123 + + + + + + Recurring Clients + + 22,643 + + + + + {progressGroupExample1.map((item, index) => ( + + + {item.title} + + + + + ))} + + + + + + + + Pageviews + + 78,623 + + + + + + Organic + + 49,123 + + + + + {progressGroupExample2.map((item, index) => ( + + + {item.icon} + + {item.title} + + + {item.value}% + + + + + ))} + + + {progressGroupExample3.map((item, index) => ( + + + {item.icon} + + {item.title} + + + {item.value}{' '} + + ({item.percent}%) + + + + + + ))} + + + - - - - - - - User - - Country - - Usage - - Payment Method - - Activity - - - - {tableExample.map((item, index) => ( - - - - - -
    {item.user.name}
    -
    - {item.user.new ? 'New' : 'Recurring'} | Registered:{' '} - {item.user.registered} -
    -     - - - - -
    -
    {item.usage.value}%
    -
    - {item.usage.period} -
    -
    - -     - - - - -
    Last login
    -
    {item.activity}
    -     -     - ))} -     -     - - - - + + + + + + + + User + Country + Usage + Payment Method + Activity + + + + {tableExample.map((item, index) => ( + + + + + + {item.user.name} + + {item.user.new ? 'New' : 'Recurring'} | Registered: {item.user.registered} + + + + {item.country.name} + + + + + {item.usage.value}% + + + {item.usage.period} + + + + + + {item.payment.name} + + + + Last login + + + {item.activity} + + + + ))} + +
    +     +     +     ) } diff --git a/src/views/dashboard/MainChart.js b/src/views/dashboard/MainChart.js index 98b7eec3cf..d5ea47d17a 100644 --- a/src/views/dashboard/MainChart.js +++ b/src/views/dashboard/MainChart.js @@ -1,136 +1,59 @@ -import React, { useEffect, useRef } from 'react' +import React from 'react' +import Box from '@mui/material/Box' +import { + LineChart, + Line, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + ResponsiveContainer, + Area, + AreaChart, +} from 'recharts' -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() - }) - } - } +const generateData = () => { + const random = (min = 0, max = 100) => Math.floor(Math.random() * (max - min + 1)) + min + return ['January', 'February', 'March', 'April', 'May', 'June', 'July'].map((month) => ({ + name: month, + dataset1: random(50, 200), + dataset2: random(50, 200), + dataset3: 65, + })) +} - document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange) - return () => - document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange) - }, [chartRef]) +const initialData = generateData() - const random = (min = 0, max = 100) => Math.floor(Math.random() * (max - min + 1)) + min +const MainChart = () => { + const data = initialData return ( - <> - - + + + + + + + + + + + + + ) } diff --git a/src/views/forms/checks-radios/ChecksRadios.js b/src/views/forms/checks-radios/ChecksRadios.js index ef073dee55..b81f6cf92c 100644 --- a/src/views/forms/checks-radios/ChecksRadios.js +++ b/src/views/forms/checks-radios/ChecksRadios.js @@ -1,392 +1,81 @@ import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CFormSwitch, CRow } from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Checkbox from '@mui/material/Checkbox' +import Radio from '@mui/material/Radio' +import RadioGroup from '@mui/material/RadioGroup' +import FormControlLabel from '@mui/material/FormControlLabel' +import FormControl from '@mui/material/FormControl' +import FormLabel from '@mui/material/FormLabel' +import FormGroup from '@mui/material/FormGroup' +import Switch from '@mui/material/Switch' import { DocsComponents, DocsExample } from 'src/components' const ChecksRadios = () => { return ( - - + + - - - React Checkbox - - - - - - - - - - - - - React Checkbox Disabled - - -

    - Add the disabled attribute and the associated <label>s - are automatically styled to match with a lighter color to help indicate the - input's state. -

    - - - - -     -     -     - - - - React Radio - - -

    - Add the disabled attribute and the associated <label>s - are automatically styled to match with a lighter color to help indicate the - input's state. -

    - - - - -     -     -     - - - - React Radio Disabled - - - - - - - - - - - - - React Switches - - -

    - A switch has the markup of a custom checkbox but uses the switch boolean - properly to render a toggle switch. Switches also support the disabled{' '} - attribute. -

    - - - - - - -     -     -     - - - - React Switches Sizes - - - - - - - - - - - - - - React Checks and Radios Default layout (stacked) - - -

    - By default, any number of checkboxes and radios that are immediate sibling will be - vertically stacked and appropriately spaced. -

    - - - - - - - - - -     -     -     - - - - React Checks and Radios Inline - - -

    - Group checkboxes or radios on the same horizontal row by adding inline{' '} - boolean property to any <CFormCheck>. -

    - - - - - - - - - - -     -     -     - - - - React Checks and Radios Without labels - - -

    - Remember to still provide some form of accessible name for assistive technologies (for - instance, using aria-label). -

    - -
    - -
    -
    - -
    -     -     -     -     - - - - Toggle buttons - - -

    - Create button-like checkboxes and radio buttons by using button boolean - property on the <CFormCheck> component. These toggle buttons can - further be grouped in a button group if needed. -

    - - - - - - - - - -

    Radio toggle buttons

    - - - - - - -

    Outlined styles

    -

    - Different variants of button, such at the various outlined styles, are supported. -

    - -
    - -
    -
    - -
    -
    - - + MUI Checkbox} /> + + + Checkboxes allow the user to select one or more items from a set. + + + + } label="Default checkbox" /> + } label="Checked checkbox" /> + + + + + + + + MUI Radio} /> + + + Radio buttons allow the user to select one option from a set. + + + + Gender + + } label="Female" /> + } label="Male" /> + } label="Other" /> + + + + + + + + + MUI Switch} /> + + + Switches toggle the state of a single setting on or off. + + + + } label="Default switch" /> + } label="Unchecked switch" /> + } label="Disabled switch" /> + } + label="Disabled checked switch" /> -
    +     -     -     -     -     + + + + ) } diff --git a/src/views/forms/floating-labels/FloatingLabels.js b/src/views/forms/floating-labels/FloatingLabels.js index 2a637fd21c..eef56a010a 100644 --- a/src/views/forms/floating-labels/FloatingLabels.js +++ b/src/views/forms/floating-labels/FloatingLabels.js @@ -1,170 +1,78 @@ import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCol, - CFormInput, - CFormLabel, - CFormFloating, - CFormSelect, - CFormTextarea, - CRow, -} from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import TextField from '@mui/material/TextField' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const FloatingLabels = () => { return ( - - + + - - - React Floating labels - - -

    - Wrap a pair of <CFormInput> and <CFormLabel>{' '} - elements in CFormFloating to enable floating labels with textual form - fields. A placeholder is required on each <CFormInput>{' '} - as our method of CSS-only floating labels uses the :placeholder-shown{' '} - pseudo-element. Also note that the <CFormInput> must come first so - we can utilize a sibling selector (e.g., ~). -

    - - - - Email address - - - - Password - + + MUI TextField with Labels} /> + + + MUI TextField components have built-in floating labels. + + + + + + -

    - When there's a value already defined, <CFormLabel> - s will automatically adjust to their floated position. -

    - - - - Input with value - +     +     +     + + + + MUI TextField Textarea + + } + /> + + + Use multiline prop for textarea inputs. + + + + + - - -     - - - - React Floating labels Textareas - - -

    - By default, <CFormTextarea>s will be the same height as{' '} - <CFormInput>s. -

    - - - - Comments - + + + + + + + MUI TextField Variants + + } + /> + + + The TextField comes in three variants: outlined, filled, and standard. + + + + + + + -

    - To set a custom height on your <CFormTextarea;>, do not use the{' '} - rows attribute. Instead, set an explicit height (either - inline or via custom CSS). -

    - - - - Comments - - -     -     -     - - - - React Floating labels Selects - - -

    - Other than <CFormInput>, floating labels are only available on{' '} - <CFormSelect>s. They work in the same way, but unlike{' '} - <CFormInput>s, they'll always show the{' '} - <CFormLabel> in its floated state.{' '} - - Selects with size and multiple are not supported. - -

    - - - - - - - - - Works with selects - - -     -     -     - - - - React Floating labels Layout - - -

    - When working with the CoreUI for Bootstrap grid system, be sure to place form elements - within column classes. -

    - - - - - - Email address - - - - - - - - - - - Works with selects - - - - -     -     -     -     + + + + ) } diff --git a/src/views/forms/form-control/FormControl.js b/src/views/forms/form-control/FormControl.js index 7b972ffd86..334bf29648 100644 --- a/src/views/forms/form-control/FormControl.js +++ b/src/views/forms/form-control/FormControl.js @@ -1,249 +1,105 @@ import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CForm, - CFormInput, - CFormLabel, - CFormTextarea, - CRow, -} from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import TextField from '@mui/material/TextField' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' -const FormControl = () => { +const FormControlView = () => { return ( - - + + - - - React Form Control - - - - -
    - Email address - -
    -
    - Example textarea - -
    -     + + MUI TextField} /> + + + Text fields let users enter and edit text. + + + + + + -     -     -     - - - - React Form Control Sizing - - -

    - Set heights using size property like size="lg" and{' '} - size="sm". -

    - - -
    - -
    - + + + + + + + MUI TextField Sizing + + } + /> + + + Use the size prop to change the size of the text field. + + + + + + -     -     -     - - - - React Form Control Disabled - - -

    - Add the disabled boolean attribute on an input to give it a grayed out - appearance and remove pointer events. -

    - - -
    - -
    + + + + + + + MUI TextField Disabled + + } + /> + + + Use the disabled prop to disable the text field. + + + + + + -     -     -     - - - - React Form Control Readonly - - -

    - Add the readOnly boolean attribute on an input to prevent modification of - the input's value. Read-only inputs appear lighter (just like disabled inputs), - but retain the standard cursor. -

    - - + + + + + + + MUI TextField Read Only + + } + /> + + + Use InputProps to make the text field read-only. + + + + + -     -     -     - - - - React Form Control Readonly plain text - - -

    - If you want to have <input readonly> elements in your form styled - as plain text, use the plainText boolean property to remove the default - form field styling and preserve the correct margin and padding. -

    - - - - Email - -
    - -
    -     - - - Password - -
    - -
    -     -     - - -
    - - Email - - -
    -
    - - Password - - -
    -
    - - Confirm identity - -
    -     -     -     -     -     - - - - React Form Control File input - - - -
    - Default file input example - -
    -
    - Multiple files input example - -
    -
    - Disabled file input example - -
    -
    - Small file input example - -
    -
    - Large file input example - -
    -     -     -     -     - - - - React Form Control Color - - - - Color picker - - - - - -     + + + + ) } -export default FormControl +export default FormControlView diff --git a/src/views/forms/input-group/InputGroup.js b/src/views/forms/input-group/InputGroup.js index 73ccac2629..5c229c6d83 100644 --- a/src/views/forms/input-group/InputGroup.js +++ b/src/views/forms/input-group/InputGroup.js @@ -1,503 +1,92 @@ import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CDropdown, - CDropdownDivider, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CFormCheck, - CFormInput, - CFormLabel, - CFormSelect, - CFormTextarea, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import TextField from '@mui/material/TextField' +import InputAdornment from '@mui/material/InputAdornment' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const InputGroup = () => { return ( - - + + - - - React Input group Basic example - - -

    - Place one add-on or button on either side of an input. You may also place one on both - sides of an input. Remember to place <CFormLabel>s outside the - input group. -

    - - - @ - + MUI Input Adornments} /> + + + Input adornments allow you to add a prefix, suffix, or an action to an input. + + + + @, + }} /> - - - @example.com, + }} /> - @example.com - - Your vanity URL - - https://example.com/users/ - - - - $ - - .00 - - - - @ - - - - With textarea - - - -     -     -     - - - - React Input group Wrapping - - -

    - Input groups wrap by default via flex-wrap: wrap in order to accommodate - custom form field validation within an input group. You may disable this with{' '} - .flex-nowrap. -

    - - - @ - - - -     -     -     - - - - React Input group Sizing - - -

    - Add the relative form sizing classes to the <CInputGroup> itself - and contents within will automatically resize—no need for repeating the form control - size classes on each element. -

    -

    - Sizing on the individual input group elements isn'tsupported. -

    - - - Small - - - - Default - - - - Large - - - -     -     -     - - - - React Input group Checkboxes and radios - - -

    - Place any checkbox or radio option within an input group's addon instead of text. -

    - - - - - - - - - - - - - - -     -     -     - - - - React Input group Multiple inputs - - -

    - While multiple <CFormInput>s are supported visually, validation - styles are only available for input groups with a single{' '} - <CFormInput>. -

    - - - First and last name - - - - -     -     -     - - - - React Input group Multiple addons - - -

    - Multiple add-ons are supported and can be mixed with checkbox and radio input - versions.. -

    - - - $ - 0.00 - - - - - $ - 0.00 - - -     -     -     - - - - React Input group Button addons - - -

    - Multiple add-ons are supported and can be mixed with checkbox and radio input - versions.. -

    - - - - Button - - - - - https://, + }} /> - - Button - - - - - Button - - - Button - - - - - $, + endAdornment: .00, + }} /> - - Button - - - Button - - - -     -     -     - - - - React Input group Buttons with dropdowns - - - - - - - Dropdown - - - Action - Another action - Something else here - - Separated link - - - - - - - - - Dropdown - - - Action - Another action - Something else here - - Separated link - - - - - - - Dropdown - - - Action - Another action - Something else here - - Separated link - - - - - - Dropdown - - - Action - Another action - Something else here - - Separated link - - - - - - - - - - - React Input group Segmented buttons - - - - - - - Action - - - - Action - Another action - Something else here - - Separated link - - - - - - - - - Action - - - - Action - Another action - Something else here - - Separated link - - - - - - - - - - - React Input group Custom select - - - - - - Options - - - - - - - - - - - - - - - - - Options - - - - - Button - - - - - - - - - - - - - - - - - Button - - + - - - - - - - React Input group Custom file input - - - - - - Upload - - - - - - - Upload - - - - - Button - - + + + + + + MUI Input Adornments{' '} + Sizing + + } + /> + + + Use the size prop to change the size of the input. + + + + @, + }} /> - - - @, + }} /> - - Button - - + - - - -     + + + + ) } diff --git a/src/views/forms/layout/Layout.js b/src/views/forms/layout/Layout.js index 6a6bf56451..1c79e728a9 100644 --- a/src/views/forms/layout/Layout.js +++ b/src/views/forms/layout/Layout.js @@ -1,424 +1,107 @@ import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CForm, - CFormCheck, - CFormInput, - CFormLabel, - CFormSelect, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import TextField from '@mui/material/TextField' +import Button from '@mui/material/Button' +import Box from '@mui/material/Box' +import Checkbox from '@mui/material/Checkbox' +import FormControlLabel from '@mui/material/FormControlLabel' import { DocsComponents, DocsExample } from 'src/components' const Layout = () => { return ( - - + + - - - Layout Form grid - - -

    - More complex forms can be built using our grid classes. Use these for form layouts - that require multiple columns, varied widths, and additional alignment options. -

    - - - - - - - - - + + MUI Form Layout} /> + + + Use MUI Grid to create form layouts. + + + + + + + + + + + + + + + + + + + + + + + + } label="Check me out" /> + + + + + + -     -     -     - - - - Layout Gutters - - -

    - By adding gutter modifier classes - , you can have control over the gutter width in as well the inline as block direction. -

    - - - - - - - - - + + + + + + + MUI Form Layout{' '} + Horizontal + + } + /> + + + Create horizontal forms by using Grid with alignItems. + + + + + + Email + + + + + + + + Password + + + + + + + + + + + -

    - More complex layouts can also be created with the grid system. -

    - - - - Email - - - - Password - - - - Address - - - - Address 2 - - - - City - - - - State - - - - - - - Zip - - - - - - - - Sign in - - - - -     -     -     - - - - Layout Horizontal form - - -

    - Create horizontal forms with the grid by adding the .row class to form - groups and using the .col-*-* classes to specify the width of your labels - and controls. Be sure to add .col-form-label to your{' '} - <CFormLabel>s as well so they're vertically centered with their - associated form controls. -

    -

    - At times, you maybe need to use margin or padding utilities to create that perfect - alignment you need. For example, we've removed the padding-top on our - stacked radio inputs label to better align the text baseline. -

    - - - - - Email - - - - - - - - Password - - - - - -
    - Radios - - - - - -
    - -
    - -
    -     - - Sign in - -     -     -     -     -     - - - - Layout Horizontal form label sizing - - -

    - Be sure to use .col-form-label-sm or .col-form-label-lg to - your <CFormLabel>s or <legend>s to correctly - follow the size of .form-control-lg and .form-control-sm. -

    - - - - Email - - - - - - - - Email - - - - - - - - Email - - - - - - -     -     -     - - - - Layout Column sizing - - -

    - As shown in the previous examples, our grid system allows you to place any number of{' '} - <CCol>s within a <CRow>. They'll split the - available width equally between them. You may also pick a subset of your columns to - take up more or less space, while the remaining <CCol>s equally - split the rest, with specific column classes like{' '} - <CCol sm="7">. -

    - - - - - - - - - - - - - -     -     -     - - - - Layout Auto-sizing - - -

    - The example below uses a flexbox utility to vertically center the contents and changes{' '} - <CCol> to <CCol xs="auto"> so that your - columns only take up as much space as needed. Put another way, the column sizes itself - based on the contents. -

    - - - - - Name - - - - - - Username - - - @ - - - - - - Preference - - - - - - - - - - - - - - Submit - - - - -

    - You can then remix that once again with size-specific column classes. -

    - - - - - Name - - - - - - Username - - - @ - - - - - - Preference - - - - - - - - - - - - - - Submit - - - - -     -     -     - - - - Layout Inline forms - - -

    - Use the <CCol xs="auto"> class to create horizontal - layouts. By adding{' '} - gutter modifier classes, we will - have gutters in horizontal and vertical directions. The{' '} - .align-items-center aligns the form elements to the middle, making the{' '} - <CFormCheck> align properly. -

    - - - - - Username - - - @ - - - - - - Preference - - - - - - - - - - - - - - Submit - - - - -     -     -     -     + + + + ) } diff --git a/src/views/forms/range/Range.js b/src/views/forms/range/Range.js index 78a43dbfd2..e3dce9fdbe 100644 --- a/src/views/forms/range/Range.js +++ b/src/views/forms/range/Range.js @@ -1,82 +1,107 @@ import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CFormLabel, CFormRange, CRow } from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Slider from '@mui/material/Slider' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const Range = () => { return ( - - + + - - - React Range - - -

    - Create custom <input type="range"> controls with{' '} - <CFormRange>. -

    - - Example range - + + MUI Slider} /> + + + Sliders allow users to make selections from a range of values. + + + + Example range + + -     -     -     - - - - React Range Disabled - - -

    - Add the disabled boolean attribute on an input to give it a grayed out - appearance and remove pointer events. -

    - - Disabled range - + + + + + + + MUI Slider Disabled + + } + /> + + + Use the disabled prop to disable the slider. + + + + Disabled range + + -     -     -     - - - - React Range Min and max - - -

    - Range inputs have implicit values for min and max— - 0 and 100, respectively. You may specify new values for - those using the min and max attributes. -

    - - Example range - + + + + + + + MUI Slider Min and Max + + } + /> + + + Use the min and max props to set the range. + + + + Min: 0, Max: 5 + + -     -     -     - - - - React Range Steps - - -

    - By default, range inputs "snap" to integer values. To change this, you can - specify a step value. In the example below, we double the number of steps - by using step="0.5". -

    - - Example range - + + + + + + + MUI Slider Steps + + } + /> + + + Use the step prop to set the step increment. + + + + Step: 0.5 + + -     -     -     -     + + + + ) } diff --git a/src/views/forms/select/Select.js b/src/views/forms/select/Select.js index d817644493..96d71cd8e9 100644 --- a/src/views/forms/select/Select.js +++ b/src/views/forms/select/Select.js @@ -1,99 +1,95 @@ import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CFormSelect, CRow } from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import TextField from '@mui/material/TextField' +import MenuItem from '@mui/material/MenuItem' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const Select = () => { return ( - - + + - - - React Select Default - - - - - - - - - + + MUI Select} /> + + + Select components are used for collecting user provided information from a list of + options. + + + + + Open this select menu + One + Two + Three + + - - - - - - - React Select Sizing - - -

    - You may also choose from small and large custom selects to match our similarly sized - text inputs. -

    - - - - - - - - - - - - - + + + + + + + MUI Select Sizing + + } + /> + + + Use the size prop to change the size of the select. + + + + + Small select + One + Two + + + Normal select + One + Two + + -

    - The multiple attribute is also supported: -

    - - - - - - - +     +     +     + + + + MUI Select Disabled + + } + /> + + + Use the disabled prop to disable the select. + + + + + Disabled select + One + Two + + -

    - As is the htmlSize property: -

    - - - - - - - - -     -     -     - - - - React Select Disabled - - -

    - Add the disabled boolean attribute on a select to give it a grayed out - appearance and remove pointer events. -

    - - - - - - - - -     -     -     -     + + + + ) } diff --git a/src/views/forms/validation/Validation.js b/src/views/forms/validation/Validation.js index d0017b6b2c..c708731f7b 100644 --- a/src/views/forms/validation/Validation.js +++ b/src/views/forms/validation/Validation.js @@ -1,503 +1,90 @@ -import React, { useState } from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CForm, - CFormCheck, - CFormInput, - CFormFeedback, - CFormLabel, - CFormSelect, - CFormTextarea, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' +import React from 'react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import TextField from '@mui/material/TextField' +import Button from '@mui/material/Button' +import Box from '@mui/material/Box' +import Checkbox from '@mui/material/Checkbox' +import FormControlLabel from '@mui/material/FormControlLabel' import { DocsComponents, DocsExample } from 'src/components' -const CustomStyles = () => { - const [validated, setValidated] = useState(false) - const handleSubmit = (event) => { - const form = event.currentTarget - if (form.checkValidity() === false) { - event.preventDefault() - event.stopPropagation() - } - setValidated(true) - } - return ( - - - Email - - Looks good! - - - Email - - Looks good! - - - Username - - @ - - Please choose a username. - - - - City - - Please provide a valid city. - - - City - - - - - Please provide a valid city. - - - City - - Please provide a valid zip. - - - - You must agree before submitting. - - - - Submit form - - - - ) -} - -const BrowserDefaults = () => { - const [validated, setValidated] = useState(false) - const handleSubmit = (event) => { - const form = event.currentTarget - if (form.checkValidity() === false) { - event.preventDefault() - event.stopPropagation() - } - setValidated(true) - } - return ( - - - Email - - Looks good! - - - Email - - Looks good! - - - Username - - @ - - Please choose a username. - - - - City - - Please provide a valid city. - - - City - - - - - Please provide a valid city. - - - City - - Please provide a valid zip. - - - - You must agree before submitting. - - - - Submit form - - - - ) -} - -const Tooltips = () => { - const [validated, setValidated] = useState(false) - const handleSubmit = (event) => { - const form = event.currentTarget - if (form.checkValidity() === false) { - event.preventDefault() - event.stopPropagation() - } - setValidated(true) - } - return ( - - - Email - - - Looks good! - - - - Email - - - Looks good! - - - - Username - - @ - - - Please choose a username. - - - - - City - - - Please provide a valid city. - - - - City - - - - - - Please provide a valid city. - - - - City - - - Please provide a valid zip. - - - - - Submit form - - - - ) -} - const Validation = () => { return ( - - + + - - - Validation Custom styles - - -

    - For custom CoreUI form validation messages, you'll need to add the{' '} - noValidate boolean property to your <CForm>. This - disables the browser default feedback tooltips, but still provides access to the form - validation APIs in JavaScript. Try to submit the form below; our JavaScript will - intercept the submit button and relay feedback to you. When attempting to submit, - you'll see the :invalid and :valid styles applied to - your form controls. -

    -

    - Custom feedback styles apply custom colors, borders, focus styles, and background - icons to better communicate feedback.{' '} -

    - {CustomStyles()} -     -     -     - - - - Validation Browser defaults - - -

    - Not interested in custom validation feedback messages or writing JavaScript to change - form behaviors? All good, you can use the browser defaults. Try submitting the form - below. Depending on your browser and OS, you'll see a slightly different style of - feedback. -

    -

    - While these feedback styles cannot be styled with CSS, you can still customize the - feedback text through JavaScript. -

    - {BrowserDefaults()} -     -     -     - - - - Validation Server side - - -

    - We recommend using client-side validation, but in case you require server-side - validation, you can indicate invalid and valid form fields with invalid{' '} - and valid boolean properties. -

    -

    - For invalid fields, ensure that the invalid feedback/error message is associated with - the relevant form field using aria-describedby (noting that this - attribute allows more than one id to be referenced, in case the field - already points to additional form text). -

    - - - - Email - - Looks good! - - - Email - - Looks good! - - - Username - - @ - + MUI Form Validation} /> + + + Provide valuable, actionable feedback to your users with form validation. + + + + + + - Please choose a username. - - - - City - - Please provide a valid city. - - - City - - - - - Please provide a valid city. - - - City - - Please provide a valid zip. - - - - You must agree before submitting. - - - - Submit form - - - - -     -     -     - - - - Validation Supported elements - - -

    - Validation styles are available for the following form controls and components: -

    -
      -
    • - <CFormInput>s -
      • -
    • - <CFormSelect>s -
      • -
    • - <CFormCheck>s -
      • -
    - - -
    - - Textarea - - - Please enter a message in the textarea. -
    - - Example invalid feedback text - - - - - More example invalid feedback text - -
    - - - - - - - Example invalid select feedback -
    - -
    - - Example invalid form file feedback -
    - -
    - - Submit form - -
    -     + + + + + + + + + + + + + + + } + label="Agree to terms and conditions" + /> + + + + + +     -     -     -     - - - - Validation Tooltips - - -

    - If your form layout allows it, you can swap the text for the tooltip to display - validation feedback in a styled tooltip. Be sure to have a parent with{' '} - position: relative on it for tooltip positioning. In the example below, - our column classes have this already, but your project may require an alternative - setup. -

    - {Tooltips()} -     -     -     -     + + + + ) } diff --git a/src/views/icons/brands/Brands.js b/src/views/icons/brands/Brands.js index e46ce6fedb..928e287658 100644 --- a/src/views/icons/brands/Brands.js +++ b/src/views/icons/brands/Brands.js @@ -1,34 +1,75 @@ import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { brandSet } from '@coreui/icons' -import { DocsIcons } from 'src/components' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Box from '@mui/material/Box' +import FacebookIcon from '@mui/icons-material/Facebook' +import TwitterIcon from '@mui/icons-material/Twitter' +import LinkedInIcon from '@mui/icons-material/LinkedIn' +import InstagramIcon from '@mui/icons-material/Instagram' +import GitHubIcon from '@mui/icons-material/GitHub' +import YouTubeIcon from '@mui/icons-material/YouTube' +import GoogleIcon from '@mui/icons-material/Google' +import AppleIcon from '@mui/icons-material/Apple' +import AndroidIcon from '@mui/icons-material/Android' +import RedditIcon from '@mui/icons-material/Reddit' +import PinterestIcon from '@mui/icons-material/Pinterest' +import WhatsAppIcon from '@mui/icons-material/WhatsApp' +import TelegramIcon from '@mui/icons-material/Telegram' +import { DocsLink } from 'src/components' -const toKebabCase = (str) => { - return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase() -} - -export const getIconsView = (iconset) => { - return Object.entries(iconset).map(([name, value]) => ( - - -
    {toKebabCase(name)}
    -     - )) -} +const Brands = () => { + const icons = [ + { icon: FacebookIcon, name: 'Facebook' }, + { icon: TwitterIcon, name: 'Twitter' }, + { icon: LinkedInIcon, name: 'LinkedIn' }, + { icon: InstagramIcon, name: 'Instagram' }, + { icon: GitHubIcon, name: 'GitHub' }, + { icon: YouTubeIcon, name: 'YouTube' }, + { icon: GoogleIcon, name: 'Google' }, + { icon: AppleIcon, name: 'Apple' }, + { icon: AndroidIcon, name: 'Android' }, + { icon: RedditIcon, name: 'Reddit' }, + { icon: PinterestIcon, name: 'Pinterest' }, + { icon: WhatsAppIcon, name: 'WhatsApp' }, + { icon: TelegramIcon, name: 'Telegram' }, + ] -const CoreUIIcons = () => { return ( <> - - - Brand Icons - - {getIconsView(brandSet)} - - + + + Brand Icons} /> + + + MUI provides a comprehensive set of brand icons through @mui/icons-material. + + + {icons.map(({ icon: Icon, name }) => ( + + + + {name} + + + ))} + + + ) } -export default CoreUIIcons +export default Brands diff --git a/src/views/icons/coreui-icons/CoreUIIcons.js b/src/views/icons/coreui-icons/CoreUIIcons.js index 08fe176f76..a0a1ccc414 100644 --- a/src/views/icons/coreui-icons/CoreUIIcons.js +++ b/src/views/icons/coreui-icons/CoreUIIcons.js @@ -1,19 +1,95 @@ import React from 'react' -import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react' -import { freeSet } from '@coreui/icons' -import { getIconsView } from '../brands/Brands.js' -import { DocsIcons } from 'src/components' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Box from '@mui/material/Box' +import HomeIcon from '@mui/icons-material/Home' +import SettingsIcon from '@mui/icons-material/Settings' +import PersonIcon from '@mui/icons-material/Person' +import SearchIcon from '@mui/icons-material/Search' +import MenuIcon from '@mui/icons-material/Menu' +import CloseIcon from '@mui/icons-material/Close' +import AddIcon from '@mui/icons-material/Add' +import DeleteIcon from '@mui/icons-material/Delete' +import EditIcon from '@mui/icons-material/Edit' +import SaveIcon from '@mui/icons-material/Save' +import DownloadIcon from '@mui/icons-material/Download' +import UploadIcon from '@mui/icons-material/Upload' +import RefreshIcon from '@mui/icons-material/Refresh' +import VisibilityIcon from '@mui/icons-material/Visibility' +import VisibilityOffIcon from '@mui/icons-material/VisibilityOff' +import LockIcon from '@mui/icons-material/Lock' +import EmailIcon from '@mui/icons-material/Email' +import PhoneIcon from '@mui/icons-material/Phone' +import CalendarTodayIcon from '@mui/icons-material/CalendarToday' +import NotificationsIcon from '@mui/icons-material/Notifications' +import FavoriteIcon from '@mui/icons-material/Favorite' +import StarIcon from '@mui/icons-material/Star' +import CheckIcon from '@mui/icons-material/Check' +import WarningIcon from '@mui/icons-material/Warning' +import { DocsLink } from 'src/components' const CoreUIIcons = () => { + const icons = [ + { icon: HomeIcon, name: 'Home' }, + { icon: SettingsIcon, name: 'Settings' }, + { icon: PersonIcon, name: 'Person' }, + { icon: SearchIcon, name: 'Search' }, + { icon: MenuIcon, name: 'Menu' }, + { icon: CloseIcon, name: 'Close' }, + { icon: AddIcon, name: 'Add' }, + { icon: DeleteIcon, name: 'Delete' }, + { icon: EditIcon, name: 'Edit' }, + { icon: SaveIcon, name: 'Save' }, + { icon: DownloadIcon, name: 'Download' }, + { icon: UploadIcon, name: 'Upload' }, + { icon: RefreshIcon, name: 'Refresh' }, + { icon: VisibilityIcon, name: 'Visibility' }, + { icon: VisibilityOffIcon, name: 'VisibilityOff' }, + { icon: LockIcon, name: 'Lock' }, + { icon: EmailIcon, name: 'Email' }, + { icon: PhoneIcon, name: 'Phone' }, + { icon: CalendarTodayIcon, name: 'Calendar' }, + { icon: NotificationsIcon, name: 'Notifications' }, + { icon: FavoriteIcon, name: 'Favorite' }, + { icon: StarIcon, name: 'Star' }, + { icon: CheckIcon, name: 'Check' }, + { icon: WarningIcon, name: 'Warning' }, + ] + return ( <> - - - Free Icons - - {getIconsView(freeSet)} - - + + + MUI Icons} /> + + + MUI provides over 2,100 official Material icons through @mui/icons-material. + + + {icons.map(({ icon: Icon, name }) => ( + + + + {name} + + + ))} + + + ) } diff --git a/src/views/icons/flags/Flags.js b/src/views/icons/flags/Flags.js index 5db7e56705..385a2a89d8 100644 --- a/src/views/icons/flags/Flags.js +++ b/src/views/icons/flags/Flags.js @@ -1,21 +1,84 @@ import React from 'react' -import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react' -import { getIconsView } from '../brands/Brands.js' -import { flagSet } from '@coreui/icons' -import { DocsIcons } from 'src/components' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Box from '@mui/material/Box' +import FlagIcon from '@mui/icons-material/Flag' +import PublicIcon from '@mui/icons-material/Public' +import LanguageIcon from '@mui/icons-material/Language' +import { DocsLink } from 'src/components' + +const Flags = () => { + const countries = [ + 'United States', + 'United Kingdom', + 'Canada', + 'Germany', + 'France', + 'Spain', + 'Italy', + 'Japan', + 'China', + 'Brazil', + 'Australia', + 'India', + ] -const CoreUIIcons = () => { return ( <> - - - Flag Icons - - {getIconsView(flagSet)} - - + + + Flag Icons} /> + + + MUI does not include country flag icons by default. For flag icons, consider using a + dedicated flag icon library like react-country-flag or flagpack. + + + {countries.map((country) => ( + + + + {country} + + + ))} + + + + Alternative Icons + + + + + + Public + + + + + + Language + + + + + + ) } -export default CoreUIIcons +export default Flags diff --git a/src/views/notifications/alerts/Alerts.js b/src/views/notifications/alerts/Alerts.js index 70e1108a11..deead982ff 100644 --- a/src/views/notifications/alerts/Alerts.js +++ b/src/views/notifications/alerts/Alerts.js @@ -1,145 +1,105 @@ import React from 'react' -import { - CAlert, - CAlertHeading, - CAlertLink, - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, -} from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Alert from '@mui/material/Alert' +import AlertTitle from '@mui/material/AlertTitle' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const Alerts = () => { return ( - - + + - - - React Alert - - -

    - React Alert is prepared for any length of text, as well as an optional close button. - For a styling, use one of the required contextual color{' '} - props (e.g., primary). For inline dismissal, use the{' '} - dismissing prop - . -

    - - A simple primary alert—check it out! - A simple secondary alert—check it out! - A simple success alert—check it out! - A simple danger alert—check it out! - A simple warning alert—check it out! - A simple info alert—check it out! - A simple light alert—check it out! - A simple dark alert—check it out! + + MUI Alert} /> + + + Alerts display brief messages for the user without interrupting their use of the app. + + + + This is a success alert + This is an info alert + This is a warning alert + This is an error alert + -     -     -     - - - - React Alert Link color - - -

    - Use the <CAlertLink> component to immediately give matching colored - links inside any alert. -

    - - - A simple primary alert with an example link. Give - it a click if you like. - - - A simple secondary alert with an example link. - Give it a click if you like. - - - A simple success alert with an example link. Give - it a click if you like. - - - A simple danger alert with an example link. Give - it a click if you like. - - - A simple warning alert with an example link. Give - it a click if you like. - - - A simple info alert with an example link. Give it - a click if you like. - - - A simple light alert with an example link. Give it - a click if you like. - - - A simple dark alert with an example link. Give it - a click if you like. - + + + + + + + MUI Alert With Title + + } + /> + + + Use AlertTitle to add a title to the alert. + + + + + Success + This is a success alert with a title + + + Info + This is an info alert with a title + + + Warning + This is a warning alert with a title + + + Error + This is an error alert with a title + + -     -     -     - - - - React Alert Additional content - - -

    - Alert can also incorporate supplementary components & elements like heading, - paragraph, and divider. -

    - - - Well done! -

    - Aww yeah, you successfully read this important alert message. This example text is - going to run a bit longer so that you can see how spacing within an alert works - with this kind of content. -

    -
    -

    - Whenever you need to, be sure to use margin utilities to keep things nice and - tidy. -

    -     + + + + + + + MUI Alert Outlined + + } + /> + + + Use the outlined variant for a lighter alert style. + + + + + This is a success alert + + + This is an info alert + + + This is a warning alert + + + This is an error alert + + -     -     -     - - - - React Alert Dismissing - - -

    - Alerts can also be easily dismissed. Just add the dismissible prop. -

    - - { - alert('👋 Well, hi there! Thanks for dismissing me.') - }} - > - Go right ahead and click that dimiss over there on the right. - - -     -     -     -     + + + + ) } diff --git a/src/views/notifications/badges/Badges.js b/src/views/notifications/badges/Badges.js index 81dd6b5ac4..de07fdd51b 100644 --- a/src/views/notifications/badges/Badges.js +++ b/src/views/notifications/badges/Badges.js @@ -1,124 +1,93 @@ import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CCol, CBadge, CRow } from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Badge from '@mui/material/Badge' +import Chip from '@mui/material/Chip' +import Box from '@mui/material/Box' +import Button from '@mui/material/Button' +import MailIcon from '@mui/icons-material/Mail' import { DocsComponents, DocsExample } from 'src/components' const Badges = () => { return ( - - + + - - - - - React Badges Dismissing - - -

    - Bootstrap badge scale to suit the size of the parent element by using relative font - sizing and em units. -

    - -

    - Example heading New -

    -

    - Example heading New -

    -

    - Example heading New -

    -

    - Example heading New -

    -
    - Example heading New -
    -
    - Example heading New -
    + + MUI Badge} /> + + + Badge generates a small badge to the top-right of its child(ren). + + + + + + + + + + + + + + + + -

    - Badges can be used as part of links or buttons to provide a counter. -

    - - - Notifications 4 - +     +     + + + + MUI Chip} /> + + + Chips are compact elements that represent an input, attribute, or action. + + + + + + + + + + -

    - Remark that depending on how you use them, badges may be complicated for users of - screen readers and related assistive technologies. -

    -

    - Unless the context is clear, consider including additional context with a visually - hidden piece of additional text. -

    - - - Profile 9 - unread messages - +     +     +     + + + + MUI Badge On Buttons + + } + /> + + + Badges can be used on buttons to show counts. + + + + + + + + + + -     -     -     - - - - React Badges Contextual variations - - -

    - Add any of the below-mentioned color props to modify the presentation of - a badge. -

    - - primary - success - danger - warning - info - light - dark - -     -     - - - React Badges Pill badges - - -

    - Apply the shape="rounded-pill" prop to make badges rounded. -

    - - - primary - - - success - - - danger - - - warning - - - info - - - light - - - dark - - -     -     -     -     + + + + ) } diff --git a/src/views/notifications/modals/Modals.js b/src/views/notifications/modals/Modals.js index 7be7294a12..8166f343f6 100644 --- a/src/views/notifications/modals/Modals.js +++ b/src/views/notifications/modals/Modals.js @@ -1,752 +1,110 @@ import React, { useState } from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CLink, - CModal, - CModalBody, - CModalFooter, - CModalHeader, - CModalTitle, - CPopover, - CRow, - CTooltip, -} from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import Dialog from '@mui/material/Dialog' +import DialogTitle from '@mui/material/DialogTitle' +import DialogContent from '@mui/material/DialogContent' +import DialogContentText from '@mui/material/DialogContentText' +import DialogActions from '@mui/material/DialogActions' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' -const LiveDemo = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}> - Launch demo modal - - setVisible(false)}> - - Modal title - - Woohoo, you're reading this text in a modal! - - setVisible(false)}> - Close - - Save changes - - - - ) -} - -const StaticBackdrop = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}> - Launch static backdrop modal - - setVisible(false)}> - - Modal title - - - I will not close if you click outside me. Don'teven try to press escape key. - - - setVisible(false)}> - Close - - Save changes - - - - ) -} - -const ScrollingLongContent = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}> - Launch demo modal - - setVisible(false)}> - - Modal title - - -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -     - - setVisible(false)}> - Close - - Save changes - -     - - ) -} - -const ScrollingLongContent2 = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}> - Launch demo modal - - setVisible(false)}> - - Modal title - - -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -     - - setVisible(false)}> - Close - - Save changes - -     - - ) -} - -const VerticallyCentered = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}> - Vertically centered modal - - setVisible(false)}> - - Modal title - - - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. - - - setVisible(false)}> - Close - - Save changes - - - - ) -} - -const VerticallyCentered2 = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}> - Vertically centered scrollable modal - - setVisible(false)}> - - Modal title - - -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -     - - setVisible(false)}> - Close - - Save changes - -     - - ) -} - -const TooltipsPopovers = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}> - Launch demo modal - - setVisible(false)}> - - Modal title - - -
    Popover in a modal
    -

    - This - - button - {' '} - triggers a popover on click. -

    -
    -
    Tooltips in a modal
    -

    - - This link - {' '} - and - - that link - {' '} - have tooltips on hover. -

    -     - - setVisible(false)}> - Close - - Save changes - -     - - ) -} - -const OptionalSizes = () => { - const [visibleXL, setVisibleXL] = useState(false) - const [visibleLg, setVisibleLg] = useState(false) - const [visibleSm, setVisibleSm] = useState(false) - return ( - <> - setVisibleXL(!visibleXL)}> - Extra large modal - - setVisibleLg(!visibleLg)}> - Large modal - - setVisibleSm(!visibleSm)}> - Small large modal - - setVisibleXL(false)}> - - Extra large modal - - ... - - setVisibleLg(false)}> - - Large modal - - ... - - setVisibleSm(false)}> - - Small modal - - ... - - - ) -} - -const FullscreenModal = () => { - const [visible, setVisible] = useState(false) - const [visibleSm, setVisibleSm] = useState(false) - const [visibleMd, setVisibleMd] = useState(false) - const [visibleLg, setVisibleLg] = useState(false) - const [visibleXL, setVisibleXL] = useState(false) - const [visibleXXL, setVisibleXXL] = useState(false) - - return ( - <> - setVisible(!visible)}> - Full screen - - setVisibleSm(!visibleSm)}> - Full screen below sm - - setVisibleMd(!visibleMd)}> - Full screen below md - - setVisibleLg(!visibleLg)}> - Full screen below lg - - setVisibleXL(!visibleXL)}> - Full screen below xl - - setVisibleXXL(!visibleXXL)}> - Full screen below xxl - - setVisible(false)}> - - Full screen - - ... - - setVisibleSm(false)}> - - Full screen below sm - - ... - - setVisibleMd(false)}> - - Full screen below md - - ... - - setVisibleLg(false)}> - - Full screen below lg - - ... - - setVisibleXL(false)}> - - Full screen below xl - - ... - - setVisibleXXL(false)}> - - Full screen below xxl - - ... - - - ) -} - const Modals = () => { + const [open, setOpen] = useState(false) + const [openLarge, setOpenLarge] = useState(false) + const [openSmall, setOpenSmall] = useState(false) + return ( - - + + - - - React Modal - - -

    - Below is a static modal example (meaning its position and{' '} - display have been overridden). Included are the modal header, modal body - (required for padding), and modal footer (optional). We ask that you - include modal headers with dismiss actions whenever possible, or provide another - explicit dismiss action. -

    - - - - Modal title - - Modal body text goes here. - - Close - Save changes - - - -     -     -     - - - - React Modal Live demo - - -

    - Toggle a working modal demo by clicking the button below. It will slide down and fade - in from the top of the page. -

    - {LiveDemo()} -     -     -     - - - - React Modal Static backdrop - - -

    - If you don’t provide an onDimsiss handler to the Modal component, your - modal will behave as though the backdrop is static, meaning it will not close when - clicking outside it. Click the button below to try it. -

    - {StaticBackdrop()} -     -     -     - - - - React Modal Scrolling long content - - -

    - If you don’t provide an onDimsiss handler to the Modal component, your - modal will behave as though the backdrop is static, meaning it will not close when - clicking outside it. Click the button below to try it. -

    - - {ScrollingLongContent()} - -

    - You can also create a scrollable modal that allows scroll the modal body by adding{' '} - scrollable prop. -

    - - {ScrollingLongContent2()} - -     -     -     - - - - React Modal Vertically centered - - -

    - Add alignment="center" to <CModal> to - vertically center the modal. -

    - - {VerticallyCentered()} - - - {VerticallyCentered2()} + + MUI Dialog (Modal)} /> + + + Dialogs inform users about a task and can contain critical information. + + + + setOpen(false)}> + Modal title + + + Woohoo, you are reading this text in a modal! + + + + + + + -     -     -     - - - - React Modal Tooltips and popovers - - -

    - <CTooltips> and <CPopovers> can be placed within - modals as needed. When modals are closed, any tooltips and popovers within are also - automatically dismissed. -

    - - {TooltipsPopovers()} + + + + + + + MUI Dialog Sizes + + } + /> + + + Use the maxWidth prop to change the dialog size. + + + + + + setOpenSmall(false)} + maxWidth="xs" + fullWidth + > + Small Modal + + This is a small modal dialog. + + + + + + setOpenLarge(false)} + maxWidth="lg" + fullWidth + > + Large Modal + + This is a large modal dialog. + + + + + + -     -     -     - - - - React Modal Optional sizes - - -

    - Modals have three optional sizes, available via modifier classes to be placed on a{' '} - <CModal>. These sizes kick in at certain breakpoints to avoid - horizontal scrollbars on narrower viewports. -

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SizeProperty sizeModal max-width
    Small - 'sm' - - 300px -
    DefaultNone - 500px -
    Large - 'lg' - - 800px -
    Extra large - 'xl' - - 1140px -
    - {OptionalSizes()} -     -     -     - - - - React Modal Fullscreen Modal - - -

    - Another override is the option to pop up a modal that covers the user viewport, - available via property fullscrean. -

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Property fullscreanAvailability
    - true - Always
    - 'sm' - - Below 576px -
    - 'md' - - Below 768px -
    - 'lg' - - Below 992px -
    - 'xl' - - Below 1200px -
    - 'xxl' - - Below 1400px -
    - {FullscreenModal()} -     -     -     -     + + + + ) } diff --git a/src/views/notifications/toasts/Toasts.js b/src/views/notifications/toasts/Toasts.js index 9ccf859ad3..d8b482c392 100644 --- a/src/views/notifications/toasts/Toasts.js +++ b/src/views/notifications/toasts/Toasts.js @@ -1,252 +1,97 @@ -import React, { useRef, useState } from 'react' -import { - CCard, - CCardHeader, - CCardBody, - CButton, - CRow, - CCol, - CToast, - CToastBody, - CToastClose, - CToastHeader, - CToaster, -} from '@coreui/react' +import React, { useState } from 'react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import Snackbar from '@mui/material/Snackbar' +import Alert from '@mui/material/Alert' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' -const ExampleToast = () => { - const [toast, addToast] = useState(0) - const toaster = useRef() - const exampleToast = ( - - - - - - CoreUI for React.js - 7 min ago - - Hello, world! This is a toast message. - - ) - return ( - <> - addToast(exampleToast)}> - Send a toast - - - - ) -} - const Toasts = () => { + const [open, setOpen] = useState(false) + const [openSuccess, setOpenSuccess] = useState(false) + const [openError, setOpenError] = useState(false) + return ( - - + + - - - React Toast Basic - - -

    - Toasts are as flexible as you need and have very little required markup. At a minimum, - we require a single element to contain your “toasted” content and strongly encourage a - dismiss button. -

    - - - - - - - CoreUI for React.js - 7 min ago - - Hello, world! This is a toast message. - + + MUI Snackbar (Toast)} /> + + + Snackbars provide brief notifications at the bottom of the screen. + + + + setOpen(false)} + message="This is a toast message" + /> - {ExampleToast()} -     -     -     - - - - React Toast Translucent - - -

    - Toasts are slightly translucent to blend in with what's below them. -

    - - - - + + + + + + MUI Snackbar With Alert + + } + /> + + + Combine Snackbar with Alert for colored notifications. + + + + + + setOpenSuccess(false)} + > + setOpenSuccess(false)} + severity="success" + sx={{ width: '100%' }} > - - - CoreUI for React.js - 7 min ago - - Hello, world! This is a toast message. - - -     -     -     - - - - React Toast Stacking - - -

    - You can stack toasts by wrapping them in a toast container, which will vertically add - some spacing. -

    - - - - - - - - CoreUI for React.js - 7 min ago - - Hello, world! This is a toast message. - - - - - - - CoreUI for React.js - 7 min ago - - Hello, world! This is a toast message. - - - -     -     -     - - - - React Toast Custom content - - -

    - Customize your toasts by removing sub-components, tweaking them with{' '} - utilities, or by adding your own - markup. Here we've created a simpler toast by removing the default{' '} - <CToastHeader>, adding a custom hide icon from{' '} - CoreUI Icons, and using some{' '} - flexbox utilities to adjust the - layout. -

    - - -
    - Hello, world! This is a toast message. - -
    -     -     -

    - Alternatively, you can also add additional controls and components to toasts. -

    - - - - Hello, world! This is a toast message. -
    - - Take action - - - Close - -
    -     -     -     -     -     -     - - - - React Toast Custom content - - -

    - Building on the above example, you can create different toast color schemes with our{' '} - color and{' '} - background utilities. Here - we've set color="primary" and added .text-white{' '} - class to the <Ctoast>, and then set white property to - our close button. For a crisp edge, we remove the default border with{' '} - .border-0. -

    - - -
    - Hello, world! This is a toast message. - -
    -     + This is a success message! + + + setOpenError(false)} + > + setOpenError(false)} + severity="error" + sx={{ width: '100%' }} + > + This is an error message! + + +     -     -     -     -     + + + + ) } diff --git a/src/views/pages/login/Login.js b/src/views/pages/login/Login.js index 1b2ee0baa2..185afb9680 100644 --- a/src/views/pages/login/Login.js +++ b/src/views/pages/login/Login.js @@ -1,85 +1,114 @@ 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' +import Box from '@mui/material/Box' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import Container from '@mui/material/Container' +import Grid from '@mui/material/Grid' +import TextField from '@mui/material/TextField' +import Button from '@mui/material/Button' +import Typography from '@mui/material/Typography' +import InputAdornment from '@mui/material/InputAdornment' +import PersonIcon from '@mui/icons-material/Person' +import LockIcon from '@mui/icons-material/Lock' const Login = () => { return ( -
    - - - - - - - -

    Login

    -

    Sign In to your account

    - - - - - - - - - - - - - - - - Login - - - - - Forgot password? - - - -     -     -     - - -
    -

    Sign up

    -

    - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. -

    - - - Register Now! - - -
    -     -     -     -     -     -     -
    + + + + + + + + Login + + + Sign In to your account + + + + + ), + }, + }} + /> + + + + ), + }, + }} + /> + + + + + + + + + + + + + + + + Sign up + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. + + + + + + + + ) } diff --git a/src/views/pages/page404/Page404.js b/src/views/pages/page404/Page404.js index d7fe9a0a25..76a0813aef 100644 --- a/src/views/pages/page404/Page404.js +++ b/src/views/pages/page404/Page404.js @@ -1,40 +1,59 @@ 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' +import Box from '@mui/material/Box' +import Container from '@mui/material/Container' +import TextField from '@mui/material/TextField' +import Button from '@mui/material/Button' +import Typography from '@mui/material/Typography' +import InputAdornment from '@mui/material/InputAdornment' +import SearchIcon from '@mui/icons-material/Search' const Page404 = () => { return ( -
    - - - -
    -

    404

    -

    Oops! You{"'"}re lost.

    -

    - The page you are looking for was not found. -

    -
    - - - - - - Search - -     -     -     -
    + + + + + 404 + + + + Oops! You're lost. + + + The page you are looking for was not found. + + + + + + + + ), + }, + }} + /> + + + + ) } diff --git a/src/views/pages/page500/Page500.js b/src/views/pages/page500/Page500.js index ea11a0cb2d..b26b526d60 100644 --- a/src/views/pages/page500/Page500.js +++ b/src/views/pages/page500/Page500.js @@ -1,40 +1,59 @@ 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' +import Box from '@mui/material/Box' +import Container from '@mui/material/Container' +import TextField from '@mui/material/TextField' +import Button from '@mui/material/Button' +import Typography from '@mui/material/Typography' +import InputAdornment from '@mui/material/InputAdornment' +import SearchIcon from '@mui/icons-material/Search' const Page500 = () => { return ( -
    - - - - -

    500

    -

    Houston, we have a problem!

    -

    - The page you are looking for is temporarily unavailable. -

    -     - - - - - - Search - -     -     -     -
    + + + + + 500 + + + + Houston, we have a problem! + + + The page you are looking for is temporarily unavailable. + + + + + + + + ), + }, + }} + /> + + + + ) } diff --git a/src/views/pages/register/Register.js b/src/views/pages/register/Register.js index d78b24c8fd..1e6ff05349 100644 --- a/src/views/pages/register/Register.js +++ b/src/views/pages/register/Register.js @@ -1,70 +1,104 @@ 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' +import Box from '@mui/material/Box' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import Container from '@mui/material/Container' +import TextField from '@mui/material/TextField' +import Button from '@mui/material/Button' +import Typography from '@mui/material/Typography' +import InputAdornment from '@mui/material/InputAdornment' +import PersonIcon from '@mui/icons-material/Person' +import EmailIcon from '@mui/icons-material/Email' +import LockIcon from '@mui/icons-material/Lock' const Register = () => { return ( -
    - - - - - - -

    Register

    -

    Create your account

    - - - - - - - - @ - - - - - - - - - - - - - - -
    - Create Account -
    -     -     -     -     -     -     -
    + + + + + + Register + + + Create your account + + + + + ), + }, + }} + /> + + + + ), + }, + }} + /> + + + + ), + }, + }} + /> + + + + ), + }, + }} + /> + + + + + ) } diff --git a/src/views/theme/colors/Colors.js b/src/views/theme/colors/Colors.js index ef844e1637..d46e2bb778 100644 --- a/src/views/theme/colors/Colors.js +++ b/src/views/theme/colors/Colors.js @@ -1,10 +1,25 @@ 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 Box from '@mui/material/Box' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Table from '@mui/material/Table' +import TableBody from '@mui/material/TableBody' +import TableCell from '@mui/material/TableCell' +import TableRow from '@mui/material/TableRow' +import Typography from '@mui/material/Typography' import { DocsLink } from 'src/components' +const rgbToHex = (rgb) => { + if (!rgb || rgb === 'rgb(255, 255, 255)') return '#ffffff' + const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/) + if (!match) return rgb + const hex = (x) => ('0' + parseInt(x).toString(16)).slice(-2) + return '#' + hex(match[1]) + hex(match[2]) + hex(match[3]) +} + const ThemeView = () => { const [color, setColor] = useState('rgb(255, 255, 255)') const ref = createRef() @@ -16,75 +31,80 @@ const ThemeView = () => { }, [ref]) return ( - - - - - - - - - - - -
    HEX:{rgbToHex(color)}
    RGB:{color}
    + + + + HEX: + {rgbToHex(color)} + + + RGB: + {color} + + +
    ) } -const ThemeColor = ({ className, children }) => { - const classes = classNames(className, 'theme-color w-75 rounded mb-3') +const ThemeColor = ({ bgcolor, children }) => { return ( - -
    + + {children} -     + ) } ThemeColor.propTypes = { children: PropTypes.node, - className: PropTypes.string, + bgcolor: PropTypes.string, } const Colors = () => { return ( - <> - - - Theme colors - - - - - -
    Brand Primary Color
    -     - -
    Brand Secondary Color
    -     - -
    Brand Success Color
    -     - -
    Brand Danger Color
    -     - -
    Brand Warning Color
    -     - -
    Brand Info Color
    -     - -
    Brand Light Color
    -     - -
    Brand Dark Color
    -     -     -     -     - + + } + /> + + + + Brand Primary Color + + + Brand Secondary Color + + + Brand Success Color + + + Brand Danger Color + + + Brand Warning Color + + + Brand Info Color + + + Brand Light Color + + + Brand Dark Color + + + + ) } diff --git a/src/views/theme/typography/Typography.js b/src/views/theme/typography/Typography.js index 1cae4f6c99..182a5a06f4 100644 --- a/src/views/theme/typography/Typography.js +++ b/src/views/theme/typography/Typography.js @@ -1,227 +1,240 @@ import React from 'react' -import { CCard, CCardHeader, CCardBody } from '@coreui/react' +import Box from '@mui/material/Box' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Table from '@mui/material/Table' +import TableBody from '@mui/material/TableBody' +import TableCell from '@mui/material/TableCell' +import TableHead from '@mui/material/TableHead' +import TableRow from '@mui/material/TableRow' +import MuiTypography from '@mui/material/Typography' +import Grid from '@mui/material/Grid' import { DocsLink } from 'src/components' const Typography = () => { return ( <> - - - Headings - - - -

    - Documentation and examples for Bootstrap typography, including global settings, + + } + /> + + + Documentation and examples for Material UI typography, including global settings, headings, body text, lists, and more. -

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    HeadingExample
    -

    - <h1></h1> -

    -     		- h1. Bootstrap heading -
    -

    - <h2></h2> -

    -     		- h2. Bootstrap heading -
    -

    - <h3></h3> -

    -     		- h3. Bootstrap heading -
    -

    - <h4></h4> -

    -     		- h4. Bootstrap heading -
    -

    - <h5></h5> -

    -     		- h5. Bootstrap heading -
    -

    - <h6></h6> -

    -     		- h6. Bootstrap heading -
    -     -     - - Headings - -

    - .h1 through - .h6 - classes are also available, for when you want to match the font styling of a heading but - cannot use the associated HTML element. -

    -
    -

    h1. Bootstrap heading

    -

    h2. Bootstrap heading

    -

    h3. Bootstrap heading

    -

    h4. Bootstrap heading

    -

    h5. Bootstrap heading

    -

    h6. Bootstrap heading

    -
    -     -     - -
    Display headings
    -
    -

    - 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 display heading - —a larger, slightly more opinionated heading style. -

    -
    - - - - - - - - - - - - - - - -
    - Display 1 -
    - Display 2 -
    - Display 3 -
    - Display 4 -
    -
    -
    -     - - Inline text elements - -

    - 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 display heading - —a larger, slightly more opinionated heading style. -

    -
    -

    + + + + + Heading + Example + + + + + + <Typography variant="h1"> + + + + h1. MUI heading + + + + + + <Typography variant="h2"> + + + + h2. MUI heading + + + + + + <Typography variant="h3"> + + + + h3. MUI heading + + + + + + <Typography variant="h4"> + + + + h4. MUI heading + + + + + + <Typography variant="h5"> + + + + h5. MUI heading + + + + + + <Typography variant="h6"> + + + + h6. MUI heading + + + + +
    + + + + + + + + MUI provides various typography variants for different use cases. + + *': { mb: 2 } }}> + + h1. MUI heading + + + h2. MUI heading + + + h3. MUI heading + + + h4. MUI heading + + + h5. MUI heading + + + h6. MUI heading + + + + + + + + + + Use body1 and body2 variants for paragraph text with different sizes. + + *': { mb: 2 } }}> + + body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis + tenetur unde suscipit, quam beatae rerum inventore consectetur. + + + body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis + tenetur unde suscipit, quam beatae rerum inventore consectetur. + + + subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. + + + subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. + + + caption text + + + overline text + + + + + + + + + + Various inline text styling options are available through standard HTML elements. + + p': { mb: 1 } }}> + You can use the mark tag to highlight text. -

    -

    + + This line of text is meant to be treated as deleted text. -

    -

    + + This line of text is meant to be treated as no longer accurate. -

    -

    + + This line of text is meant to be treated as an addition to the document. -

    -

    + + This line of text will render as underlined -

    -

    - This line of text is meant to be treated as fine print. -

    -

    + + + This line of text is meant to be treated as fine print. + + This line rendered as bold text. -

    -

    + + This line rendered as italicized text. -

    -
    -     -     - - Description list alignment - -

    - Align terms and descriptions horizontally by using our grid system’s predefined classes - (or semantic mixins). For longer terms, you can optionally add a{' '} - .text-truncate class to truncate the text - with an ellipsis. -

    -
    -
    -
    Description lists
    -
    A description list is perfect for defining terms.
    + + + + -
    Euismod
    -
    -

    - Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. -

    -

    Donec id elit non mi porta gravida at eget metus.

    -
    - -
    Malesuada porta
    -
    Etiam porta sem malesuada magna mollis euismod.
    - -
    Truncated term is truncated
    -
    + + + + + Use Grid components to create aligned description lists. + + + + Description lists + + + A description list is perfect for defining terms. + + + Euismod + + + + Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. + + Donec id elit non mi porta gravida at eget metus. + + + Malesuada porta + + + Etiam porta sem malesuada magna mollis euismod. + + + + Truncated term is truncated + + + + Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. -
    - -
    Nesting
    -
    -
    -
    Nested definition list
    -
    - Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc. -
    -
    -
    -
    -
    -     -     + + + + + ) } diff --git a/src/views/widgets/Widgets.js b/src/views/widgets/Widgets.js index 4a34afe4c0..21409e9bcc 100644 --- a/src/views/widgets/Widgets.js +++ b/src/views/widgets/Widgets.js @@ -1,897 +1,506 @@ import React from 'react' -import { - CCard, - CCardBody, - CCardGroup, - CCardHeader, - CCol, - CLink, - CRow, - CWidgetStatsB, - CWidgetStatsC, - CWidgetStatsE, - CWidgetStatsF, -} from '@coreui/react' -import { getStyle } from '@coreui/utils' -import CIcon from '@coreui/icons-react' -import { - cilArrowRight, - cilBasket, - cilBell, - cilChartPie, - cilMoon, - cilLaptop, - cilPeople, - cilSettings, - cilSpeech, - cilSpeedometer, - cilUser, - cilUserFollow, -} from '@coreui/icons' -import { CChartBar, CChartLine } from '@coreui/react-chartjs' -import { DocsExample } from 'src/components' +import Box from '@mui/material/Box' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import LinearProgress from '@mui/material/LinearProgress' +import Link from '@mui/material/Link' +import PeopleIcon from '@mui/icons-material/People' +import PersonAddIcon from '@mui/icons-material/PersonAdd' +import ShoppingBasketIcon from '@mui/icons-material/ShoppingBasket' +import PieChartIcon from '@mui/icons-material/PieChart' +import SpeedIcon from '@mui/icons-material/Speed' +import ChatIcon from '@mui/icons-material/Chat' +import SettingsIcon from '@mui/icons-material/Settings' +import PersonIcon from '@mui/icons-material/Person' +import NightlightIcon from '@mui/icons-material/Nightlight' +import NotificationsIcon from '@mui/icons-material/Notifications' +import ArrowForwardIcon from '@mui/icons-material/ArrowForward' +import LaptopIcon from '@mui/icons-material/Laptop' +import { BarChart, Bar, LineChart, Line, ResponsiveContainer } from 'recharts' import WidgetsBrand from './WidgetsBrand' import WidgetsDropdown from './WidgetsDropdown' -const Widgets = () => { +const generateChartData = () => { const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min) + return ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'].map((day) => ({ + name: day, + value: random(40, 100), + })) +} + +const chartData = generateChartData() + +const WidgetStatsB = ({ value, title, text, progress, color, inverse }) => ( + + + + {value} + + + {title} + + + + {text} + + + +) + +const WidgetStatsE = ({ chart, title, value }) => ( + + + {chart} + + {value} + + + {title} + + + +) + +const WidgetStatsF = ({ icon, title, value, color, footer }) => ( + + + + {icon} + + + + {value} + + + {title} + + + + {footer && ( + + {footer} + + )} + +) + +const WidgetStatsC = ({ icon, title, value, progress, color, inverse }) => ( + + + + + + {value} + + + {title} + + + {icon} + + + + +) +const Widgets = () => { return ( - - Widgets - - + + + + + Stats Widgets A (WidgetsDropdown) + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - } - title="title" - value="1,123" - /> - - - - } - title="title" - value="1,123" - /> - - - - } - title="title" - value="1,123" - /> - - - - } - title="title" - value="1,123" - /> - - - - } - title="title" - value="1,123" - /> - - - - } - title="title" - value="1,123" - /> - - - - - - - } - title="income" - value="$1.999,50" - color="primary" - /> - - - } - title="income" - value="$1.999,50" - color="info" - /> - - - } - title="income" - value="$1.999,50" - color="warning" - /> - - - } - title="income" - value="$1.999,50" - color="danger" - /> - - - - - - - } - title="income" - value="$1.999,50" - color="primary" - footer={ - - View more - - - } - /> - - - } - title="income" - value="$1.999,50" - color="info" - footer={ - - View more - - - } - /> - - - } - title="income" - value="$1.999,50" - color="warning" - footer={ - - View more - - - } - /> - - - } - title="income" - value="$1.999,50" - color="danger" - footer={ - - View more - - - } - /> - - - - - - - } - padding={false} - title="income" - value="$1.999,50" - color="primary" - /> - - - } - padding={false} - title="income" - value="$1.999,50" - color="info" - /> - - - } - padding={false} - title="income" - value="$1.999,50" - color="warning" - /> - - - } - padding={false} - title="income" - value="$1.999,50" - color="danger" - /> - - - - + + + + Stats Widgets B + + + + + + + + + + + + + + + + + + Stats Widgets B (Inverse) + + + + + + + + + + + + + + + + + + Stats Widgets E (with Charts) + + + + + + + + + } + title="title" + value="1,123" + /> + + + + + + + + } + title="title" + value="1,123" + /> + + + + + + + + } + title="title" + value="1,123" + /> + + + + + + + + } + title="title" + value="1,123" + /> + + + + + Stats Widgets F + + + + } + title="income" + value="$1.999,50" + color="primary" + /> + + + } title="income" value="$1.999,50" color="info" /> + + + } + title="income" + value="$1.999,50" + color="warning" + /> + + + } + title="income" + value="$1.999,50" + color="error" + /> + + + + + Stats Widgets F (with Footer) + + + + } + title="income" + value="$1.999,50" + color="primary" + footer={ + + View more + + } + /> + + + } + title="income" + value="$1.999,50" + color="info" + footer={ + + View more + + } + /> + + + + + Brand Widgets + + - - + + + + Brand Widgets (with Charts) + + - - - - } + + + + Stats Widgets C + + + + } value="87.500" title="Visitors" progress={{ color: 'info', value: 75 }} /> - } + + + } value="385" title="New Clients" progress={{ color: 'success', value: 75 }} /> - } + + + } value="1238" title="Products sold" progress={{ color: 'warning', value: 75 }} /> - } + + + } value="28%" title="Returning Visitors" progress={{ color: 'primary', value: 75 }} /> - } + + + } + value="5:34:11" + title="Avg. Time" + progress={{ color: 'error', value: 75 }} + /> + + + } + value="972" + title="Comments" + progress={{ color: 'info', value: 75 }} + /> + + + + + Stats Widgets C (Inverse) + + + + } + value="87.500" + title="Visitors" + inverse + progress={{ value: 75 }} + /> + + + } + value="385" + title="New Clients" + inverse + progress={{ value: 75 }} + /> + + + } + value="1238" + title="Products sold" + inverse + progress={{ value: 75 }} + /> + + + } + value="28%" + title="Returning Visitors" + inverse + progress={{ value: 75 }} + /> + + + } value="5:34:11" title="Avg. Time" - progress={{ color: 'danger', value: 75 }} + inverse + progress={{ value: 75 }} + /> + + + } + value="972" + title="Comments" + inverse + progress={{ value: 75 }} /> - - - - - - } - value="87.500" - title="Visitors" - progress={{ color: 'info', value: 75 }} - /> - - - } - value="385" - title="New Clients" - progress={{ color: 'success', value: 75 }} - /> - - - } - value="1238" - title="Products sold" - progress={{ color: 'warning', value: 75 }} - /> - - - } - value="28%" - title="Returning Visitors" - progress={{ color: 'primary', value: 75 }} - /> - - - } - value="5:34:11" - title="Avg. Time" - progress={{ color: 'danger', value: 75 }} - /> - - - } - value="972" - title="Comments" - progress={{ color: 'info', value: 75 }} - /> - - - - - - - } - value="87.500" - title="Visitors" - inverse - progress={{ value: 75 }} - /> - - - } - value="385" - title="New Clients" - inverse - progress={{ value: 75 }} - /> - - - } - value="1238" - title="Products sold" - inverse - progress={{ value: 75 }} - /> - - - } - value="28%" - title="Returning Visitors" - inverse - progress={{ value: 75 }} - /> - - - } - value="5:34:11" - title="Avg. Time" - inverse - progress={{ value: 75 }} - /> - - - } - value="972" - title="Comments" - inverse - progress={{ value: 75 }} - /> - - - - - + + + + ) } diff --git a/src/views/widgets/WidgetsBrand.js b/src/views/widgets/WidgetsBrand.js index 03eea83efd..6dff07289f 100644 --- a/src/views/widgets/WidgetsBrand.js +++ b/src/views/widgets/WidgetsBrand.js @@ -1,176 +1,172 @@ import React from 'react' import PropTypes from 'prop-types' -import { CWidgetStatsD, CRow, CCol } from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { cibFacebook, cibLinkedin, cibTwitter, cilCalendar } from '@coreui/icons' -import { CChart } from '@coreui/react-chartjs' +import Box from '@mui/material/Box' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import FacebookIcon from '@mui/icons-material/Facebook' +import TwitterIcon from '@mui/icons-material/Twitter' +import LinkedInIcon from '@mui/icons-material/LinkedIn' +import CalendarMonthIcon from '@mui/icons-material/CalendarMonth' +import { AreaChart, Area, ResponsiveContainer } from 'recharts' + +const BrandWidget = ({ icon, bgColor, values, chartData, withCharts }) => { + return ( + + + {withCharts && chartData && ( + + + + + + + + )} + {icon} + + + + {values.map((item, index) => ( + + + {item.value} + + + {item.title} + + + ))} + + + + ) +} + +BrandWidget.propTypes = { + icon: PropTypes.node, + bgColor: PropTypes.string, + values: PropTypes.array, + chartData: PropTypes.array, + withCharts: PropTypes.bool, +} const WidgetsBrand = (props) => { - const chartOptions = { - elements: { - line: { - tension: 0.4, - }, - point: { - radius: 0, - hitRadius: 10, - hoverRadius: 4, - hoverBorderWidth: 3, - }, - }, - maintainAspectRatio: false, - plugins: { - legend: { - display: false, - }, - }, - scales: { - x: { - display: false, - }, - y: { - display: false, - }, - }, - } + const facebookData = [ + { value: 65 }, + { value: 59 }, + { value: 84 }, + { value: 84 }, + { value: 51 }, + { value: 55 }, + { value: 40 }, + ] + + const twitterData = [ + { value: 1 }, + { value: 13 }, + { value: 9 }, + { value: 17 }, + { value: 34 }, + { value: 41 }, + { value: 38 }, + ] + + const linkedinData = [ + { value: 78 }, + { value: 81 }, + { value: 80 }, + { value: 45 }, + { value: 34 }, + { value: 12 }, + { value: 40 }, + ] + + const eventsData = [ + { value: 35 }, + { value: 23 }, + { value: 56 }, + { value: 22 }, + { value: 97 }, + { value: 23 }, + { value: 64 }, + ] return ( - - - - ), - })} - icon={} + + + } + bgColor="#3b5998" values={[ { title: 'friends', value: '89K' }, { title: 'feeds', value: '459' }, ]} - style={{ - '--cui-card-cap-bg': '#3b5998', - }} + chartData={facebookData} + withCharts={props.withCharts} /> - - - - ), - })} - icon={} + + + } + bgColor="#00aced" values={[ { title: 'followers', value: '973k' }, { title: 'tweets', value: '1.792' }, ]} - style={{ - '--cui-card-cap-bg': '#00aced', - }} + chartData={twitterData} + withCharts={props.withCharts} /> - - - - ), - })} - icon={} + + + } + bgColor="#4875b4" values={[ { title: 'contacts', value: '500' }, { title: 'feeds', value: '1.292' }, ]} - style={{ - '--cui-card-cap-bg': '#4875b4', - }} + chartData={linkedinData} + withCharts={props.withCharts} /> - - - - ), - })} - icon={} + + + } + bgColor="#f9b115" values={[ { title: 'events', value: '12+' }, { title: 'meetings', value: '4' }, ]} + chartData={eventsData} + withCharts={props.withCharts} /> - - + + ) } diff --git a/src/views/widgets/WidgetsDropdown.js b/src/views/widgets/WidgetsDropdown.js index 85e2fc969d..1c8141824b 100644 --- a/src/views/widgets/WidgetsDropdown.js +++ b/src/views/widgets/WidgetsDropdown.js @@ -1,390 +1,208 @@ -import React, { useEffect, useRef } from 'react' +import React from 'react' import PropTypes from 'prop-types' +import Box from '@mui/material/Box' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import IconButton from '@mui/material/IconButton' +import Menu from '@mui/material/Menu' +import MenuItem from '@mui/material/MenuItem' +import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward' +import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward' +import MoreVertIcon from '@mui/icons-material/MoreVert' +import { LineChart, Line, BarChart, Bar, ResponsiveContainer, Area, AreaChart } from 'recharts' -import { - CRow, - CCol, - CDropdown, - CDropdownMenu, - CDropdownItem, - CDropdownToggle, - CWidgetStatsA, -} from '@coreui/react' -import { getStyle } from '@coreui/utils' -import { CChartBar, CChartLine } from '@coreui/react-chartjs' -import CIcon from '@coreui/icons-react' -import { cilArrowBottom, cilArrowTop, cilOptions } from '@coreui/icons' +const StatWidget = ({ color, value, change, changeType, title, chartData, chartType }) => { + const [anchorEl, setAnchorEl] = React.useState(null) + const open = Boolean(anchorEl) -const WidgetsDropdown = (props) => { - const widgetChartRef1 = useRef(null) - const widgetChartRef2 = useRef(null) + const handleClick = (event) => { + setAnchorEl(event.currentTarget) + } - useEffect(() => { - document.documentElement.addEventListener('ColorSchemeChange', () => { - if (widgetChartRef1.current) { - setTimeout(() => { - widgetChartRef1.current.data.datasets[0].pointBackgroundColor = getStyle('--cui-primary') - widgetChartRef1.current.update() - }) - } + const handleClose = () => { + setAnchorEl(null) + } - if (widgetChartRef2.current) { - setTimeout(() => { - widgetChartRef2.current.data.datasets[0].pointBackgroundColor = getStyle('--cui-info') - widgetChartRef2.current.update() - }) - } - }) - }, [widgetChartRef1, widgetChartRef2]) + const colorMap = { + primary: '#321fdb', + info: '#39f', + warning: '#f9b115', + error: '#e55353', + } return ( - - - + + + + + {value}{' '} + + ({change}{' '} + {changeType === 'down' ? ( + + ) : ( + + )} + ) + + + + {title} + + + + + + + Action + Another action + Something else here... + Disabled action + + + + + + {chartType === 'bar' ? ( + + + + ) : chartType === 'area' ? ( + + + + ) : ( + + + + )} + + + + ) +} + +StatWidget.propTypes = { + color: PropTypes.string, + value: PropTypes.string, + change: PropTypes.string, + changeType: PropTypes.string, + title: PropTypes.string, + chartData: PropTypes.array, + chartType: PropTypes.string, +} + +const WidgetsDropdown = () => { + const usersData = [ + { value: 65 }, + { value: 59 }, + { value: 84 }, + { value: 84 }, + { value: 51 }, + { value: 55 }, + { value: 40 }, + ] + + const incomeData = [ + { value: 1 }, + { value: 18 }, + { value: 9 }, + { value: 17 }, + { value: 34 }, + { value: 22 }, + { value: 11 }, + ] + + const conversionData = [ + { value: 78 }, + { value: 81 }, + { value: 80 }, + { value: 45 }, + { value: 34 }, + { value: 12 }, + { value: 40 }, + ] + + const sessionsData = [ + { value: 78 }, + { value: 81 }, + { value: 80 }, + { value: 45 }, + { value: 34 }, + { value: 12 }, + { value: 40 }, + { value: 85 }, + { value: 65 }, + { value: 23 }, + { value: 12 }, + { value: 98 }, + { value: 34 }, + { value: 84 }, + { value: 67 }, + { value: 82 }, + ] + + return ( + + + - 26K{' '} - - (-12.4% ) - - - } + value="26K" + change="-12.4%" + changeType="down" title="Users" - action={ - - - - - - Action - Another action - Something else here... - Disabled action - - - } - chart={ - - } + chartData={usersData} + chartType="line" /> - - - + + - $6.200{' '} - - (40.9% ) - - - } + value="$6.200" + change="40.9%" + changeType="up" title="Income" - action={ - - - - - - Action - Another action - Something else here... - Disabled action - - - } - chart={ - - } + chartData={incomeData} + chartType="line" /> - - - + + - 2.49%{' '} - - (84.7% ) - - - } + value="2.49%" + change="84.7%" + changeType="up" title="Conversion Rate" - action={ - - - - - - Action - Another action - Something else here... - Disabled action - - - } - chart={ - - } + chartData={conversionData} + chartType="area" /> - - - - 44K{' '} - - (-23.6% ) - - - } + + + - - - - - Action - Another action - Something else here... - Disabled action - - - } - chart={ - - } + chartData={sessionsData} + chartType="bar" /> - - + + ) }