├── .eslintrc.json ├── .gitignore ├── .npmrc ├── .prettierrc.json ├── CHANGELOG.md ├── ISSUE_TEMPLATE.md ├── README.md ├── genezio.yaml ├── jsconfig.json ├── package.json ├── public ├── apple-icon.png ├── favicon.png ├── index.html ├── manifest.json └── robots.txt └── src ├── App.js ├── assets ├── images │ ├── apple-icon.png │ ├── bg-about-us.jpg │ ├── bg-coworking.jpeg │ ├── bg-presentation.jpg │ ├── bg-sign-in-basic.jpeg │ ├── bg2.jpg │ ├── bg3.jpg │ ├── bruce-mars.jpg │ ├── city-profile.jpg │ ├── examples │ │ ├── blog-9-4.jpg │ │ ├── blog2.jpg │ │ ├── testimonial-6-2.jpg │ │ └── testimonial-6-3.jpg │ ├── favicon.png │ ├── illustrations │ │ └── illustration-reset.jpg │ ├── ivana-square.jpg │ ├── ivana-squares.jpg │ ├── logo-ct-dark.png │ ├── logos │ │ └── gray-logos │ │ │ ├── logo-apple.svg │ │ │ ├── logo-coinbase.svg │ │ │ ├── logo-digitalocean.svg │ │ │ ├── logo-facebook.svg │ │ │ ├── logo-nasa.svg │ │ │ ├── logo-netflix.svg │ │ │ ├── logo-pinterest.svg │ │ │ ├── logo-spotify.svg │ │ │ └── logo-vodafone.svg │ ├── macbook.png │ ├── products │ │ ├── product-1-min.jpg │ │ ├── product-2-min.jpg │ │ ├── product-3-min.jpg │ │ ├── product-5-min.jpg │ │ ├── product-6-min.jpg │ │ └── product-7-min.jpg │ ├── rotating-card-bg-back.jpeg │ ├── rotating-card-bg-front.jpeg │ ├── shapes │ │ └── waves-white.svg │ ├── small-logos │ │ └── icon-sun-cloud.png │ ├── team-1.jpg │ ├── team-2.jpg │ ├── team-3.jpg │ ├── team-4.jpg │ └── team-5.jpg └── theme │ ├── base │ ├── borders.js │ ├── boxShadows.js │ ├── breakpoints.js │ ├── colors.js │ ├── globals.js │ └── typography.js │ ├── components │ ├── appBar.js │ ├── avatar.js │ ├── breadcrumbs.js │ ├── button │ │ ├── contained.js │ │ ├── index.js │ │ ├── outlined.js │ │ ├── root.js │ │ └── text.js │ ├── buttonBase.js │ ├── card │ │ ├── cardContent.js │ │ ├── cardMedia.js │ │ └── index.js │ ├── container.js │ ├── dialog │ │ ├── dialogActions.js │ │ ├── dialogContent.js │ │ ├── dialogContentText.js │ │ ├── dialogTitle.js │ │ └── index.js │ ├── divider.js │ ├── flatpickr.js │ ├── form │ │ ├── autocomplete.js │ │ ├── checkbox.js │ │ ├── formControlLabel.js │ │ ├── formLabel.js │ │ ├── input.js │ │ ├── inputLabel.js │ │ ├── inputOutlined.js │ │ ├── radio.js │ │ ├── select.js │ │ ├── switchButton.js │ │ └── textField.js │ ├── icon.js │ ├── iconButton.js │ ├── linearProgress.js │ ├── link.js │ ├── list │ │ ├── index.js │ │ ├── listItem.js │ │ └── listItemText.js │ ├── menu │ │ ├── index.js │ │ └── menuItem.js │ ├── popover.js │ ├── slider.js │ ├── stepper │ │ ├── index.js │ │ ├── step.js │ │ ├── stepConnector.js │ │ ├── stepIcon.js │ │ └── stepLabel.js │ ├── svgIcon.js │ ├── table │ │ ├── tableCell.js │ │ ├── tableContainer.js │ │ └── tableHead.js │ ├── tabs │ │ ├── index.js │ │ └── tab.js │ └── tooltip.js │ ├── functions │ ├── boxShadow.js │ ├── gradientChartLine.js │ ├── hexToRgb.js │ ├── linearGradient.js │ ├── pxToRem.js │ └── rgba.js │ └── index.js ├── components ├── MKAlert │ ├── MKAlertCloseIcon.js │ ├── MKAlertRoot.js │ └── index.js ├── MKAvatar │ ├── MKAvatarRoot.js │ └── index.js ├── MKBadge │ ├── MKBadgeRoot.js │ └── index.js ├── MKBox │ ├── MKBoxRoot.js │ └── index.js ├── MKButton │ ├── MKButtonRoot.js │ └── index.js ├── MKDatePicker │ └── index.js ├── MKInput │ ├── MKInputRoot.js │ └── index.js ├── MKPagination │ ├── MKPaginationItemRoot.js │ └── index.js ├── MKProgress │ ├── MKProgressRoot.js │ └── index.js ├── MKSocialButton │ ├── MKSocialButtonRoot.js │ └── index.js └── MKTypography │ ├── MKTypographyRoot.js │ └── index.js ├── examples ├── Breadcrumbs │ └── index.js ├── Cards │ ├── BlogCards │ │ ├── BackgroundBlogCard │ │ │ └── index.js │ │ ├── CenteredBlogCard │ │ │ └── index.js │ │ └── TransparentBlogCard │ │ │ └── index.js │ ├── CounterCards │ │ └── DefaultCounterCard │ │ │ └── index.js │ ├── InfoCards │ │ ├── DefaultInfoCard │ │ │ └── index.js │ │ └── FilledInfoCard │ │ │ └── index.js │ ├── ReviewCards │ │ └── DefaultReviewCard │ │ │ └── index.js │ ├── RotatingCard │ │ ├── RotatingCardBack.js │ │ ├── RotatingCardFront.js │ │ └── index.js │ └── TeamCards │ │ └── HorizontalTeamCard │ │ └── index.js ├── Footers │ ├── CenteredFooter │ │ └── index.js │ ├── DefaultFooter │ │ └── index.js │ └── SimpleFooter │ │ └── index.js └── Navbars │ └── DefaultNavbar │ ├── DefaultNavbarDropdown.js │ ├── DefaultNavbarMobile.js │ └── index.js ├── footer.routes.js ├── index.js ├── layouts ├── pages │ ├── authentication │ │ └── sign-in │ │ │ └── index.js │ ├── landing-pages │ │ ├── about-us │ │ │ └── index.js │ │ ├── author │ │ │ └── index.js │ │ └── contact-us │ │ │ └── index.js │ └── presentation │ │ └── index.js └── sections │ ├── attention-catchers │ ├── alerts │ │ ├── components │ │ │ └── SimpleAlerts │ │ │ │ ├── code.js │ │ │ │ └── index.js │ │ └── index.js │ ├── modals │ │ ├── components │ │ │ └── SimpleModal │ │ │ │ ├── code.js │ │ │ │ └── index.js │ │ └── index.js │ └── tooltips-popovers │ │ ├── components │ │ ├── Popovers │ │ │ ├── code.js │ │ │ └── index.js │ │ └── Tooltips │ │ │ ├── code.js │ │ │ └── index.js │ │ └── index.js │ ├── components │ ├── BaseLayout │ │ └── index.js │ └── View │ │ └── index.js │ ├── elements │ ├── avatars │ │ ├── components │ │ │ ├── AvatarGroup │ │ │ │ ├── code.js │ │ │ │ └── index.js │ │ │ └── AvatarSize │ │ │ │ ├── code.js │ │ │ │ └── index.js │ │ └── index.js │ ├── badges │ │ ├── components │ │ │ ├── BadgesGradient │ │ │ │ ├── code.js │ │ │ │ └── index.js │ │ │ ├── BadgesSimple │ │ │ │ ├── code.js │ │ │ │ └── index.js │ │ │ └── BadgesSimpleRounded │ │ │ │ ├── code.js │ │ │ │ └── index.js │ │ └── index.js │ ├── breadcrumbs │ │ ├── code.js │ │ └── index.js │ ├── buttons │ │ ├── components │ │ │ ├── ButtonsContained │ │ │ │ ├── code.js │ │ │ │ └── index.js │ │ │ ├── ButtonsGradient │ │ │ │ ├── code.js │ │ │ │ └── index.js │ │ │ ├── ButtonsIconLeft │ │ │ │ ├── code.js │ │ │ │ └── index.js │ │ │ ├── ButtonsIconRight │ │ │ │ ├── code.js │ │ │ │ └── index.js │ │ │ ├── ButtonsOutlined │ │ │ │ ├── code.js │ │ │ │ └── index.js │ │ │ └── ButtonsSizes │ │ │ │ ├── code.js │ │ │ │ └── index.js │ │ └── index.js │ ├── dropdowns │ │ ├── components │ │ │ └── DropdownAndDropup │ │ │ │ ├── code.js │ │ │ │ └── index.js │ │ └── index.js │ ├── progress-bars │ │ ├── components │ │ │ └── ProgressSimple │ │ │ │ ├── code.js │ │ │ │ └── index.js │ │ └── index.js │ ├── toggles │ │ ├── components │ │ │ ├── Toggle │ │ │ │ ├── code.js │ │ │ │ └── index.js │ │ │ └── ToggleContext │ │ │ │ ├── code.js │ │ │ │ └── index.js │ │ └── index.js │ └── typography │ │ ├── components │ │ └── TypographyRoboto │ │ │ ├── code.js │ │ │ └── index.js │ │ └── index.js │ ├── input-areas │ ├── forms │ │ ├── components │ │ │ └── FormSimple │ │ │ │ ├── code.js │ │ │ │ └── index.js │ │ └── index.js │ └── inputs │ │ ├── components │ │ ├── InputDisabled │ │ │ ├── code.js │ │ │ └── index.js │ │ ├── InputDynamic │ │ │ ├── code.js │ │ │ └── index.js │ │ ├── InputError │ │ │ ├── code.js │ │ │ └── index.js │ │ ├── InputIcon │ │ │ ├── code.js │ │ │ └── index.js │ │ ├── InputOutlined │ │ │ ├── code.js │ │ │ └── index.js │ │ ├── InputStatic │ │ │ ├── code.js │ │ │ └── index.js │ │ └── InputSuccess │ │ │ ├── code.js │ │ │ └── index.js │ │ └── index.js │ ├── navigation │ ├── nav-tabs │ │ ├── components │ │ │ └── TabsSimple │ │ │ │ ├── code.js │ │ │ │ └── index.js │ │ └── index.js │ ├── navbars │ │ ├── components │ │ │ └── NavbarDark │ │ │ │ ├── code.js │ │ │ │ └── index.js │ │ └── index.js │ └── pagination │ │ ├── components │ │ └── PaginationSimple │ │ │ ├── code.js │ │ │ └── index.js │ │ └── index.js │ └── page-sections │ ├── featuers │ ├── components │ │ └── FeaturesOne │ │ │ ├── code.js │ │ │ └── index.js │ └── index.js │ └── page-headers │ ├── components │ └── HeaderOne │ │ ├── code.js │ │ └── index.js │ └── index.js ├── pages ├── LandingPages │ ├── AboutUs │ │ ├── index.js │ │ └── sections │ │ │ ├── Featuring.js │ │ │ ├── Information.js │ │ │ ├── Newsletter.js │ │ │ └── Team.js │ ├── Author │ │ ├── index.js │ │ └── sections │ │ │ ├── Contact.js │ │ │ ├── Footer.js │ │ │ ├── Posts.js │ │ │ └── Profile.js │ ├── ContactUs │ │ └── index.js │ └── SignIn │ │ └── index.js └── Presentation │ ├── components │ ├── BuiltByDevelopers │ │ └── index.js │ └── ExampleCard │ │ └── index.js │ ├── index.js │ └── sections │ ├── Counters.js │ ├── DesignBlocks.js │ ├── Download.js │ ├── Information.js │ ├── Pages.js │ ├── Testimonials.js │ └── data │ ├── designBlocksData.js │ └── pagesData.js └── routes.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true 5 | }, 6 | "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"], 7 | "parserOptions": { 8 | "ecmaFeatures": { 9 | "jsx": true 10 | }, 11 | "ecmaVersion": 12, 12 | "sourceType": "module" 13 | }, 14 | "plugins": ["react", "prettier"], 15 | "rules": { 16 | "prettier/prettier": [ 17 | "error", 18 | { 19 | "endOfLine": "auto" 20 | } 21 | ], 22 | "react/react-in-jsx-scope": "off", 23 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], 24 | "react/jsx-props-no-spreading": [ 25 | 1, 26 | { 27 | "custom": "ignore" 28 | } 29 | ], 30 | "react/jsx-curly-spacing": [2, "never"], 31 | "default-param-last": "off", 32 | "react/display-name": "off" 33 | }, 34 | "settings": { "import/resolver": { "node": { "paths": ["src"] } } } 35 | } 36 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | .DS_Store 6 | 7 | # testing 8 | /coverage 9 | 10 | # production 11 | /build 12 | 13 | # misc 14 | .DS_Store 15 | .env.local 16 | .env.development.local 17 | .env.test.local 18 | .env.production.local 19 | 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | 24 | package-lock.json 25 | yarn.lock 26 | 27 | commit.sh 28 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true 2 | auto-install-peers=true 3 | strict-peer-dependencies=false -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "trailingComma": "es5", 4 | "tabWidth": 2, 5 | "semi": true, 6 | "singleQuote": false, 7 | "endOfLine": "auto" 8 | } 9 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /genezio.yaml: -------------------------------------------------------------------------------- 1 | # The name of the project. 2 | name: material-kit-react 3 | # The region where the project is deployed. 4 | region: us-east-1 5 | # The version of the Genezio YAML configuration to parse. 6 | yamlVersion: 2 7 | # Information about the frontend, including the path, language, and publish directory. 8 | # It is optional. It can also be an array if there are multiple frontends you want to deploy. 9 | frontend: 10 | # The folder where the frontend scripts will run. 11 | path: ./ 12 | # The directory that will be published to the CDN. It is relative to the path. 13 | publish: ./build 14 | scripts: 15 | # List of scripts that build your frontend before deployment. It should populate the specified `publish` directory. 16 | build: npm run build 17 | # List of scripts to run before deploying the frontend. 18 | deploy: npm install 19 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src", 4 | "paths": { 5 | "*": ["src/*"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /public/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/public/apple-icon.png -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/public/favicon.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | Material Kit 2 React by Creative Tim 26 | 30 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Material Kit", 3 | "name": "Material Kit 2 React", 4 | "icons": [ 5 | { 6 | "src": "favicon.png", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#1A73E8", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | import { useEffect } from "react"; 17 | 18 | // react-router components 19 | import { Routes, Route, Navigate, useLocation } from "react-router-dom"; 20 | 21 | // @mui material components 22 | import { ThemeProvider } from "@mui/material/styles"; 23 | import CssBaseline from "@mui/material/CssBaseline"; 24 | 25 | // Material Kit 2 React themes 26 | import theme from "assets/theme"; 27 | import Presentation from "layouts/pages/presentation"; 28 | 29 | // Material Kit 2 React routes 30 | import routes from "routes"; 31 | 32 | export default function App() { 33 | const { pathname } = useLocation(); 34 | 35 | // Setting page scroll to 0 when changing the route 36 | useEffect(() => { 37 | document.documentElement.scrollTop = 0; 38 | document.scrollingElement.scrollTop = 0; 39 | }, [pathname]); 40 | 41 | const getRoutes = (allRoutes) => 42 | allRoutes.map((route) => { 43 | if (route.collapse) { 44 | return getRoutes(route.collapse); 45 | } 46 | 47 | if (route.route) { 48 | return ; 49 | } 50 | 51 | return null; 52 | }); 53 | 54 | return ( 55 | 56 | 57 | 58 | {getRoutes(routes)} 59 | } /> 60 | } /> 61 | 62 | 63 | ); 64 | } 65 | -------------------------------------------------------------------------------- /src/assets/images/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/apple-icon.png -------------------------------------------------------------------------------- /src/assets/images/bg-about-us.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/bg-about-us.jpg -------------------------------------------------------------------------------- /src/assets/images/bg-coworking.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/bg-coworking.jpeg -------------------------------------------------------------------------------- /src/assets/images/bg-presentation.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/bg-presentation.jpg -------------------------------------------------------------------------------- /src/assets/images/bg-sign-in-basic.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/bg-sign-in-basic.jpeg -------------------------------------------------------------------------------- /src/assets/images/bg2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/bg2.jpg -------------------------------------------------------------------------------- /src/assets/images/bg3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/bg3.jpg -------------------------------------------------------------------------------- /src/assets/images/bruce-mars.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/bruce-mars.jpg -------------------------------------------------------------------------------- /src/assets/images/city-profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/city-profile.jpg -------------------------------------------------------------------------------- /src/assets/images/examples/blog-9-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/examples/blog-9-4.jpg -------------------------------------------------------------------------------- /src/assets/images/examples/blog2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/examples/blog2.jpg -------------------------------------------------------------------------------- /src/assets/images/examples/testimonial-6-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/examples/testimonial-6-2.jpg -------------------------------------------------------------------------------- /src/assets/images/examples/testimonial-6-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/examples/testimonial-6-3.jpg -------------------------------------------------------------------------------- /src/assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/favicon.png -------------------------------------------------------------------------------- /src/assets/images/illustrations/illustration-reset.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/illustrations/illustration-reset.jpg -------------------------------------------------------------------------------- /src/assets/images/ivana-square.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/ivana-square.jpg -------------------------------------------------------------------------------- /src/assets/images/ivana-squares.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/ivana-squares.jpg -------------------------------------------------------------------------------- /src/assets/images/logo-ct-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/logo-ct-dark.png -------------------------------------------------------------------------------- /src/assets/images/macbook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/macbook.png -------------------------------------------------------------------------------- /src/assets/images/products/product-1-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/products/product-1-min.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-2-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/products/product-2-min.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-3-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/products/product-3-min.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-5-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/products/product-5-min.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-6-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/products/product-6-min.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-7-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/products/product-7-min.jpg -------------------------------------------------------------------------------- /src/assets/images/rotating-card-bg-back.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/rotating-card-bg-back.jpeg -------------------------------------------------------------------------------- /src/assets/images/rotating-card-bg-front.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/rotating-card-bg-front.jpeg -------------------------------------------------------------------------------- /src/assets/images/small-logos/icon-sun-cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/small-logos/icon-sun-cloud.png -------------------------------------------------------------------------------- /src/assets/images/team-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/team-1.jpg -------------------------------------------------------------------------------- /src/assets/images/team-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/team-2.jpg -------------------------------------------------------------------------------- /src/assets/images/team-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/team-3.jpg -------------------------------------------------------------------------------- /src/assets/images/team-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/team-4.jpg -------------------------------------------------------------------------------- /src/assets/images/team-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/material-kit-react/4bdea343f6d6d01c5b823b696679ff01d72f3e5b/src/assets/images/team-5.jpg -------------------------------------------------------------------------------- /src/assets/theme/base/borders.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | /** 17 | * The base border styles for the Material Kit 2 React. 18 | * You can add new border width, border color or border radius using this file. 19 | * You can customized the borders value for the entire Material Kit 2 React using thie file. 20 | */ 21 | 22 | // Material Kit 2 React Base Styles 23 | import colors from "assets/theme/base/colors"; 24 | 25 | // Material Kit 2 React Helper Functions 26 | import pxToRem from "assets/theme/functions/pxToRem"; 27 | 28 | const { grey } = colors; 29 | 30 | export default { 31 | borderColor: grey[300], 32 | 33 | borderWidth: { 34 | 0: 0, 35 | 1: pxToRem(1), 36 | 2: pxToRem(2), 37 | 3: pxToRem(3), 38 | 4: pxToRem(4), 39 | 5: pxToRem(5), 40 | }, 41 | 42 | borderRadius: { 43 | xs: pxToRem(1.6), 44 | sm: pxToRem(2), 45 | md: pxToRem(6), 46 | lg: pxToRem(8), 47 | xl: pxToRem(12), 48 | xxl: pxToRem(16), 49 | section: pxToRem(160), 50 | }, 51 | }; 52 | -------------------------------------------------------------------------------- /src/assets/theme/base/breakpoints.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | /** 17 | * The base breakpoints for the Material Kit 2 React. 18 | * You can add new breakpoints using this file. 19 | * You can customized the breakpoints for the entire Material Kit 2 React using thie file. 20 | */ 21 | 22 | export default { 23 | values: { 24 | xs: 0, 25 | sm: 576, 26 | md: 768, 27 | lg: 992, 28 | xl: 1200, 29 | xxl: 1400, 30 | }, 31 | }; 32 | -------------------------------------------------------------------------------- /src/assets/theme/base/globals.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | 19 | const { info, dark } = colors; 20 | 21 | export default { 22 | html: { 23 | scrollBehavior: "smooth", 24 | }, 25 | "*, *::before, *::after": { 26 | margin: 0, 27 | padding: 0, 28 | }, 29 | "a, a:link, a:visited": { 30 | textDecoration: "none !important", 31 | }, 32 | "a.link, .link, a.link:link, .link:link, a.link:visited, .link:visited": { 33 | color: `${dark.main} !important`, 34 | transition: "color 150ms ease-in !important", 35 | }, 36 | "a.link:hover, .link:hover, a.link:focus, .link:focus": { 37 | color: `${info.main} !important`, 38 | }, 39 | }; 40 | -------------------------------------------------------------------------------- /src/assets/theme/components/appBar.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | export default { 17 | defaultProps: { 18 | color: "transparent", 19 | }, 20 | 21 | styleOverrides: { 22 | root: { 23 | boxShadow: "none", 24 | }, 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /src/assets/theme/components/avatar.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import borders from "assets/theme/base/borders"; 18 | 19 | const { borderRadius } = borders; 20 | 21 | export default { 22 | styleOverrides: { 23 | root: { 24 | transition: "all 200ms ease-in-out", 25 | }, 26 | 27 | rounded: { 28 | borderRadius: borderRadius.lg, 29 | }, 30 | 31 | img: { 32 | height: "auto", 33 | }, 34 | }, 35 | }; 36 | -------------------------------------------------------------------------------- /src/assets/theme/components/breadcrumbs.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | import typography from "assets/theme/base/typography"; 19 | 20 | const { grey } = colors; 21 | const { size } = typography; 22 | 23 | export default { 24 | styleOverrides: { 25 | li: { 26 | lineHeight: 0, 27 | }, 28 | 29 | separator: { 30 | fontSize: size.sm, 31 | color: grey[600], 32 | }, 33 | }, 34 | }; 35 | -------------------------------------------------------------------------------- /src/assets/theme/components/button/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React Button Styles 17 | import root from "assets/theme/components/button/root"; 18 | import contained from "assets/theme/components/button/contained"; 19 | import outlined from "assets/theme/components/button/outlined"; 20 | import text from "assets/theme/components/button/text"; 21 | 22 | export default { 23 | defaultProps: { 24 | disableRipple: false, 25 | }, 26 | styleOverrides: { 27 | root: { ...root }, 28 | contained: { ...contained.base }, 29 | containedSizeSmall: { ...contained.small }, 30 | containedSizeLarge: { ...contained.large }, 31 | containedPrimary: { ...contained.primary }, 32 | containedSecondary: { ...contained.secondary }, 33 | outlined: { ...outlined.base }, 34 | outlinedSizeSmall: { ...outlined.small }, 35 | outlinedSizeLarge: { ...outlined.large }, 36 | outlinedPrimary: { ...outlined.primary }, 37 | outlinedSecondary: { ...outlined.secondary }, 38 | text: { ...text.base }, 39 | textSizeSmall: { ...text.small }, 40 | textSizeLarge: { ...text.large }, 41 | textPrimary: { ...text.primary }, 42 | textSecondary: { ...text.secondary }, 43 | }, 44 | }; 45 | -------------------------------------------------------------------------------- /src/assets/theme/components/button/root.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React Base Styles 17 | import typography from "assets/theme/base/typography"; 18 | import borders from "assets/theme/base/borders"; 19 | 20 | // Material Kit 2 React Helper Functions 21 | import pxToRem from "assets/theme/functions/pxToRem"; 22 | 23 | const { fontWeightBold, size } = typography; 24 | const { borderRadius } = borders; 25 | 26 | export default { 27 | display: "inline-flex", 28 | justifyContent: "center", 29 | alignItems: "center", 30 | fontSize: size.xs, 31 | fontWeight: fontWeightBold, 32 | borderRadius: borderRadius.lg, 33 | padding: `${pxToRem(6.302)} ${pxToRem(16.604)}`, 34 | lineHeight: 1.4, 35 | textAlign: "center", 36 | textTransform: "uppercase", 37 | userSelect: "none", 38 | backgroundSize: "150% !important", 39 | backgroundPositionX: "25% !important", 40 | transition: "all 150ms ease-in", 41 | 42 | "&:disabled": { 43 | pointerEvent: "none", 44 | opacity: 0.65, 45 | }, 46 | 47 | "& .material-icons": { 48 | fontSize: pxToRem(15), 49 | marginTop: pxToRem(-2), 50 | }, 51 | }; 52 | -------------------------------------------------------------------------------- /src/assets/theme/components/buttonBase.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | export default { 17 | defaultProps: { 18 | disableRipple: false, 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /src/assets/theme/components/card/cardContent.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React Helper Functions 17 | import pxToRem from "assets/theme/functions/pxToRem"; 18 | 19 | export default { 20 | styleOverrides: { 21 | root: { 22 | marginTop: 0, 23 | marginBottom: 0, 24 | padding: `${pxToRem(8)} ${pxToRem(24)} ${pxToRem(24)}`, 25 | }, 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /src/assets/theme/components/card/cardMedia.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React Base Styles 17 | import borders from "assets/theme/base/borders"; 18 | 19 | // Material Kit 2 React Helper Functions 20 | import pxToRem from "assets/theme/functions/pxToRem"; 21 | 22 | const { borderRadius } = borders; 23 | 24 | export default { 25 | styleOverrides: { 26 | root: { 27 | borderRadius: borderRadius.xl, 28 | margin: `${pxToRem(16)} ${pxToRem(16)} 0`, 29 | }, 30 | 31 | media: { 32 | width: "auto", 33 | }, 34 | }, 35 | }; 36 | -------------------------------------------------------------------------------- /src/assets/theme/components/card/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | import borders from "assets/theme/base/borders"; 19 | import boxShadows from "assets/theme/base/boxShadows"; 20 | 21 | // Material Kit 2 React Helper Function 22 | import rgba from "assets/theme/functions/rgba"; 23 | 24 | const { black, white } = colors; 25 | const { borderWidth, borderRadius } = borders; 26 | const { md } = boxShadows; 27 | 28 | export default { 29 | styleOverrides: { 30 | root: { 31 | display: "flex", 32 | flexDirection: "column", 33 | position: "relative", 34 | minWidth: 0, 35 | wordWrap: "break-word", 36 | backgroundColor: white.main, 37 | backgroundClip: "border-box", 38 | border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`, 39 | borderRadius: borderRadius.xl, 40 | boxShadow: md, 41 | overflow: "visible", 42 | }, 43 | }, 44 | }; 45 | -------------------------------------------------------------------------------- /src/assets/theme/components/container.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import breakpoints from "assets/theme/base/breakpoints"; 18 | 19 | // Material Kit 2 React helper functions 20 | import pxToRem from "assets/theme/functions/pxToRem"; 21 | 22 | const { 23 | values: { sm, md, lg, xl, xxl }, 24 | } = breakpoints; 25 | 26 | const SM = `@media (min-width: ${sm}px)`; 27 | const MD = `@media (min-width: ${md}px)`; 28 | const LG = `@media (min-width: ${lg}px)`; 29 | const XL = `@media (min-width: ${xl}px)`; 30 | const XXL = `@media (min-width: ${xxl}px)`; 31 | 32 | const sharedClasses = { 33 | paddingRight: `${pxToRem(24)} !important`, 34 | paddingLeft: `${pxToRem(24)} !important`, 35 | marginRight: "auto !important", 36 | marginLeft: "auto !important", 37 | width: "100% !important", 38 | position: "relative", 39 | }; 40 | 41 | export default { 42 | [SM]: { 43 | ".MuiContainer-root": { 44 | ...sharedClasses, 45 | maxWidth: "540px !important", 46 | }, 47 | }, 48 | [MD]: { 49 | ".MuiContainer-root": { 50 | ...sharedClasses, 51 | maxWidth: "720px !important", 52 | }, 53 | }, 54 | [LG]: { 55 | ".MuiContainer-root": { 56 | ...sharedClasses, 57 | maxWidth: "960px !important", 58 | }, 59 | }, 60 | [XL]: { 61 | ".MuiContainer-root": { 62 | ...sharedClasses, 63 | maxWidth: "1140px !important", 64 | }, 65 | }, 66 | [XXL]: { 67 | ".MuiContainer-root": { 68 | ...sharedClasses, 69 | maxWidth: "1320px !important", 70 | }, 71 | }, 72 | }; 73 | -------------------------------------------------------------------------------- /src/assets/theme/components/dialog/dialogActions.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React helper functions 17 | import pxToRem from "assets/theme/functions/pxToRem"; 18 | 19 | export default { 20 | styleOverrides: { 21 | root: { 22 | padding: pxToRem(16), 23 | }, 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /src/assets/theme/components/dialog/dialogContent.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import typography from "assets/theme/base/typography"; 18 | import borders from "assets/theme/base/borders"; 19 | import colors from "assets/theme/base/colors"; 20 | 21 | // Material Kit 2 React helper functions 22 | import pxToRem from "assets/theme/functions/pxToRem"; 23 | 24 | const { size } = typography; 25 | const { text } = colors; 26 | const { borderWidth, borderColor } = borders; 27 | 28 | export default { 29 | styleOverrides: { 30 | root: { 31 | padding: pxToRem(16), 32 | fontSize: size.md, 33 | color: text.main, 34 | }, 35 | 36 | dividers: { 37 | borderTop: `${borderWidth[1]} solid ${borderColor}`, 38 | borderBottom: `${borderWidth[1]} solid ${borderColor}`, 39 | }, 40 | }, 41 | }; 42 | -------------------------------------------------------------------------------- /src/assets/theme/components/dialog/dialogContentText.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import typography from "assets/theme/base/typography"; 18 | import colors from "assets/theme/base/colors"; 19 | 20 | // Material Kit 2 React helper functions 21 | // import pxToRem from "assets/theme/functions/pxToRem"; 22 | 23 | const { size } = typography; 24 | const { text } = colors; 25 | 26 | export default { 27 | styleOverrides: { 28 | root: { 29 | fontSize: size.md, 30 | color: text.main, 31 | }, 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /src/assets/theme/components/dialog/dialogTitle.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import typography from "assets/theme/base/typography"; 18 | 19 | // Material Kit 2 React helper functions 20 | import pxToRem from "assets/theme/functions/pxToRem"; 21 | 22 | const { size } = typography; 23 | 24 | export default { 25 | styleOverrides: { 26 | root: { 27 | padding: pxToRem(16), 28 | fontSize: size.xl, 29 | }, 30 | }, 31 | }; 32 | -------------------------------------------------------------------------------- /src/assets/theme/components/dialog/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import borders from "assets/theme/base/borders"; 18 | import boxShadows from "assets/theme/base/boxShadows"; 19 | 20 | const { borderRadius } = borders; 21 | const { xxl } = boxShadows; 22 | 23 | export default { 24 | styleOverrides: { 25 | paper: { 26 | borderRadius: borderRadius.lg, 27 | boxShadow: xxl, 28 | }, 29 | 30 | paperFullScreen: { 31 | borderRadius: 0, 32 | }, 33 | }, 34 | }; 35 | -------------------------------------------------------------------------------- /src/assets/theme/components/divider.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | 19 | // Material Kit 2 React helper functions 20 | import rgba from "assets/theme/functions/rgba"; 21 | import pxToRem from "assets/theme/functions/pxToRem"; 22 | 23 | const { dark, white } = colors; 24 | 25 | export default { 26 | styleOverrides: { 27 | root: { 28 | background: rgba(dark.main, 0.2), 29 | height: pxToRem(1), 30 | margin: `${pxToRem(16)} 0`, 31 | borderBottom: "none", 32 | opacity: 0.25, 33 | }, 34 | 35 | vertical: { 36 | background: rgba(dark.main, 0.2), 37 | width: pxToRem(1), 38 | height: "100%", 39 | margin: `0 ${pxToRem(16)}`, 40 | borderRight: "none", 41 | }, 42 | 43 | light: { 44 | background: rgba(white.main, 0.2), 45 | 46 | "&.MuiDivider-vertical": { 47 | background: rgba(white.main, 0.2), 48 | }, 49 | }, 50 | }, 51 | }; 52 | -------------------------------------------------------------------------------- /src/assets/theme/components/flatpickr.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | 19 | // Material Kit 2 React helper functions 20 | import rgba from "assets/theme/functions/rgba"; 21 | 22 | const { info, white, gradients } = colors; 23 | 24 | export default { 25 | ".flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.nextMonthDay:hover, .flatpickr-day.nextMonthDay:focus": 26 | { 27 | background: rgba(info.main, 0.28), 28 | border: "none", 29 | }, 30 | 31 | ".flatpickr-day.today": { 32 | background: info.main, 33 | color: white.main, 34 | border: "none", 35 | 36 | "&:hover, &:focus": { 37 | background: `${info.focus} !important`, 38 | }, 39 | }, 40 | 41 | ".flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.nextMonthDay.selected, .flatpickr-day.nextMonthDay.selected:hover, .flatpickr-day.nextMonthDay.selected:focus": 42 | { 43 | background: `${gradients.info.state} !important`, 44 | color: white.main, 45 | border: "none", 46 | }, 47 | 48 | ".flatpickr-months .flatpickr-next-month:hover svg, .flatpickr-months .flatpickr-prev-month:hover svg": 49 | { 50 | color: `${info.main} !important`, 51 | fill: `${info.main} !important`, 52 | }, 53 | }; 54 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/formControlLabel.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | import typography from "assets/theme/base/typography"; 19 | 20 | // Material Kit 2 React helper functions 21 | import pxToRem from "assets/theme/functions/pxToRem"; 22 | 23 | const { dark } = colors; 24 | const { size, fontWeightBold } = typography; 25 | 26 | export default { 27 | styleOverrides: { 28 | root: { 29 | display: "block", 30 | minHeight: pxToRem(24), 31 | marginBottom: pxToRem(2), 32 | }, 33 | 34 | label: { 35 | display: "inline-block", 36 | fontSize: size.sm, 37 | fontWeight: fontWeightBold, 38 | color: dark.main, 39 | lineHeight: 1, 40 | transform: `translateY(${pxToRem(1)})`, 41 | marginLeft: pxToRem(4), 42 | 43 | "&.Mui-disabled": { 44 | color: dark.main, 45 | }, 46 | }, 47 | }, 48 | }; 49 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/formLabel.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | 19 | const { text } = colors; 20 | 21 | export default { 22 | styleOverrides: { 23 | root: { 24 | color: text.main, 25 | }, 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/input.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | import typography from "assets/theme/base/typography"; 19 | import borders from "assets/theme/base/borders"; 20 | 21 | const { info, inputBorderColor, dark } = colors; 22 | const { size } = typography; 23 | const { borderWidth } = borders; 24 | 25 | export default { 26 | styleOverrides: { 27 | root: { 28 | fontSize: size.sm, 29 | color: dark.main, 30 | 31 | "&:hover:not(.Mui-disabled):before": { 32 | borderBottom: `${borderWidth[1]} solid ${inputBorderColor}`, 33 | }, 34 | 35 | "&:before": { 36 | borderColor: inputBorderColor, 37 | }, 38 | 39 | "&:after": { 40 | borderColor: info.main, 41 | }, 42 | }, 43 | }, 44 | }; 45 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/inputLabel.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | import typography from "assets/theme/base/typography"; 19 | 20 | const { text, info } = colors; 21 | const { size } = typography; 22 | 23 | export default { 24 | styleOverrides: { 25 | root: { 26 | fontSize: size.sm, 27 | color: text.main, 28 | lineHeight: 0.9, 29 | 30 | "&.Mui-focused": { 31 | color: info.main, 32 | }, 33 | 34 | "&.MuiInputLabel-shrink": { 35 | lineHeight: 1.5, 36 | fontSize: size.md, 37 | 38 | "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { 39 | fontSize: "0.85em", 40 | }, 41 | }, 42 | }, 43 | 44 | sizeSmall: { 45 | fontSize: size.xs, 46 | lineHeight: 1.625, 47 | 48 | "&.MuiInputLabel-shrink": { 49 | lineHeight: 1.6, 50 | fontSize: size.sm, 51 | 52 | "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { 53 | fontSize: "0.72em", 54 | }, 55 | }, 56 | }, 57 | }, 58 | }; 59 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/inputOutlined.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | import borders from "assets/theme/base/borders"; 19 | import typography from "assets/theme/base/typography"; 20 | 21 | // Material Kit 2 React helper functions 22 | import pxToRem from "assets/theme/functions/pxToRem"; 23 | 24 | const { inputBorderColor, info, grey, transparent } = colors; 25 | const { borderRadius } = borders; 26 | const { size } = typography; 27 | 28 | export default { 29 | styleOverrides: { 30 | root: { 31 | backgroundColor: transparent.main, 32 | fontSize: size.sm, 33 | borderRadius: borderRadius.md, 34 | 35 | "&:hover .MuiOutlinedInput-notchedOutline": { 36 | borderColor: inputBorderColor, 37 | }, 38 | 39 | "&.Mui-focused": { 40 | "& .MuiOutlinedInput-notchedOutline": { 41 | borderColor: info.main, 42 | }, 43 | }, 44 | }, 45 | 46 | notchedOutline: { 47 | borderColor: inputBorderColor, 48 | }, 49 | 50 | input: { 51 | color: grey[700], 52 | padding: pxToRem(12), 53 | backgroundColor: transparent.main, 54 | }, 55 | 56 | inputSizeSmall: { 57 | fontSize: size.xs, 58 | padding: pxToRem(10), 59 | }, 60 | 61 | multiline: { 62 | color: grey[700], 63 | padding: 0, 64 | }, 65 | }, 66 | }; 67 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/select.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | 19 | // Material Kit 2 React helper functions 20 | import pxToRem from "assets/theme/functions/pxToRem"; 21 | 22 | const { transparent } = colors; 23 | 24 | export default { 25 | styleOverrides: { 26 | select: { 27 | display: "grid", 28 | alignItems: "center", 29 | padding: `0 ${pxToRem(12)} !important`, 30 | 31 | "& .Mui-selected": { 32 | backgroundColor: transparent.main, 33 | }, 34 | }, 35 | 36 | selectMenu: { 37 | background: "none", 38 | height: "none", 39 | minHeight: "none", 40 | overflow: "unset", 41 | }, 42 | 43 | icon: { 44 | display: "none", 45 | }, 46 | }, 47 | }; 48 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/textField.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | 19 | const { transparent } = colors; 20 | 21 | export default { 22 | styleOverrides: { 23 | root: { 24 | backgroundColor: transparent.main, 25 | }, 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /src/assets/theme/components/icon.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React helper functions 17 | import pxToRem from "assets/theme/functions/pxToRem"; 18 | 19 | export default { 20 | defaultProps: { 21 | baseClassName: "material-icons-round", 22 | fontSize: "inherit", 23 | }, 24 | 25 | styleOverrides: { 26 | fontSizeInherit: { 27 | fontSize: "inherit !important", 28 | }, 29 | 30 | fontSizeSmall: { 31 | fontSize: `${pxToRem(20)} !important`, 32 | }, 33 | 34 | fontSizeLarge: { 35 | fontSize: `${pxToRem(36)} !important`, 36 | }, 37 | }, 38 | }; 39 | -------------------------------------------------------------------------------- /src/assets/theme/components/iconButton.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | 19 | const { transparent } = colors; 20 | 21 | export default { 22 | styleOverrides: { 23 | root: { 24 | "&:hover": { 25 | backgroundColor: transparent.main, 26 | }, 27 | }, 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /src/assets/theme/components/linearProgress.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import borders from "assets/theme/base/borders"; 18 | import colors from "assets/theme/base/colors"; 19 | 20 | // Material Kit 2 React helper functions 21 | import pxToRem from "assets/theme/functions/pxToRem"; 22 | 23 | const { borderRadius } = borders; 24 | const { light } = colors; 25 | 26 | export default { 27 | styleOverrides: { 28 | root: { 29 | height: pxToRem(6), 30 | borderRadius: borderRadius.md, 31 | overflow: "visible", 32 | position: "relative", 33 | }, 34 | 35 | colorPrimary: { 36 | backgroundColor: light.main, 37 | }, 38 | 39 | colorSecondary: { 40 | backgroundColor: light.main, 41 | }, 42 | 43 | bar: { 44 | height: pxToRem(6), 45 | borderRadius: borderRadius.sm, 46 | position: "absolute", 47 | transform: `translate(0, 0) !important`, 48 | transition: "width 0.6s ease !important", 49 | }, 50 | }, 51 | }; 52 | -------------------------------------------------------------------------------- /src/assets/theme/components/link.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | export default { 17 | defaultProps: { 18 | underline: "none", 19 | color: "inherit", 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /src/assets/theme/components/list/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | export default { 17 | styleOverrides: { 18 | padding: { 19 | paddingTop: 0, 20 | paddingBottom: 0, 21 | }, 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /src/assets/theme/components/list/listItem.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | export default { 17 | defaultProps: { 18 | disableGutters: true, 19 | }, 20 | 21 | styleOverrides: { 22 | root: { 23 | paddingTop: 0, 24 | paddingBottom: 0, 25 | }, 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /src/assets/theme/components/list/listItemText.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | export default { 17 | styleOverrides: { 18 | root: { 19 | marginTop: 0, 20 | marginBottom: 0, 21 | }, 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /src/assets/theme/components/menu/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import boxShadows from "assets/theme/base/boxShadows"; 18 | import typography from "assets/theme/base/typography"; 19 | import colors from "assets/theme/base/colors"; 20 | import borders from "assets/theme/base/borders"; 21 | 22 | // Material Kit 2 React helper functions 23 | import pxToRem from "assets/theme/functions/pxToRem"; 24 | 25 | const { lg } = boxShadows; 26 | const { size } = typography; 27 | const { text, white } = colors; 28 | const { borderRadius } = borders; 29 | 30 | export default { 31 | defaultProps: { 32 | disableAutoFocusItem: true, 33 | }, 34 | 35 | styleOverrides: { 36 | paper: { 37 | minWidth: pxToRem(160), 38 | boxShadow: lg, 39 | padding: `${pxToRem(16)} ${pxToRem(8)}`, 40 | fontSize: size.sm, 41 | color: text.main, 42 | textAlign: "left", 43 | backgroundColor: `${white.main} !important`, 44 | borderRadius: borderRadius.md, 45 | }, 46 | }, 47 | }; 48 | -------------------------------------------------------------------------------- /src/assets/theme/components/menu/menuItem.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | import borders from "assets/theme/base/borders"; 19 | import typography from "assets/theme/base/typography"; 20 | 21 | // Material Kit 2 React helper functions 22 | import pxToRem from "assets/theme/functions/pxToRem"; 23 | 24 | const { light, text, dark } = colors; 25 | const { borderRadius } = borders; 26 | const { size } = typography; 27 | 28 | export default { 29 | styleOverrides: { 30 | root: { 31 | minWidth: pxToRem(160), 32 | minHeight: "unset", 33 | padding: `${pxToRem(4.8)} ${pxToRem(16)}`, 34 | borderRadius: borderRadius.md, 35 | fontSize: size.sm, 36 | color: text.main, 37 | transition: "background-color 300ms ease, color 300ms ease", 38 | 39 | "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { 40 | backgroundColor: light.main, 41 | color: dark.main, 42 | }, 43 | }, 44 | }, 45 | }; 46 | -------------------------------------------------------------------------------- /src/assets/theme/components/popover.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | import boxShadows from "assets/theme/base/boxShadows"; 19 | import borders from "assets/theme/base/borders"; 20 | 21 | const { transparent } = colors; 22 | const { lg } = boxShadows; 23 | const { borderRadius } = borders; 24 | 25 | export default { 26 | styleOverrides: { 27 | paper: { 28 | backgroundColor: transparent.main, 29 | boxShadow: lg, 30 | borderRadius: borderRadius.md, 31 | }, 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | import borders from "assets/theme/base/borders"; 19 | import boxShadows from "assets/theme/base/boxShadows"; 20 | 21 | // Material Kit 2 React helper functions 22 | import pxToRem from "assets/theme/functions/pxToRem"; 23 | import linearGradient from "assets/theme/functions/linearGradient"; 24 | 25 | const { transparent, gradients } = colors; 26 | const { borderRadius } = borders; 27 | const { colored } = boxShadows; 28 | 29 | export default { 30 | styleOverrides: { 31 | root: { 32 | background: linearGradient(gradients.info.main, gradients.info.state), 33 | padding: `${pxToRem(24)} 0 ${pxToRem(16)}`, 34 | borderRadius: borderRadius.lg, 35 | boxShadow: colored.info, 36 | 37 | "&.MuiPaper-root": { 38 | backgroundColor: transparent.main, 39 | }, 40 | }, 41 | }, 42 | }; 43 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/step.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React helper functions 17 | import pxToRem from "assets/theme/functions/pxToRem"; 18 | 19 | export default { 20 | styleOverrides: { 21 | root: { 22 | padding: `0 ${pxToRem(6)}`, 23 | }, 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/stepConnector.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import borders from "assets/theme/base/borders"; 18 | import colors from "assets/theme/base/colors"; 19 | 20 | const { white } = colors; 21 | const { borderWidth } = borders; 22 | 23 | export default { 24 | styleOverrides: { 25 | root: { 26 | color: "#9fc9ff", 27 | transition: "all 200ms linear", 28 | 29 | "&.Mui-active": { 30 | color: white.main, 31 | }, 32 | 33 | "&.Mui-completed": { 34 | color: white.main, 35 | }, 36 | }, 37 | 38 | alternativeLabel: { 39 | top: "14%", 40 | left: "-50%", 41 | right: "50%", 42 | }, 43 | 44 | line: { 45 | borderWidth: `${borderWidth[2]} !important`, 46 | borderColor: "currentColor", 47 | opacity: 0.5, 48 | }, 49 | }, 50 | }; 51 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/stepIcon.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | 19 | // Material Kit 2 React helper functions 20 | import pxToRem from "assets/theme/functions/pxToRem"; 21 | import boxShadow from "assets/theme/functions/boxShadow"; 22 | 23 | const { white } = colors; 24 | 25 | export default { 26 | styleOverrides: { 27 | root: { 28 | background: "#9fc9ff", 29 | fill: "#9fc9ff", 30 | stroke: "#9fc9ff", 31 | strokeWidth: pxToRem(10), 32 | width: pxToRem(13), 33 | height: pxToRem(13), 34 | borderRadius: "50%", 35 | zIndex: 99, 36 | transition: "all 200ms linear", 37 | 38 | "&.Mui-active": { 39 | background: white.main, 40 | fill: white.main, 41 | stroke: white.main, 42 | borderColor: white.main, 43 | boxShadow: boxShadow([0, 0], [0, 2], white.main, 1), 44 | }, 45 | 46 | "&.Mui-completed": { 47 | background: white.main, 48 | fill: white.main, 49 | stroke: white.main, 50 | borderColor: white.main, 51 | boxShadow: boxShadow([0, 0], [0, 2], white.main, 1), 52 | }, 53 | }, 54 | }, 55 | }; 56 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/stepLabel.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import typography from "assets/theme/base/typography"; 18 | import colors from "assets/theme/base/colors"; 19 | 20 | // Material Kit 2 React helper functions 21 | import pxToRem from "assets/theme/functions/pxToRem"; 22 | import rgba from "assets/theme/functions/rgba"; 23 | 24 | const { size, fontWeightRegular } = typography; 25 | const { white } = colors; 26 | 27 | export default { 28 | styleOverrides: { 29 | label: { 30 | marginTop: `${pxToRem(8)} !important`, 31 | fontWeight: fontWeightRegular, 32 | fontSize: size.xs, 33 | color: "#9fc9ff", 34 | textTransform: "uppercase", 35 | 36 | "&.Mui-active": { 37 | fontWeight: `${fontWeightRegular} !important`, 38 | color: `${rgba(white.main, 0.8)} !important`, 39 | }, 40 | 41 | "&.Mui-completed": { 42 | fontWeight: `${fontWeightRegular} !important`, 43 | color: `${rgba(white.main, 0.8)} !important`, 44 | }, 45 | }, 46 | }, 47 | }; 48 | -------------------------------------------------------------------------------- /src/assets/theme/components/svgIcon.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React helper functions 17 | import pxToRem from "assets/theme/functions/pxToRem"; 18 | 19 | export default { 20 | defaultProps: { 21 | fontSize: "inherit", 22 | }, 23 | 24 | styleOverrides: { 25 | fontSizeInherit: { 26 | fontSize: "inherit !important", 27 | }, 28 | 29 | fontSizeSmall: { 30 | fontSize: `${pxToRem(20)} !important`, 31 | }, 32 | 33 | fontSizeLarge: { 34 | fontSize: `${pxToRem(36)} !important`, 35 | }, 36 | }, 37 | }; 38 | -------------------------------------------------------------------------------- /src/assets/theme/components/table/tableCell.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import borders from "assets/theme/base/borders"; 18 | import colors from "assets/theme/base/colors"; 19 | 20 | // Material Kit 2 React helper functions 21 | import pxToRem from "assets/theme/functions/pxToRem"; 22 | 23 | const { borderWidth } = borders; 24 | const { light } = colors; 25 | 26 | export default { 27 | styleOverrides: { 28 | root: { 29 | padding: `${pxToRem(12)} ${pxToRem(16)}`, 30 | borderBottom: `${borderWidth[1]} solid ${light.main}`, 31 | }, 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /src/assets/theme/components/table/tableContainer.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | import boxShadows from "assets/theme/base/boxShadows"; 19 | import borders from "assets/theme/base/borders"; 20 | 21 | const { white } = colors; 22 | const { md } = boxShadows; 23 | const { borderRadius } = borders; 24 | 25 | export default { 26 | styleOverrides: { 27 | root: { 28 | backgroundColor: white.main, 29 | boxShadow: md, 30 | borderRadius: borderRadius.xl, 31 | }, 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /src/assets/theme/components/table/tableHead.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import borders from "assets/theme/base/borders"; 18 | 19 | // Material Kit 2 React helper functions 20 | import pxToRem from "assets/theme/functions/pxToRem"; 21 | 22 | const { borderRadius } = borders; 23 | 24 | export default { 25 | styleOverrides: { 26 | root: { 27 | display: "block", 28 | padding: `${pxToRem(16)} ${pxToRem(16)} 0 ${pxToRem(16)}`, 29 | borderRadius: `${borderRadius.xl} ${borderRadius.xl} 0 0`, 30 | }, 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /src/assets/theme/components/tabs/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import colors from "assets/theme/base/colors"; 18 | import borders from "assets/theme/base/borders"; 19 | import boxShadows from "assets/theme/base/boxShadows"; 20 | 21 | // Material Kit 2 React helper functions 22 | import pxToRem from "assets/theme/functions/pxToRem"; 23 | 24 | const { grey, white } = colors; 25 | const { borderRadius } = borders; 26 | const { tabsBoxShadow } = boxShadows; 27 | 28 | export default { 29 | styleOverrides: { 30 | root: { 31 | position: "relative", 32 | backgroundColor: grey[100], 33 | borderRadius: borderRadius.xl, 34 | minHeight: "unset", 35 | padding: pxToRem(4), 36 | }, 37 | 38 | flexContainer: { 39 | height: "100%", 40 | position: "relative", 41 | zIndex: 10, 42 | }, 43 | 44 | fixed: { 45 | overflow: "unset !important", 46 | overflowX: "unset !important", 47 | }, 48 | 49 | vertical: { 50 | "& .MuiTabs-indicator": { 51 | width: "100%", 52 | }, 53 | }, 54 | 55 | indicator: { 56 | height: "100%", 57 | borderRadius: borderRadius.lg, 58 | backgroundColor: white.main, 59 | boxShadow: tabsBoxShadow.indicator, 60 | transition: "all 500ms ease", 61 | }, 62 | }, 63 | }; 64 | -------------------------------------------------------------------------------- /src/assets/theme/components/tabs/tab.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React base styles 17 | import typography from "assets/theme/base/typography"; 18 | import borders from "assets/theme/base/borders"; 19 | import colors from "assets/theme/base/colors"; 20 | 21 | // Material Kit 2 React helper functions 22 | import pxToRem from "assets/theme/functions/pxToRem"; 23 | 24 | const { size, fontWeightRegular } = typography; 25 | const { borderRadius } = borders; 26 | const { dark } = colors; 27 | 28 | export default { 29 | styleOverrides: { 30 | root: { 31 | display: "flex", 32 | alignItems: "center", 33 | flexDirection: "row", 34 | flex: "1 1 auto", 35 | textAlign: "center", 36 | maxWidth: "unset !important", 37 | minWidth: "unset !important", 38 | minHeight: "unset !important", 39 | fontSize: size.md, 40 | fontWeight: fontWeightRegular, 41 | textTransform: "none", 42 | lineHeight: "inherit", 43 | padding: pxToRem(4), 44 | borderRadius: borderRadius.lg, 45 | color: `${dark.main} !important`, 46 | opacity: "1 !important", 47 | 48 | "& .material-icons, .material-icons-round": { 49 | marginBottom: "0 !important", 50 | marginRight: pxToRem(6), 51 | }, 52 | 53 | "& svg": { 54 | marginBottom: "0 !important", 55 | marginRight: pxToRem(6), 56 | }, 57 | 58 | "& i.MuiTab-iconWrapper": { 59 | marginBottom: 0, 60 | }, 61 | }, 62 | 63 | labelIcon: { 64 | paddingTop: pxToRem(4), 65 | }, 66 | }, 67 | }; 68 | -------------------------------------------------------------------------------- /src/assets/theme/components/tooltip.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // @mui material components 17 | import Fade from "@mui/material/Fade"; 18 | 19 | // Material Kit 2 React base styles 20 | import colors from "assets/theme/base/colors"; 21 | import typography from "assets/theme/base/typography"; 22 | import borders from "assets/theme/base/borders"; 23 | 24 | // Material Kit 2 React helper functions 25 | import pxToRem from "assets/theme/functions/pxToRem"; 26 | 27 | const { black, light } = colors; 28 | const { size, fontWeightRegular } = typography; 29 | const { borderRadius } = borders; 30 | 31 | export default { 32 | defaultProps: { 33 | arrow: true, 34 | TransitionComponent: Fade, 35 | }, 36 | 37 | styleOverrides: { 38 | tooltip: { 39 | maxWidth: pxToRem(200), 40 | backgroundColor: black.main, 41 | color: light.main, 42 | fontSize: size.sm, 43 | fontWeight: fontWeightRegular, 44 | textAlign: "center", 45 | borderRadius: borderRadius.md, 46 | opacity: 0.7, 47 | padding: `${pxToRem(5)} ${pxToRem(8)} ${pxToRem(4)}`, 48 | }, 49 | 50 | arrow: { 51 | color: black.main, 52 | }, 53 | }, 54 | }; 55 | -------------------------------------------------------------------------------- /src/assets/theme/functions/boxShadow.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | /** 17 | The boxShadow() function helps you to create a box shadow for an element 18 | */ 19 | 20 | // Material Kit 2 React helper functions 21 | import rgba from "assets/theme/functions/rgba"; 22 | import pxToRem from "assets/theme/functions/pxToRem"; 23 | 24 | function boxShadow(offset = [], radius = [], color, opacity, inset = "") { 25 | const [x, y] = offset; 26 | const [blur, spread] = radius; 27 | 28 | return `${inset} ${pxToRem(x)} ${pxToRem(y)} ${pxToRem(blur)} ${pxToRem(spread)} ${rgba( 29 | color, 30 | opacity 31 | )}`; 32 | } 33 | 34 | export default boxShadow; 35 | -------------------------------------------------------------------------------- /src/assets/theme/functions/gradientChartLine.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | /** 17 | The gradientChartLine() function helps you to create a gradient color for the chart line 18 | */ 19 | 20 | // Material Kit 2 React helper functions 21 | import rgba from "assets/theme/functions/rgba"; 22 | 23 | function gradientChartLine(chart, color, opacity = 0.2) { 24 | const ctx = chart.getContext("2d"); 25 | const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50); 26 | const primaryColor = rgba(color, opacity).toString(); 27 | 28 | gradientStroke.addColorStop(1, primaryColor); 29 | gradientStroke.addColorStop(0.2, "rgba(72, 72, 176, 0.0)"); 30 | gradientStroke.addColorStop(0, "rgba(203, 12, 159, 0)"); 31 | 32 | return gradientStroke; 33 | } 34 | 35 | export default gradientChartLine; 36 | -------------------------------------------------------------------------------- /src/assets/theme/functions/hexToRgb.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | /** 17 | The hexToRgb() function helps you to change the hex color code to rgb 18 | using chroma-js library. 19 | */ 20 | 21 | // chroma-js is a library for all kinds of color conversions and color scales. 22 | import chroma from "chroma-js"; 23 | 24 | function hexToRgb(color) { 25 | return chroma(color).rgb().join(", "); 26 | } 27 | 28 | export default hexToRgb; 29 | -------------------------------------------------------------------------------- /src/assets/theme/functions/linearGradient.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | /** 17 | The linearGradient() function helps you to create a linear gradient color background 18 | */ 19 | 20 | function linearGradient(color, colorState, angle = 195) { 21 | return `linear-gradient(${angle}deg, ${color}, ${colorState})`; 22 | } 23 | 24 | export default linearGradient; 25 | -------------------------------------------------------------------------------- /src/assets/theme/functions/pxToRem.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | /** 17 | The pxToRem() function helps you to convert a px unit into a rem unit, 18 | */ 19 | 20 | function pxToRem(number, baseNumber = 16) { 21 | return `${number / baseNumber}rem`; 22 | } 23 | 24 | export default pxToRem; 25 | -------------------------------------------------------------------------------- /src/assets/theme/functions/rgba.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | /** 17 | The rgba() function helps you to create a rgba color code, it uses the hexToRgb() function 18 | to convert the hex code into rgb for using it inside the rgba color format. 19 | */ 20 | 21 | // Material Kit 2 React helper functions 22 | import hexToRgb from "assets/theme/functions/hexToRgb"; 23 | 24 | function rgba(color, opacity) { 25 | return `rgba(${hexToRgb(color)}, ${opacity})`; 26 | } 27 | 28 | export default rgba; 29 | -------------------------------------------------------------------------------- /src/components/MKAlert/MKAlertCloseIcon.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // @mui material components 17 | import { styled } from "@mui/material/styles"; 18 | 19 | export default styled("span")(({ theme }) => { 20 | const { palette, typography, functions } = theme; 21 | 22 | const { white } = palette; 23 | const { size, fontWeightMedium } = typography; 24 | const { pxToRem } = functions; 25 | 26 | return { 27 | color: white.main, 28 | fontSize: size.xl, 29 | padding: `${pxToRem(9)} ${pxToRem(6)} ${pxToRem(8)}`, 30 | marginLeft: pxToRem(40), 31 | fontWeight: fontWeightMedium, 32 | cursor: "pointer", 33 | lineHeight: 0, 34 | }; 35 | }); 36 | -------------------------------------------------------------------------------- /src/components/MKAlert/MKAlertRoot.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // @mui material components 17 | import Box from "@mui/material/Box"; 18 | import { styled } from "@mui/material/styles"; 19 | 20 | export default styled(Box)(({ theme, ownerState }) => { 21 | const { palette, typography, borders, functions } = theme; 22 | const { color } = ownerState; 23 | 24 | const { white, gradients } = palette; 25 | const { fontSizeRegular, fontWeightMedium } = typography; 26 | const { borderRadius } = borders; 27 | const { pxToRem, linearGradient } = functions; 28 | 29 | // backgroundImage value 30 | const backgroundImageValue = gradients[color] 31 | ? linearGradient(gradients[color].main, gradients[color].state) 32 | : linearGradient(gradients.info.main, gradients.info.state); 33 | 34 | return { 35 | display: "flex", 36 | justifyContent: "space-between", 37 | alignItems: "center", 38 | minHeight: pxToRem(60), 39 | backgroundImage: backgroundImageValue, 40 | color: white.main, 41 | position: "relative", 42 | padding: pxToRem(16), 43 | marginBottom: pxToRem(16), 44 | borderRadius: borderRadius.md, 45 | fontSize: fontSizeRegular, 46 | fontWeight: fontWeightMedium, 47 | }; 48 | }); 49 | -------------------------------------------------------------------------------- /src/components/MKAvatar/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | import { forwardRef } from "react"; 17 | 18 | // prop-types is a library for typechecking of props 19 | import PropTypes from "prop-types"; 20 | 21 | // Custom styles for MKAvatar 22 | import MKAvatarRoot from "components/MKAvatar/MKAvatarRoot"; 23 | 24 | const MKAvatar = forwardRef(({ bgColor, size, shadow, ...rest }, ref) => ( 25 | 26 | )); 27 | 28 | // Setting default values for the props of MKAvatar 29 | MKAvatar.defaultProps = { 30 | bgColor: "transparent", 31 | size: "md", 32 | shadow: "none", 33 | }; 34 | 35 | // Typechecking props for the MKAvatar 36 | MKAvatar.propTypes = { 37 | bgColor: PropTypes.oneOf([ 38 | "transparent", 39 | "primary", 40 | "secondary", 41 | "info", 42 | "success", 43 | "warning", 44 | "error", 45 | "light", 46 | "dark", 47 | ]), 48 | size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl", "xxl"]), 49 | shadow: PropTypes.oneOf(["none", "xs", "sm", "md", "lg", "xl", "xxl", "inset"]), 50 | }; 51 | 52 | export default MKAvatar; 53 | -------------------------------------------------------------------------------- /src/components/MKBadge/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | import { forwardRef } from "react"; 17 | 18 | // prop-types is a library for typechecking of props 19 | import PropTypes from "prop-types"; 20 | 21 | // Custom styles for the MKBadge 22 | import MKBadgeRoot from "components/MKBadge/MKBadgeRoot"; 23 | 24 | const MKBadge = forwardRef( 25 | ({ color, variant, size, circular, indicator, border, container, children, ...rest }, ref) => ( 26 | 32 | {children} 33 | 34 | ) 35 | ); 36 | 37 | // Setting default values for the props of MKBadge 38 | MKBadge.defaultProps = { 39 | color: "info", 40 | variant: "gradient", 41 | size: "sm", 42 | circular: false, 43 | indicator: false, 44 | border: false, 45 | children: false, 46 | container: false, 47 | }; 48 | 49 | // Typechecking props of the MKBadge 50 | MKBadge.propTypes = { 51 | color: PropTypes.oneOf([ 52 | "white", 53 | "primary", 54 | "secondary", 55 | "info", 56 | "success", 57 | "warning", 58 | "error", 59 | "light", 60 | "dark", 61 | ]), 62 | variant: PropTypes.oneOf(["gradient", "contained"]), 63 | size: PropTypes.oneOf(["xs", "sm", "md", "lg"]), 64 | circular: PropTypes.bool, 65 | indicator: PropTypes.bool, 66 | border: PropTypes.bool, 67 | children: PropTypes.node, 68 | container: PropTypes.bool, 69 | }; 70 | 71 | export default MKBadge; 72 | -------------------------------------------------------------------------------- /src/components/MKBox/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | import { forwardRef } from "react"; 17 | 18 | // prop-types is a library for typechecking of props 19 | import PropTypes from "prop-types"; 20 | 21 | // Custom styles for MKBox 22 | import MKBoxRoot from "components/MKBox/MKBoxRoot"; 23 | 24 | const MKBox = forwardRef( 25 | ({ variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow, ...rest }, ref) => ( 26 | 31 | ) 32 | ); 33 | 34 | // Setting default values for the props of MKBox 35 | MKBox.defaultProps = { 36 | variant: "contained", 37 | bgColor: "transparent", 38 | color: "dark", 39 | opacity: 1, 40 | borderRadius: "none", 41 | shadow: "none", 42 | coloredShadow: "none", 43 | }; 44 | 45 | // Typechecking props for the MKBox 46 | MKBox.propTypes = { 47 | variant: PropTypes.oneOf(["contained", "gradient"]), 48 | bgColor: PropTypes.string, 49 | color: PropTypes.string, 50 | opacity: PropTypes.number, 51 | borderRadius: PropTypes.string, 52 | shadow: PropTypes.string, 53 | coloredShadow: PropTypes.oneOf([ 54 | "primary", 55 | "secondary", 56 | "info", 57 | "success", 58 | "warning", 59 | "error", 60 | "light", 61 | "dark", 62 | "none", 63 | ]), 64 | }; 65 | 66 | export default MKBox; 67 | -------------------------------------------------------------------------------- /src/components/MKButton/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | import { forwardRef } from "react"; 17 | 18 | // prop-types is a library for typechecking of props 19 | import PropTypes from "prop-types"; 20 | 21 | // Custom styles for MKButton 22 | import MKButtonRoot from "components/MKButton/MKButtonRoot"; 23 | 24 | const MKButton = forwardRef( 25 | ({ color, variant, size, circular, iconOnly, children, ...rest }, ref) => ( 26 | 34 | {children} 35 | 36 | ) 37 | ); 38 | 39 | // Setting default values for the props of MKButton 40 | MKButton.defaultProps = { 41 | size: "medium", 42 | variant: "contained", 43 | color: "white", 44 | circular: false, 45 | iconOnly: false, 46 | }; 47 | 48 | // Typechecking props for the MKButton 49 | MKButton.propTypes = { 50 | size: PropTypes.oneOf(["small", "medium", "large"]), 51 | variant: PropTypes.oneOf(["text", "contained", "outlined", "gradient"]), 52 | color: PropTypes.oneOf([ 53 | "default", 54 | "white", 55 | "primary", 56 | "secondary", 57 | "info", 58 | "success", 59 | "warning", 60 | "error", 61 | "light", 62 | "dark", 63 | ]), 64 | circular: PropTypes.bool, 65 | iconOnly: PropTypes.bool, 66 | children: PropTypes.node.isRequired, 67 | }; 68 | 69 | export default MKButton; 70 | -------------------------------------------------------------------------------- /src/components/MKDatePicker/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // prop-types is a library for typechecking of props 17 | import PropTypes from "prop-types"; 18 | 19 | // react-flatpickr components 20 | import Flatpickr from "react-flatpickr"; 21 | 22 | // react-flatpickr styles 23 | import "flatpickr/dist/flatpickr.css"; 24 | 25 | // Material Kit 2 React components 26 | import MKInput from "components/MKInput"; 27 | 28 | function MKDatePicker({ input, ...rest }) { 29 | return ( 30 | ( 33 | 34 | )} 35 | /> 36 | ); 37 | } 38 | 39 | // Setting default values for the props of MKDatePicker 40 | MKDatePicker.defaultProps = { 41 | input: {}, 42 | }; 43 | 44 | // Typechecking props for the MKDatePicker 45 | MKDatePicker.propTypes = { 46 | input: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.any])), 47 | }; 48 | 49 | export default MKDatePicker; 50 | -------------------------------------------------------------------------------- /src/components/MKInput/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | import { forwardRef } from "react"; 17 | 18 | // prop-types is a library for typechecking of props 19 | import PropTypes from "prop-types"; 20 | 21 | // Custom styles for MKInput 22 | import MKInputRoot from "components/MKInput/MKInputRoot"; 23 | 24 | const MKInput = forwardRef(({ error, success, disabled, ...rest }, ref) => ( 25 | 26 | )); 27 | 28 | // Setting default values for the props of MKInput 29 | MKInput.defaultProps = { 30 | error: false, 31 | success: false, 32 | disabled: false, 33 | }; 34 | 35 | // Typechecking props for the MKInput 36 | MKInput.propTypes = { 37 | error: PropTypes.bool, 38 | success: PropTypes.bool, 39 | disabled: PropTypes.bool, 40 | }; 41 | 42 | export default MKInput; 43 | -------------------------------------------------------------------------------- /src/components/MKPagination/MKPaginationItemRoot.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // @mui material components 17 | import { styled } from "@mui/material/styles"; 18 | 19 | // Material Kit 2 React components 20 | import MKButton from "components/MKButton"; 21 | 22 | export default styled(MKButton)(({ theme, ownerState }) => { 23 | const { borders, functions, typography, palette } = theme; 24 | const { variant, paginationSize, active } = ownerState; 25 | 26 | const { borderColor } = borders; 27 | const { pxToRem } = functions; 28 | const { fontWeightRegular, size: fontSize } = typography; 29 | const { light } = palette; 30 | 31 | // width, height, minWidth and minHeight values 32 | let sizeValue = pxToRem(36); 33 | 34 | if (paginationSize === "small") { 35 | sizeValue = pxToRem(30); 36 | } else if (paginationSize === "large") { 37 | sizeValue = pxToRem(46); 38 | } 39 | 40 | return { 41 | borderColor, 42 | margin: `0 ${pxToRem(2)}`, 43 | pointerEvents: active ? "none" : "auto", 44 | fontWeight: fontWeightRegular, 45 | fontSize: fontSize.sm, 46 | width: sizeValue, 47 | minWidth: sizeValue, 48 | height: sizeValue, 49 | minHeight: sizeValue, 50 | 51 | "&:hover, &:focus, &:active": { 52 | transform: "none", 53 | boxShadow: (variant !== "gradient" || variant !== "contained") && "none !important", 54 | opacity: "1 !important", 55 | }, 56 | 57 | "&:hover": { 58 | backgroundColor: light.main, 59 | borderColor, 60 | }, 61 | }; 62 | }); 63 | -------------------------------------------------------------------------------- /src/components/MKProgress/MKProgressRoot.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // @mui material components 17 | import { styled } from "@mui/material/styles"; 18 | import LinearProgress from "@mui/material/LinearProgress"; 19 | 20 | export default styled(LinearProgress)(({ theme, ownerState }) => { 21 | const { palette, functions } = theme; 22 | const { color, value, variant } = ownerState; 23 | 24 | const { text, gradients } = palette; 25 | const { linearGradient } = functions; 26 | 27 | // background value 28 | let backgroundValue; 29 | 30 | if (variant === "gradient") { 31 | backgroundValue = gradients[color] 32 | ? linearGradient(gradients[color].main, gradients[color].state) 33 | : linearGradient(gradients.info.main, gradients.info.state); 34 | } else { 35 | backgroundValue = palette[color] ? palette[color].main : palette.info.main; 36 | } 37 | 38 | return { 39 | width: "100%", 40 | 41 | "& .MuiLinearProgress-bar": { 42 | background: backgroundValue, 43 | width: `${value}%`, 44 | color: text.main, 45 | }, 46 | }; 47 | }); 48 | -------------------------------------------------------------------------------- /src/components/MKProgress/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | import { forwardRef } from "react"; 17 | 18 | // prop-types is a library for typechecking of props 19 | import PropTypes from "prop-types"; 20 | 21 | // Material Kit 2 React components 22 | import MKTypography from "components/MKTypography"; 23 | 24 | // Custom styles for MKProgress 25 | import MKProgressRoot from "components/MKProgress/MKProgressRoot"; 26 | 27 | const MKProgress = forwardRef(({ variant, color, value, label, ...rest }, ref) => ( 28 | <> 29 | {label && ( 30 | 31 | {value}% 32 | 33 | )} 34 | 41 | 42 | )); 43 | 44 | // Setting default values for the props of MKProgress 45 | MKProgress.defaultProps = { 46 | variant: "contained", 47 | color: "info", 48 | value: 0, 49 | label: false, 50 | }; 51 | 52 | // Typechecking props for the MKProgress 53 | MKProgress.propTypes = { 54 | variant: PropTypes.oneOf(["contained", "gradient"]), 55 | color: PropTypes.oneOf([ 56 | "primary", 57 | "secondary", 58 | "info", 59 | "success", 60 | "warning", 61 | "error", 62 | "light", 63 | "dark", 64 | ]), 65 | value: PropTypes.number, 66 | label: PropTypes.bool, 67 | }; 68 | 69 | export default MKProgress; 70 | -------------------------------------------------------------------------------- /src/components/MKSocialButton/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | import { forwardRef } from "react"; 17 | 18 | // prop-types is a library for typechecking of props 19 | import PropTypes from "prop-types"; 20 | 21 | // Custom styles for MKSocialButton 22 | import MKSocialButtonRoot from "components/MKSocialButton/MKSocialButtonRoot"; 23 | 24 | const MKSocialButton = forwardRef(({ color, size, iconOnly, circular, children, ...rest }, ref) => ( 25 | 33 | {children} 34 | 35 | )); 36 | 37 | // Setting default values for the props of MKSocialButton 38 | MKSocialButton.defaultProps = { 39 | size: "medium", 40 | color: "facebook", 41 | iconOnly: false, 42 | circular: false, 43 | }; 44 | 45 | // Typechecking props for the MKSocialButton 46 | MKSocialButton.propTypes = { 47 | size: PropTypes.oneOf(["small", "medium", "large"]), 48 | color: PropTypes.oneOf([ 49 | "facebook", 50 | "twitter", 51 | "instagram", 52 | "linkedin", 53 | "pinterest", 54 | "youtube", 55 | "github", 56 | "vimeo", 57 | "slack", 58 | "dribbble", 59 | "reddit", 60 | "tumblr", 61 | ]), 62 | iconOnly: PropTypes.bool, 63 | circular: PropTypes.bool, 64 | children: PropTypes.node.isRequired, 65 | }; 66 | 67 | export default MKSocialButton; 68 | -------------------------------------------------------------------------------- /src/examples/Cards/CounterCards/DefaultCounterCard/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // prop-types is a library for typechecking of props. 17 | import PropTypes from "prop-types"; 18 | 19 | // react-countup component 20 | import CountUp from "react-countup"; 21 | 22 | // Material Kit 2 React components 23 | import MKBox from "components/MKBox"; 24 | import MKTypography from "components/MKTypography"; 25 | 26 | function DefaultCounterCard({ color, count, title, description, ...rest }) { 27 | return ( 28 | 29 | 30 | 31 | 32 | {title && ( 33 | 34 | {title} 35 | 36 | )} 37 | {description && ( 38 | 39 | {description} 40 | 41 | )} 42 | 43 | ); 44 | } 45 | 46 | // Setting default props for the DefaultCounterCard 47 | DefaultCounterCard.defaultProps = { 48 | color: "info", 49 | description: "", 50 | title: "", 51 | }; 52 | 53 | // Typechecking props for the DefaultCounterCard 54 | DefaultCounterCard.propTypes = { 55 | color: PropTypes.oneOf([ 56 | "primary", 57 | "secondary", 58 | "info", 59 | "success", 60 | "warning", 61 | "error", 62 | "light", 63 | "dark", 64 | ]), 65 | count: PropTypes.number.isRequired, 66 | title: PropTypes.string, 67 | description: PropTypes.string, 68 | }; 69 | 70 | export default DefaultCounterCard; 71 | -------------------------------------------------------------------------------- /src/examples/Cards/RotatingCard/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | import { useState } from "react"; 17 | 18 | // prop-types is a library for typechecking of props. 19 | import PropTypes from "prop-types"; 20 | 21 | // @mui material components 22 | import Card from "@mui/material/Card"; 23 | 24 | // Material Kit 2 React components 25 | import MKBox from "components/MKBox"; 26 | 27 | function RotatingCard({ children }) { 28 | const [rotate, setRotate] = useState(false); 29 | 30 | const rotate0 = () => setRotate(false); 31 | const rotate180 = () => setRotate(true); 32 | 33 | return ( 34 | 35 | 45 | {children} 46 | 47 | 48 | ); 49 | } 50 | 51 | // Typechecking props for the RotatingCard 52 | RotatingCard.propTypes = { 53 | children: PropTypes.node.isRequired, 54 | }; 55 | 56 | export default RotatingCard; 57 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | import React from "react"; 17 | import * as ReactDOMClient from "react-dom/client"; 18 | import { BrowserRouter } from "react-router-dom"; 19 | import App from "App"; 20 | 21 | const container = document.getElementById("root"); 22 | 23 | // Create a root. 24 | const root = ReactDOMClient.createRoot(container); 25 | 26 | root.render( 27 | 28 | 29 | 30 | ); 31 | -------------------------------------------------------------------------------- /src/layouts/pages/authentication/sign-in/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React pages 17 | import SignIn from "pages/LandingPages/SignIn"; 18 | 19 | export default function SignInPage() { 20 | return ; 21 | } 22 | -------------------------------------------------------------------------------- /src/layouts/pages/landing-pages/about-us/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React pages 17 | import AboutUs from "pages/LandingPages/AboutUs"; 18 | 19 | export default function AboutUsPage() { 20 | return ; 21 | } 22 | -------------------------------------------------------------------------------- /src/layouts/pages/landing-pages/author/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React pages 17 | import Author from "pages/LandingPages/Author"; 18 | 19 | export default function AuthorPage() { 20 | return ; 21 | } 22 | -------------------------------------------------------------------------------- /src/layouts/pages/landing-pages/contact-us/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React pages 17 | import ContactUs from "pages/LandingPages/ContactUs"; 18 | 19 | export default function ContactUsPage() { 20 | return ; 21 | } 22 | -------------------------------------------------------------------------------- /src/layouts/pages/presentation/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React pages 17 | import Presentation from "pages/Presentation"; 18 | 19 | export default function PresentationPage() { 20 | return ; 21 | } 22 | -------------------------------------------------------------------------------- /src/layouts/sections/attention-catchers/alerts/components/SimpleAlerts/code.js: -------------------------------------------------------------------------------- 1 | const simpleAlertsCode = `// @mui material components 2 | import Container from "@mui/material/Container"; 3 | import Grid from "@mui/material/Grid"; 4 | 5 | // Material Kit 2 React components 6 | import MKBox from "components/MKBox"; 7 | import MKAlert from "components/MKAlert"; 8 | 9 | function SimpleAlerts() { 10 | return ( 11 | 12 | 13 | 14 | 15 | A simple primary alert—check it out! 16 | 17 | 18 | A simple secondary alert—check it out! 19 | 20 | 21 | A simple success alert—check it out! 22 | 23 | 24 | A simple error alert—check it out! 25 | 26 | 27 | A simple warning alert—check it out! 28 | 29 | 30 | A simple info alert—check it out! 31 | 32 | 33 | A simple light alert—check it out! 34 | 35 | 36 | A simple dark alert—check it out! 37 | 38 | 39 | 40 | 41 | ); 42 | } 43 | 44 | export default SimpleAlerts;`; 45 | 46 | export default simpleAlertsCode; 47 | -------------------------------------------------------------------------------- /src/layouts/sections/attention-catchers/alerts/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Sections components 17 | import BaseLayout from "layouts/sections/components/BaseLayout"; 18 | import View from "layouts/sections/components/View"; 19 | 20 | // ALerts page components 21 | import SimpleAlerts from "layouts/sections/attention-catchers/alerts/components/SimpleAlerts"; 22 | 23 | // ALerts page components code 24 | import simpleAlertsCode from "layouts/sections/attention-catchers/alerts/components/SimpleAlerts/code"; 25 | 26 | function Alerts() { 27 | return ( 28 | 35 | 36 | 37 | 38 | 39 | ); 40 | } 41 | 42 | export default Alerts; 43 | -------------------------------------------------------------------------------- /src/layouts/sections/attention-catchers/modals/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Sections components 17 | import BaseLayout from "layouts/sections/components/BaseLayout"; 18 | import View from "layouts/sections/components/View"; 19 | 20 | // Modals page components 21 | import SimpleModal from "layouts/sections/attention-catchers/modals/components/SimpleModal"; 22 | 23 | // Modals page components code 24 | import simpleModalCode from "layouts/sections/attention-catchers/modals/components/SimpleModal/code"; 25 | 26 | function Modals() { 27 | return ( 28 | 35 | 36 | 37 | 38 | 39 | ); 40 | } 41 | 42 | export default Modals; 43 | -------------------------------------------------------------------------------- /src/layouts/sections/attention-catchers/tooltips-popovers/components/Tooltips/code.js: -------------------------------------------------------------------------------- 1 | const tooltipsCode = `// @mui material components 2 | import Container from "@mui/material/Container"; 3 | import Grid from "@mui/material/Grid"; 4 | import Stack from "@mui/material/Stack"; 5 | import Tooltip from "@mui/material/Tooltip"; 6 | 7 | // Material Kit 2 React components 8 | import MKBox from "components/MKBox"; 9 | import MKButton from "components/MKButton"; 10 | 11 | function Tooltips() { 12 | return ( 13 | 14 | 15 | 16 | 17 | 18 | 19 | tooltip on top 20 | 21 | 22 | 23 | 24 | tooltip on right 25 | 26 | 27 | 28 | 29 | tooltip on bottom 30 | 31 | 32 | 33 | 34 | tooltip on left 35 | 36 | 37 | 38 | 39 | 40 | 41 | ); 42 | } 43 | 44 | export default Tooltips;`; 45 | 46 | export default tooltipsCode; 47 | -------------------------------------------------------------------------------- /src/layouts/sections/attention-catchers/tooltips-popovers/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Sections components 17 | import BaseLayout from "layouts/sections/components/BaseLayout"; 18 | import View from "layouts/sections/components/View"; 19 | 20 | // Tooltips and popovers page components 21 | import Popovers from "layouts/sections/attention-catchers/tooltips-popovers/components/Popovers"; 22 | import Tooltips from "layouts/sections/attention-catchers/tooltips-popovers/components/Tooltips"; 23 | 24 | // Tooltips and popovers page components code 25 | import popoversCode from "layouts/sections/attention-catchers/tooltips-popovers/components/Popovers/code"; 26 | import tooltipsCode from "layouts/sections/attention-catchers/tooltips-popovers/components/Tooltips/code"; 27 | 28 | function TooltipsPopovers() { 29 | return ( 30 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | ); 45 | } 46 | 47 | export default TooltipsPopovers; 48 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/avatars/components/AvatarGroup/code.js: -------------------------------------------------------------------------------- 1 | const avatarGroupCode = `// @mui material components 2 | import Container from "@mui/material/Container"; 3 | import Grid from "@mui/material/Grid"; 4 | import MuiAvatarGroup from "@mui/material/AvatarGroup"; 5 | 6 | // Material Kit 2 React components 7 | import MKBox from "components/MKBox"; 8 | import MKAvatar from "components/MKAvatar"; 9 | 10 | // Images 11 | import team1 from "assets/images/team-1.jpg"; 12 | import team2 from "assets/images/team-2.jpg"; 13 | import team3 from "assets/images/team-3.jpg"; 14 | import team4 from "assets/images/team-4.jpg"; 15 | 16 | function AvatarGroup() { 17 | return ( 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | ); 31 | } 32 | 33 | export default AvatarGroup;`; 34 | 35 | export default avatarGroupCode; 36 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/avatars/components/AvatarGroup/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // @mui material components 17 | import Container from "@mui/material/Container"; 18 | import Grid from "@mui/material/Grid"; 19 | import MuiAvatarGroup from "@mui/material/AvatarGroup"; 20 | 21 | // Material Kit 2 React components 22 | import MKBox from "components/MKBox"; 23 | import MKAvatar from "components/MKAvatar"; 24 | 25 | // Images 26 | import team1 from "assets/images/team-1.jpg"; 27 | import team2 from "assets/images/team-2.jpg"; 28 | import team3 from "assets/images/team-3.jpg"; 29 | import team4 from "assets/images/team-4.jpg"; 30 | 31 | function AvatarGroup() { 32 | return ( 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | ); 46 | } 47 | 48 | export default AvatarGroup; 49 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/avatars/components/AvatarSize/code.js: -------------------------------------------------------------------------------- 1 | const avatarSizeCode = `// @mui material components 2 | import Container from "@mui/material/Container"; 3 | import Grid from "@mui/material/Grid"; 4 | import Stack from "@mui/material/Stack"; 5 | 6 | // Material Kit 2 React components 7 | import MKBox from "components/MKBox"; 8 | import MKAvatar from "components/MKAvatar"; 9 | 10 | // Images 11 | import team4 from "assets/images/team-4.jpg"; 12 | 13 | function AvatarSize() { 14 | return ( 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | ); 30 | } 31 | 32 | export default AvatarSize;`; 33 | 34 | export default avatarSizeCode; 35 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/avatars/components/AvatarSize/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // @mui material components 17 | import Container from "@mui/material/Container"; 18 | import Grid from "@mui/material/Grid"; 19 | import Stack from "@mui/material/Stack"; 20 | 21 | // Material Kit 2 React components 22 | import MKBox from "components/MKBox"; 23 | import MKAvatar from "components/MKAvatar"; 24 | 25 | // Images 26 | import team4 from "assets/images/team-4.jpg"; 27 | 28 | function AvatarSize() { 29 | return ( 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | ); 45 | } 46 | 47 | export default AvatarSize; 48 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/avatars/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Sections components 17 | import BaseLayout from "layouts/sections/components/BaseLayout"; 18 | import View from "layouts/sections/components/View"; 19 | 20 | // Avatars page components 21 | import AvatarGroup from "layouts/sections/elements/avatars/components/AvatarGroup"; 22 | import AvatarSize from "layouts/sections/elements/avatars/components/AvatarSize"; 23 | 24 | // Avatars page components code 25 | import avatarGroupCode from "layouts/sections/elements/avatars/components/AvatarGroup/code"; 26 | import avatarSizeCode from "layouts/sections/elements/avatars/components/AvatarSize/code"; 27 | 28 | function Avatars() { 29 | return ( 30 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | ); 45 | } 46 | 47 | export default Avatars; 48 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/badges/components/BadgesGradient/code.js: -------------------------------------------------------------------------------- 1 | const badgesGradientCode = ` 2 | // @mui material components 3 | import Container from "@mui/material/Container"; 4 | import Grid from "@mui/material/Grid"; 5 | import Stack from "@mui/material/Stack"; 6 | 7 | // Material Kit 2 React components 8 | import MKBox from "components/MKBox"; 9 | import MKBadge from "components/MKBadge"; 10 | 11 | function BadgesGradient() { 12 | return ( 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | ); 30 | } 31 | 32 | export default BadgesGradient;`; 33 | 34 | export default badgesGradientCode; 35 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/badges/components/BadgesGradient/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // @mui material components 17 | import Container from "@mui/material/Container"; 18 | import Grid from "@mui/material/Grid"; 19 | import Stack from "@mui/material/Stack"; 20 | 21 | // Material Kit 2 React components 22 | import MKBox from "components/MKBox"; 23 | import MKBadge from "components/MKBadge"; 24 | 25 | function BadgesGradient() { 26 | return ( 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | ); 44 | } 45 | 46 | export default BadgesGradient; 47 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/badges/components/BadgesSimple/code.js: -------------------------------------------------------------------------------- 1 | const badgesSimpleCode = `// @mui material components 2 | import Container from "@mui/material/Container"; 3 | import Grid from "@mui/material/Grid"; 4 | import Stack from "@mui/material/Stack"; 5 | 6 | // Material Kit 2 React components 7 | import MKBox from "components/MKBox"; 8 | import MKBadge from "components/MKBadge"; 9 | 10 | function BadgesSimple() { 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | ); 29 | } 30 | 31 | export default BadgesSimple;`; 32 | 33 | export default badgesSimpleCode; 34 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/badges/components/BadgesSimple/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // @mui material components 17 | import Container from "@mui/material/Container"; 18 | import Grid from "@mui/material/Grid"; 19 | import Stack from "@mui/material/Stack"; 20 | 21 | // Material Kit 2 React components 22 | import MKBox from "components/MKBox"; 23 | import MKBadge from "components/MKBadge"; 24 | 25 | function BadgesSimple() { 26 | return ( 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | ); 44 | } 45 | 46 | export default BadgesSimple; 47 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/badges/components/BadgesSimpleRounded/code.js: -------------------------------------------------------------------------------- 1 | const badgesSimpleRoundedCode = `// @mui material components 2 | import Container from "@mui/material/Container"; 3 | import Grid from "@mui/material/Grid"; 4 | import Stack from "@mui/material/Stack"; 5 | 6 | // Material Kit 2 React components 7 | import MKBox from "components/MKBox"; 8 | import MKBadge from "components/MKBadge"; 9 | 10 | function BadgesSimpleRounded() { 11 | return ( 12 | 13 | 14 | 15 | 16 | 23 | 30 | 37 | 38 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | ); 53 | } 54 | 55 | export default BadgesSimpleRounded;`; 56 | 57 | export default badgesSimpleRoundedCode; 58 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/badges/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Sections components 17 | import BaseLayout from "layouts/sections/components/BaseLayout"; 18 | import View from "layouts/sections/components/View"; 19 | 20 | // Badges page components 21 | import BadgesGradient from "layouts/sections/elements/badges/components/BadgesGradient"; 22 | import BadgesSimple from "layouts/sections/elements/badges/components/BadgesSimple"; 23 | import BadgesSimpleRounded from "layouts/sections/elements/badges/components/BadgesSimpleRounded"; 24 | 25 | // Badges page components code 26 | import badgesGradientCode from "layouts/sections/elements/badges/components/BadgesGradient/code"; 27 | import badgesSimpleCode from "layouts/sections/elements/badges/components/BadgesSimple/code"; 28 | import badgesSimpleRoundedCode from "layouts/sections/elements/badges/components/BadgesSimpleRounded/code"; 29 | 30 | function Badges() { 31 | return ( 32 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | ); 50 | } 51 | 52 | export default Badges; 53 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/breadcrumbs/code.js: -------------------------------------------------------------------------------- 1 | const badgesSimpleCode = `// @mui material components 2 | import Container from "@mui/material/Container"; 3 | import Grid from "@mui/material/Grid"; 4 | 5 | // Material Kit 2 React components 6 | import MKBox from "components/MKBox"; 7 | 8 | // Material Kit 2 React examples 9 | import Breadcrumbs from "examples/Breadcrumbs"; 10 | 11 | function BreadcrumbsEL() { 12 | return ( 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 | 28 | 29 | 30 | 37 | 38 | 39 | 40 | 41 | ); 42 | } 43 | 44 | export default BreadcrumbsEL;`; 45 | 46 | export default badgesSimpleCode; 47 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/buttons/components/ButtonsContained/code.js: -------------------------------------------------------------------------------- 1 | const buttonsContainedCode = `// @mui material components 2 | import Container from "@mui/material/Container"; 3 | import Grid from "@mui/material/Grid"; 4 | import Stack from "@mui/material/Stack"; 5 | 6 | // Material Kit 2 React components 7 | import MKBox from "components/MKBox"; 8 | import MKButton from "components/MKButton"; 9 | 10 | function ButtonsContained() { 11 | return ( 12 | 13 | 14 | 15 | 16 | primary 17 | secondary 18 | info 19 | success 20 | warning 21 | error 22 | light 23 | dark 24 | White 25 | 26 | 27 | 28 | 29 | ); 30 | } 31 | 32 | export default ButtonsContained;`; 33 | 34 | export default buttonsContainedCode; 35 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/buttons/components/ButtonsContained/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // @mui material components 17 | import Container from "@mui/material/Container"; 18 | import Grid from "@mui/material/Grid"; 19 | import Stack from "@mui/material/Stack"; 20 | 21 | // Material Kit 2 React components 22 | import MKBox from "components/MKBox"; 23 | import MKButton from "components/MKButton"; 24 | 25 | function ButtonsContained() { 26 | return ( 27 | 28 | 29 | 30 | 31 | primary 32 | secondary 33 | info 34 | success 35 | warning 36 | error 37 | light 38 | dark 39 | White 40 | 41 | 42 | 43 | 44 | ); 45 | } 46 | 47 | export default ButtonsContained; 48 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/buttons/components/ButtonsGradient/code.js: -------------------------------------------------------------------------------- 1 | const buttonsGradientCode = `// @mui material components 2 | import Container from "@mui/material/Container"; 3 | import Grid from "@mui/material/Grid"; 4 | import Stack from "@mui/material/Stack"; 5 | 6 | // Material Kit 2 React components 7 | import MKBox from "components/MKBox"; 8 | import MKButton from "components/MKButton"; 9 | 10 | function ButtonsGradient() { 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | primary 18 | 19 | 20 | secondary 21 | 22 | 23 | info 24 | 25 | 26 | success 27 | 28 | 29 | warning 30 | 31 | 32 | error 33 | 34 | 35 | light 36 | 37 | 38 | dark 39 | 40 | 41 | White 42 | 43 | 44 | 45 | 46 | 47 | ); 48 | } 49 | 50 | export default ButtonsGradient;`; 51 | 52 | export default buttonsGradientCode; 53 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/buttons/components/ButtonsIconLeft/code.js: -------------------------------------------------------------------------------- 1 | const buttonsIconLeftCode = `// @mui material components 2 | import Container from "@mui/material/Container"; 3 | import Grid from "@mui/material/Grid"; 4 | import Stack from "@mui/material/Stack"; 5 | import Icon from "@mui/material/Icon"; 6 | 7 | // Material Kit 2 React components 8 | import MKBox from "components/MKBox"; 9 | import MKButton from "components/MKButton"; 10 | 11 | function ButtonsIconLeft() { 12 | return ( 13 | 14 | 15 | 16 | 17 | 18 | favorite 19 | small 20 | 21 | 22 | favorite 23 | default 24 | 25 | 26 | favorite 27 | large 28 | 29 | 30 | 31 | 32 | 33 | ); 34 | } 35 | 36 | export default ButtonsIconLeft;`; 37 | 38 | export default buttonsIconLeftCode; 39 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/buttons/components/ButtonsIconLeft/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // @mui material components 17 | import Container from "@mui/material/Container"; 18 | import Grid from "@mui/material/Grid"; 19 | import Stack from "@mui/material/Stack"; 20 | import Icon from "@mui/material/Icon"; 21 | 22 | // Material Kit 2 React components 23 | import MKBox from "components/MKBox"; 24 | import MKButton from "components/MKButton"; 25 | 26 | function ButtonsIconLeft() { 27 | return ( 28 | 29 | 30 | 31 | 32 | 33 | favorite 34 | small 35 | 36 | 37 | favorite 38 | default 39 | 40 | 41 | favorite 42 | large 43 | 44 | 45 | 46 | 47 | 48 | ); 49 | } 50 | 51 | export default ButtonsIconLeft; 52 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/buttons/components/ButtonsIconRight/code.js: -------------------------------------------------------------------------------- 1 | const buttonsIconRightCode = `// @mui material components 2 | import Container from "@mui/material/Container"; 3 | import Grid from "@mui/material/Grid"; 4 | import Stack from "@mui/material/Stack"; 5 | import Icon from "@mui/material/Icon"; 6 | 7 | // Material Kit 2 React components 8 | import MKBox from "components/MKBox"; 9 | import MKButton from "components/MKButton"; 10 | 11 | function ButtonsIconRight() { 12 | return ( 13 | 14 | 15 | 16 | 17 | 18 | small 19 | favorite 20 | 21 | 22 | default 23 | favorite 24 | 25 | 26 | large 27 | favorite 28 | 29 | 30 | 31 | 32 | 33 | ); 34 | } 35 | 36 | export default ButtonsIconRight;`; 37 | 38 | export default buttonsIconRightCode; 39 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/buttons/components/ButtonsIconRight/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // @mui material components 17 | import Container from "@mui/material/Container"; 18 | import Grid from "@mui/material/Grid"; 19 | import Stack from "@mui/material/Stack"; 20 | import Icon from "@mui/material/Icon"; 21 | 22 | // Material Kit 2 React components 23 | import MKBox from "components/MKBox"; 24 | import MKButton from "components/MKButton"; 25 | 26 | function ButtonsIconRight() { 27 | return ( 28 | 29 | 30 | 31 | 32 | 33 | small 34 | favorite 35 | 36 | 37 | default 38 | favorite 39 | 40 | 41 | large 42 | favorite 43 | 44 | 45 | 46 | 47 | 48 | ); 49 | } 50 | 51 | export default ButtonsIconRight; 52 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/buttons/components/ButtonsOutlined/code.js: -------------------------------------------------------------------------------- 1 | const buttonsOutlinedCode = `// @mui material components 2 | import Container from "@mui/material/Container"; 3 | import Grid from "@mui/material/Grid"; 4 | import Stack from "@mui/material/Stack"; 5 | 6 | // Material Kit 2 React components 7 | import MKBox from "components/MKBox"; 8 | import MKButton from "components/MKButton"; 9 | 10 | function ButtonsOutlined() { 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | primary 18 | 19 | 20 | secondary 21 | 22 | 23 | info 24 | 25 | 26 | success 27 | 28 | 29 | warning 30 | 31 | 32 | error 33 | 34 | 35 | light 36 | 37 | 38 | dark 39 | 40 | 41 | White 42 | 43 | 44 | 45 | 46 | 47 | ); 48 | } 49 | 50 | export default ButtonsOutlined;`; 51 | 52 | export default buttonsOutlinedCode; 53 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/buttons/components/ButtonsSizes/code.js: -------------------------------------------------------------------------------- 1 | const buttonsSizesCode = `// @mui material components 2 | import Container from "@mui/material/Container"; 3 | import Grid from "@mui/material/Grid"; 4 | import Stack from "@mui/material/Stack"; 5 | 6 | // Material Kit 2 React components 7 | import MKBox from "components/MKBox"; 8 | import MKButton from "components/MKButton"; 9 | 10 | function ButtonsSizes() { 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | small 18 | 19 | default 20 | 21 | large 22 | 23 | 24 | 25 | 26 | 27 | ); 28 | } 29 | 30 | export default ButtonsSizes;`; 31 | 32 | export default buttonsSizesCode; 33 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/buttons/components/ButtonsSizes/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // @mui material components 17 | import Container from "@mui/material/Container"; 18 | import Grid from "@mui/material/Grid"; 19 | import Stack from "@mui/material/Stack"; 20 | 21 | // Material Kit 2 React components 22 | import MKBox from "components/MKBox"; 23 | import MKButton from "components/MKButton"; 24 | 25 | function ButtonsSizes() { 26 | return ( 27 | 28 | 29 | 30 | 31 | 32 | small 33 | 34 | default 35 | 36 | large 37 | 38 | 39 | 40 | 41 | 42 | ); 43 | } 44 | 45 | export default ButtonsSizes; 46 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/dropdowns/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Sections components 17 | import BaseLayout from "layouts/sections/components/BaseLayout"; 18 | import View from "layouts/sections/components/View"; 19 | 20 | // Dropdowns page components 21 | import DropdownAndDropup from "layouts/sections/elements/dropdowns/components/DropdownAndDropup"; 22 | 23 | // Dropdowns page components code 24 | import dropdownAndDropupCode from "layouts/sections/elements/dropdowns/components/DropdownAndDropup/code"; 25 | 26 | function Dropdowns() { 27 | return ( 28 | 35 | 36 | 37 | 38 | 39 | ); 40 | } 41 | 42 | export default Dropdowns; 43 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/progress-bars/components/ProgressSimple/code.js: -------------------------------------------------------------------------------- 1 | const progressSimpleCode = `// @mui material components 2 | import Container from "@mui/material/Container"; 3 | import Grid from "@mui/material/Grid"; 4 | import Stack from "@mui/material/Stack"; 5 | 6 | // Material Kit 2 React components 7 | import MKBox from "components/MKBox"; 8 | import MKProgress from "components/MKProgress"; 9 | 10 | function ProgressSimple() { 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | ); 28 | } 29 | 30 | export default ProgressSimple;`; 31 | 32 | export default progressSimpleCode; 33 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/progress-bars/components/ProgressSimple/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // @mui material components 17 | import Container from "@mui/material/Container"; 18 | import Grid from "@mui/material/Grid"; 19 | import Stack from "@mui/material/Stack"; 20 | 21 | // Material Kit 2 React components 22 | import MKBox from "components/MKBox"; 23 | import MKProgress from "components/MKProgress"; 24 | 25 | function ProgressSimple() { 26 | return ( 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | ); 43 | } 44 | 45 | export default ProgressSimple; 46 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/progress-bars/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Sections components 17 | import BaseLayout from "layouts/sections/components/BaseLayout"; 18 | import View from "layouts/sections/components/View"; 19 | 20 | // ProgressBars page components 21 | import ProgressSimple from "layouts/sections/elements/progress-bars/components/ProgressSimple"; 22 | 23 | // ProgressBars page components code 24 | import progressSimpleCode from "layouts/sections/elements/progress-bars/components/ProgressSimple/code"; 25 | 26 | function ProgressBars() { 27 | return ( 28 | 35 | 36 | 37 | 38 | 39 | ); 40 | } 41 | 42 | export default ProgressBars; 43 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/toggles/components/Toggle/code.js: -------------------------------------------------------------------------------- 1 | const toggleCode = `import { useState } from "react"; 2 | 3 | // @mui material components 4 | import Container from "@mui/material/Container"; 5 | import Grid from "@mui/material/Grid"; 6 | import Switch from "@mui/material/Switch"; 7 | 8 | // Material Kit 2 React components 9 | import MKBox from "components/MKBox"; 10 | import MKTypography from "components/MKTypography"; 11 | 12 | function Toggle() { 13 | const [checked, setChecked] = useState(false); 14 | 15 | const toggleSwitch = () => setChecked(!checked); 16 | 17 | return ( 18 | 19 | 20 | 21 | 22 | 23 | 31 | Remember me 32 | 33 | 34 | 35 | 36 | 37 | ); 38 | } 39 | 40 | export default Toggle;`; 41 | 42 | export default toggleCode; 43 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/toggles/components/Toggle/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | import { useState } from "react"; 17 | 18 | // @mui material components 19 | import Container from "@mui/material/Container"; 20 | import Grid from "@mui/material/Grid"; 21 | import Switch from "@mui/material/Switch"; 22 | 23 | // Material Kit 2 React components 24 | import MKBox from "components/MKBox"; 25 | import MKTypography from "components/MKTypography"; 26 | 27 | function Toggle() { 28 | const [checked, setChecked] = useState(false); 29 | 30 | const toggleSwitch = () => setChecked(!checked); 31 | 32 | return ( 33 | 34 | 35 | 36 | 37 | 38 | 46 | Remember me 47 | 48 | 49 | 50 | 51 | 52 | ); 53 | } 54 | 55 | export default Toggle; 56 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/toggles/components/ToggleContext/code.js: -------------------------------------------------------------------------------- 1 | const toggleContextCode = `import { useState } from "react"; 2 | 3 | // @mui material components 4 | import Container from "@mui/material/Container"; 5 | import Grid from "@mui/material/Grid"; 6 | import Switch from "@mui/material/Switch"; 7 | 8 | // Material Kit 2 React components 9 | import MKBox from "components/MKBox"; 10 | import MKTypography from "components/MKTypography"; 11 | 12 | function ToggleContext() { 13 | const [checked, setChecked] = useState(false); 14 | 15 | const toggleSwitch = () => setChecked(!checked); 16 | 17 | return ( 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | Remember me 26 | 27 | 28 | Be sure that you will always be logged in. 29 | 30 | 31 | 32 | 33 | 34 | 35 | ); 36 | } 37 | 38 | export default ToggleContext;`; 39 | 40 | export default toggleContextCode; 41 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/toggles/components/ToggleContext/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | import { useState } from "react"; 17 | 18 | // @mui material components 19 | import Container from "@mui/material/Container"; 20 | import Grid from "@mui/material/Grid"; 21 | import Switch from "@mui/material/Switch"; 22 | 23 | // Material Kit 2 React components 24 | import MKBox from "components/MKBox"; 25 | import MKTypography from "components/MKTypography"; 26 | 27 | function ToggleContext() { 28 | const [checked, setChecked] = useState(false); 29 | 30 | const toggleSwitch = () => setChecked(!checked); 31 | 32 | return ( 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | Remember me 41 | 42 | 43 | Be sure that you will always be logged in. 44 | 45 | 46 | 47 | 48 | 49 | 50 | ); 51 | } 52 | 53 | export default ToggleContext; 54 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/toggles/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Sections components 17 | import BaseLayout from "layouts/sections/components/BaseLayout"; 18 | import View from "layouts/sections/components/View"; 19 | 20 | // Toggles page components 21 | import Toggle from "layouts/sections/elements/toggles/components/Toggle"; 22 | import ToggleContext from "layouts/sections/elements/toggles/components/ToggleContext"; 23 | 24 | // Toggles page components code 25 | import toggleCode from "layouts/sections/elements/toggles/components/Toggle/code"; 26 | import toggleContextCode from "layouts/sections/elements/toggles/components/ToggleContext/code"; 27 | 28 | function Toggles() { 29 | return ( 30 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | ); 45 | } 46 | 47 | export default Toggles; 48 | -------------------------------------------------------------------------------- /src/layouts/sections/elements/typography/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Sections components 17 | import BaseLayout from "layouts/sections/components/BaseLayout"; 18 | import View from "layouts/sections/components/View"; 19 | 20 | // Typography page components 21 | import TypographyRoboto from "layouts/sections/elements/typography/components/TypographyRoboto"; 22 | 23 | // Typography page components code 24 | import typographyRobotoCode from "layouts/sections/elements/typography/components/TypographyRoboto/code"; 25 | 26 | function Typography() { 27 | return ( 28 | 35 | 36 | 37 | 38 | 39 | ); 40 | } 41 | 42 | export default Typography; 43 | -------------------------------------------------------------------------------- /src/layouts/sections/input-areas/forms/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Sections components 17 | import BaseLayout from "layouts/sections/components/BaseLayout"; 18 | import View from "layouts/sections/components/View"; 19 | 20 | // Forms page components 21 | import FormSimple from "layouts/sections/input-areas/forms/components/FormSimple"; 22 | 23 | // Forms page components code 24 | import formSimpleCode from "layouts/sections/input-areas/forms/components/FormSimple/code"; 25 | 26 | function Forms() { 27 | return ( 28 | 35 | 36 | 37 | 38 | 39 | ); 40 | } 41 | 42 | export default Forms; 43 | -------------------------------------------------------------------------------- /src/layouts/sections/input-areas/inputs/components/InputDisabled/code.js: -------------------------------------------------------------------------------- 1 | const inputDisabledCode = `// @mui material components 2 | import Container from "@mui/material/Container"; 3 | import Grid from "@mui/material/Grid"; 4 | 5 | // Material Kit 2 React components 6 | import MKBox from "components/MKBox"; 7 | import MKInput from "components/MKInput"; 8 | 9 | function InputDisabled() { 10 | return ( 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | } 20 | 21 | export default InputDisabled;`; 22 | 23 | export default inputDisabledCode; 24 | -------------------------------------------------------------------------------- /src/layouts/sections/input-areas/inputs/components/InputDisabled/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-param-reassign */ 2 | /** 3 | ========================================================= 4 | * Material Kit 2 React - v2.1.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/material-kit-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | Coded by www.creative-tim.com 11 | 12 | ========================================================= 13 | 14 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 15 | */ 16 | 17 | // @mui material components 18 | import Container from "@mui/material/Container"; 19 | import Grid from "@mui/material/Grid"; 20 | 21 | // Material Kit 2 React components 22 | import MKBox from "components/MKBox"; 23 | import MKInput from "components/MKInput"; 24 | 25 | function InputDisabled() { 26 | return ( 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | ); 35 | } 36 | 37 | export default InputDisabled; 38 | -------------------------------------------------------------------------------- /src/layouts/sections/input-areas/inputs/components/InputDynamic/code.js: -------------------------------------------------------------------------------- 1 | const inputDynamicCode = `// @mui material components 2 | import Container from "@mui/material/Container"; 3 | import Grid from "@mui/material/Grid"; 4 | 5 | // Material Kit 2 React components 6 | import MKBox from "components/MKBox"; 7 | import MKInput from "components/MKInput"; 8 | 9 | function InputDynamic() { 10 | return ( 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | } 20 | 21 | export default InputDynamic;`; 22 | 23 | export default inputDynamicCode; 24 | -------------------------------------------------------------------------------- /src/layouts/sections/input-areas/inputs/components/InputDynamic/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-param-reassign */ 2 | /** 3 | ========================================================= 4 | * Material Kit 2 React - v2.1.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/material-kit-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | Coded by www.creative-tim.com 11 | 12 | ========================================================= 13 | 14 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 15 | */ 16 | 17 | // @mui material components 18 | import Container from "@mui/material/Container"; 19 | import Grid from "@mui/material/Grid"; 20 | 21 | // Material Kit 2 React components 22 | import MKBox from "components/MKBox"; 23 | import MKInput from "components/MKInput"; 24 | 25 | function InputDynamic() { 26 | return ( 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | ); 35 | } 36 | 37 | export default InputDynamic; 38 | -------------------------------------------------------------------------------- /src/layouts/sections/input-areas/inputs/components/InputError/code.js: -------------------------------------------------------------------------------- 1 | const inputErrorCode = `// @mui material components 2 | import Container from "@mui/material/Container"; 3 | import Grid from "@mui/material/Grid"; 4 | 5 | // Material Kit 2 React components 6 | import MKBox from "components/MKBox"; 7 | import MKInput from "components/MKInput"; 8 | 9 | function InputError() { 10 | return ( 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | } 20 | 21 | export default InputError;`; 22 | 23 | export default inputErrorCode; 24 | -------------------------------------------------------------------------------- /src/layouts/sections/input-areas/inputs/components/InputError/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-param-reassign */ 2 | /** 3 | ========================================================= 4 | * Material Kit 2 React - v2.1.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/material-kit-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | Coded by www.creative-tim.com 11 | 12 | ========================================================= 13 | 14 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 15 | */ 16 | 17 | // @mui material components 18 | import Container from "@mui/material/Container"; 19 | import Grid from "@mui/material/Grid"; 20 | 21 | // Material Kit 2 React components 22 | import MKBox from "components/MKBox"; 23 | import MKInput from "components/MKInput"; 24 | 25 | function InputError() { 26 | return ( 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | ); 35 | } 36 | 37 | export default InputError; 38 | -------------------------------------------------------------------------------- /src/layouts/sections/input-areas/inputs/components/InputIcon/code.js: -------------------------------------------------------------------------------- 1 | const inputIconCode = `// @mui material components 2 | import Container from "@mui/material/Container"; 3 | import Grid from "@mui/material/Grid"; 4 | import InputAdornment from "@mui/material/InputAdornment"; 5 | 6 | // @mui icons 7 | import SearchIcon from "@mui/icons-material/Search"; 8 | 9 | // Material Kit 2 React components 10 | import MKBox from "components/MKBox"; 11 | import MKInput from "components/MKInput"; 12 | 13 | function InputIcon() { 14 | return ( 15 | 16 | 17 | 18 | 25 | 26 | 27 | ), 28 | }} 29 | /> 30 | 31 | 32 | 33 | ); 34 | } 35 | 36 | export default InputIcon;`; 37 | 38 | export default inputIconCode; 39 | -------------------------------------------------------------------------------- /src/layouts/sections/input-areas/inputs/components/InputIcon/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-param-reassign */ 2 | /** 3 | ========================================================= 4 | * Material Kit 2 React - v2.1.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/material-kit-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | Coded by www.creative-tim.com 11 | 12 | ========================================================= 13 | 14 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 15 | */ 16 | 17 | // @mui material components 18 | import Container from "@mui/material/Container"; 19 | import Grid from "@mui/material/Grid"; 20 | import InputAdornment from "@mui/material/InputAdornment"; 21 | 22 | // @mui icons 23 | import SearchIcon from "@mui/icons-material/Search"; 24 | 25 | // Material Kit 2 React components 26 | import MKBox from "components/MKBox"; 27 | import MKInput from "components/MKInput"; 28 | 29 | function InputIcon() { 30 | return ( 31 | 32 | 33 | 34 | 41 | 42 | 43 | ), 44 | }} 45 | /> 46 | 47 | 48 | 49 | ); 50 | } 51 | 52 | export default InputIcon; 53 | -------------------------------------------------------------------------------- /src/layouts/sections/input-areas/inputs/components/InputOutlined/code.js: -------------------------------------------------------------------------------- 1 | const inputOutlinedCode = `// @mui material components 2 | import Container from "@mui/material/Container"; 3 | import Grid from "@mui/material/Grid"; 4 | 5 | // Material Kit 2 React components 6 | import MKBox from "components/MKBox"; 7 | import MKInput from "components/MKInput"; 8 | 9 | function InputOutlined() { 10 | return ( 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | } 20 | 21 | export default InputOutlined;`; 22 | 23 | export default inputOutlinedCode; 24 | -------------------------------------------------------------------------------- /src/layouts/sections/input-areas/inputs/components/InputOutlined/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-param-reassign */ 2 | /** 3 | ========================================================= 4 | * Material Kit 2 React - v2.1.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/material-kit-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | Coded by www.creative-tim.com 11 | 12 | ========================================================= 13 | 14 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 15 | */ 16 | 17 | // @mui material components 18 | import Container from "@mui/material/Container"; 19 | import Grid from "@mui/material/Grid"; 20 | 21 | // Material Kit 2 React components 22 | import MKBox from "components/MKBox"; 23 | import MKInput from "components/MKInput"; 24 | 25 | function InputOutlined() { 26 | return ( 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | ); 35 | } 36 | 37 | export default InputOutlined; 38 | -------------------------------------------------------------------------------- /src/layouts/sections/input-areas/inputs/components/InputStatic/code.js: -------------------------------------------------------------------------------- 1 | const inputStaticCode = `// @mui material components 2 | import Container from "@mui/material/Container"; 3 | import Grid from "@mui/material/Grid"; 4 | 5 | // Material Kit 2 React components 6 | import MKBox from "components/MKBox"; 7 | import MKInput from "components/MKInput"; 8 | 9 | function InputStatic() { 10 | return ( 11 | 12 | 13 | 14 | 21 | 22 | 23 | 24 | ); 25 | } 26 | 27 | export default InputStatic;`; 28 | 29 | export default inputStaticCode; 30 | -------------------------------------------------------------------------------- /src/layouts/sections/input-areas/inputs/components/InputStatic/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-param-reassign */ 2 | /** 3 | ========================================================= 4 | * Material Kit 2 React - v2.1.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/material-kit-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | Coded by www.creative-tim.com 11 | 12 | ========================================================= 13 | 14 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 15 | */ 16 | 17 | // @mui material components 18 | import Container from "@mui/material/Container"; 19 | import Grid from "@mui/material/Grid"; 20 | 21 | // Material Kit 2 React components 22 | import MKBox from "components/MKBox"; 23 | import MKInput from "components/MKInput"; 24 | 25 | function InputStatic() { 26 | return ( 27 | 28 | 29 | 30 | 37 | 38 | 39 | 40 | ); 41 | } 42 | 43 | export default InputStatic; 44 | -------------------------------------------------------------------------------- /src/layouts/sections/input-areas/inputs/components/InputSuccess/code.js: -------------------------------------------------------------------------------- 1 | const inputSuccessCode = `// @mui material components 2 | import Container from "@mui/material/Container"; 3 | import Grid from "@mui/material/Grid"; 4 | 5 | // Material Kit 2 React components 6 | import MKBox from "components/MKBox"; 7 | import MKInput from "components/MKInput"; 8 | 9 | function InputSuccess() { 10 | return ( 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | } 20 | 21 | export default InputSuccess;`; 22 | 23 | export default inputSuccessCode; 24 | -------------------------------------------------------------------------------- /src/layouts/sections/input-areas/inputs/components/InputSuccess/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-param-reassign */ 2 | /** 3 | ========================================================= 4 | * Material Kit 2 React - v2.1.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/material-kit-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | Coded by www.creative-tim.com 11 | 12 | ========================================================= 13 | 14 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 15 | */ 16 | 17 | // @mui material components 18 | import Container from "@mui/material/Container"; 19 | import Grid from "@mui/material/Grid"; 20 | 21 | // Material Kit 2 React components 22 | import MKBox from "components/MKBox"; 23 | import MKInput from "components/MKInput"; 24 | 25 | function InputSuccess() { 26 | return ( 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | ); 35 | } 36 | 37 | export default InputSuccess; 38 | -------------------------------------------------------------------------------- /src/layouts/sections/navigation/nav-tabs/components/TabsSimple/code.js: -------------------------------------------------------------------------------- 1 | const tabsSimpleCode = `import { useState } from "react"; 2 | 3 | // @mui material components 4 | import Container from "@mui/material/Container"; 5 | import Grid from "@mui/material/Grid"; 6 | import AppBar from "@mui/material/AppBar"; 7 | import Tabs from "@mui/material/Tabs"; 8 | import Tab from "@mui/material/Tab"; 9 | 10 | function TabsSimple() { 11 | const [activeTab, setActiveTab] = useState(0); 12 | 13 | const handleTabType = (event, newValue) => setActiveTab(newValue); 14 | 15 | return ( 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | ); 27 | } 28 | 29 | export default TabsSimple;`; 30 | 31 | export default tabsSimpleCode; 32 | -------------------------------------------------------------------------------- /src/layouts/sections/navigation/nav-tabs/components/TabsSimple/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-param-reassign */ 2 | /** 3 | ========================================================= 4 | * Material Kit 2 React - v2.1.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/material-kit-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | Coded by www.creative-tim.com 11 | 12 | ========================================================= 13 | 14 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 15 | */ 16 | 17 | import { useState } from "react"; 18 | 19 | // @mui material components 20 | import Container from "@mui/material/Container"; 21 | import Grid from "@mui/material/Grid"; 22 | import AppBar from "@mui/material/AppBar"; 23 | import Tabs from "@mui/material/Tabs"; 24 | import Tab from "@mui/material/Tab"; 25 | 26 | function TabsSimple() { 27 | const [activeTab, setActiveTab] = useState(0); 28 | 29 | const handleTabType = (event, newValue) => setActiveTab(newValue); 30 | 31 | return ( 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | ); 43 | } 44 | 45 | export default TabsSimple; 46 | -------------------------------------------------------------------------------- /src/layouts/sections/navigation/nav-tabs/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React components 17 | import MKBox from "components/MKBox"; 18 | 19 | // Sections components 20 | import BaseLayout from "layouts/sections/components/BaseLayout"; 21 | import View from "layouts/sections/components/View"; 22 | 23 | // Stats page components 24 | import TabsSimple from "layouts/sections/navigation/nav-tabs/components/TabsSimple"; 25 | 26 | // Stats page components code 27 | import tabsSimpleCode from "layouts/sections/navigation/nav-tabs/components/TabsSimple/code"; 28 | 29 | function NavTabs() { 30 | return ( 31 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | ); 45 | } 46 | 47 | export default NavTabs; 48 | -------------------------------------------------------------------------------- /src/layouts/sections/navigation/navbars/components/NavbarDark/code.js: -------------------------------------------------------------------------------- 1 | const navbarDarkCode = `// Material Kit 2 React components 2 | import MKBox from "components/MKBox"; 3 | 4 | // Material Kit 2 React examples 5 | import DefaultNavbar from "examples/Navbars/DefaultNavbar"; 6 | 7 | // Routes 8 | import routes from "routes"; 9 | 10 | function NavbarDark() { 11 | return ( 12 | 13 | 26 | 27 | ); 28 | } 29 | 30 | export default NavbarDark;`; 31 | 32 | export default navbarDarkCode; 33 | -------------------------------------------------------------------------------- /src/layouts/sections/navigation/navbars/components/NavbarDark/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-param-reassign */ 2 | /** 3 | ========================================================= 4 | * Material Kit 2 React - v2.1.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/material-kit-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | Coded by www.creative-tim.com 11 | 12 | ========================================================= 13 | 14 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 15 | */ 16 | 17 | // Material Kit 2 React components 18 | import MKBox from "components/MKBox"; 19 | 20 | // Material Kit 2 React examples 21 | import DefaultNavbar from "examples/Navbars/DefaultNavbar"; 22 | 23 | // Routes 24 | import routes from "routes"; 25 | 26 | function NavbarDark() { 27 | return ( 28 | 29 | 42 | 43 | ); 44 | } 45 | 46 | export default NavbarDark; 47 | -------------------------------------------------------------------------------- /src/layouts/sections/navigation/navbars/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React components 17 | import MKBox from "components/MKBox"; 18 | 19 | // Sections components 20 | import BaseLayout from "layouts/sections/components/BaseLayout"; 21 | import View from "layouts/sections/components/View"; 22 | 23 | // Stats page components 24 | import NavbarDark from "layouts/sections/navigation/navbars/components/NavbarDark"; 25 | 26 | // Stats page components code 27 | import navbarDarkCode from "layouts/sections/navigation/navbars/components/NavbarDark/code"; 28 | 29 | function Navbars() { 30 | return ( 31 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | ); 45 | } 46 | 47 | export default Navbars; 48 | -------------------------------------------------------------------------------- /src/layouts/sections/navigation/pagination/components/PaginationSimple/code.js: -------------------------------------------------------------------------------- 1 | const paginationSimpleCode = `// @mui material components 2 | import Container from "@mui/material/Container"; 3 | import Grid from "@mui/material/Grid"; 4 | import Icon from "@mui/material/Icon"; 5 | 6 | // Material Kit 2 React components 7 | import MKPagination from "components/MKPagination"; 8 | 9 | function PaginationSimple() { 10 | return ( 11 | 12 | 13 | 14 | 15 | keyboard_arrow_left 16 | 17 | 18 | 1 19 | 20 | 2 21 | 3 22 | 4 23 | 5 24 | 25 | keyboard_arrow_right 26 | 27 | 28 | 29 | 30 | ); 31 | } 32 | 33 | export default PaginationSimple;`; 34 | 35 | export default paginationSimpleCode; 36 | -------------------------------------------------------------------------------- /src/layouts/sections/navigation/pagination/components/PaginationSimple/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-param-reassign */ 2 | /** 3 | ========================================================= 4 | * Material Kit 2 React - v2.1.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/material-kit-react 8 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 9 | 10 | Coded by www.creative-tim.com 11 | 12 | ========================================================= 13 | 14 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 15 | */ 16 | 17 | // @mui material components 18 | import Container from "@mui/material/Container"; 19 | import Grid from "@mui/material/Grid"; 20 | import Icon from "@mui/material/Icon"; 21 | 22 | // Material Kit 2 React components 23 | import MKPagination from "components/MKPagination"; 24 | 25 | function PaginationSimple() { 26 | return ( 27 | 28 | 29 | 30 | 31 | keyboard_arrow_left 32 | 33 | 34 | 1 35 | 36 | 2 37 | 3 38 | 4 39 | 5 40 | 41 | keyboard_arrow_right 42 | 43 | 44 | 45 | 46 | ); 47 | } 48 | 49 | export default PaginationSimple; 50 | -------------------------------------------------------------------------------- /src/layouts/sections/navigation/pagination/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 React components 17 | import MKBox from "components/MKBox"; 18 | 19 | // Sections components 20 | import BaseLayout from "layouts/sections/components/BaseLayout"; 21 | import View from "layouts/sections/components/View"; 22 | 23 | // Stats page components 24 | import PaginationSimple from "layouts/sections/navigation/pagination/components/PaginationSimple"; 25 | 26 | // Stats page components code 27 | import paginationSimpleCode from "layouts/sections/navigation/pagination/components/PaginationSimple/code"; 28 | 29 | function Pagination() { 30 | return ( 31 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | ); 45 | } 46 | 47 | export default Pagination; 48 | -------------------------------------------------------------------------------- /src/layouts/sections/page-sections/featuers/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Sections components 17 | import BaseLayout from "layouts/sections/components/BaseLayout"; 18 | import View from "layouts/sections/components/View"; 19 | 20 | // Features page components 21 | import FeaturesOne from "layouts/sections/page-sections/featuers/components/FeaturesOne"; 22 | 23 | // Features page components code 24 | import featuresOneCode from "layouts/sections/page-sections/featuers/components/FeaturesOne/code"; 25 | 26 | function Features() { 27 | return ( 28 | 35 | 36 | 37 | 38 | 39 | ); 40 | } 41 | 42 | export default Features; 43 | -------------------------------------------------------------------------------- /src/layouts/sections/page-sections/page-headers/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Sections components 17 | import BaseLayout from "layouts/sections/components/BaseLayout"; 18 | import View from "layouts/sections/components/View"; 19 | 20 | // PageHeaders page components 21 | import HeaderOne from "layouts/sections/page-sections/page-headers/components/HeaderOne"; 22 | 23 | // PageHeaders page components code 24 | import headerOneCode from "layouts/sections/page-sections/page-headers/components/HeaderOne/code"; 25 | 26 | function PageHeaders() { 27 | return ( 28 | 35 | 36 | 37 | 38 | 39 | ); 40 | } 41 | 42 | export default PageHeaders; 43 | -------------------------------------------------------------------------------- /src/pages/Presentation/sections/data/pagesData.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 React - v2.1.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-react 7 | * Copyright 2023 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | const imagesPrefix = 17 | "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/presentation/pages"; 18 | 19 | export default [ 20 | { 21 | image: `${imagesPrefix}/about-us.jpg`, 22 | name: "About Us Page", 23 | route: "/pages/landing-pages/about-us", 24 | }, 25 | { 26 | image: `${imagesPrefix}/contact.jpg`, 27 | name: "Contact Us Page", 28 | route: "/pages/landing-pages/contact-us", 29 | }, 30 | { 31 | image: 32 | "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/presentation/account/signin-basic.jpg", 33 | name: "Sign In Page", 34 | route: "/pages/authentication/sign-in", 35 | }, 36 | { 37 | image: `${imagesPrefix}/author.jpg`, 38 | name: "Author Page", 39 | route: "/pages/landing-pages/author", 40 | }, 41 | ]; 42 | --------------------------------------------------------------------------------