diff --git a/material-kit-react-main/material-kit-react-main/.eslintrc.json b/material-kit-react-main/material-kit-react-main/.eslintrc.json new file mode 100644 index 0000000..792b5cf --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/.eslintrc.json @@ -0,0 +1,35 @@ +{ + "env": { + "browser": true, + "es2021": true + }, + "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"], + "parserOptions": { + "ecmaFeatures": { + "jsx": true + }, + "ecmaVersion": 12, + "sourceType": "module" + }, + "plugins": ["react", "prettier"], + "rules": { + "prettier/prettier": [ + "error", + { + "endOfLine": "auto" + } + ], + "react/react-in-jsx-scope": "off", + "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], + "react/jsx-props-no-spreading": [ + 1, + { + "custom": "ignore" + } + ], + "react/jsx-curly-spacing": [2, "never"], + "default-param-last": "off", + "react/display-name": "off" + }, + "settings": { "import/resolver": { "node": { "paths": ["src"] } } } +} diff --git a/material-kit-react-main/material-kit-react-main/.gitignore b/material-kit-react-main/material-kit-react-main/.gitignore new file mode 100644 index 0000000..7389a20 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/.gitignore @@ -0,0 +1,27 @@ +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +/node_modules +.DS_Store + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +package-lock.json +yarn.lock + +commit.sh diff --git a/material-kit-react-main/material-kit-react-main/.npmrc b/material-kit-react-main/material-kit-react-main/.npmrc new file mode 100644 index 0000000..5c6c958 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/.npmrc @@ -0,0 +1,3 @@ +legacy-peer-deps=true +auto-install-peers=true +strict-peer-dependencies=false \ No newline at end of file diff --git a/material-kit-react-main/material-kit-react-main/.prettierrc.json b/material-kit-react-main/material-kit-react-main/.prettierrc.json new file mode 100644 index 0000000..40fa8e5 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/.prettierrc.json @@ -0,0 +1,8 @@ +{ + "printWidth": 100, + "trailingComma": "es5", + "tabWidth": 2, + "semi": true, + "singleQuote": false, + "endOfLine": "auto" +} diff --git a/material-kit-react-main/material-kit-react-main/CHANGELOG.md b/material-kit-react-main/material-kit-react-main/CHANGELOG.md new file mode 100644 index 0000000..01c8585 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/CHANGELOG.md @@ -0,0 +1,512 @@ +# Change Log + +## [2.1.0] 2023-04-14 + +- Upgrade React 18 +- Update dependencies and dev-dependencies + +## [2.0.0] 2022-01-11 + +### Bug fixing + +### Major style changes + +- Migration from Material-UI to MUI v5. +- Migration from JSS to `styled` api, emotion and `sx` prop. +- Product folders and files structured are updated: [README](https://github.com/creativetimofficial/material-kit-react/blob/main/README.md) +- New components are added +- New example blocks are added +- Components and Example Blocks are now totally customizable and reusable + +### Deleted components + +- Badge +- Card +- Clearfix +- CustomButtons +- CustomDropdown +- CustomInput +- CustomLinearProgress +- CustomTabs +- Footer +- Grid +- Header +- InfoArea +- NavPills +- Pagination +- Parallax +- Snackbar +- Typography + +### Added components + +- MKAlert +- MKAvatar +- MKBadge +- MKBox +- MKButton +- MKDatePicker +- MKInput +- MKPagination +- MKProgress +- MKSocialButton +- MKTypography +- Breadcrumbs +- Cards + - BlogCards + - BackgroundBlogCard + - CenteredBlogCard + - TransparentBlogCard + - CounterCards + - DefaultCounterCard + - InfoCards + - DefaultInfoCard + - FilledInfoCard + - ReviewCards + - DefaultReviewCard + - RotatingCard + - TeamCards + - HorizontalTeamCard +- Footers + - CenteredFooter + - DefaultFooter + - SimpleFooter +- Navbars + - DefaultNavbar + +### Deleted dependencies + +``` +@material-ui/core +@material-ui/icons +animate.css +classnames +moment +node-sass +nouislider +react-animate-on-scroll +react-datetime +react-image-gallery +react-slick +react-tagsinput +``` + +### Added dependencies + +``` +@mui/material +@mui/icons-material +@mui/styled-engine +@emotion/cache +@emotion/react +@emotion/styled +@testing-library/jest-dom +@testing-library/react": +@testing-library/user-event +chroma-js +flatpickr +prop-types +react-flatpickr +react-copy-to-clipboard +react-countup +react-syntax-highlighter +web-vitals +``` + +### Updated dependencies + +### Warning + +## [1.10.0] 2021-05-11 + +### Bug fixing + +- https://github.com/creativetimofficial/material-kit-react/issues/86 + - This issue cannot be solved, it comes from the `react-swipeable-views` plugin, this plugins is no longer maintained, even `Material-UI` has dropped its usage and stopped animating the `Nav Pills`, so, we’ve dropped their usage as well +- https://github.com/creativetimofficial/material-kit-react/issues/85 + - Tested this inside a Linux environment, and evrything worked as expected, maybe the issue was solved by the new Material-UI version +- https://github.com/creativetimofficial/material-kit-react/issues/75 + - This issue will be closed, as people might want to change the brand component from `Button` to something else, for example a `Link` from `react-router-dom` + +### Major style changes + +### Deleted components + +### Added components + +- `@babel/core@7.14.0` (to stop warnings) + +### Deleted dependencies + +- `history` (no more need for this one, we'll use `BrowserRouter` instead of `Router` with `history`) +- `react-swipeable-views` (no longer maintained) + +### Added dependencies + +### Updated dependencies + +``` +@material-ui/core 4.10.0 → 4.11.4 +@material-ui/icons 4.9.1 → 4.11.2 +classnames 2.2.6 → 2.3.1 +moment 2.26.0 → 2.29.1 +node-sass 4.14.1 → 6.0.0 +nouislider 14.5.0 → 15.1.0 +react 16.13.1 → 17.0.2 +react-datetime 2.16.3 → 3.0.4 +react-dom 16.13.1 → 17.0.2 +react-scripts 3.4.1 → 4.0.3 +react-slick 0.26.1 → 0.28.1 +@babel/cli 7.10.1 → 7.13.16 +@babel/plugin-proposal-class-properties 7.10.1 → 7.13.0 +@babel/preset-env 7.10.1 → 7.14.1 +@babel/preset-react 7.10.1 → 7.13.13 +eslint-config-prettier 6.11.0 → 8.3.0 +eslint-plugin-prettier 3.1.3 → 3.4.0 +eslint-plugin-react 7.20.0 → 7.23.2 +gulp-append-prepend 1.0.8 → 1.0.9 +prettier 2.0.5 → 2.3.0 +typescript 3.9.3 → 4.2.4 +``` + +### Warning + +_Warnings might appear while doing an npm install - they do not affect the UI or the functionality of the product, and they appear because of NodeJS and not from the product itself._ + +``` +npm WARN react-datetime@3.0.4 requires a peer of react@^16.5.0 but none is installed. You must install peer dependencies yourself. +``` + +_You will also have the following message: found 80 vulnerabilities (1 low, 79 moderate). This comes from react-scripts, and will be fixed in the next version. NOTE: the product works as expected with these vulnerabilities._ + +## [1.9.0] 2020-05-28 + +### Bug fixing + +- https://github.com/creativetimofficial/material-kit-react/issues/67 + +### Major style changes + +### Deleted components + +### Added components + +### Deleted dependencies + +### Added dependencies + +### Updated dependencies + +``` +@material-ui/core 4.3.2 → 4.10.0 +@material-ui/icons 4.2.1 → 4.9.1 +history 4.9.0 → 4.10.1 +moment 2.24.0 → 2.26.0 +node-sass 4.12.0 → 4.14.1 +nouislider 14.0.2 → 14.5.0 +react 16.9.0 → 16.13.1 +react-dom 16.9.0 → 16.13.1 +react-router-dom 5.0.1 → 5.2.0 +react-scripts 3.1.0 → 3.4.1 +react-slick 0.25.2 → 0.26.1 +react-swipeable-views 0.13.3 → 0.13.9 +@babel/cli 7.5.5 → 7.10.1 +@babel/plugin-proposal-class-properties 7.5.5 → 7.10.1 +@babel/preset-env 7.5.5 → 7.10.1 +@babel/preset-react 7.0.0 → 7.10.1 +eslint-config-prettier 6.0.0 → 6.11.0 +eslint-plugin-prettier 3.1.0 → 3.1.3 +eslint-plugin-react 7.14.3 → 7.20.0 +prettier 1.18.2 → 2.0.5 +typescript 3.5.3 → 3.9.3 +``` + +### Warning + +_While in development some of the plugins that were used for this product will throw some warnings - note, this only happens in development, the UI or the functionality of the product is not affected, also, if the issues will persist in React 17, we'll drop usage of those plugins, and replace them with other ones._ +_Warnings might appear while doing an npm install - they do not affect the UI or the functionality of the product, and they appear because of NodeJS and not from the product itself._ + +## [1.8.0] 2019.08.26 + +### Bug fixing + +- Rewrote the ISSUE_TEMPLATE +- Deleted the copyright comments from all files, we only need to keep them inside our index.js and index.html +- Added script that adds copyrights to the built app +- Renamed all the files from `.jsx` to `.js` +- Changed the `withStyles` function from Material-UI with the `makeStyles` function (integration with other frameworks should now be easy) +- React Hooks is now supported + +### Major style changes + +- `src/assets/scss/plugins/_plugin-nouislider.scss` + +### Deleted components + +### Added components + +### Deleted dependencies + +### Added dependencies + +- gulp@4.0.2 +- gulp-append-prepend@1.0.8 + +### Updated dependencies + +``` +@material-ui/core 4.1.0 → 4.3.2 +@material-ui/icons 4.1.0 → 4.2.1 +nouislider 13.1.5 → 14.0.2 +react 16.8.6 → 16.9.0 +react-dom 16.8.6 → 16.9.0 +react-scripts 3.0.1 → 3.1.0 +react-slick 0.24.0 → 0.25.2 +@babel/cli 7.4.4 → 7.5.5 +@babel/plugin-proposal-class-properties 7.4.4 → 7.5.5 +@babel/preset-env 7.4.5 → 7.5.5 +eslint-config-prettier 4.3.0 → 6.0.0 +eslint-plugin-react 7.13.0 → 7.14.3 +typescript 3.5.1 → 3.5.3 +``` + +## [1.7.0] 2019-06-19 + +### Warning + +**We've skipped versions 1.5.0, 1.6.0 so that all React Material products would be on the same version.** + +### Bug fixing + +- Bugs from updated dependencies +- Removed `.env` file, and replaced it with the `jsconfig.json` file +- Changes caused by running [the prettier command](https://prettier.io/docs/en/install.html) for _.jsx_, _.js_, _.html_ and _.css_ files +- Changed all string refs to `React.createRef()` +- Added types validation in each component +- Solved linting issues +- Solved https://github.com/creativetimofficial/material-kit-react/issues/52 +- Solved https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues/149 + +### Major style changes + +### Deleted components + +### Added components + +### Deleted dependencies + +### Added dependencies + +- eslint-plugin-react@7.13.0 +- prettier@1.18.2 (To stop console warnings on install) +- typescript@3.5.1 (To stop console warnings on install) + +### Updated dependencies + +``` +@material-ui/core 3.9.2 → 4.1.0 +@material-ui/icons 3.0.2 → 4.1.0 +history 4.7.2 → 4.9.0 +node-sass 4.11.0 → 4.12.0 +nouislider 13.1.0 → 13.1.5 +prop-types 15.7.1 → 15.7.2 +react 16.8.1 → 16.8.6 +react-dom 16.8.1 → 16.8.6 +react-router-dom 4.3.1 → 5.0.1 +react-scripts 2.1.5 → 3.0.1 +react-slick 0.23.2 → 0.24.0 +react-swipeable-views 0.13.1 → 0.13.3 +@babel/cli 7.2.3 → 7.4.4 +@babel/plugin-proposal-class-properties 7.3.0 → 7.4.4 +@babel/preset-env 7.3.1 → 7.4.5 +eslint-config-prettier 4.0.0 → 4.3.0 +eslint-plugin-prettier 3.0.1 → 3.1.0 +``` + +## [1.4.0] 2019-02-13 + +### Bug fixing + +- https://github.com/creativetimofficial/material-kit-react/issues/46 +- https://github.com/creativetimofficial/material-kit-react/issues/44 +- Updated available scripts +- Changed the _.babelrc_ file + +### Major style changes + +- **src/assets/jss/material-kit-react/components/headerStyle.jsx** +- **src/assets/jss/material-kit-react/components/customDropdownStyle.jsx** + +### Major components changes + +- - Changes caused by running [the prettier command](https://prettier.io/docs/en/install.html) for _.jsx_, _.js_, _.html_ and _.css_ files +- **src/components/CustomDropdown/CustomDropdown.jsx** + +### Deleted dependencies + +- `babel-eslint` +- `eslint` +- `eslint-plugin-react` +- `prettier` +- `npm-run-all` +- `babel-cli` +- `babel-plugin-module-resolver` +- `babel-plugin-import-rename` +- `babel-plugin-transform-object-rest-spread` +- `babel-plugin-transform-react-jsx` +- `babel-preset-es2015` +- `node-sass-chokidar` + +### Added dependencies + +- `@babel/cli` version: **7.2.3** +- `@babel/plugin-proposal-class-properties` version: **7.3.0** +- `@babel/preset-env` version: **7.3.1** +- `@babel/preset-react` version: **7.0.0** +- `node-sass` version: **4.11.0** + +### Updated dependencies + +- `@material-ui/core` _3.1.1_ → **3.9.2** +- `@material-ui/icons` _3.0.1_ → **3.0.2** +- `moment` _2.22.2_ → **2.24.0** +- `node-sass-chokidar` _1.3.3_ → **1.3.4** +- `nouislider` _12.0.0_ → **13.1.0** +- `npm-run-all` _4.1.3_ → **4.1.5** +- `prop-types` _15.6.2_ → **15.7.1** +- `react` _16.5.2_ → **16.8.1** +- `react-datetime` _2.15.0_ → **2.16.3** +- `react-dom` _16.5.2_ → **16.8.1** +- `react-scripts` _1.1.4_ → **2.1.5** +- `react-slick` _0.23.1_ → **0.23.2** +- `react-swipeable-views` _0.13.0_ → **0.13.1** +- `babel-plugin-module-resolver` _3.1.1_ → **3.1.3** +- `eslint-config-prettier` _3.1.0_ → **4.0.0** +- `eslint-plugin-prettier` _2.6.2_ → **3.0.1** + +## [1.3.0] 2018-08-16 + +### Bug fixing + +- Github own repo + - [https://github.com/creativetimofficial/material-kit-react/issues/36](https://github.com/creativetimofficial/material-kit-react/issues/36) +- Github othe repos + - [https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues/79](https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues/79) + +### Major styling changes + +- `src/assets/jss/material-kit-react/components/headerStyle.jsx` +- `src/assets/jss/material-kit-react/components/snackbarContentStyle.jsx` +- `src/assets/jss/material-kit-react/views/loginPage.jsx` +- `src/assets/jss/material-kit-react/customCheckboxRadioSwitch.jsx` +- `src/assets/scss/plugins/_plugin-nouislider.scss` + +### Deleted dependencies + +- `react-nouislider` + +### Added dependencies + +- `nouislider` `12.0.0` + +### Updated dependencies + +- `@material-ui/core` `1.5.0` → `3.1.1` +- `@material-ui/icons` `2.0.2` → `3.0.1` +- `react` `16.4.2` → `16.5.2` +- `react-dom` `16.4.2` → `16.5.2` +- `react-scripts` `1.1.4` → `1.1.5` +- `react-swipeable-views` `0.12.16` → `0.13.0` +- `eslint-config-prettier` `2.9.0` → `3.1.0` +- `eslint-plugin-react` `7.10.0` → `7.11.1` +- `prettier` `1.13.7` → `1.14.3` + +## [1.2.0] 2018-08-16 + +### Bug fixing + +- Added new script command for clean install of node_modules (just run in terminal `npm run install:clean`, this will also start your server) +- Added lint commands +- Minor changes in components due to the upgrade of `@material-ui/icons` +- Github + - [https://github.com/creativetimofficial/material-kit-react/issues/16](https://github.com/creativetimofficial/material-kit-react/issues/16) + - [https://github.com/creativetimofficial/material-kit-react/issues/25](https://github.com/creativetimofficial/material-kit-react/issues/25) + - [https://github.com/creativetimofficial/material-kit-react/issues/26](https://github.com/creativetimofficial/material-kit-react/issues/26) + - [https://github.com/creativetimofficial/material-kit-react/issues/28](https://github.com/creativetimofficial/material-kit-react/issues/28) + +### Major styling changes + +- Added styles for `svg`'s, **font-awesome** classes and `.material-icons` class inside + - `src/assets/jss/material-kit-react/components/buttonStyle.jsx` + - `src/assets/jss/material-kit-react/components/customInputStyle.jsx` + - `src/assets/jss/material-kit-react/components/customDropdownStyle.jsx` + - `src/assets/jss/material-kit-react/components/headerLinksStyle.jsx` + - `src/assets/jss/material-kit-react/components/headerStyle.jsx` + - `src/assets/jss/material-kit-react/views/loginPage.jsx` + +### Dropped components + +- No more use of `react-popper`, no it's beeing used `@material-ui/core/Popper` instead (see `CustomDropdown`) + +### Deleted dependencies + +### Added dependencies + +- `prop-types v15.6.2` +- `classnames v2.2.6` + +### Updated dependencies + +- `@material-ui/core v1.2.1` to `@material-ui/core v1.5.0` +- `@material-ui/icons v1.1.0` to `@material-ui/icons v2.0.2` +- `ajv v6.0.0` to `ajv v6.5.2` +- `node-sass-chokidar v1.3.0` to `node-sass-chokidar v1.3.3` +- `react v16.4.0` to `react v16.4.2` +- `react-datetime v2.14.0` to `react-datetime v2.15.0` +- `react-dom v16.4.0` to `react-dom v16.4.2` +- `react-swipeable-views v0.12.13` to `react-swipeable-views v0.12.16` + +## [1.1.0] 2018-06-13 + +### Major styling changes + +- `src/assets/jss/material-kit-react/components/buttonStyle.jsx`, due to the fact that we've droped `src/components/CustomButtons/IconButton.jsx` +- `src/assets/jss/material-kit-react/components/customInputStyle.jsx` +- `src/assets/jss/material-kit-react/components/customTabsStyle.jsx` +- `src/assets/jss/material-kit-react/components/headerLinksStyle.jsx` + +### Dropped components + +- `src/components/CustomButtons/IconButton.jsx` instead use `src/components/CustomButtons/Button.jsx` (with the prop `justIcon` on them) + +### Deleted dependencies + +- `material-ui@1.0.0-beta.45` + +### Added dependencies + +- `material-ui/core@1.2.1` (instead of `material-ui@1.0.0-beta.45`) +- `ajv@6.0.0` (to stop the warning: **npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.**) + +### Updated dependencies + +- `@material-ui/icons@1.0.0-beta.43` to `@material-ui/icons@1.1.0` +- `moment@2.22.1` to `moment@2.22.2` +- `node-sass-chokidar@1.2.2` to `node-sass-chokidar@1.3.0` +- `npm-run-all@4.1.2` to `npm-run-all@4.1.3` +- `react@16.3.1` to `react@16.4.0` +- `react-dom@16.3.1` to `react-dom@16.4.0` +- `react-router-dom@4.2.2` to `react-router-dom@4.3.1` + +### Bug fixing + +- Added `maxHeight` in styling sheets for those components that had `height` set in `vh` (these changes were made because on an iframe the product would scroll forever) +- Changed the imports from Material-UI (now they are with `@material-ui/core` instead of `material-ui`) +- Dropped some styling on some pages/section of pages due to the change of the buttons styling + +## [1.0.0] 2018-05-08 + +### Original Release + +- Added Material-UI as base framework +- Added design from Material Dashboard by Creative Tim diff --git a/material-kit-react-main/material-kit-react-main/ISSUE_TEMPLATE.md b/material-kit-react-main/material-kit-react-main/ISSUE_TEMPLATE.md new file mode 100644 index 0000000..2eb970f --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/ISSUE_TEMPLATE.md @@ -0,0 +1,13 @@ + + + diff --git a/material-kit-react-main/material-kit-react-main/README.md b/material-kit-react-main/material-kit-react-main/README.md new file mode 100644 index 0000000..7e983da --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/README.md @@ -0,0 +1,216 @@ +# [Material Kit 2 React](http://demos.creative-tim.com/material-kit-react/#/?ref=readme-mkr) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?url=https://www.creative-tim.com/product/material-kit-react&text=Check%20Material%20kit%20React%20made%20by%20@CreativeTim%20#webdesign%20#kit%20#materialdesign%20#react%20https://www.creative-tim.com/product/material-kit-react) + +![version](https://img.shields.io/badge/version-2.1.0-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/material-kit-react.svg)](https://github.com/creativetimofficial/material-kit-react/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/material-kit-react.svg)](https://github.com/creativetimofficial/material-kit-react/issues?q=is%3Aissue+is%3Aclosed) + +![Image](https://s3.amazonaws.com/creativetim_bucket/products/83/original/material-kit-2-react.jpg) + +Material Kit 2 React is our newest free MUI Design System based on React. Its amazing design is inspired by Material Design and contains all the components you need for your development. If you’re a developer looking to create good-looking websites, rich with features, and highly customisable, here is your match. + +_Fully Coded Elements_ +Material Kit 2 React is built with over 40 frontend individual elements, like buttons, inputs, navbars, alerts or cards, giving you the freedom of choosing and combining. All components can take variations in color, which you can easily modify using MUI styled() API and sx prop. You will save a lot of time going from prototyping to full-functional code because all elements are implemented. + +This free MUI & React template is coming with pre-built design blocks, so the development process is seamless, +switching from our pages to the real website is very easy to be done. +View all components here. (https://www.creative-tim.com/learning-lab/react/alerts/material-kit/) + +_Documentation built by Developers_ +Each element is well presented in very complex documentation. +You can read more about the documentation here (https://www.creative-tim.com/learning-lab/react/overview/material-kit/). + +_Example Pages_ +If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our pre-built example pages. You will be able to quickly set up the basic structure for your web project. + +View example pages here. (https://demos.creative-tim.com/material-kit-react/#/pages/landing-pages/about-us) + +**HELPFUL LINKS** + +- View [Github Repository](https://github.com/creativetimofficial/material-kit-react) +- Check [FAQ Page](https://www.creative-tim.com/faq) + +#### Special thanks + +During the development of this dashboard, we have used many existing resources from awesome developers. We want to thank them for providing their tools open source: + +- [MUI](https://mui.com/) - The React UI library for faster and easier web development. +- [React Flatpickr](https://github.com/haoxins/react-flatpickr) - Useful library used to select date. +- [React Copy to Clipboard](https://github.com/nkbt/react-copy-to-clipboard) - Useful library used for copying data to the clipboard. +- [React Countup](https://github.com/glennreyes/react-countup) - A lightweight React component that can be used to quickly create animations that display numerical data in a more interesting way. +- [React Syntax Highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter) - Syntax highlighting component for react with prismjs or highlightjs ast using inline styles. +- [ChromaJS](https://gka.github.io/chroma.js/) - A small-ish zero-dependency JavaScript library for all kinds of color conversions and color scales. +- [Nepcha Analytics](https://nepcha.com?ref=readme) for the analytics tool. Nepcha is already integrated with Material Kit 2 React. You can use it to gain insights into your sources of traffic. + +Let us know your thoughts below. And good luck with development! + +## Table of Contents + +- [Versions](#versions) +- [Demo](#demo) +- [Quick Start](#quick-start) +- [Deploy](#deploy) +- [Documentation](#documentation) +- [File Structure](#file-structure) +- [Browser Support](#browser-support) +- [Resources](#resources) +- [Reporting Issues](#reporting-issues) +- [Technical Support or Questions](#technical-support-or-questions) +- [Licensing](#licensing) +- [Useful Links](#useful-links) + +## Versions + +[](https://www.creative-tim.com/product/material-kit-react?ref=readme-mkr) + +| React | +| ----- | + +| [![Material Kit 2 React](https://s3.amazonaws.com/creativetim_bucket/products/83/thumb/material-kit-2-react.jpg)](http://demos.creative-tim.com/material-kit-react/#/?ref=readme-mkr) + +## Demo + +- [About Us](https://demos.creative-tim.com/material-kit-react/#/pages/landing-pages/about-us?ref=readme-mkr) +- [Contact Us](https://demos.creative-tim.com/material-kit-react/#/pages/landing-pages/contact-us?ref=readme-mkr) +- [Author](https://demos.creative-tim.com/material-kit-react/#/pages/landing-pages/author?ref=readme-mkr) +- [Pricing page](https://demos.creative-tim.com/material-kit-react/#/pages/authentication/sign-in?ref=readme-mkr) + +[View More](https://demos.creative-tim.com/material-kit-react/#/?ref=readme-mkr). + +## Quick start + +Quick start options: + +- Download from [Creative Tim](https://www.creative-tim.com/product/material-kit-react?ref=readme-mkr). + +## Terminal Commands + +1. Download and Install NodeJs LTS version from [NodeJs Official Page](https://nodejs.org/en/download/). +2. Navigate to the root ./ directory of the product and run `yarn install` or `npm install` to install our local dependencies. + +## Deploy + +:rocket: You can deploy your own version of the template to Genezio with one click: + +[![Deploy to Genezio](https://raw.githubusercontent.com/Genez-io/graphics/main/svg/deploy-button.svg)](https://app.genez.io/start/deploy?repository=https://github.com/creativetimofficial/material-kit-react&utm_source=github&utm_medium=referral&utm_campaign=github-creativetim&utm_term=deploy-project&utm_content=button-head) + +## Documentation + +The documentation for the Material Dashboard is hosted at our [website](https://www.creative-tim.com/learning-lab/react/overview/material-kit/?ref=readme-mkr). + +### What's included + +Within the download you'll find the following directories and files: + +``` +material-kit-2-react + ├── public + │   ├── apple-icon.png + │   ├── favicon.png + │   ├── index.html + │   ├── manifest.json + │   └── robots.txt + ├── src + │   ├── assets + │ │   ├── images + │ │   ├── theme + │ │ │ ├── base + │ │ │  ├── components + │ │ │  ├── functions + │ │ └── └── index.js + │   ├── components + │ │   ├── MKAlert + │ │   ├── MKAvatar + │ │   ├── MKBadge + │ │   ├── MKBox + │ │   ├── MKButton + │ │   ├── MKDatePicker + │ │   ├── MKInput + │ │   ├── MKPagination + │ │   ├── MKrogress + │ │   ├── MKSocialButton + │ │   └── MKTypography + │   ├── examples + │ │   ├── Breadcrumbs + │ │   ├── Cards + │ │   ├── Footer + │ │   └── Navbars + │   ├── layouts + │ │   ├── pages + │ │ │  ├── authentication + │ │ │  ├── landing-pages + │ │ │ └── presentation + │ │   ├── sections + │ │ │  ├── attention-catchers + │ │ │  ├── components + │ │ │  ├── elements + │ │ │  ├── input-areas + │ │ │  ├── navigation + │ │ └── └── page-sections + │   ├── pages + │ │   ├── LandingPages + │ │ └── Presentation + │   ├── App.js + │   ├── index.js + │   ├── footer.routes.js + │   └── routes.js + ├── .eslintrc.json + ├── .prettierrc.json + ├── CHANGELOG.md + ├── ISSUE_TEMPLATE.md + ├── jsconfig.json + ├── package.json + └── README.md +``` + +## Browser Support + +At present, we officially aim to support the last two versions of the following browsers: + + + +## Resources + +- [Live Preview](https://demos.creative-tim.com/material-kit-react/#/?ref=readme-mkr) +- [Buy Page](https://www.creative-tim.com/product/material-kit-react?ref=readme-mkr) +- Documentation is [here](https://www.creative-tim.com/learning-lab/react/overview/material-kit/?ref=readme-mkr) +- [License Agreement](https://www.creative-tim.com/license?ref=readme-mkr) +- [Support](https://www.creative-tim.com/contact-us?ref=readme-mkr) +- Issues: [Github Issues Page](https://github.com/creativetimofficial/ct-material-kit-react/issues) +- [Nepcha Analytics](https://nepcha.com?ref=readme) - Analytics tool for your website + +## Reporting Issues + +We use GitHub Issues as the official bug tracker for the Material Kit 2 React. Here are some advices for our users that want to report an issue: + +1. Make sure that you are using the latest version of the Material Kit 2 React. Check the CHANGELOG from your dashboard on our [website](https://www.creative-tim.com/product/material-kit-react?ref=readme-mkr). +2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed. +3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help. + +## Technical Support or Questions + +If you have questions or need help integrating the product please [contact us](https://www.creative-tim.com/contact-us?ref=readme-mkr) instead of opening an issue. + +## Licensing + +- Copyright 2023 [Creative Tim](https://www.creative-tim.com?ref=readme-mkr) +- Creative Tim [license](https://www.creative-tim.com/license?ref=readme-mkr) + +## Useful Links + +- [More products](https://www.creative-tim.com/templates?ref=readme-mkr) from Creative Tim + +- [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w) + +- [Freebies](https://www.creative-tim.com/bootstrap-themes/free?ref=readme-mkr) from Creative Tim + +- [Affiliate Program](https://www.creative-tim.com/affiliates/new?ref=readme-mkr) (earn money) + +##### Social Media + +Twitter: + +Facebook: + +Dribbble: + +Google+: + +Instagram: diff --git a/material-kit-react-main/material-kit-react-main/genezio.yaml b/material-kit-react-main/material-kit-react-main/genezio.yaml new file mode 100644 index 0000000..0a120c4 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/genezio.yaml @@ -0,0 +1,18 @@ +# The name of the project. +name: material-kit-react +# The region where the project is deployed. +region: us-east-1 +# The version of the Genezio YAML configuration to parse. +yamlVersion: 2 +# Information about the frontend, including the path, language, and publish directory. +# It is optional. It can also be an array if there are multiple frontends you want to deploy. +frontend: + # The folder where the frontend scripts will run. + path: ./ + # The directory that will be published to the CDN. It is relative to the path. + publish: ./build + scripts: + # List of scripts that build your frontend before deployment. It should populate the specified `publish` directory. + build: npm run build + # List of scripts to run before deploying the frontend. + deploy: npm install diff --git a/material-kit-react-main/material-kit-react-main/jsconfig.json b/material-kit-react-main/material-kit-react-main/jsconfig.json new file mode 100644 index 0000000..256380f --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "baseUrl": "src", + "paths": { + "*": ["src/*"] + } + } +} diff --git a/material-kit-react-main/material-kit-react-main/package.json b/material-kit-react-main/material-kit-react-main/package.json new file mode 100644 index 0000000..8fadc36 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/package.json @@ -0,0 +1,75 @@ +{ + "name": "material-kit-2-react", + "version": "2.1.0", + "private": true, + "author": "Creative Tim", + "license": "See license in https://www.creative-tim.com/license", + "description": "React version of Material Kit 2 by Creative Tim", + "bugs": { + "url": "https://github.com/creativetimofficial/ct-material-kit-react/issues" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/creativetimofficial/ct-material-kit-react.git" + }, + "dependencies": { + "@emotion/cache": "11.10.7", + "@emotion/react": "11.10.6", + "@emotion/styled": "11.10.6", + "@mui/icons-material": "5.11.16", + "@mui/material": "5.12.0", + "@mui/styled-engine": "5.12.0", + "@testing-library/jest-dom": "5.16.5", + "@testing-library/react": "14.0.0", + "@testing-library/user-event": "14.4.3", + "chroma-js": "2.4.2", + "flatpickr": "4.6.13", + "prop-types": "15.8.1", + "react": "18.2.0", + "react-copy-to-clipboard": "5.1.0", + "react-countup": "6.4.2", + "react-dom": "18.2.0", + "react-flatpickr": "3.10.13", + "react-router-dom": "6.10.0", + "react-scripts": "5.0.1", + "react-syntax-highlighter": "15.5.0", + "web-vitals": "3.3.1" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject", + "lint": "eslint ./src", + "prettify": "prettier --write ." + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, + "devDependencies": { + "ajv": "^7.2.4", + "eslint": "8.38.0", + "eslint-config-prettier": "8.8.0", + "eslint-plugin-import": "2.27.5", + "eslint-plugin-jsx-a11y": "6.7.1", + "eslint-plugin-prettier": "4.2.1", + "eslint-plugin-react": "7.32.2", + "eslint-plugin-react-hooks": "4.6.0", + "prettier": "2.8.7" + } +} diff --git a/material-kit-react-main/material-kit-react-main/public/apple-icon.png b/material-kit-react-main/material-kit-react-main/public/apple-icon.png new file mode 100644 index 0000000..08664e1 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/public/apple-icon.png differ diff --git a/material-kit-react-main/material-kit-react-main/public/favicon.png b/material-kit-react-main/material-kit-react-main/public/favicon.png new file mode 100644 index 0000000..08664e1 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/public/favicon.png differ diff --git a/material-kit-react-main/material-kit-react-main/public/index.html b/material-kit-react-main/material-kit-react-main/public/index.html new file mode 100644 index 0000000..fedc2ef --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/public/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + Material Kit 2 React by Creative Tim + + + + + + + + + + +
+ + diff --git a/material-kit-react-main/material-kit-react-main/public/manifest.json b/material-kit-react-main/material-kit-react-main/public/manifest.json new file mode 100644 index 0000000..9e6b232 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "Material Kit", + "name": "Material Kit 2 React", + "icons": [ + { + "src": "favicon.png", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/png" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#1A73E8", + "background_color": "#ffffff" +} diff --git a/material-kit-react-main/material-kit-react-main/public/robots.txt b/material-kit-react-main/material-kit-react-main/public/robots.txt new file mode 100644 index 0000000..e9e57dc --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/material-kit-react-main/material-kit-react-main/src/App.js b/material-kit-react-main/material-kit-react-main/src/App.js new file mode 100644 index 0000000..9809064 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/App.js @@ -0,0 +1,64 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useEffect } from "react"; + +// react-router components +import { Routes, Route, Navigate, useLocation } from "react-router-dom"; + +// @mui material components +import { ThemeProvider } from "@mui/material/styles"; +import CssBaseline from "@mui/material/CssBaseline"; + +// Material Kit 2 React themes +import theme from "assets/theme"; +import Presentation from "layouts/pages/presentation"; + +// Material Kit 2 React routes +import routes from "routes"; + +export default function App() { + const { pathname } = useLocation(); + + // Setting page scroll to 0 when changing the route + useEffect(() => { + document.documentElement.scrollTop = 0; + document.scrollingElement.scrollTop = 0; + }, [pathname]); + + const getRoutes = (allRoutes) => + allRoutes.map((route) => { + if (route.collapse) { + return getRoutes(route.collapse); + } + + if (route.route) { + return ; + } + + return null; + }); + + return ( + + + + {getRoutes(routes)} + } /> + } /> + + + ); +} diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/apple-icon.png b/material-kit-react-main/material-kit-react-main/src/assets/images/apple-icon.png new file mode 100644 index 0000000..08664e1 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/apple-icon.png differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/bg-about-us.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/bg-about-us.jpg new file mode 100644 index 0000000..a29b720 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/bg-about-us.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/bg-coworking.jpeg b/material-kit-react-main/material-kit-react-main/src/assets/images/bg-coworking.jpeg new file mode 100644 index 0000000..df4651d Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/bg-coworking.jpeg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/bg-presentation.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/bg-presentation.jpg new file mode 100644 index 0000000..9292df2 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/bg-presentation.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/bg-sign-in-basic.jpeg b/material-kit-react-main/material-kit-react-main/src/assets/images/bg-sign-in-basic.jpeg new file mode 100644 index 0000000..2564849 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/bg-sign-in-basic.jpeg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/bg2.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/bg2.jpg new file mode 100644 index 0000000..0ac6c05 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/bg2.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/bg3.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/bg3.jpg new file mode 100644 index 0000000..218da7f Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/bg3.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/bruce-mars.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/bruce-mars.jpg new file mode 100644 index 0000000..335cf58 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/bruce-mars.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/city-profile.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/city-profile.jpg new file mode 100644 index 0000000..7fcd1a9 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/city-profile.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/examples/blog-9-4.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/examples/blog-9-4.jpg new file mode 100644 index 0000000..d85643e Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/examples/blog-9-4.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/examples/blog2.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/examples/blog2.jpg new file mode 100644 index 0000000..d05e511 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/examples/blog2.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/examples/testimonial-6-2.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/examples/testimonial-6-2.jpg new file mode 100644 index 0000000..3d2aee6 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/examples/testimonial-6-2.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/examples/testimonial-6-3.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/examples/testimonial-6-3.jpg new file mode 100644 index 0000000..686bebb Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/examples/testimonial-6-3.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/favicon.png b/material-kit-react-main/material-kit-react-main/src/assets/images/favicon.png new file mode 100644 index 0000000..08664e1 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/favicon.png differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/illustrations/illustration-reset.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/illustrations/illustration-reset.jpg new file mode 100644 index 0000000..6eb7826 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/illustrations/illustration-reset.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/ivana-square.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/ivana-square.jpg new file mode 100644 index 0000000..f6308ce Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/ivana-square.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/ivana-squares.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/ivana-squares.jpg new file mode 100644 index 0000000..a63739f Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/ivana-squares.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/logo-ct-dark.png b/material-kit-react-main/material-kit-react-main/src/assets/images/logo-ct-dark.png new file mode 100644 index 0000000..4c2b251 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/logo-ct-dark.png differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-apple.svg b/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-apple.svg new file mode 100644 index 0000000..22e39dc --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-apple.svg @@ -0,0 +1,10 @@ + + + Logos + + + + + + + \ No newline at end of file diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-coinbase.svg b/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-coinbase.svg new file mode 100644 index 0000000..1854688 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-coinbase.svg @@ -0,0 +1,16 @@ + + + Logos + + + + + + + + + + + + + \ No newline at end of file diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-digitalocean.svg b/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-digitalocean.svg new file mode 100644 index 0000000..2c8d8fb --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-digitalocean.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-facebook.svg b/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-facebook.svg new file mode 100644 index 0000000..0997fef --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-facebook.svg @@ -0,0 +1,11 @@ + + + Logos + + + + + + + + \ No newline at end of file diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-nasa.svg b/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-nasa.svg new file mode 100644 index 0000000..282f50f --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-nasa.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-netflix.svg b/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-netflix.svg new file mode 100644 index 0000000..9579c0d --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-netflix.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-pinterest.svg b/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-pinterest.svg new file mode 100644 index 0000000..734ffb1 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-pinterest.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-spotify.svg b/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-spotify.svg new file mode 100644 index 0000000..eb7862f --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-spotify.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-vodafone.svg b/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-vodafone.svg new file mode 100644 index 0000000..b22cbe7 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/images/logos/gray-logos/logo-vodafone.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/macbook.png b/material-kit-react-main/material-kit-react-main/src/assets/images/macbook.png new file mode 100644 index 0000000..16a1776 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/macbook.png differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/products/product-1-min.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/products/product-1-min.jpg new file mode 100644 index 0000000..2f7777d Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/products/product-1-min.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/products/product-2-min.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/products/product-2-min.jpg new file mode 100644 index 0000000..dc4c8c4 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/products/product-2-min.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/products/product-3-min.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/products/product-3-min.jpg new file mode 100644 index 0000000..8b7dd63 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/products/product-3-min.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/products/product-5-min.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/products/product-5-min.jpg new file mode 100644 index 0000000..7f48d17 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/products/product-5-min.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/products/product-6-min.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/products/product-6-min.jpg new file mode 100644 index 0000000..68e5995 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/products/product-6-min.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/products/product-7-min.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/products/product-7-min.jpg new file mode 100644 index 0000000..6b1d37d Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/products/product-7-min.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/rotating-card-bg-back.jpeg b/material-kit-react-main/material-kit-react-main/src/assets/images/rotating-card-bg-back.jpeg new file mode 100644 index 0000000..0ff65fc Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/rotating-card-bg-back.jpeg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/rotating-card-bg-front.jpeg b/material-kit-react-main/material-kit-react-main/src/assets/images/rotating-card-bg-front.jpeg new file mode 100644 index 0000000..8dc5dbd Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/rotating-card-bg-front.jpeg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/shapes/waves-white.svg b/material-kit-react-main/material-kit-react-main/src/assets/images/shapes/waves-white.svg new file mode 100644 index 0000000..b2f04fd --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/images/shapes/waves-white.svg @@ -0,0 +1,324 @@ + + + Artboard + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/small-logos/icon-sun-cloud.png b/material-kit-react-main/material-kit-react-main/src/assets/images/small-logos/icon-sun-cloud.png new file mode 100644 index 0000000..25643d6 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/small-logos/icon-sun-cloud.png differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/team-1.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/team-1.jpg new file mode 100644 index 0000000..8f95305 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/team-1.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/team-2.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/team-2.jpg new file mode 100644 index 0000000..976c115 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/team-2.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/team-3.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/team-3.jpg new file mode 100644 index 0000000..324ad7d Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/team-3.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/team-4.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/team-4.jpg new file mode 100644 index 0000000..abfa43f Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/team-4.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/images/team-5.jpg b/material-kit-react-main/material-kit-react-main/src/assets/images/team-5.jpg new file mode 100644 index 0000000..8b7f184 Binary files /dev/null and b/material-kit-react-main/material-kit-react-main/src/assets/images/team-5.jpg differ diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/base/borders.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/base/borders.js new file mode 100644 index 0000000..98ec390 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/base/borders.js @@ -0,0 +1,51 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + * The base border styles for the Material Kit 2 React. + * You can add new border width, border color or border radius using this file. + * You can customized the borders value for the entire Material Kit 2 React using thie file. + */ + +// Material Kit 2 React Base Styles +import colors from "assets/theme/base/colors"; + +// Material Kit 2 React Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { grey } = colors; + +export default { + borderColor: grey[300], + + borderWidth: { + 0: 0, + 1: pxToRem(1), + 2: pxToRem(2), + 3: pxToRem(3), + 4: pxToRem(4), + 5: pxToRem(5), + }, + + borderRadius: { + xs: pxToRem(1.6), + sm: pxToRem(2), + md: pxToRem(6), + lg: pxToRem(8), + xl: pxToRem(12), + xxl: pxToRem(16), + section: pxToRem(160), + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/base/boxShadows.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/base/boxShadows.js new file mode 100644 index 0000000..e4652b8 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/base/boxShadows.js @@ -0,0 +1,116 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + * The base box-shadow styles for the Material Kit 2 React. + * You can add new box-shadow using this file. + * You can customized the box-shadow for the entire Material Kit 2 React using thie file. + */ + +// Material Kit 2 React Base Styles +import colors from "assets/theme/base/colors"; + +// Material Kit 2 React Helper Functions +import boxShadow from "assets/theme/functions/boxShadow"; + +const { black, white, tabs, coloredShadows } = colors; + +export default { + xs: boxShadow([0, 2], [9, -5], black.main, 0.15), + sm: boxShadow([0, 5], [10, 0], black.main, 0.12), + md: `${boxShadow([0, 4], [6, -1], black.main, 0.1)}, ${boxShadow( + [0, 2], + [4, -1], + black.main, + 0.06 + )}`, + lg: `${boxShadow([0, 10], [15, -3], black.main, 0.1)}, ${boxShadow( + [0, 4], + [6, -2], + black.main, + 0.05 + )}`, + xl: `${boxShadow([0, 20], [25, -5], black.main, 0.1)}, ${boxShadow( + [0, 10], + [10, -5], + black.main, + 0.04 + )}`, + xxl: boxShadow([0, 20], [27, 0], black.main, 0.05), + inset: boxShadow([0, 1], [2, 0], black.main, 0.075, "inset"), + colored: { + primary: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.primary, + 0.4 + )}`, + secondary: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.secondary, + 0.4 + )}`, + info: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.info, + 0.4 + )}`, + success: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.success, + 0.4 + )}`, + warning: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.warning, + 0.4 + )}`, + error: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.error, + 0.4 + )}`, + light: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.light, + 0.4 + )}`, + dark: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.dark, + 0.4 + )}`, + white: `${boxShadow([0, 4], [20, 0], white.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + white.main, + 0.4 + )}`, + }, + + sliderBoxShadow: { + thumb: boxShadow([0, 1], [13, 0], black.main, 0.2), + }, + tabsBoxShadow: { + indicator: boxShadow([0, 1], [5, 1], tabs.indicator.boxShadow, 1), + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/base/breakpoints.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/base/breakpoints.js new file mode 100644 index 0000000..3c5c7da --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/base/breakpoints.js @@ -0,0 +1,31 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + * The base breakpoints for the Material Kit 2 React. + * You can add new breakpoints using this file. + * You can customized the breakpoints for the entire Material Kit 2 React using thie file. + */ + +export default { + values: { + xs: 0, + sm: 576, + md: 768, + lg: 992, + xl: 1200, + xxl: 1400, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/base/colors.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/base/colors.js new file mode 100644 index 0000000..d403987 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/base/colors.js @@ -0,0 +1,261 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + * The base colors for the Material Kit 2 React. + * You can add new color using this file. + * You can customized the colors for the entire Material Kit 2 React using thie file. + */ + +export default { + background: { + default: "#f0f2f5", + }, + + text: { + main: "#7b809a", + focus: "#7b809a", + }, + + transparent: { + main: "transparent", + }, + + white: { + main: "#ffffff", + focus: "#ffffff", + }, + + black: { + light: "#000000", + main: "#000000", + focus: "#000000", + }, + + primary: { + main: "#e91e63", + focus: "#e91e63", + }, + + secondary: { + main: "#7b809a", + focus: "#8f93a9", + }, + + info: { + main: "#1A73E8", + focus: "#1662C4", + }, + + success: { + main: "#4CAF50", + focus: "#67bb6a", + }, + + warning: { + main: "#fb8c00", + focus: "#fc9d26", + }, + + error: { + main: "#F44335", + focus: "#f65f53", + }, + + light: { + main: "#f0f2f5", + focus: "#f0f2f5", + }, + + dark: { + main: "#344767", + focus: "#2c3c58", + }, + + grey: { + 100: "#f8f9fa", + 200: "#f0f2f5", + 300: "#dee2e6", + 400: "#ced4da", + 500: "#adb5bd", + 600: "#6c757d", + 700: "#495057", + 800: "#343a40", + 900: "#212529", + }, + + gradients: { + primary: { + main: "#EC407A", + state: "#D81B60", + }, + + secondary: { + main: "#747b8a", + state: "#495361", + }, + + info: { + main: "#49a3f1", + state: "#1A73E8", + }, + + success: { + main: "#66BB6A", + state: "#43A047", + }, + + warning: { + main: "#FFA726", + state: "#FB8C00", + }, + + error: { + main: "#EF5350", + state: "#E53935", + }, + + light: { + main: "#EBEFF4", + state: "#CED4DA", + }, + + dark: { + main: "#42424a", + state: "#191919", + }, + }, + + socialMediaColors: { + facebook: { + main: "#3b5998", + dark: "#344e86", + }, + + twitter: { + main: "#55acee", + dark: "#3ea1ec", + }, + + instagram: { + main: "#125688", + dark: "#0e456d", + }, + + linkedin: { + main: "#0077b5", + dark: "#00669c", + }, + + pinterest: { + main: "#cc2127", + dark: "#b21d22", + }, + + youtube: { + main: "#e52d27", + dark: "#d41f1a", + }, + + vimeo: { + main: "#1ab7ea", + dark: "#13a3d2", + }, + + slack: { + main: "#3aaf85", + dark: "#329874", + }, + + dribbble: { + main: "#ea4c89", + dark: "#e73177", + }, + + github: { + main: "#24292e", + dark: "#171a1d", + }, + + reddit: { + main: "#ff4500", + dark: "#e03d00", + }, + + tumblr: { + main: "#35465c", + dark: "#2a3749", + }, + }, + + badgeColors: { + primary: { + background: "#f8b3ca", + text: "#cc084b", + }, + + secondary: { + background: "#d7d9e1", + text: "#6c757d", + }, + + info: { + background: "#aecef7", + text: "#095bc6", + }, + + success: { + background: "#bce2be", + text: "#339537", + }, + + warning: { + background: "#ffd59f", + text: "#c87000", + }, + + error: { + background: "#fcd3d0", + text: "#f61200", + }, + + light: { + background: "#ffffff", + text: "#c7d3de", + }, + + dark: { + background: "#8097bf", + text: "#1e2e4a", + }, + }, + + coloredShadows: { + primary: "#e91e62", + secondary: "#110e0e", + info: "#00bbd4", + success: "#4caf4f", + warning: "#ff9900", + error: "#f44336", + light: "#adb5bd", + dark: "#404040", + }, + + inputBorderColor: "#d2d6da", + + tabs: { + indicator: { boxShadow: "#ddd" }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/base/globals.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/base/globals.js new file mode 100644 index 0000000..234d6a1 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/base/globals.js @@ -0,0 +1,39 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React Base Styles +import colors from "assets/theme/base/colors"; + +const { info, dark } = colors; + +export default { + html: { + scrollBehavior: "smooth", + }, + "*, *::before, *::after": { + margin: 0, + padding: 0, + }, + "a, a:link, a:visited": { + textDecoration: "none !important", + }, + "a.link, .link, a.link:link, .link:link, a.link:visited, .link:visited": { + color: `${dark.main} !important`, + transition: "color 150ms ease-in !important", + }, + "a.link:hover, .link:hover, a.link:focus, .link:focus": { + color: `${info.main} !important`, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/base/typography.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/base/typography.js new file mode 100644 index 0000000..0ce3d9d --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/base/typography.js @@ -0,0 +1,205 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + * The base typography styles for the Material Kit 2 React. + * You can add new typography style using this file. + * You can customized the typography styles for the entire Material Kit 2 React using thie file. + */ + +// Material Kit 2 React Base Styles +import colors from "assets/theme/base/colors"; + +// Material Kit 2 React Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { dark } = colors; + +const baseProperties = { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontFamily2: '"Roboto Slab", sans-serif', + fontWeightLighter: 100, + fontWeightLight: 300, + fontWeightRegular: 400, + fontWeightMedium: 600, + fontWeightBold: 700, + fontSizeXXS: pxToRem(10.4), + fontSizeXS: pxToRem(12), + fontSizeSM: pxToRem(14), + fontSizeMD: pxToRem(16), + fontSizeLG: pxToRem(18), + fontSizeXL: pxToRem(20), + fontSize2XL: pxToRem(24), + fontSize3XL: pxToRem(30), +}; + +const baseHeadingProperties = { + color: dark.main, + fontWeight: baseProperties.fontWeightBold, +}; + +const baseDisplayProperties = { + fontFamily: baseProperties.fontFamily, + color: dark.main, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.2, +}; + +const typography = { + fontFamily: baseProperties.fontFamily, + fontWeightLighter: baseProperties.fontWeightLighter, + fontWeightLight: baseProperties.fontWeightLight, + fontWeightRegular: baseProperties.fontWeightRegular, + fontWeightMedium: baseProperties.fontWeightMedium, + fontWeightBold: baseProperties.fontWeightBold, + + h1: { + fontFamily: baseProperties.fontFamily2, + fontSize: pxToRem(48), + lineHeight: 1.25, + ...baseHeadingProperties, + }, + + h2: { + fontFamily: baseProperties.fontFamily2, + fontSize: pxToRem(36), + lineHeight: 1.3, + ...baseHeadingProperties, + }, + + h3: { + fontFamily: baseProperties.fontFamily2, + fontSize: pxToRem(30), + lineHeight: 1.375, + ...baseHeadingProperties, + }, + + h4: { + fontFamily: baseProperties.fontFamily, + fontSize: pxToRem(24), + lineHeight: 1.375, + ...baseHeadingProperties, + }, + + h5: { + fontFamily: baseProperties.fontFamily, + fontSize: pxToRem(20), + lineHeight: 1.375, + ...baseHeadingProperties, + }, + + h6: { + fontFamily: baseProperties.fontFamily, + fontSize: pxToRem(16), + lineHeight: 1.625, + ...baseHeadingProperties, + }, + + subtitle1: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeXL, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.625, + }, + + subtitle2: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeMD, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.6, + }, + + body1: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeXL, + fontWeight: baseProperties.fontWeightRegular, + lineHeight: 1.625, + }, + + body2: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeMD, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.6, + }, + + button: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeSM, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.5, + textTransform: "uppercase", + }, + + caption: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeXS, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.25, + }, + + overline: { + fontFamily: baseProperties.fontFamily, + }, + + d1: { + fontSize: pxToRem(80), + ...baseDisplayProperties, + }, + + d2: { + fontSize: pxToRem(72), + ...baseDisplayProperties, + }, + + d3: { + fontSize: pxToRem(64), + ...baseDisplayProperties, + }, + + d4: { + fontSize: pxToRem(56), + ...baseDisplayProperties, + }, + + d5: { + fontSize: pxToRem(48), + ...baseDisplayProperties, + }, + + d6: { + fontSize: pxToRem(40), + ...baseDisplayProperties, + }, + + size: { + xxs: baseProperties.fontSizeXXS, + xs: baseProperties.fontSizeXS, + sm: baseProperties.fontSizeSM, + md: baseProperties.fontSizeMD, + lg: baseProperties.fontSizeLG, + xl: baseProperties.fontSizeXL, + "2xl": baseProperties.fontSize2XL, + "3xl": baseProperties.fontSize3XL, + }, + + lineHeight: { + sm: 1.25, + md: 1.5, + lg: 2, + }, +}; + +export default typography; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/appBar.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/appBar.js new file mode 100644 index 0000000..053a337 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/appBar.js @@ -0,0 +1,26 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +export default { + defaultProps: { + color: "transparent", + }, + + styleOverrides: { + root: { + boxShadow: "none", + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/avatar.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/avatar.js new file mode 100644 index 0000000..f319c77 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/avatar.js @@ -0,0 +1,35 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import borders from "assets/theme/base/borders"; + +const { borderRadius } = borders; + +export default { + styleOverrides: { + root: { + transition: "all 200ms ease-in-out", + }, + + rounded: { + borderRadius: borderRadius.lg, + }, + + img: { + height: "auto", + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/breadcrumbs.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/breadcrumbs.js new file mode 100644 index 0000000..1fa7904 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/breadcrumbs.js @@ -0,0 +1,34 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +const { grey } = colors; +const { size } = typography; + +export default { + styleOverrides: { + li: { + lineHeight: 0, + }, + + separator: { + fontSize: size.sm, + color: grey[600], + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/button/contained.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/button/contained.js new file mode 100644 index 0000000..1a772e8 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/button/contained.js @@ -0,0 +1,89 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +// Material Kit 2 React Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { white, text, info, secondary } = colors; +const { size } = typography; + +export default { + base: { + backgroundColor: white.main, + minHeight: pxToRem(40), + color: text.main, + padding: `${pxToRem(10)} ${pxToRem(24)}`, + + "&:hover": { + backgroundColor: white.main, + }, + + "&:active, &:active:focus, &:active:hover": { + opacity: 0.85, + }, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(16)} !important`, + }, + }, + + small: { + minHeight: pxToRem(32), + padding: `${pxToRem(6)} ${pxToRem(16)}`, + fontSize: size.xs, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(12)} !important`, + }, + }, + + large: { + minHeight: pxToRem(47), + padding: `${pxToRem(12)} ${pxToRem(28)}`, + fontSize: size.sm, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(22)} !important`, + }, + }, + + primary: { + backgroundColor: info.main, + + "&:hover": { + backgroundColor: info.main, + }, + + "&:focus:not(:hover)": { + backgroundColor: info.focus, + }, + }, + + secondary: { + backgroundColor: secondary.main, + + "&:hover": { + backgroundColor: secondary.main, + }, + + "&:focus:not(:hover)": { + backgroundColor: secondary.focus, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/button/index.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/button/index.js new file mode 100644 index 0000000..f05434c --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/button/index.js @@ -0,0 +1,44 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React Button Styles +import root from "assets/theme/components/button/root"; +import contained from "assets/theme/components/button/contained"; +import outlined from "assets/theme/components/button/outlined"; +import text from "assets/theme/components/button/text"; + +export default { + defaultProps: { + disableRipple: false, + }, + styleOverrides: { + root: { ...root }, + contained: { ...contained.base }, + containedSizeSmall: { ...contained.small }, + containedSizeLarge: { ...contained.large }, + containedPrimary: { ...contained.primary }, + containedSecondary: { ...contained.secondary }, + outlined: { ...outlined.base }, + outlinedSizeSmall: { ...outlined.small }, + outlinedSizeLarge: { ...outlined.large }, + outlinedPrimary: { ...outlined.primary }, + outlinedSecondary: { ...outlined.secondary }, + text: { ...text.base }, + textSizeSmall: { ...text.small }, + textSizeLarge: { ...text.large }, + textPrimary: { ...text.primary }, + textSecondary: { ...text.secondary }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/button/outlined.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/button/outlined.js new file mode 100644 index 0000000..5e1dc3e --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/button/outlined.js @@ -0,0 +1,80 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +// Material Kit 2 React Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { transparent, light, info, secondary } = colors; +const { size } = typography; + +export default { + base: { + minHeight: pxToRem(40), + color: light.main, + borderColor: light.main, + padding: `${pxToRem(10)} ${pxToRem(24)}`, + + "&:hover": { + opacity: 0.75, + backgroundColor: transparent.main, + }, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(16)} !important`, + }, + }, + + small: { + minHeight: pxToRem(32), + padding: `${pxToRem(6)} ${pxToRem(16)}`, + fontSize: size.xs, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(12)} !important`, + }, + }, + + large: { + minHeight: pxToRem(47), + padding: `${pxToRem(12)} ${pxToRem(28)}`, + fontSize: size.sm, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(22)} !important`, + }, + }, + + primary: { + backgroundColor: transparent.main, + borderColor: info.main, + + "&:hover": { + backgroundColor: transparent.main, + }, + }, + + secondary: { + backgroundColor: transparent.main, + borderColor: secondary.main, + + "&:hover": { + backgroundColor: transparent.main, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/button/root.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/button/root.js new file mode 100644 index 0000000..286e059 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/button/root.js @@ -0,0 +1,51 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React Base Styles +import typography from "assets/theme/base/typography"; +import borders from "assets/theme/base/borders"; + +// Material Kit 2 React Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { fontWeightBold, size } = typography; +const { borderRadius } = borders; + +export default { + display: "inline-flex", + justifyContent: "center", + alignItems: "center", + fontSize: size.xs, + fontWeight: fontWeightBold, + borderRadius: borderRadius.lg, + padding: `${pxToRem(6.302)} ${pxToRem(16.604)}`, + lineHeight: 1.4, + textAlign: "center", + textTransform: "uppercase", + userSelect: "none", + backgroundSize: "150% !important", + backgroundPositionX: "25% !important", + transition: "all 150ms ease-in", + + "&:disabled": { + pointerEvent: "none", + opacity: 0.65, + }, + + "& .material-icons": { + fontSize: pxToRem(15), + marginTop: pxToRem(-2), + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/button/text.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/button/text.js new file mode 100644 index 0000000..4f477c4 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/button/text.js @@ -0,0 +1,102 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +// Material Kit 2 React Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { text, info, secondary, transparent } = colors; +const { size } = typography; + +export default { + base: { + backgroundColor: transparent.main, + minHeight: pxToRem(40), + color: text.main, + boxShadow: "none", + padding: `${pxToRem(10)} ${pxToRem(24)}`, + + "&:hover": { + backgroundColor: transparent.main, + boxShadow: "none", + }, + + "&:focus": { + boxShadow: "none", + }, + + "&:active, &:active:focus, &:active:hover": { + opacity: 0.85, + boxShadow: "none", + }, + + "&:disabled": { + boxShadow: "none", + }, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(16)} !important`, + }, + }, + + small: { + minHeight: pxToRem(32), + padding: `${pxToRem(6)} ${pxToRem(16)}`, + fontSize: size.xs, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(12)} !important`, + }, + }, + + large: { + minHeight: pxToRem(47), + padding: `${pxToRem(12)} ${pxToRem(28)}`, + fontSize: size.sm, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(22)} !important`, + }, + }, + + primary: { + color: info.main, + + "&:hover": { + color: info.main, + }, + + "&:focus:not(:hover)": { + color: info.focus, + boxShadow: "none", + }, + }, + + secondary: { + color: secondary.main, + + "&:hover": { + color: secondary.main, + }, + + "&:focus:not(:hover)": { + color: secondary.focus, + boxShadow: "none", + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/buttonBase.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/buttonBase.js new file mode 100644 index 0000000..ccf73aa --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/buttonBase.js @@ -0,0 +1,20 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +export default { + defaultProps: { + disableRipple: false, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/card/cardContent.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/card/cardContent.js new file mode 100644 index 0000000..2e40254 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/card/cardContent.js @@ -0,0 +1,27 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +export default { + styleOverrides: { + root: { + marginTop: 0, + marginBottom: 0, + padding: `${pxToRem(8)} ${pxToRem(24)} ${pxToRem(24)}`, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/card/cardMedia.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/card/cardMedia.js new file mode 100644 index 0000000..1211457 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/card/cardMedia.js @@ -0,0 +1,35 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React Base Styles +import borders from "assets/theme/base/borders"; + +// Material Kit 2 React Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { borderRadius } = borders; + +export default { + styleOverrides: { + root: { + borderRadius: borderRadius.xl, + margin: `${pxToRem(16)} ${pxToRem(16)} 0`, + }, + + media: { + width: "auto", + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/card/index.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/card/index.js new file mode 100644 index 0000000..82f3316 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/card/index.js @@ -0,0 +1,44 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React Base Styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; +import boxShadows from "assets/theme/base/boxShadows"; + +// Material Kit 2 React Helper Function +import rgba from "assets/theme/functions/rgba"; + +const { black, white } = colors; +const { borderWidth, borderRadius } = borders; +const { md } = boxShadows; + +export default { + styleOverrides: { + root: { + display: "flex", + flexDirection: "column", + position: "relative", + minWidth: 0, + wordWrap: "break-word", + backgroundColor: white.main, + backgroundClip: "border-box", + border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`, + borderRadius: borderRadius.xl, + boxShadow: md, + overflow: "visible", + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/container.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/container.js new file mode 100644 index 0000000..9ca9a82 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/container.js @@ -0,0 +1,72 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import breakpoints from "assets/theme/base/breakpoints"; + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { + values: { sm, md, lg, xl, xxl }, +} = breakpoints; + +const SM = `@media (min-width: ${sm}px)`; +const MD = `@media (min-width: ${md}px)`; +const LG = `@media (min-width: ${lg}px)`; +const XL = `@media (min-width: ${xl}px)`; +const XXL = `@media (min-width: ${xxl}px)`; + +const sharedClasses = { + paddingRight: `${pxToRem(24)} !important`, + paddingLeft: `${pxToRem(24)} !important`, + marginRight: "auto !important", + marginLeft: "auto !important", + width: "100% !important", + position: "relative", +}; + +export default { + [SM]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "540px !important", + }, + }, + [MD]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "720px !important", + }, + }, + [LG]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "960px !important", + }, + }, + [XL]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "1140px !important", + }, + }, + [XXL]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "1320px !important", + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/dialog/dialogActions.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/dialog/dialogActions.js new file mode 100644 index 0000000..3782cc8 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/dialog/dialogActions.js @@ -0,0 +1,25 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +export default { + styleOverrides: { + root: { + padding: pxToRem(16), + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/dialog/dialogContent.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/dialog/dialogContent.js new file mode 100644 index 0000000..dde75cc --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/dialog/dialogContent.js @@ -0,0 +1,41 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import typography from "assets/theme/base/typography"; +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { size } = typography; +const { text } = colors; +const { borderWidth, borderColor } = borders; + +export default { + styleOverrides: { + root: { + padding: pxToRem(16), + fontSize: size.md, + color: text.main, + }, + + dividers: { + borderTop: `${borderWidth[1]} solid ${borderColor}`, + borderBottom: `${borderWidth[1]} solid ${borderColor}`, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/dialog/dialogContentText.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/dialog/dialogContentText.js new file mode 100644 index 0000000..0c63379 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/dialog/dialogContentText.js @@ -0,0 +1,33 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import typography from "assets/theme/base/typography"; +import colors from "assets/theme/base/colors"; + +// Material Kit 2 React helper functions +// import pxToRem from "assets/theme/functions/pxToRem"; + +const { size } = typography; +const { text } = colors; + +export default { + styleOverrides: { + root: { + fontSize: size.md, + color: text.main, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/dialog/dialogTitle.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/dialog/dialogTitle.js new file mode 100644 index 0000000..b3f3c62 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/dialog/dialogTitle.js @@ -0,0 +1,31 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import typography from "assets/theme/base/typography"; + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { size } = typography; + +export default { + styleOverrides: { + root: { + padding: pxToRem(16), + fontSize: size.xl, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/dialog/index.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/dialog/index.js new file mode 100644 index 0000000..1863d4f --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/dialog/index.js @@ -0,0 +1,34 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import borders from "assets/theme/base/borders"; +import boxShadows from "assets/theme/base/boxShadows"; + +const { borderRadius } = borders; +const { xxl } = boxShadows; + +export default { + styleOverrides: { + paper: { + borderRadius: borderRadius.lg, + boxShadow: xxl, + }, + + paperFullScreen: { + borderRadius: 0, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/divider.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/divider.js new file mode 100644 index 0000000..036faeb --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/divider.js @@ -0,0 +1,51 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import colors from "assets/theme/base/colors"; + +// Material Kit 2 React helper functions +import rgba from "assets/theme/functions/rgba"; +import pxToRem from "assets/theme/functions/pxToRem"; + +const { dark, white } = colors; + +export default { + styleOverrides: { + root: { + background: rgba(dark.main, 0.2), + height: pxToRem(1), + margin: `${pxToRem(16)} 0`, + borderBottom: "none", + opacity: 0.25, + }, + + vertical: { + background: rgba(dark.main, 0.2), + width: pxToRem(1), + height: "100%", + margin: `0 ${pxToRem(16)}`, + borderRight: "none", + }, + + light: { + background: rgba(white.main, 0.2), + + "&.MuiDivider-vertical": { + background: rgba(white.main, 0.2), + }, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/flatpickr.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/flatpickr.js new file mode 100644 index 0000000..410cae1 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/flatpickr.js @@ -0,0 +1,53 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import colors from "assets/theme/base/colors"; + +// Material Kit 2 React helper functions +import rgba from "assets/theme/functions/rgba"; + +const { info, white, gradients } = colors; + +export default { + ".flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.nextMonthDay:hover, .flatpickr-day.nextMonthDay:focus": + { + background: rgba(info.main, 0.28), + border: "none", + }, + + ".flatpickr-day.today": { + background: info.main, + color: white.main, + border: "none", + + "&:hover, &:focus": { + background: `${info.focus} !important`, + }, + }, + + ".flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.nextMonthDay.selected, .flatpickr-day.nextMonthDay.selected:hover, .flatpickr-day.nextMonthDay.selected:focus": + { + background: `${gradients.info.state} !important`, + color: white.main, + border: "none", + }, + + ".flatpickr-months .flatpickr-next-month:hover svg, .flatpickr-months .flatpickr-prev-month:hover svg": + { + color: `${info.main} !important`, + fill: `${info.main} !important`, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/autocomplete.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/autocomplete.js new file mode 100644 index 0000000..86abe9a --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/autocomplete.js @@ -0,0 +1,98 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import boxShadows from "assets/theme/base/boxShadows"; +import typography from "assets/theme/base/typography"; +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { lg } = boxShadows; +const { size } = typography; +const { text, white, transparent, light, dark, gradients } = colors; +const { borderRadius } = borders; + +export default { + styleOverrides: { + popper: { + boxShadow: lg, + padding: pxToRem(8), + fontSize: size.sm, + color: text.main, + textAlign: "left", + backgroundColor: `${white.main} !important`, + borderRadius: borderRadius.md, + }, + + paper: { + boxShadow: "none", + backgroundColor: transparent.main, + }, + + option: { + padding: `${pxToRem(4.8)} ${pxToRem(16)}`, + borderRadius: borderRadius.md, + fontSize: size.sm, + color: text.main, + transition: "background-color 300ms ease, color 300ms ease", + + "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { + backgroundColor: light.main, + color: dark.main, + }, + + '&[aria-selected="true"]': { + backgroundColor: `${light.main} !important`, + color: `${dark.main} !important`, + }, + }, + + noOptions: { + fontSize: size.sm, + color: text.main, + }, + + groupLabel: { + color: dark.main, + }, + + loading: { + fontSize: size.sm, + color: text.main, + }, + + tag: { + display: "flex", + alignItems: "center", + height: "auto", + padding: pxToRem(4), + backgroundColor: gradients.dark.state, + color: white.main, + + "& .MuiChip-label": { + lineHeight: 1.2, + padding: `0 ${pxToRem(10)} 0 ${pxToRem(4)}`, + }, + + "& .MuiSvgIcon-root, & .MuiSvgIcon-root:hover, & .MuiSvgIcon-root:focus": { + color: white.main, + marginRight: 0, + }, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/checkbox.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/checkbox.js new file mode 100644 index 0000000..2ea433e --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/checkbox.js @@ -0,0 +1,81 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; +import linearGradient from "assets/theme/functions/linearGradient"; + +const { borderWidth, borderColor } = borders; +const { transparent, info } = colors; + +export default { + styleOverrides: { + root: { + "& .MuiSvgIcon-root": { + backgroundPosition: "center", + backgroundSize: "contain", + backgroundRepeat: "no-repeat", + width: pxToRem(20), + height: pxToRem(20), + color: transparent.main, + border: `${borderWidth[1]} solid ${borderColor}`, + borderRadius: pxToRem(5.6), + }, + + "&:hover": { + backgroundColor: transparent.main, + }, + + "&.Mui-focusVisible": { + border: `${borderWidth[2]} solid ${info.main} !important`, + }, + }, + + colorPrimary: { + color: borderColor, + + "&.Mui-checked": { + color: info.main, + + "& .MuiSvgIcon-root": { + backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient( + info.main, + info.main + )}`, + borderColor: info.main, + }, + }, + }, + + colorSecondary: { + color: borderColor, + + "& .MuiSvgIcon-root": { + color: info.main, + "&.Mui-checked": { + backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient( + info.main, + info.main + )}`, + borderColor: info.main, + }, + }, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/formControlLabel.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/formControlLabel.js new file mode 100644 index 0000000..cdcc935 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/formControlLabel.js @@ -0,0 +1,48 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { dark } = colors; +const { size, fontWeightBold } = typography; + +export default { + styleOverrides: { + root: { + display: "block", + minHeight: pxToRem(24), + marginBottom: pxToRem(2), + }, + + label: { + display: "inline-block", + fontSize: size.sm, + fontWeight: fontWeightBold, + color: dark.main, + lineHeight: 1, + transform: `translateY(${pxToRem(1)})`, + marginLeft: pxToRem(4), + + "&.Mui-disabled": { + color: dark.main, + }, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/formLabel.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/formLabel.js new file mode 100644 index 0000000..e4004d6 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/formLabel.js @@ -0,0 +1,27 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import colors from "assets/theme/base/colors"; + +const { text } = colors; + +export default { + styleOverrides: { + root: { + color: text.main, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/input.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/input.js new file mode 100644 index 0000000..b68cef7 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/input.js @@ -0,0 +1,44 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; +import borders from "assets/theme/base/borders"; + +const { info, inputBorderColor, dark } = colors; +const { size } = typography; +const { borderWidth } = borders; + +export default { + styleOverrides: { + root: { + fontSize: size.sm, + color: dark.main, + + "&:hover:not(.Mui-disabled):before": { + borderBottom: `${borderWidth[1]} solid ${inputBorderColor}`, + }, + + "&:before": { + borderColor: inputBorderColor, + }, + + "&:after": { + borderColor: info.main, + }, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/inputLabel.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/inputLabel.js new file mode 100644 index 0000000..fc4a840 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/inputLabel.js @@ -0,0 +1,58 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +const { text, info } = colors; +const { size } = typography; + +export default { + styleOverrides: { + root: { + fontSize: size.sm, + color: text.main, + lineHeight: 0.9, + + "&.Mui-focused": { + color: info.main, + }, + + "&.MuiInputLabel-shrink": { + lineHeight: 1.5, + fontSize: size.md, + + "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { + fontSize: "0.85em", + }, + }, + }, + + sizeSmall: { + fontSize: size.xs, + lineHeight: 1.625, + + "&.MuiInputLabel-shrink": { + lineHeight: 1.6, + fontSize: size.sm, + + "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { + fontSize: "0.72em", + }, + }, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/inputOutlined.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/inputOutlined.js new file mode 100644 index 0000000..e464bc9 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/inputOutlined.js @@ -0,0 +1,66 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React Base Styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; +import typography from "assets/theme/base/typography"; + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { inputBorderColor, info, grey, transparent } = colors; +const { borderRadius } = borders; +const { size } = typography; + +export default { + styleOverrides: { + root: { + backgroundColor: transparent.main, + fontSize: size.sm, + borderRadius: borderRadius.md, + + "&:hover .MuiOutlinedInput-notchedOutline": { + borderColor: inputBorderColor, + }, + + "&.Mui-focused": { + "& .MuiOutlinedInput-notchedOutline": { + borderColor: info.main, + }, + }, + }, + + notchedOutline: { + borderColor: inputBorderColor, + }, + + input: { + color: grey[700], + padding: pxToRem(12), + backgroundColor: transparent.main, + }, + + inputSizeSmall: { + fontSize: size.xs, + padding: pxToRem(10), + }, + + multiline: { + color: grey[700], + padding: 0, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/radio.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/radio.js new file mode 100644 index 0000000..54c226b --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/radio.js @@ -0,0 +1,95 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; +import linearGradient from "assets/theme/functions/linearGradient"; + +const { borderWidth, borderColor } = borders; +const { transparent, info } = colors; + +export default { + styleOverrides: { + root: { + "& .MuiSvgIcon-root": { + width: pxToRem(20), + height: pxToRem(20), + color: transparent.main, + border: `${borderWidth[1]} solid ${borderColor}`, + borderRadius: "50%", + }, + + "&:after": { + transition: "opacity 250ms ease-in-out", + content: `""`, + position: "absolute", + width: pxToRem(14), + height: pxToRem(14), + borderRadius: "50%", + backgroundImage: linearGradient(info.main, info.main), + opacity: 0, + left: 0, + right: 0, + top: 0, + bottom: 0, + margin: "auto", + }, + + "&:hover": { + backgroundColor: transparent.main, + }, + + "&.Mui-focusVisible": { + border: `${borderWidth[2]} solid ${info.main} !important`, + }, + }, + + colorPrimary: { + color: borderColor, + + "&.Mui-checked": { + color: info.main, + + "& .MuiSvgIcon-root": { + borderColor: info.main, + }, + + "&:after": { + opacity: 1, + }, + }, + }, + + colorSecondary: { + color: borderColor, + + "&.Mui-checked": { + color: info.main, + + "& .MuiSvgIcon-root": { + borderColor: info.main, + }, + + "&:after": { + opacity: 1, + }, + }, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/select.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/select.js new file mode 100644 index 0000000..d4ebd6a --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/select.js @@ -0,0 +1,47 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import colors from "assets/theme/base/colors"; + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { transparent } = colors; + +export default { + styleOverrides: { + select: { + display: "grid", + alignItems: "center", + padding: `0 ${pxToRem(12)} !important`, + + "& .Mui-selected": { + backgroundColor: transparent.main, + }, + }, + + selectMenu: { + background: "none", + height: "none", + minHeight: "none", + overflow: "unset", + }, + + icon: { + display: "none", + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/switchButton.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/switchButton.js new file mode 100644 index 0000000..6844141 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/switchButton.js @@ -0,0 +1,86 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; +import boxShadows from "assets/theme/base/boxShadows"; + +// Material Kit 2 React helper functions +// import rgba from "assets/theme/functions/rgba"; +import pxToRem from "assets/theme/functions/pxToRem"; +import linearGradient from "assets/theme/functions/linearGradient"; + +const { white, gradients, grey, transparent } = colors; +const { borderWidth } = borders; +const { md } = boxShadows; + +export default { + defaultProps: { + disableRipple: false, + }, + + styleOverrides: { + switchBase: { + color: gradients.dark.main, + + "&:hover": { + backgroundColor: transparent.main, + }, + + "&.Mui-checked": { + color: gradients.dark.main, + + "&:hover": { + backgroundColor: transparent.main, + }, + + "& .MuiSwitch-thumb": { + borderColor: `${gradients.dark.main} !important`, + }, + + "& + .MuiSwitch-track": { + backgroundColor: `${gradients.dark.main} !important`, + borderColor: `${gradients.dark.main} !important`, + opacity: 1, + }, + }, + + "&.Mui-disabled + .MuiSwitch-track": { + opacity: "0.3 !important", + }, + + "&.Mui-focusVisible .MuiSwitch-thumb": { + backgroundImage: linearGradient(gradients.info.main, gradients.info.state), + }, + }, + + thumb: { + backgroundColor: white.main, + boxShadow: md, + border: `${borderWidth[1]} solid ${grey[400]}`, + }, + + track: { + width: pxToRem(32), + height: pxToRem(15), + backgroundColor: grey[400], + border: `${borderWidth[1]} solid ${grey[400]}`, + opacity: 1, + }, + + checked: {}, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/textField.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/textField.js new file mode 100644 index 0000000..8818134 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/form/textField.js @@ -0,0 +1,27 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React Base Styles +import colors from "assets/theme/base/colors"; + +const { transparent } = colors; + +export default { + styleOverrides: { + root: { + backgroundColor: transparent.main, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/icon.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/icon.js new file mode 100644 index 0000000..5316089 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/icon.js @@ -0,0 +1,38 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +export default { + defaultProps: { + baseClassName: "material-icons-round", + fontSize: "inherit", + }, + + styleOverrides: { + fontSizeInherit: { + fontSize: "inherit !important", + }, + + fontSizeSmall: { + fontSize: `${pxToRem(20)} !important`, + }, + + fontSizeLarge: { + fontSize: `${pxToRem(36)} !important`, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/iconButton.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/iconButton.js new file mode 100644 index 0000000..92f5a72 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/iconButton.js @@ -0,0 +1,29 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React Base Styles +import colors from "assets/theme/base/colors"; + +const { transparent } = colors; + +export default { + styleOverrides: { + root: { + "&:hover": { + backgroundColor: transparent.main, + }, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/linearProgress.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/linearProgress.js new file mode 100644 index 0000000..a3b3ae9 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/linearProgress.js @@ -0,0 +1,51 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { borderRadius } = borders; +const { light } = colors; + +export default { + styleOverrides: { + root: { + height: pxToRem(6), + borderRadius: borderRadius.md, + overflow: "visible", + position: "relative", + }, + + colorPrimary: { + backgroundColor: light.main, + }, + + colorSecondary: { + backgroundColor: light.main, + }, + + bar: { + height: pxToRem(6), + borderRadius: borderRadius.sm, + position: "absolute", + transform: `translate(0, 0) !important`, + transition: "width 0.6s ease !important", + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/link.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/link.js new file mode 100644 index 0000000..0603951 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/link.js @@ -0,0 +1,21 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +export default { + defaultProps: { + underline: "none", + color: "inherit", + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/list/index.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/list/index.js new file mode 100644 index 0000000..0db380c --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/list/index.js @@ -0,0 +1,23 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +export default { + styleOverrides: { + padding: { + paddingTop: 0, + paddingBottom: 0, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/list/listItem.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/list/listItem.js new file mode 100644 index 0000000..ebb9c39 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/list/listItem.js @@ -0,0 +1,27 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +export default { + defaultProps: { + disableGutters: true, + }, + + styleOverrides: { + root: { + paddingTop: 0, + paddingBottom: 0, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/list/listItemText.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/list/listItemText.js new file mode 100644 index 0000000..1f80565 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/list/listItemText.js @@ -0,0 +1,23 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +export default { + styleOverrides: { + root: { + marginTop: 0, + marginBottom: 0, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/menu/index.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/menu/index.js new file mode 100644 index 0000000..f3b9f61 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/menu/index.js @@ -0,0 +1,47 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import boxShadows from "assets/theme/base/boxShadows"; +import typography from "assets/theme/base/typography"; +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { lg } = boxShadows; +const { size } = typography; +const { text, white } = colors; +const { borderRadius } = borders; + +export default { + defaultProps: { + disableAutoFocusItem: true, + }, + + styleOverrides: { + paper: { + minWidth: pxToRem(160), + boxShadow: lg, + padding: `${pxToRem(16)} ${pxToRem(8)}`, + fontSize: size.sm, + color: text.main, + textAlign: "left", + backgroundColor: `${white.main} !important`, + borderRadius: borderRadius.md, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/menu/menuItem.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/menu/menuItem.js new file mode 100644 index 0000000..0d5dc64 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/menu/menuItem.js @@ -0,0 +1,45 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; +import typography from "assets/theme/base/typography"; + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { light, text, dark } = colors; +const { borderRadius } = borders; +const { size } = typography; + +export default { + styleOverrides: { + root: { + minWidth: pxToRem(160), + minHeight: "unset", + padding: `${pxToRem(4.8)} ${pxToRem(16)}`, + borderRadius: borderRadius.md, + fontSize: size.sm, + color: text.main, + transition: "background-color 300ms ease, color 300ms ease", + + "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { + backgroundColor: light.main, + color: dark.main, + }, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/popover.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/popover.js new file mode 100644 index 0000000..31e463f --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/popover.js @@ -0,0 +1,33 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import colors from "assets/theme/base/colors"; +import boxShadows from "assets/theme/base/boxShadows"; +import borders from "assets/theme/base/borders"; + +const { transparent } = colors; +const { lg } = boxShadows; +const { borderRadius } = borders; + +export default { + styleOverrides: { + paper: { + backgroundColor: transparent.main, + boxShadow: lg, + borderRadius: borderRadius.md, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/slider.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/slider.js new file mode 100644 index 0000000..13d43af --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/slider.js @@ -0,0 +1,79 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; +import boxShadows from "assets/theme/base/boxShadows"; + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; +import boxShadow from "assets/theme/functions/boxShadow"; + +const { grey, white, black, info } = colors; +const { borderRadius, borderWidth } = borders; +const { sliderBoxShadow } = boxShadows; + +export default { + styleOverrides: { + root: { + width: "100%", + + "& .MuiSlider-active, & .Mui-focusVisible": { + boxShadow: "none !important", + }, + + "& .MuiSlider-valueLabel": { + color: black.main, + }, + }, + + rail: { + height: pxToRem(2), + background: grey[200], + borderRadius: borderRadius.sm, + opacity: 1, + }, + + track: { + background: info.main, + height: pxToRem(2), + position: "relative", + border: "none", + borderRadius: borderRadius.lg, + zIndex: 1, + }, + + thumb: { + width: pxToRem(14), + height: pxToRem(14), + backgroundColor: white.main, + zIndex: 10, + boxShadow: sliderBoxShadow.thumb, + border: `${borderWidth[1]} solid ${info.main}`, + transition: "all 200ms linear", + + "&:hover": { + boxShadow: "none", + }, + + "&:active": { + transform: "translate(-50%, -50%) scale(1.4)", + }, + + "&.Mui-active": { boxShadow: boxShadow([0, 0], [0, 14], info.main, 0.16) }, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/stepper/index.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/stepper/index.js new file mode 100644 index 0000000..2f8aefc --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/stepper/index.js @@ -0,0 +1,42 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; +import boxShadows from "assets/theme/base/boxShadows"; + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; +import linearGradient from "assets/theme/functions/linearGradient"; + +const { transparent, gradients } = colors; +const { borderRadius } = borders; +const { colored } = boxShadows; + +export default { + styleOverrides: { + root: { + background: linearGradient(gradients.info.main, gradients.info.state), + padding: `${pxToRem(24)} 0 ${pxToRem(16)}`, + borderRadius: borderRadius.lg, + boxShadow: colored.info, + + "&.MuiPaper-root": { + backgroundColor: transparent.main, + }, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/stepper/step.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/stepper/step.js new file mode 100644 index 0000000..ee69a11 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/stepper/step.js @@ -0,0 +1,25 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +export default { + styleOverrides: { + root: { + padding: `0 ${pxToRem(6)}`, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/stepper/stepConnector.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/stepper/stepConnector.js new file mode 100644 index 0000000..bf246ab --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/stepper/stepConnector.js @@ -0,0 +1,50 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +const { white } = colors; +const { borderWidth } = borders; + +export default { + styleOverrides: { + root: { + color: "#9fc9ff", + transition: "all 200ms linear", + + "&.Mui-active": { + color: white.main, + }, + + "&.Mui-completed": { + color: white.main, + }, + }, + + alternativeLabel: { + top: "14%", + left: "-50%", + right: "50%", + }, + + line: { + borderWidth: `${borderWidth[2]} !important`, + borderColor: "currentColor", + opacity: 0.5, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/stepper/stepIcon.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/stepper/stepIcon.js new file mode 100644 index 0000000..33efebb --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/stepper/stepIcon.js @@ -0,0 +1,55 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import colors from "assets/theme/base/colors"; + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; +import boxShadow from "assets/theme/functions/boxShadow"; + +const { white } = colors; + +export default { + styleOverrides: { + root: { + background: "#9fc9ff", + fill: "#9fc9ff", + stroke: "#9fc9ff", + strokeWidth: pxToRem(10), + width: pxToRem(13), + height: pxToRem(13), + borderRadius: "50%", + zIndex: 99, + transition: "all 200ms linear", + + "&.Mui-active": { + background: white.main, + fill: white.main, + stroke: white.main, + borderColor: white.main, + boxShadow: boxShadow([0, 0], [0, 2], white.main, 1), + }, + + "&.Mui-completed": { + background: white.main, + fill: white.main, + stroke: white.main, + borderColor: white.main, + boxShadow: boxShadow([0, 0], [0, 2], white.main, 1), + }, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/stepper/stepLabel.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/stepper/stepLabel.js new file mode 100644 index 0000000..3ce6c21 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/stepper/stepLabel.js @@ -0,0 +1,47 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import typography from "assets/theme/base/typography"; +import colors from "assets/theme/base/colors"; + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; +import rgba from "assets/theme/functions/rgba"; + +const { size, fontWeightRegular } = typography; +const { white } = colors; + +export default { + styleOverrides: { + label: { + marginTop: `${pxToRem(8)} !important`, + fontWeight: fontWeightRegular, + fontSize: size.xs, + color: "#9fc9ff", + textTransform: "uppercase", + + "&.Mui-active": { + fontWeight: `${fontWeightRegular} !important`, + color: `${rgba(white.main, 0.8)} !important`, + }, + + "&.Mui-completed": { + fontWeight: `${fontWeightRegular} !important`, + color: `${rgba(white.main, 0.8)} !important`, + }, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/svgIcon.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/svgIcon.js new file mode 100644 index 0000000..a3e78f6 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/svgIcon.js @@ -0,0 +1,37 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +export default { + defaultProps: { + fontSize: "inherit", + }, + + styleOverrides: { + fontSizeInherit: { + fontSize: "inherit !important", + }, + + fontSizeSmall: { + fontSize: `${pxToRem(20)} !important`, + }, + + fontSizeLarge: { + fontSize: `${pxToRem(36)} !important`, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/table/tableCell.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/table/tableCell.js new file mode 100644 index 0000000..067a21c --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/table/tableCell.js @@ -0,0 +1,33 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { borderWidth } = borders; +const { light } = colors; + +export default { + styleOverrides: { + root: { + padding: `${pxToRem(12)} ${pxToRem(16)}`, + borderBottom: `${borderWidth[1]} solid ${light.main}`, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/table/tableContainer.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/table/tableContainer.js new file mode 100644 index 0000000..5bcdfd0 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/table/tableContainer.js @@ -0,0 +1,33 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import colors from "assets/theme/base/colors"; +import boxShadows from "assets/theme/base/boxShadows"; +import borders from "assets/theme/base/borders"; + +const { white } = colors; +const { md } = boxShadows; +const { borderRadius } = borders; + +export default { + styleOverrides: { + root: { + backgroundColor: white.main, + boxShadow: md, + borderRadius: borderRadius.xl, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/table/tableHead.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/table/tableHead.js new file mode 100644 index 0000000..361ea99 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/table/tableHead.js @@ -0,0 +1,32 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import borders from "assets/theme/base/borders"; + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { borderRadius } = borders; + +export default { + styleOverrides: { + root: { + display: "block", + padding: `${pxToRem(16)} ${pxToRem(16)} 0 ${pxToRem(16)}`, + borderRadius: `${borderRadius.xl} ${borderRadius.xl} 0 0`, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/tabs/index.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/tabs/index.js new file mode 100644 index 0000000..30d488a --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/tabs/index.js @@ -0,0 +1,63 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; +import boxShadows from "assets/theme/base/boxShadows"; + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { grey, white } = colors; +const { borderRadius } = borders; +const { tabsBoxShadow } = boxShadows; + +export default { + styleOverrides: { + root: { + position: "relative", + backgroundColor: grey[100], + borderRadius: borderRadius.xl, + minHeight: "unset", + padding: pxToRem(4), + }, + + flexContainer: { + height: "100%", + position: "relative", + zIndex: 10, + }, + + fixed: { + overflow: "unset !important", + overflowX: "unset !important", + }, + + vertical: { + "& .MuiTabs-indicator": { + width: "100%", + }, + }, + + indicator: { + height: "100%", + borderRadius: borderRadius.lg, + backgroundColor: white.main, + boxShadow: tabsBoxShadow.indicator, + transition: "all 500ms ease", + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/tabs/tab.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/tabs/tab.js new file mode 100644 index 0000000..cd084be --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/tabs/tab.js @@ -0,0 +1,67 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React base styles +import typography from "assets/theme/base/typography"; +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { size, fontWeightRegular } = typography; +const { borderRadius } = borders; +const { dark } = colors; + +export default { + styleOverrides: { + root: { + display: "flex", + alignItems: "center", + flexDirection: "row", + flex: "1 1 auto", + textAlign: "center", + maxWidth: "unset !important", + minWidth: "unset !important", + minHeight: "unset !important", + fontSize: size.md, + fontWeight: fontWeightRegular, + textTransform: "none", + lineHeight: "inherit", + padding: pxToRem(4), + borderRadius: borderRadius.lg, + color: `${dark.main} !important`, + opacity: "1 !important", + + "& .material-icons, .material-icons-round": { + marginBottom: "0 !important", + marginRight: pxToRem(6), + }, + + "& svg": { + marginBottom: "0 !important", + marginRight: pxToRem(6), + }, + + "& i.MuiTab-iconWrapper": { + marginBottom: 0, + }, + }, + + labelIcon: { + paddingTop: pxToRem(4), + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/components/tooltip.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/tooltip.js new file mode 100644 index 0000000..41895f1 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/components/tooltip.js @@ -0,0 +1,54 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Fade from "@mui/material/Fade"; + +// Material Kit 2 React base styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; +import borders from "assets/theme/base/borders"; + +// Material Kit 2 React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { black, light } = colors; +const { size, fontWeightRegular } = typography; +const { borderRadius } = borders; + +export default { + defaultProps: { + arrow: true, + TransitionComponent: Fade, + }, + + styleOverrides: { + tooltip: { + maxWidth: pxToRem(200), + backgroundColor: black.main, + color: light.main, + fontSize: size.sm, + fontWeight: fontWeightRegular, + textAlign: "center", + borderRadius: borderRadius.md, + opacity: 0.7, + padding: `${pxToRem(5)} ${pxToRem(8)} ${pxToRem(4)}`, + }, + + arrow: { + color: black.main, + }, + }, +}; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/functions/boxShadow.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/functions/boxShadow.js new file mode 100644 index 0000000..4a2a51d --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/functions/boxShadow.js @@ -0,0 +1,34 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + The boxShadow() function helps you to create a box shadow for an element + */ + +// Material Kit 2 React helper functions +import rgba from "assets/theme/functions/rgba"; +import pxToRem from "assets/theme/functions/pxToRem"; + +function boxShadow(offset = [], radius = [], color, opacity, inset = "") { + const [x, y] = offset; + const [blur, spread] = radius; + + return `${inset} ${pxToRem(x)} ${pxToRem(y)} ${pxToRem(blur)} ${pxToRem(spread)} ${rgba( + color, + opacity + )}`; +} + +export default boxShadow; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/functions/gradientChartLine.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/functions/gradientChartLine.js new file mode 100644 index 0000000..1490c36 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/functions/gradientChartLine.js @@ -0,0 +1,35 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + The gradientChartLine() function helps you to create a gradient color for the chart line + */ + +// Material Kit 2 React helper functions +import rgba from "assets/theme/functions/rgba"; + +function gradientChartLine(chart, color, opacity = 0.2) { + const ctx = chart.getContext("2d"); + const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50); + const primaryColor = rgba(color, opacity).toString(); + + gradientStroke.addColorStop(1, primaryColor); + gradientStroke.addColorStop(0.2, "rgba(72, 72, 176, 0.0)"); + gradientStroke.addColorStop(0, "rgba(203, 12, 159, 0)"); + + return gradientStroke; +} + +export default gradientChartLine; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/functions/hexToRgb.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/functions/hexToRgb.js new file mode 100644 index 0000000..16f4ff7 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/functions/hexToRgb.js @@ -0,0 +1,28 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + The hexToRgb() function helps you to change the hex color code to rgb + using chroma-js library. + */ + +// chroma-js is a library for all kinds of color conversions and color scales. +import chroma from "chroma-js"; + +function hexToRgb(color) { + return chroma(color).rgb().join(", "); +} + +export default hexToRgb; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/functions/linearGradient.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/functions/linearGradient.js new file mode 100644 index 0000000..4af364d --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/functions/linearGradient.js @@ -0,0 +1,24 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + The linearGradient() function helps you to create a linear gradient color background + */ + +function linearGradient(color, colorState, angle = 195) { + return `linear-gradient(${angle}deg, ${color}, ${colorState})`; +} + +export default linearGradient; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/functions/pxToRem.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/functions/pxToRem.js new file mode 100644 index 0000000..ae493d8 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/functions/pxToRem.js @@ -0,0 +1,24 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + The pxToRem() function helps you to convert a px unit into a rem unit, + */ + +function pxToRem(number, baseNumber = 16) { + return `${number / baseNumber}rem`; +} + +export default pxToRem; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/functions/rgba.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/functions/rgba.js new file mode 100644 index 0000000..432b97a --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/functions/rgba.js @@ -0,0 +1,28 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + The rgba() function helps you to create a rgba color code, it uses the hexToRgb() function + to convert the hex code into rgb for using it inside the rgba color format. + */ + +// Material Kit 2 React helper functions +import hexToRgb from "assets/theme/functions/hexToRgb"; + +function rgba(color, opacity) { + return `rgba(${hexToRgb(color)}, ${opacity})`; +} + +export default rgba; diff --git a/material-kit-react-main/material-kit-react-main/src/assets/theme/index.js b/material-kit-react-main/material-kit-react-main/src/assets/theme/index.js new file mode 100644 index 0000000..5028c9c --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/assets/theme/index.js @@ -0,0 +1,158 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-material-ui +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import { createTheme } from "@mui/material/styles"; +// import Fade from "@mui/material/Fade"; + +// Material Kit 2 React base styles +import colors from "assets/theme/base/colors"; +import breakpoints from "assets/theme/base/breakpoints"; +import typography from "assets/theme/base/typography"; +import boxShadows from "assets/theme/base/boxShadows"; +import borders from "assets/theme/base/borders"; +import globals from "assets/theme/base/globals"; + +// Material Kit 2 React helper functions +import boxShadow from "assets/theme/functions/boxShadow"; +import hexToRgb from "assets/theme/functions/hexToRgb"; +import linearGradient from "assets/theme/functions/linearGradient"; +import pxToRem from "assets/theme/functions/pxToRem"; +import rgba from "assets/theme/functions/rgba"; + +// Material Kit 2 React components base styles for @mui material components +import list from "assets/theme/components/list"; +import listItem from "assets/theme/components/list/listItem"; +import listItemText from "assets/theme/components/list/listItemText"; +import card from "assets/theme/components/card"; +import cardMedia from "assets/theme/components/card/cardMedia"; +import cardContent from "assets/theme/components/card/cardContent"; +import button from "assets/theme/components/button"; +import iconButton from "assets/theme/components/iconButton"; +import input from "assets/theme/components/form/input"; +import inputLabel from "assets/theme/components/form/inputLabel"; +import inputOutlined from "assets/theme/components/form/inputOutlined"; +import textField from "assets/theme/components/form/textField"; +import menu from "assets/theme/components/menu"; +import menuItem from "assets/theme/components/menu/menuItem"; +import switchButton from "assets/theme/components/form/switchButton"; +import divider from "assets/theme/components/divider"; +import tableContainer from "assets/theme/components/table/tableContainer"; +import tableHead from "assets/theme/components/table/tableHead"; +import tableCell from "assets/theme/components/table/tableCell"; +import linearProgress from "assets/theme/components/linearProgress"; +import breadcrumbs from "assets/theme/components/breadcrumbs"; +import slider from "assets/theme/components/slider"; +import avatar from "assets/theme/components/avatar"; +import tooltip from "assets/theme/components/tooltip"; +import appBar from "assets/theme/components/appBar"; +import tabs from "assets/theme/components/tabs"; +import tab from "assets/theme/components/tabs/tab"; +import stepper from "assets/theme/components/stepper"; +import step from "assets/theme/components/stepper/step"; +import stepConnector from "assets/theme/components/stepper/stepConnector"; +import stepLabel from "assets/theme/components/stepper/stepLabel"; +import stepIcon from "assets/theme/components/stepper/stepIcon"; +import select from "assets/theme/components/form/select"; +import formControlLabel from "assets/theme/components/form/formControlLabel"; +import formLabel from "assets/theme/components/form/formLabel"; +import checkbox from "assets/theme/components/form/checkbox"; +import radio from "assets/theme/components/form/radio"; +import autocomplete from "assets/theme/components/form/autocomplete"; +import flatpickr from "assets/theme/components/flatpickr"; +import container from "assets/theme/components/container"; +import popover from "assets/theme/components/popover"; +import buttonBase from "assets/theme/components/buttonBase"; +import icon from "assets/theme/components/icon"; +import svgIcon from "assets/theme/components/svgIcon"; +import link from "assets/theme/components/link"; +import dialog from "assets/theme/components/dialog"; +import dialogTitle from "assets/theme/components/dialog/dialogTitle"; +import dialogContent from "assets/theme/components/dialog/dialogContent"; +import dialogContentText from "assets/theme/components/dialog/dialogContentText"; +import dialogActions from "assets/theme/components/dialog/dialogActions"; + +export default createTheme({ + breakpoints: { ...breakpoints }, + palette: { ...colors }, + typography: { ...typography }, + boxShadows: { ...boxShadows }, + borders: { ...borders }, + functions: { + boxShadow, + hexToRgb, + linearGradient, + pxToRem, + rgba, + }, + + components: { + MuiCssBaseline: { + styleOverrides: { + ...globals, + ...flatpickr, + ...container, + }, + }, + MuiList: { ...list }, + MuiListItem: { ...listItem }, + MuiListItemText: { ...listItemText }, + MuiCard: { ...card }, + MuiCardMedia: { ...cardMedia }, + MuiCardContent: { ...cardContent }, + MuiButton: { ...button }, + MuiIconButton: { ...iconButton }, + MuiInput: { ...input }, + MuiInputLabel: { ...inputLabel }, + MuiOutlinedInput: { ...inputOutlined }, + MuiTextField: { ...textField }, + MuiMenu: { ...menu }, + MuiMenuItem: { ...menuItem }, + MuiSwitch: { ...switchButton }, + MuiDivider: { ...divider }, + MuiTableContainer: { ...tableContainer }, + MuiTableHead: { ...tableHead }, + MuiTableCell: { ...tableCell }, + MuiLinearProgress: { ...linearProgress }, + MuiBreadcrumbs: { ...breadcrumbs }, + MuiSlider: { ...slider }, + MuiAvatar: { ...avatar }, + MuiTooltip: { ...tooltip }, + MuiAppBar: { ...appBar }, + MuiTabs: { ...tabs }, + MuiTab: { ...tab }, + MuiStepper: { ...stepper }, + MuiStep: { ...step }, + MuiStepConnector: { ...stepConnector }, + MuiStepLabel: { ...stepLabel }, + MuiStepIcon: { ...stepIcon }, + MuiSelect: { ...select }, + MuiFormControlLabel: { ...formControlLabel }, + MuiFormLabel: { ...formLabel }, + MuiCheckbox: { ...checkbox }, + MuiRadio: { ...radio }, + MuiAutocomplete: { ...autocomplete }, + MuiPopover: { ...popover }, + MuiButtonBase: { ...buttonBase }, + MuiIcon: { ...icon }, + MuiSvgIcon: { ...svgIcon }, + MuiLink: { ...link }, + MuiDialog: { ...dialog }, + MuiDialogTitle: { ...dialogTitle }, + MuiDialogContent: { ...dialogContent }, + MuiDialogContentText: { ...dialogContentText }, + MuiDialogActions: { ...dialogActions }, + }, +}); diff --git a/material-kit-react-main/material-kit-react-main/src/components/MKAlert/MKAlertCloseIcon.js b/material-kit-react-main/material-kit-react-main/src/components/MKAlert/MKAlertCloseIcon.js new file mode 100644 index 0000000..0cf508d --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/components/MKAlert/MKAlertCloseIcon.js @@ -0,0 +1,35 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import { styled } from "@mui/material/styles"; + +export default styled("span")(({ theme }) => { + const { palette, typography, functions } = theme; + + const { white } = palette; + const { size, fontWeightMedium } = typography; + const { pxToRem } = functions; + + return { + color: white.main, + fontSize: size.xl, + padding: `${pxToRem(9)} ${pxToRem(6)} ${pxToRem(8)}`, + marginLeft: pxToRem(40), + fontWeight: fontWeightMedium, + cursor: "pointer", + lineHeight: 0, + }; +}); diff --git a/material-kit-react-main/material-kit-react-main/src/components/MKAlert/MKAlertRoot.js b/material-kit-react-main/material-kit-react-main/src/components/MKAlert/MKAlertRoot.js new file mode 100644 index 0000000..543ca78 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/components/MKAlert/MKAlertRoot.js @@ -0,0 +1,48 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Box from "@mui/material/Box"; +import { styled } from "@mui/material/styles"; + +export default styled(Box)(({ theme, ownerState }) => { + const { palette, typography, borders, functions } = theme; + const { color } = ownerState; + + const { white, gradients } = palette; + const { fontSizeRegular, fontWeightMedium } = typography; + const { borderRadius } = borders; + const { pxToRem, linearGradient } = functions; + + // backgroundImage value + const backgroundImageValue = gradients[color] + ? linearGradient(gradients[color].main, gradients[color].state) + : linearGradient(gradients.info.main, gradients.info.state); + + return { + display: "flex", + justifyContent: "space-between", + alignItems: "center", + minHeight: pxToRem(60), + backgroundImage: backgroundImageValue, + color: white.main, + position: "relative", + padding: pxToRem(16), + marginBottom: pxToRem(16), + borderRadius: borderRadius.md, + fontSize: fontSizeRegular, + fontWeight: fontWeightMedium, + }; +}); diff --git a/material-kit-react-main/material-kit-react-main/src/components/MKAlert/index.js b/material-kit-react-main/material-kit-react-main/src/components/MKAlert/index.js new file mode 100644 index 0000000..62c2413 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/components/MKAlert/index.js @@ -0,0 +1,92 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useState } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Fade from "@mui/material/Fade"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; + +// Custom styles for the MKAlert +import MKAlertRoot from "components/MKAlert/MKAlertRoot"; +import MKAlertCloseIcon from "components/MKAlert/MKAlertCloseIcon"; + +function MKAlert({ color, dismissible, children, ...rest }) { + const [alertStatus, setAlertStatus] = useState("mount"); + + const handleAlertStatus = () => setAlertStatus("fadeOut"); + + // The base template for the alert + const alertTemplate = (mount = true) => ( + + + + {children} + + {dismissible ? ( + × + ) : null} + + + ); + + switch (true) { + case alertStatus === "mount": + return alertTemplate(); + case alertStatus === "fadeOut": + setTimeout(() => setAlertStatus("unmount"), 400); + return alertTemplate(false); + default: + alertTemplate(); + break; + } + + return null; +} + +// Setting default values for the props of MKAlert +MKAlert.defaultProps = { + color: "info", + dismissible: false, +}; + +// Typechecking props of the MKAlert +MKAlert.propTypes = { + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + dismissible: PropTypes.bool, + children: PropTypes.node.isRequired, +}; + +export default MKAlert; diff --git a/material-kit-react-main/material-kit-react-main/src/components/MKAvatar/MKAvatarRoot.js b/material-kit-react-main/material-kit-react-main/src/components/MKAvatar/MKAvatarRoot.js new file mode 100644 index 0000000..72340cb --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/components/MKAvatar/MKAvatarRoot.js @@ -0,0 +1,89 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Avatar from "@mui/material/Avatar"; +import { styled } from "@mui/material/styles"; + +export default styled(Avatar)(({ theme, ownerState }) => { + const { palette, functions, typography, boxShadows } = theme; + const { shadow, bgColor, size } = ownerState; + + const { gradients, transparent, white } = palette; + const { pxToRem, linearGradient } = functions; + const { size: fontSize, fontWeightRegular } = typography; + + // backgroundImage value + const backgroundValue = + bgColor === "transparent" + ? transparent.main + : linearGradient(gradients[bgColor].main, gradients[bgColor].state); + + // size value + let sizeValue; + + switch (size) { + case "xs": + sizeValue = { + width: pxToRem(24), + height: pxToRem(24), + fontSize: fontSize.xs, + }; + break; + case "sm": + sizeValue = { + width: pxToRem(36), + height: pxToRem(36), + fontSize: fontSize.sm, + }; + break; + case "lg": + sizeValue = { + width: pxToRem(58), + height: pxToRem(58), + fontSize: fontSize.sm, + }; + break; + case "xl": + sizeValue = { + width: pxToRem(74), + height: pxToRem(74), + fontSize: fontSize.md, + }; + break; + case "xxl": + sizeValue = { + width: pxToRem(110), + height: pxToRem(110), + fontSize: fontSize.md, + }; + break; + default: { + sizeValue = { + width: pxToRem(48), + height: pxToRem(48), + fontSize: fontSize.md, + }; + } + } + + return { + background: backgroundValue, + color: white.main, + fontWeight: fontWeightRegular, + boxShadow: boxShadows[shadow], + ...sizeValue, + }; +}); diff --git a/material-kit-react-main/material-kit-react-main/src/components/MKAvatar/index.js b/material-kit-react-main/material-kit-react-main/src/components/MKAvatar/index.js new file mode 100644 index 0000000..5ac9545 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/components/MKAvatar/index.js @@ -0,0 +1,52 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { forwardRef } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// Custom styles for MKAvatar +import MKAvatarRoot from "components/MKAvatar/MKAvatarRoot"; + +const MKAvatar = forwardRef(({ bgColor, size, shadow, ...rest }, ref) => ( + +)); + +// Setting default values for the props of MKAvatar +MKAvatar.defaultProps = { + bgColor: "transparent", + size: "md", + shadow: "none", +}; + +// Typechecking props for the MKAvatar +MKAvatar.propTypes = { + bgColor: PropTypes.oneOf([ + "transparent", + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl", "xxl"]), + shadow: PropTypes.oneOf(["none", "xs", "sm", "md", "lg", "xl", "xxl", "inset"]), +}; + +export default MKAvatar; diff --git a/material-kit-react-main/material-kit-react-main/src/components/MKBadge/MKBadgeRoot.js b/material-kit-react-main/material-kit-react-main/src/components/MKBadge/MKBadgeRoot.js new file mode 100644 index 0000000..9339239 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/components/MKBadge/MKBadgeRoot.js @@ -0,0 +1,138 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Badge from "@mui/material/Badge"; +import { styled } from "@mui/material/styles"; + +export default styled(Badge)(({ theme, ownerState }) => { + const { palette, typography, borders, functions } = theme; + const { color, circular, border, size, indicator, variant, container, children } = ownerState; + + const { white, dark, gradients, badgeColors } = palette; + const { size: fontSize, fontWeightBold } = typography; + const { borderRadius, borderWidth } = borders; + const { pxToRem, linearGradient } = functions; + + // padding values + const paddings = { + xs: "0.45em 0.775em", + sm: "0.55em 0.9em", + md: "0.65em 1em", + lg: "0.85em 1.375em", + }; + + // fontSize value + const fontSizeValue = size === "xs" ? fontSize.xxs : fontSize.xs; + + // border value + const borderValue = border ? `${borderWidth[3]} solid ${white.main}` : "none"; + + // borderRadius value + const borderRadiusValue = circular ? borderRadius.section : borderRadius.lg; + + // styles for the badge with indicator={true} + const indicatorStyles = (sizeProp) => { + let widthValue = pxToRem(20); + let heightValue = pxToRem(20); + + if (sizeProp === "medium") { + widthValue = pxToRem(24); + heightValue = pxToRem(24); + } else if (sizeProp === "large") { + widthValue = pxToRem(32); + heightValue = pxToRem(32); + } + + return { + width: widthValue, + height: heightValue, + display: "grid", + placeItems: "center", + textAlign: "center", + borderRadius: "50%", + padding: 0, + border: borderValue, + }; + }; + + // styles for the badge with variant="gradient" + const gradientStyles = (colorProp) => { + const backgroundValue = gradients[colorProp] + ? linearGradient(gradients[colorProp].main, gradients[colorProp].state) + : linearGradient(gradients.info.main, gradients.info.state); + const colorValue = colorProp === "light" ? dark.main : white.main; + + return { + background: backgroundValue, + color: colorValue, + }; + }; + + // styles for the badge with variant="contained" + const containedStyles = (colorProp) => { + let backgroundValue = badgeColors[colorProp] + ? badgeColors[colorProp].background + : badgeColors.info.background; + let colorValue = badgeColors[colorProp] ? badgeColors[colorProp].text : badgeColors.info.text; + + if (colorProp === "light") { + colorValue = dark.main; + } else if (colorProp === "white") { + backgroundValue = white.main; + colorValue = dark.main; + } + + return { + background: backgroundValue, + color: colorValue, + }; + }; + + // styles for the badge with no children and container={false} + const standAloneStyles = () => ({ + position: "static", + marginLeft: pxToRem(8), + transform: "none", + fontSize: pxToRem(9), + }); + + // styles for the badge with container={true} + const containerStyles = () => ({ + position: "relative", + transform: "none", + }); + + return { + "& .MuiBadge-badge": { + height: "auto", + padding: paddings[size] || paddings.xs, + fontSize: fontSizeValue, + fontWeight: fontWeightBold, + textTransform: "uppercase", + lineHeight: 1, + textAlign: "center", + whiteSpace: "nowrap", + verticalAlign: "baseline", + border: borderValue, + borderRadius: borderRadiusValue, + ...(indicator && indicatorStyles(size)), + ...(variant === "gradient" && gradientStyles(color)), + ...(variant === "contained" && containedStyles(color)), + ...(!children && !container && standAloneStyles(color)), + ...(container && containerStyles(color)), + }, + }; +}); diff --git a/material-kit-react-main/material-kit-react-main/src/components/MKBadge/index.js b/material-kit-react-main/material-kit-react-main/src/components/MKBadge/index.js new file mode 100644 index 0000000..7882fd4 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/components/MKBadge/index.js @@ -0,0 +1,71 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { forwardRef } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// Custom styles for the MKBadge +import MKBadgeRoot from "components/MKBadge/MKBadgeRoot"; + +const MKBadge = forwardRef( + ({ color, variant, size, circular, indicator, border, container, children, ...rest }, ref) => ( + + {children} + + ) +); + +// Setting default values for the props of MKBadge +MKBadge.defaultProps = { + color: "info", + variant: "gradient", + size: "sm", + circular: false, + indicator: false, + border: false, + children: false, + container: false, +}; + +// Typechecking props of the MKBadge +MKBadge.propTypes = { + color: PropTypes.oneOf([ + "white", + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + variant: PropTypes.oneOf(["gradient", "contained"]), + size: PropTypes.oneOf(["xs", "sm", "md", "lg"]), + circular: PropTypes.bool, + indicator: PropTypes.bool, + border: PropTypes.bool, + children: PropTypes.node, + container: PropTypes.bool, +}; + +export default MKBadge; diff --git a/material-kit-react-main/material-kit-react-main/src/components/MKBox/MKBoxRoot.js b/material-kit-react-main/material-kit-react-main/src/components/MKBox/MKBoxRoot.js new file mode 100644 index 0000000..2aa13b2 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/components/MKBox/MKBoxRoot.js @@ -0,0 +1,122 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Box from "@mui/material/Box"; +import { styled } from "@mui/material/styles"; + +export default styled(Box)(({ theme, ownerState }) => { + const { palette, functions, borders, boxShadows } = theme; + const { variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow } = ownerState; + + const { gradients, grey, white } = palette; + const { linearGradient } = functions; + const { borderRadius: radius } = borders; + const { colored } = boxShadows; + + const greyColors = { + "grey-100": grey[100], + "grey-200": grey[200], + "grey-300": grey[300], + "grey-400": grey[400], + "grey-500": grey[500], + "grey-600": grey[600], + "grey-700": grey[700], + "grey-800": grey[800], + "grey-900": grey[900], + }; + + const validGradients = [ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "dark", + "light", + ]; + + const validColors = [ + "transparent", + "white", + "black", + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + "text", + "grey-100", + "grey-200", + "grey-300", + "grey-400", + "grey-500", + "grey-600", + "grey-700", + "grey-800", + "grey-900", + ]; + + const validBorderRadius = ["xs", "sm", "md", "lg", "xl", "xxl", "section"]; + const validBoxShadows = ["xs", "sm", "md", "lg", "xl", "xxl", "inset"]; + + // background value + let backgroundValue = bgColor; + + if (variant === "gradient") { + backgroundValue = validGradients.find((el) => el === bgColor) + ? linearGradient(gradients[bgColor].main, gradients[bgColor].state) + : white.main; + } else if (validColors.find((el) => el === bgColor)) { + backgroundValue = palette[bgColor] ? palette[bgColor].main : greyColors[bgColor]; + } else { + backgroundValue = bgColor; + } + + // color value + let colorValue = color; + + if (validColors.find((el) => el === color)) { + colorValue = palette[color] ? palette[color].main : greyColors[color]; + } + + // borderRadius value + let borderRadiusValue = borderRadius; + + if (validBorderRadius.find((el) => el === borderRadius)) { + borderRadiusValue = radius[borderRadius]; + } + + // boxShadow value + let boxShadowValue = "none"; + + if (validBoxShadows.find((el) => el === shadow)) { + boxShadowValue = boxShadows[shadow]; + } else if (coloredShadow) { + boxShadowValue = colored[coloredShadow] ? colored[coloredShadow] : "none"; + } + + return { + opacity, + background: backgroundValue, + color: colorValue, + borderRadius: borderRadiusValue, + boxShadow: boxShadowValue, + }; +}); diff --git a/material-kit-react-main/material-kit-react-main/src/components/MKBox/index.js b/material-kit-react-main/material-kit-react-main/src/components/MKBox/index.js new file mode 100644 index 0000000..5c12dc5 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/components/MKBox/index.js @@ -0,0 +1,66 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { forwardRef } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// Custom styles for MKBox +import MKBoxRoot from "components/MKBox/MKBoxRoot"; + +const MKBox = forwardRef( + ({ variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow, ...rest }, ref) => ( + + ) +); + +// Setting default values for the props of MKBox +MKBox.defaultProps = { + variant: "contained", + bgColor: "transparent", + color: "dark", + opacity: 1, + borderRadius: "none", + shadow: "none", + coloredShadow: "none", +}; + +// Typechecking props for the MKBox +MKBox.propTypes = { + variant: PropTypes.oneOf(["contained", "gradient"]), + bgColor: PropTypes.string, + color: PropTypes.string, + opacity: PropTypes.number, + borderRadius: PropTypes.string, + shadow: PropTypes.string, + coloredShadow: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + "none", + ]), +}; + +export default MKBox; diff --git a/material-kit-react-main/material-kit-react-main/src/components/MKButton/MKButtonRoot.js b/material-kit-react-main/material-kit-react-main/src/components/MKButton/MKButtonRoot.js new file mode 100644 index 0000000..29b5969 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/components/MKButton/MKButtonRoot.js @@ -0,0 +1,279 @@ +/* eslint-disable prefer-destructuring */ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Button from "@mui/material/Button"; +import { styled } from "@mui/material/styles"; + +export default styled(Button)(({ theme, ownerState }) => { + const { palette, functions, borders, boxShadows } = theme; + const { color, variant, size, circular, iconOnly } = ownerState; + + const { white, text, transparent, gradients, dark } = palette; + const { boxShadow, linearGradient, pxToRem, rgba } = functions; + const { borderRadius } = borders; + const { colored } = boxShadows; + + // styles for the button with variant="contained" + const containedStyles = () => { + // background color value + const backgroundValue = palette[color] ? palette[color].main : white.main; + + // backgroundColor value when button is focused + const focusedBackgroundValue = palette[color] ? palette[color].focus : white.focus; + + // boxShadow value + const boxShadowValue = colored[color] + ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow( + [0, 3], + [1, -2], + palette[color].main, + 0.2 + )}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}` + : "none"; + + // boxShadow value when button is hovered + const hoveredBoxShadowValue = colored[color] + ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow( + [0, 4], + [23, 0], + palette[color].main, + 0.15 + )}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}` + : "none"; + + // color value + let colorValue = white.main; + + if (color === "default" || !palette[color]) { + colorValue = text.main; + } else if (color === "white" || color === "light") { + colorValue = dark.main; + } + + // color value when button is focused + let focusedColorValue = white.main; + + if (color === "darfault") { + focusedColorValue = text.main; + } else if (color === "white") { + focusedColorValue = dark.main; + } else if (color === "primary" || color === "error" || color === "dark") { + focusedColorValue = white.main; + } + + return { + background: backgroundValue, + color: colorValue, + boxShadow: boxShadowValue, + + "&:hover": { + backgroundColor: backgroundValue, + boxShadow: hoveredBoxShadowValue, + }, + + "&:focus:not(:hover)": { + backgroundColor: focusedBackgroundValue, + boxShadow: palette[color] + ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5) + : boxShadow([0, 0], [0, 3.2], white.main, 0.5), + }, + + "&:disabled": { + backgroundColor: backgroundValue, + color: focusedColorValue, + }, + }; + }; + + // styles for the button with variant="outlined" + const outliedStyles = () => { + // background color value + const backgroundValue = color === "white" ? rgba(white.main, 0.1) : transparent.main; + + // color value + const colorValue = palette[color] ? palette[color].main : white.main; + + // boxShadow value + const boxShadowValue = palette[color] + ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5) + : boxShadow([0, 0], [0, 3.2], white.main, 0.5); + + // border color value + let borderColorValue = palette[color] ? palette[color].main : rgba(white.main, 0.75); + + if (color === "white") { + borderColorValue = rgba(white.main, 0.75); + } + + return { + background: backgroundValue, + color: colorValue, + borderColor: borderColorValue, + + "&:hover": { + background: transparent.main, + borderColor: colorValue, + }, + + "&:focus:not(:hover)": { + background: transparent.main, + boxShadow: boxShadowValue, + }, + + "&:active:not(:hover)": { + backgroundColor: colorValue, + color: white.main, + opacity: 0.85, + }, + + "&:disabled": { + color: colorValue, + borderColor: colorValue, + }, + }; + }; + + // styles for the button with variant="gradient" + const gradientStyles = () => { + // background value + const backgroundValue = + color === "white" || !gradients[color] + ? white.main + : linearGradient(gradients[color].main, gradients[color].state); + + // boxShadow value + const boxShadowValue = colored[color] + ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow( + [0, 3], + [1, -2], + palette[color].main, + 0.2 + )}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}` + : "none"; + + // boxShadow value when button is hovered + const hoveredBoxShadowValue = colored[color] + ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow( + [0, 4], + [23, 0], + palette[color].main, + 0.15 + )}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}` + : "none"; + + // color value + let colorValue = white.main; + + if (color === "white") { + colorValue = text.main; + } else if (color === "light") { + colorValue = gradients.dark.state; + } + + return { + background: backgroundValue, + color: colorValue, + boxShadow: boxShadowValue, + + "&:hover": { + backgroundColor: white.main, + boxShadow: hoveredBoxShadowValue, + }, + + "&:focus:not(:hover)": { + boxShadow: boxShadowValue, + }, + + "&:disabled": { + background: backgroundValue, + color: colorValue, + }, + }; + }; + + // styles for the button with variant="text" + const textStyles = () => { + // color value + const colorValue = palette[color] ? palette[color].main : white.main; + + // color value when button is focused + const focusedColorValue = palette[color] ? palette[color].focus : white.focus; + + return { + color: colorValue, + + "&:hover": { + color: focusedColorValue, + }, + + "&:focus:not(:hover)": { + color: focusedColorValue, + }, + }; + }; + + // styles for the button with circular={true} + const circularStyles = () => ({ + borderRadius: borderRadius.section, + }); + + // styles for the button with iconOnly={true} + const iconOnlyStyles = () => { + // width, height, minWidth and minHeight values + let sizeValue = pxToRem(38); + + if (size === "small") { + sizeValue = pxToRem(25.4); + } else if (size === "large") { + sizeValue = pxToRem(52); + } + + // padding value + let paddingValue = `${pxToRem(11)} ${pxToRem(11)} ${pxToRem(10)}`; + + if (size === "small") { + paddingValue = pxToRem(4.5); + } else if (size === "large") { + paddingValue = pxToRem(16); + } + + return { + width: sizeValue, + minWidth: sizeValue, + height: sizeValue, + minHeight: sizeValue, + padding: paddingValue, + + "& .material-icons": { + marginTop: 0, + }, + + "&:hover, &:focus, &:active": { + transform: "none", + }, + }; + }; + + return { + ...(variant === "contained" && containedStyles()), + ...(variant === "outlined" && outliedStyles()), + ...(variant === "gradient" && gradientStyles()), + ...(variant === "text" && textStyles()), + ...(circular && circularStyles()), + ...(iconOnly && iconOnlyStyles()), + }; +}); diff --git a/material-kit-react-main/material-kit-react-main/src/components/MKButton/index.js b/material-kit-react-main/material-kit-react-main/src/components/MKButton/index.js new file mode 100644 index 0000000..96acea8 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/components/MKButton/index.js @@ -0,0 +1,69 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + +========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { forwardRef } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// Custom styles for MKButton +import MKButtonRoot from "components/MKButton/MKButtonRoot"; + +const MKButton = forwardRef( + ({ color, variant, size, circular, iconOnly, children, ...rest }, ref) => ( + + {children} + + ) +); + +// Setting default values for the props of MKButton +MKButton.defaultProps = { + size: "medium", + variant: "contained", + color: "white", + circular: false, + iconOnly: false, +}; + +// Typechecking props for the MKButton +MKButton.propTypes = { + size: PropTypes.oneOf(["small", "medium", "large"]), + variant: PropTypes.oneOf(["text", "contained", "outlined", "gradient"]), + color: PropTypes.oneOf([ + "default", + "white", + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + circular: PropTypes.bool, + iconOnly: PropTypes.bool, + children: PropTypes.node.isRequired, +}; + +export default MKButton; diff --git a/material-kit-react-main/material-kit-react-main/src/components/MKDatePicker/index.js b/material-kit-react-main/material-kit-react-main/src/components/MKDatePicker/index.js new file mode 100644 index 0000000..c29b04b --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/components/MKDatePicker/index.js @@ -0,0 +1,49 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// react-flatpickr components +import Flatpickr from "react-flatpickr"; + +// react-flatpickr styles +import "flatpickr/dist/flatpickr.css"; + +// Material Kit 2 React components +import MKInput from "components/MKInput"; + +function MKDatePicker({ input, ...rest }) { + return ( + ( + + )} + /> + ); +} + +// Setting default values for the props of MKDatePicker +MKDatePicker.defaultProps = { + input: {}, +}; + +// Typechecking props for the MKDatePicker +MKDatePicker.propTypes = { + input: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.any])), +}; + +export default MKDatePicker; diff --git a/material-kit-react-main/material-kit-react-main/src/components/MKInput/MKInputRoot.js b/material-kit-react-main/material-kit-react-main/src/components/MKInput/MKInputRoot.js new file mode 100644 index 0000000..4e6e2b4 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/components/MKInput/MKInputRoot.js @@ -0,0 +1,71 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import TextField from "@mui/material/TextField"; +import { styled } from "@mui/material/styles"; + +export default styled(TextField)(({ theme, ownerState }) => { + const { palette, functions } = theme; + const { error, success, disabled } = ownerState; + + const { grey, transparent, error: colorError, success: colorSuccess } = palette; + const { pxToRem } = functions; + + // styles for the input with error={true} + const errorStyles = () => ({ + backgroundImage: + "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23F44335' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23F44335' stroke='none'/%3E%3C/svg%3E\")", + backgroundRepeat: "no-repeat", + backgroundPosition: `right ${pxToRem(12)} center`, + backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`, + + "& .Mui-focused": { + "& .MuiOutlinedInput-notchedOutline, &:after": { + borderColor: colorError.main, + }, + }, + + "& .MuiInputLabel-root.Mui-focused": { + color: colorError.main, + }, + }); + + // styles for the input with success={true} + const successStyles = () => ({ + backgroundImage: + "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath fill='%234CAF50' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E\")", + backgroundRepeat: "no-repeat", + backgroundPosition: `right ${pxToRem(12)} center`, + backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`, + + "& .Mui-focused": { + "& .MuiOutlinedInput-notchedOutline, &:after": { + borderColor: colorSuccess.main, + }, + }, + + "& .MuiInputLabel-root.Mui-focused": { + color: colorSuccess.main, + }, + }); + + return { + backgroundColor: disabled ? `${grey[200]} !important` : transparent.main, + pointerEvents: disabled ? "none" : "auto", + ...(error && errorStyles()), + ...(success && successStyles()), + }; +}); diff --git a/material-kit-react-main/material-kit-react-main/src/components/MKInput/index.js b/material-kit-react-main/material-kit-react-main/src/components/MKInput/index.js new file mode 100644 index 0000000..cf367ee --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/components/MKInput/index.js @@ -0,0 +1,42 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { forwardRef } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// Custom styles for MKInput +import MKInputRoot from "components/MKInput/MKInputRoot"; + +const MKInput = forwardRef(({ error, success, disabled, ...rest }, ref) => ( + +)); + +// Setting default values for the props of MKInput +MKInput.defaultProps = { + error: false, + success: false, + disabled: false, +}; + +// Typechecking props for the MKInput +MKInput.propTypes = { + error: PropTypes.bool, + success: PropTypes.bool, + disabled: PropTypes.bool, +}; + +export default MKInput; diff --git a/material-kit-react-main/material-kit-react-main/src/components/MKPagination/MKPaginationItemRoot.js b/material-kit-react-main/material-kit-react-main/src/components/MKPagination/MKPaginationItemRoot.js new file mode 100644 index 0000000..324a67a --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/components/MKPagination/MKPaginationItemRoot.js @@ -0,0 +1,62 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import { styled } from "@mui/material/styles"; + +// Material Kit 2 React components +import MKButton from "components/MKButton"; + +export default styled(MKButton)(({ theme, ownerState }) => { + const { borders, functions, typography, palette } = theme; + const { variant, paginationSize, active } = ownerState; + + const { borderColor } = borders; + const { pxToRem } = functions; + const { fontWeightRegular, size: fontSize } = typography; + const { light } = palette; + + // width, height, minWidth and minHeight values + let sizeValue = pxToRem(36); + + if (paginationSize === "small") { + sizeValue = pxToRem(30); + } else if (paginationSize === "large") { + sizeValue = pxToRem(46); + } + + return { + borderColor, + margin: `0 ${pxToRem(2)}`, + pointerEvents: active ? "none" : "auto", + fontWeight: fontWeightRegular, + fontSize: fontSize.sm, + width: sizeValue, + minWidth: sizeValue, + height: sizeValue, + minHeight: sizeValue, + + "&:hover, &:focus, &:active": { + transform: "none", + boxShadow: (variant !== "gradient" || variant !== "contained") && "none !important", + opacity: "1 !important", + }, + + "&:hover": { + backgroundColor: light.main, + borderColor, + }, + }; +}); diff --git a/material-kit-react-main/material-kit-react-main/src/components/MKPagination/index.js b/material-kit-react-main/material-kit-react-main/src/components/MKPagination/index.js new file mode 100644 index 0000000..fe1b5c5 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/components/MKPagination/index.js @@ -0,0 +1,103 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { forwardRef, createContext, useContext, useMemo } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; + +// Custom styles for MKPagination +import MKPaginationItemRoot from "components/MKPagination/MKPaginationItemRoot"; + +// The Pagination main context +const Context = createContext(); + +const MKPagination = forwardRef( + ({ item, variant, color, size, active, children, placement, ...rest }, ref) => { + const context = item ? useContext(Context) : null; + const paginationSize = context ? context.size : null; + const paginationProps = useMemo(() => ({ variant, color, size }), []); + let placementValue = "flex-end"; + + if (placement === "left") { + placementValue = "flex-start"; + } else if (placement === "center") { + placementValue = "center"; + } + + return ( + + {item ? ( + + {children} + + ) : ( + + {children} + + )} + + ); + } +); + +// Setting default values for the props of MKPagination +MKPagination.defaultProps = { + item: false, + variant: "gradient", + color: "info", + size: "medium", + active: false, + placement: "right", +}; + +// Typechecking props for the MKPagination +MKPagination.propTypes = { + item: PropTypes.bool, + variant: PropTypes.oneOf(["gradient", "contained"]), + color: PropTypes.oneOf([ + "white", + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + size: PropTypes.oneOf(["small", "medium", "large"]), + active: PropTypes.bool, + children: PropTypes.node.isRequired, + placement: PropTypes.oneOf(["left", "right", "center"]), +}; + +export default MKPagination; diff --git a/material-kit-react-main/material-kit-react-main/src/components/MKProgress/MKProgressRoot.js b/material-kit-react-main/material-kit-react-main/src/components/MKProgress/MKProgressRoot.js new file mode 100644 index 0000000..6f8af7e --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/components/MKProgress/MKProgressRoot.js @@ -0,0 +1,47 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import { styled } from "@mui/material/styles"; +import LinearProgress from "@mui/material/LinearProgress"; + +export default styled(LinearProgress)(({ theme, ownerState }) => { + const { palette, functions } = theme; + const { color, value, variant } = ownerState; + + const { text, gradients } = palette; + const { linearGradient } = functions; + + // background value + let backgroundValue; + + if (variant === "gradient") { + backgroundValue = gradients[color] + ? linearGradient(gradients[color].main, gradients[color].state) + : linearGradient(gradients.info.main, gradients.info.state); + } else { + backgroundValue = palette[color] ? palette[color].main : palette.info.main; + } + + return { + width: "100%", + + "& .MuiLinearProgress-bar": { + background: backgroundValue, + width: `${value}%`, + color: text.main, + }, + }; +}); diff --git a/material-kit-react-main/material-kit-react-main/src/components/MKProgress/index.js b/material-kit-react-main/material-kit-react-main/src/components/MKProgress/index.js new file mode 100644 index 0000000..9e3e6dc --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/components/MKProgress/index.js @@ -0,0 +1,69 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { forwardRef } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// Material Kit 2 React components +import MKTypography from "components/MKTypography"; + +// Custom styles for MKProgress +import MKProgressRoot from "components/MKProgress/MKProgressRoot"; + +const MKProgress = forwardRef(({ variant, color, value, label, ...rest }, ref) => ( + <> + {label && ( + + {value}% + + )} + + +)); + +// Setting default values for the props of MKProgress +MKProgress.defaultProps = { + variant: "contained", + color: "info", + value: 0, + label: false, +}; + +// Typechecking props for the MKProgress +MKProgress.propTypes = { + variant: PropTypes.oneOf(["contained", "gradient"]), + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + value: PropTypes.number, + label: PropTypes.bool, +}; + +export default MKProgress; diff --git a/material-kit-react-main/material-kit-react-main/src/components/MKSocialButton/MKSocialButtonRoot.js b/material-kit-react-main/material-kit-react-main/src/components/MKSocialButton/MKSocialButtonRoot.js new file mode 100644 index 0000000..cacee9c --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/components/MKSocialButton/MKSocialButtonRoot.js @@ -0,0 +1,95 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Button from "@mui/material/Button"; +import { styled } from "@mui/material/styles"; + +export default styled(Button)(({ theme, ownerState }) => { + const { palette, functions } = theme; + const { color, size, iconOnly, circular } = ownerState; + + const { white, socialMediaColors } = palette; + const { pxToRem } = functions; + + // backgroundColor value + const backgroundColorValue = socialMediaColors[color] + ? socialMediaColors[color].main + : socialMediaColors.facebook.main; + + const focusedBackgroundColorValue = socialMediaColors[color] + ? socialMediaColors[color].dark + : socialMediaColors.facebook.dark; + + // styles for the button with circular={true} + const circularStyles = () => ({ + borderRadius: "50%", + }); + + // styles for the button with iconOnly={true} + const iconOnlyStyles = () => { + // width, height, minWidth and minHeight values + let sizeValue = pxToRem(38); + + if (size === "small") { + sizeValue = pxToRem(25.4); + } else if (size === "large") { + sizeValue = pxToRem(52); + } + + // padding value + let paddingValue = `${pxToRem(11)} ${pxToRem(11)} ${pxToRem(10)}`; + + if (size === "small") { + paddingValue = pxToRem(4.5); + } else if (size === "large") { + paddingValue = pxToRem(16); + } + + return { + width: sizeValue, + minWidth: sizeValue, + height: sizeValue, + minHeight: sizeValue, + padding: paddingValue, + }; + }; + + return { + backgroundColor: backgroundColorValue, + color: white.main, + boxShadow: "none", + + "&:hover": { + backgroundColor: focusedBackgroundColorValue, + boxShadow: "none", + }, + + "&:focus:not(:hover)": { + backgroundColor: socialMediaColors[color] + ? socialMediaColors[color].dark + : socialMediaColors.facebook.dark, + boxShadow: "none", + }, + + "&:disabled": { + backgroundColor: backgroundColorValue, + color: white.main, + }, + + ...(circular && circularStyles()), + ...(iconOnly && iconOnlyStyles()), + }; +}); diff --git a/material-kit-react-main/material-kit-react-main/src/components/MKSocialButton/index.js b/material-kit-react-main/material-kit-react-main/src/components/MKSocialButton/index.js new file mode 100644 index 0000000..cca223b --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/components/MKSocialButton/index.js @@ -0,0 +1,67 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { forwardRef } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// Custom styles for MKSocialButton +import MKSocialButtonRoot from "components/MKSocialButton/MKSocialButtonRoot"; + +const MKSocialButton = forwardRef(({ color, size, iconOnly, circular, children, ...rest }, ref) => ( + + {children} + +)); + +// Setting default values for the props of MKSocialButton +MKSocialButton.defaultProps = { + size: "medium", + color: "facebook", + iconOnly: false, + circular: false, +}; + +// Typechecking props for the MKSocialButton +MKSocialButton.propTypes = { + size: PropTypes.oneOf(["small", "medium", "large"]), + color: PropTypes.oneOf([ + "facebook", + "twitter", + "instagram", + "linkedin", + "pinterest", + "youtube", + "github", + "vimeo", + "slack", + "dribbble", + "reddit", + "tumblr", + ]), + iconOnly: PropTypes.bool, + circular: PropTypes.bool, + children: PropTypes.node.isRequired, +}; + +export default MKSocialButton; diff --git a/material-kit-react-main/material-kit-react-main/src/components/MKTypography/MKTypographyRoot.js b/material-kit-react-main/material-kit-react-main/src/components/MKTypography/MKTypographyRoot.js new file mode 100644 index 0000000..30d7c1c --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/components/MKTypography/MKTypographyRoot.js @@ -0,0 +1,62 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Typography from "@mui/material/Typography"; +import { styled } from "@mui/material/styles"; + +export default styled(Typography)(({ theme, ownerState }) => { + const { palette, typography, functions } = theme; + const { color, textTransform, verticalAlign, fontWeight, opacity, textGradient } = ownerState; + + const { gradients, transparent } = palette; + const { fontWeightLight, fontWeightRegular, fontWeightMedium, fontWeightBold } = typography; + const { linearGradient } = functions; + + // fontWeight styles + const fontWeights = { + light: fontWeightLight, + regular: fontWeightRegular, + medium: fontWeightMedium, + bold: fontWeightBold, + }; + + // styles for the typography with textGradient={true} + const gradientStyles = () => ({ + backgroundImage: + color !== "inherit" && color !== "text" && color !== "white" && gradients[color] + ? linearGradient(gradients[color].main, gradients[color].state) + : linearGradient(gradients.dark.main, gradients.dark.state), + display: "inline-block", + WebkitBackgroundClip: "text", + WebkitTextFillColor: transparent.main, + position: "relative", + zIndex: 1, + }); + + // color value + const colorValue = color === "inherit" || !palette[color] ? "inherit" : palette[color].main; + + return { + opacity, + textTransform, + verticalAlign, + textDecoration: "none", + color: colorValue, + letterSpacing: "-0.125px", + fontWeight: fontWeights[fontWeight] && fontWeights[fontWeight], + ...(textGradient && gradientStyles()), + }; +}); diff --git a/material-kit-react-main/material-kit-react-main/src/components/MKTypography/index.js b/material-kit-react-main/material-kit-react-main/src/components/MKTypography/index.js new file mode 100644 index 0000000..a68e3a1 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/components/MKTypography/index.js @@ -0,0 +1,89 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { forwardRef } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// Custom styles for MKTypography +import MKTypographyRoot from "components/MKTypography/MKTypographyRoot"; + +const MKTypography = forwardRef( + ( + { color, fontWeight, textTransform, verticalAlign, textGradient, opacity, children, ...rest }, + ref + ) => ( + + {children} + + ) +); + +// Setting default values for the props of MKTypography +MKTypography.defaultProps = { + color: "dark", + fontWeight: false, + textTransform: "none", + verticalAlign: "unset", + textGradient: false, + opacity: 1, +}; + +// Typechecking props for the MKTypography +MKTypography.propTypes = { + color: PropTypes.oneOf([ + "inherit", + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + "text", + "white", + ]), + fontWeight: PropTypes.oneOf([false, "light", "regular", "medium", "bold"]), + textTransform: PropTypes.oneOf(["none", "capitalize", "uppercase", "lowercase"]), + verticalAlign: PropTypes.oneOf([ + "unset", + "baseline", + "sub", + "super", + "text-top", + "text-bottom", + "middle", + "top", + "bottom", + ]), + textGradient: PropTypes.bool, + children: PropTypes.node.isRequired, + opacity: PropTypes.number, +}; + +export default MKTypography; diff --git a/material-kit-react-main/material-kit-react-main/src/examples/Breadcrumbs/index.js b/material-kit-react-main/material-kit-react-main/src/examples/Breadcrumbs/index.js new file mode 100644 index 0000000..3e3ace3 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/examples/Breadcrumbs/index.js @@ -0,0 +1,67 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// react-router-dom components +import { Link } from "react-router-dom"; + +// @mui material components +import MuiBreadcrumbs from "@mui/material/Breadcrumbs"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function Breadcrumbs({ routes, ...rest }) { + return ( + + + {routes.map(({ label, route }) => + route ? ( + info.main, + }, + }} + > + {label} + + ) : ( + + {label} + + ) + )} + + + ); +} + +// Typechecking props for the Breadcrumbs +Breadcrumbs.propTypes = { + routes: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object])).isRequired, +}; + +export default Breadcrumbs; diff --git a/material-kit-react-main/material-kit-react-main/src/examples/Cards/BlogCards/BackgroundBlogCard/index.js b/material-kit-react-main/material-kit-react-main/src/examples/Cards/BlogCards/BackgroundBlogCard/index.js new file mode 100644 index 0000000..e5ac2ac --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/examples/Cards/BlogCards/BackgroundBlogCard/index.js @@ -0,0 +1,120 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// react-router components +import { Link } from "react-router-dom"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Card from "@mui/material/Card"; +import MuiLink from "@mui/material/Link"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function BackgroundBlogCard({ image, title, description, action }) { + const cardActionStyles = { + display: "flex", + alignItems: "center", + width: "max-content", + + "& .material-icons, .material-icons-round,": { + transform: `translateX(2px)`, + transition: "transform 0.2s cubic-bezier(0.34,1.61,0.7,1.3)", + }, + + "&:hover .material-icons, &:focus .material-icons, &:hover .material-icons-round, &:focus .material-icons-round": + { + transform: `translateX(6px)`, + }, + }; + + return ( + + `${linearGradient(rgba(black.main, 0.5), rgba(black.main, 0.5))}, url(${image})`, + backgroundSize: "cover", + }} + > + + + ({ + [breakpoints.down("md")]: { + fontSize: size["3xl"], + }, + })} + > + {title} + + + {description} + + {action.type === "internal" ? ( + + {action.label} + arrow_forward + + ) : ( + + {action.label} + arrow_forward + + )} + + + + ); +} + +// Typechecking props for the BackgroundBlogCard +BackgroundBlogCard.propTypes = { + image: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + action: PropTypes.shape({ + type: PropTypes.oneOf(["external", "internal"]).isRequired, + route: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + }).isRequired, +}; + +export default BackgroundBlogCard; diff --git a/material-kit-react-main/material-kit-react-main/src/examples/Cards/BlogCards/CenteredBlogCard/index.js b/material-kit-react-main/material-kit-react-main/src/examples/Cards/BlogCards/CenteredBlogCard/index.js new file mode 100644 index 0000000..f281e6e --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/examples/Cards/BlogCards/CenteredBlogCard/index.js @@ -0,0 +1,119 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// react-router components +import { Link } from "react-router-dom"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Card from "@mui/material/Card"; +import MuiLink from "@mui/material/Link"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKButton from "components/MKButton"; + +function CenteredBlogCard({ image, title, description, action }) { + return ( + + + + + + + + {title} + + + + {description} + + + {action.type === "external" ? ( + + {action.label} + + ) : ( + + {action.label} + + )} + + + ); +} + +// Typechecking props for the CenteredBlogCard +CenteredBlogCard.propTypes = { + image: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + action: PropTypes.shape({ + type: PropTypes.oneOf(["external", "internal"]).isRequired, + route: PropTypes.string.isRequired, + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "dark", + "light", + ]), + label: PropTypes.string.isRequired, + }).isRequired, +}; + +export default CenteredBlogCard; diff --git a/material-kit-react-main/material-kit-react-main/src/examples/Cards/BlogCards/TransparentBlogCard/index.js b/material-kit-react-main/material-kit-react-main/src/examples/Cards/BlogCards/TransparentBlogCard/index.js new file mode 100644 index 0000000..7cd52d0 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/examples/Cards/BlogCards/TransparentBlogCard/index.js @@ -0,0 +1,168 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// react-router components +import { Link } from "react-router-dom"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; +import MuiLink from "@mui/material/Link"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function TransparentBlogCard({ image, title, description, action }) { + const cardActionStyles = { + display: "flex", + alignItems: "center", + width: "max-content", + + "& .material-icons, .material-icons-round,": { + transform: `translateX(2px)`, + transition: "transform 0.2s cubic-bezier(0.34,1.61,0.7,1.3)", + }, + + "&:hover .material-icons, &:focus .material-icons, &:hover .material-icons-round, &:focus .material-icons-round": + { + transform: `translateX(6px)`, + }, + }; + + const imageTemplate = ( + + + + + ); + + return ( + + {action.type === "internal" ? ( + {imageTemplate} + ) : ( + + {imageTemplate} + + )} + + {action.type === "internal" ? ( + + + {title} + + + ) : ( + + + {title} + + + )} + + {description} + + {action.type === "internal" ? ( + + {action.label} + arrow_forward + + ) : ( + + {action.label} + arrow_forward + + )} + + + ); +} + +// Typechecking props for the TransparentBlogCard +TransparentBlogCard.propTypes = { + image: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + action: PropTypes.shape({ + type: PropTypes.oneOf(["external", "internal"]), + route: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + color: PropTypes.oneOf([ + "inherit", + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + "text", + ]).isRequired, + }).isRequired, +}; + +export default TransparentBlogCard; diff --git a/material-kit-react-main/material-kit-react-main/src/examples/Cards/CounterCards/DefaultCounterCard/index.js b/material-kit-react-main/material-kit-react-main/src/examples/Cards/CounterCards/DefaultCounterCard/index.js new file mode 100644 index 0000000..098f72d --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/examples/Cards/CounterCards/DefaultCounterCard/index.js @@ -0,0 +1,70 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props. +import PropTypes from "prop-types"; + +// react-countup component +import CountUp from "react-countup"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function DefaultCounterCard({ color, count, title, description, ...rest }) { + return ( + + + + + {title && ( + + {title} + + )} + {description && ( + + {description} + + )} + + ); +} + +// Setting default props for the DefaultCounterCard +DefaultCounterCard.defaultProps = { + color: "info", + description: "", + title: "", +}; + +// Typechecking props for the DefaultCounterCard +DefaultCounterCard.propTypes = { + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + count: PropTypes.number.isRequired, + title: PropTypes.string, + description: PropTypes.string, +}; + +export default DefaultCounterCard; diff --git a/material-kit-react-main/material-kit-react-main/src/examples/Cards/InfoCards/DefaultInfoCard/index.js b/material-kit-react-main/material-kit-react-main/src/examples/Cards/InfoCards/DefaultInfoCard/index.js new file mode 100644 index 0000000..90cb3ac --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/examples/Cards/InfoCards/DefaultInfoCard/index.js @@ -0,0 +1,90 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Icon from "@mui/material/Icon"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function DefaultInfoCard({ color, icon, title, description, direction, small }) { + return ( + + {typeof icon === "string" ? ( + + {" "} + {icon}{" "} + + ) : ( + icon + )} + + {title} + + + {description} + + + ); +} + +// Setting default props for the DefaultInfoCard +DefaultInfoCard.defaultProps = { + color: "info", + direction: "left", + small: false, +}; + +// Typechecking props for the DefaultInfoCard +DefaultInfoCard.propTypes = { + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + icon: PropTypes.node.isRequired, + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + direction: PropTypes.oneOf(["left", "right", "center"]), + small: PropTypes.bool, +}; + +export default DefaultInfoCard; diff --git a/material-kit-react-main/material-kit-react-main/src/examples/Cards/InfoCards/FilledInfoCard/index.js b/material-kit-react-main/material-kit-react-main/src/examples/Cards/InfoCards/FilledInfoCard/index.js new file mode 100644 index 0000000..db1e393 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/examples/Cards/InfoCards/FilledInfoCard/index.js @@ -0,0 +1,156 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// react-router-dom components +import { Link } from "react-router-dom"; + +// @mui material components +import Icon from "@mui/material/Icon"; +import MuiLink from "@mui/material/Link"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function FilledInfoCard({ variant, color, icon, title, description, action }) { + const buttonStyles = { + width: "max-content", + display: "flex", + alignItems: "center", + + "& .material-icons-round": { + fontSize: "1.125rem", + transform: `translateX(3px)`, + transition: "transform 0.2s cubic-bezier(0.34, 1.61, 0.7, 1.3)", + }, + + "&:hover .material-icons-round, &:focus .material-icons-round": { + transform: `translateX(6px)`, + }, + }; + + let iconColor = color; + + if (variant === "gradient" && color !== "light") { + iconColor = "white"; + } else if (variant === "gradient" && color === "light") { + iconColor = "dark"; + } + + return ( + + + {typeof icon === "string" ? {icon} : icon} + + + + {title} + + + {description} + + {action && action.type === "external" ? ( + + {action.label} arrow_forward + + ) : null} + {action && action.type === "internal" ? ( + + {action.label} arrow_forward + + ) : null} + + + ); +} + +// Setting default props for the FilledInfoCard +FilledInfoCard.defaultProps = { + variant: "contained", + color: "info", + action: false, +}; + +// Typechecking props for the FilledInfoCard +FilledInfoCard.propTypes = { + variant: PropTypes.oneOf(["contained", "gradient"]), + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + icon: PropTypes.node.isRequired, + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + action: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.shape({ + type: PropTypes.oneOf(["external", "internal"]).isRequired, + route: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + }), + ]), +}; + +export default FilledInfoCard; diff --git a/material-kit-react-main/material-kit-react-main/src/examples/Cards/ReviewCards/DefaultReviewCard/index.js b/material-kit-react-main/material-kit-react-main/src/examples/Cards/ReviewCards/DefaultReviewCard/index.js new file mode 100644 index 0000000..85d8929 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/examples/Cards/ReviewCards/DefaultReviewCard/index.js @@ -0,0 +1,192 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Icon from "@mui/material/Icon"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKAvatar from "components/MKAvatar"; +import MKTypography from "components/MKTypography"; + +function DefaultReviewCard({ color, image, name, date, review, rating }) { + const ratings = { + 0.5: [ + star_outline, + star_outline, + star_outline, + star_outline, + star_outline, + ], + 1: [ + star, + star_outline, + star_outline, + star_outline, + star_outline, + ], + 1.5: [ + star, + star_half, + star_outline, + star_outline, + star_outline, + ], + 2: [ + star, + star, + star_outline, + star_outline, + star_outline, + ], + 2.5: [ + star, + star, + star_half, + star_outline, + star_outline, + ], + 3: [ + star, + star, + star, + star_outline, + star_outline, + ], + 3.5: [ + star, + star, + star, + star_half, + star_outline, + ], + 4: [ + star, + star, + star, + star, + star_outline, + ], + 4.5: [ + star, + star, + star, + star, + star_half, + ], + 5: [ + star, + star, + star, + star, + star, + ], + }; + + return ( + + {image && ( + + )} + + + {name} + + + schedule  + {date} + + + + "{review}" + + + {ratings[rating]} + + + ); +} + +// Setting default values for the props of DefaultReviewCard +DefaultReviewCard.defaultProps = { + color: "transparent", + image: "", +}; + +// Typechecking props for the DefaultReviewCard +DefaultReviewCard.propTypes = { + color: PropTypes.oneOf([ + "transparent", + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "dark", + "light", + ]), + image: PropTypes.string, + name: PropTypes.string.isRequired, + date: PropTypes.string.isRequired, + review: PropTypes.string.isRequired, + rating: PropTypes.oneOf([1, 2, 3, 4, 5]).isRequired, +}; + +export default DefaultReviewCard; diff --git a/material-kit-react-main/material-kit-react-main/src/examples/Cards/RotatingCard/RotatingCardBack.js b/material-kit-react-main/material-kit-react-main/src/examples/Cards/RotatingCard/RotatingCardBack.js new file mode 100644 index 0000000..d72b8d8 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/examples/Cards/RotatingCard/RotatingCardBack.js @@ -0,0 +1,118 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props. +import PropTypes from "prop-types"; + +// react-router-dom components +import { Link } from "react-router-dom"; + +// @mui material components +import MuiLink from "@mui/material/Link"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKButton from "components/MKButton"; + +function RotatingCard({ color, image, title, description, action }) { + return ( + + `${linearGradient( + rgba(gradients[color] ? gradients[color].main : gradients.info.main, 0.85), + rgba(gradients[color] ? gradients[color].main : gradients.info.main, 0.85) + )}, url(${image})`, + backgroundSize: "cover", + backfaceVisibility: "hidden", + transform: "rotateY(180deg)", + }} + > + + + {title} + + + {description} + + {action && ( + + {action.type === "external" ? ( + + {action.label} + + ) : ( + + {action.label} + + )} + + )} + + + ); +} + +// Setting default props for the RotatingCard +RotatingCard.defaultProps = { + color: "info", +}; + +// Typechecking props for the RotatingCard +RotatingCard.propTypes = { + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "dark", + "light", + ]), + image: PropTypes.string.isRequired, + title: PropTypes.node.isRequired, + description: PropTypes.node.isRequired, + action: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.shape({ + type: PropTypes.oneOf(["external", "internal"]).isRequired, + route: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + }), + ]).isRequired, +}; + +export default RotatingCard; diff --git a/material-kit-react-main/material-kit-react-main/src/examples/Cards/RotatingCard/RotatingCardFront.js b/material-kit-react-main/material-kit-react-main/src/examples/Cards/RotatingCard/RotatingCardFront.js new file mode 100644 index 0000000..f14dd03 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/examples/Cards/RotatingCard/RotatingCardFront.js @@ -0,0 +1,88 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props. +import PropTypes from "prop-types"; + +// @mui material components +import Icon from "@mui/material/Icon"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function RotatingCardFront({ color, image, icon, title, description }) { + return ( + + `${linearGradient( + rgba(gradients[color] ? gradients[color].main : gradients.info.main, 0.85), + rgba(gradients[color] ? gradients[color].main : gradients.info.main, 0.85) + )}, url(${image})`, + backgroundSize: "cover", + backfaceVisibility: "hidden", + }} + > + + {icon && ( + + {typeof icon === "string" ? {icon} : icon} + + )} + + {title} + + + {description} + + + + ); +} + +// Setting default props for the RotatingCardFront +RotatingCardFront.defaultProps = { + color: "info", + icon: "", +}; + +// Typechecking props for the RotatingCardFront +RotatingCardFront.propTypes = { + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "dark", + "light", + ]), + image: PropTypes.string.isRequired, + icon: PropTypes.node, + title: PropTypes.node.isRequired, + description: PropTypes.node.isRequired, +}; + +export default RotatingCardFront; diff --git a/material-kit-react-main/material-kit-react-main/src/examples/Cards/RotatingCard/index.js b/material-kit-react-main/material-kit-react-main/src/examples/Cards/RotatingCard/index.js new file mode 100644 index 0000000..819421f --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/examples/Cards/RotatingCard/index.js @@ -0,0 +1,56 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useState } from "react"; + +// prop-types is a library for typechecking of props. +import PropTypes from "prop-types"; + +// @mui material components +import Card from "@mui/material/Card"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; + +function RotatingCard({ children }) { + const [rotate, setRotate] = useState(false); + + const rotate0 = () => setRotate(false); + const rotate180 = () => setRotate(true); + + return ( + + + {children} + + + ); +} + +// Typechecking props for the RotatingCard +RotatingCard.propTypes = { + children: PropTypes.node.isRequired, +}; + +export default RotatingCard; diff --git a/material-kit-react-main/material-kit-react-main/src/examples/Cards/TeamCards/HorizontalTeamCard/index.js b/material-kit-react-main/material-kit-react-main/src/examples/Cards/TeamCards/HorizontalTeamCard/index.js new file mode 100644 index 0000000..1c57e2b --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/examples/Cards/TeamCards/HorizontalTeamCard/index.js @@ -0,0 +1,79 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Card from "@mui/material/Card"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function HorizontalTeamCard({ image, name, position, description }) { + return ( + + + + + + + + + + {name} + + {position.label} + + + {description} + + + + + + ); +} + +// Typechecking props for the HorizontalTeamCard +HorizontalTeamCard.propTypes = { + image: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + position: PropTypes.shape({ + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "dark", + "light", + ]), + label: PropTypes.string.isRequired, + }).isRequired, + description: PropTypes.string.isRequired, +}; + +export default HorizontalTeamCard; diff --git a/material-kit-react-main/material-kit-react-main/src/examples/Footers/CenteredFooter/index.js b/material-kit-react-main/material-kit-react-main/src/examples/Footers/CenteredFooter/index.js new file mode 100644 index 0000000..2353544 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/examples/Footers/CenteredFooter/index.js @@ -0,0 +1,144 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Link from "@mui/material/Link"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// @mui icons +import FacebookIcon from "@mui/icons-material/Facebook"; +import TwitterIcon from "@mui/icons-material/Twitter"; +import InstagramIcon from "@mui/icons-material/Instagram"; +import PinterestIcon from "@mui/icons-material/Pinterest"; +import GitHubIcon from "@mui/icons-material/GitHub"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function CenteredFooter({ company, links, socials, light }) { + const { href, name } = company; + + const year = new Date().getFullYear(); + + const renderLinks = links.map((link) => ( + + {link.name} + + )); + + const renderSocials = socials.map((social) => ( + + {social.icon} + + )); + + return ( + + + + + {renderLinks} + + + + + {renderSocials} + + + + + Copyright © {year} Material by{" "} + + {name} + + . + + + + + ); +} + +// Setting default values for the props of CenteredFooter +CenteredFooter.defaultProps = { + company: { href: "https://www.creative-tim.com/", name: "Creative Tim" }, + links: [ + { href: "https://www.creative-tim.com/", name: "Company" }, + { href: "https://www.creative-tim.com/presentation", name: "About Us" }, + { href: "https://www.creative-tim.com/presentation", name: "Team" }, + { href: "https://www.creative-tim.com/templates/react", name: "Products" }, + { href: "https://www.creative-tim.com/blog", name: "Blog" }, + { href: "https://www.creative-tim.com/license", name: "License" }, + ], + socials: [ + { icon: , link: "https://www.facebook.com/CreativeTim/" }, + { + icon: , + link: "https://twitter.com/creativetim", + }, + { + icon: , + link: "https://www.instagram.com/creativetimofficial/", + }, + { + icon: , + link: "https://ro.pinterest.com/thecreativetim/", + }, + { icon: , link: "https://github.com/creativetimofficial" }, + ], + light: false, +}; + +// Typechecking props for the CenteredFooter +CenteredFooter.propTypes = { + company: PropTypes.objectOf(PropTypes.string), + links: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object])), + socials: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object])), + light: PropTypes.bool, +}; + +export default CenteredFooter; diff --git a/material-kit-react-main/material-kit-react-main/src/examples/Footers/DefaultFooter/index.js b/material-kit-react-main/material-kit-react-main/src/examples/Footers/DefaultFooter/index.js new file mode 100644 index 0000000..bdaa549 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/examples/Footers/DefaultFooter/index.js @@ -0,0 +1,118 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// react-router-dom components +import { Link } from "react-router-dom"; + +// prop-types is a library for typechecking of props. +import PropTypes from "prop-types"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function DefaultFooter({ content }) { + const { brand, socials, menus, copyright } = content; + + return ( + + + + + + + + + {brand.name} + + + {socials.map(({ icon, link }, key) => ( + + {icon} + + ))} + + + {menus.map(({ name: title, items }) => ( + + + {title} + + + {items.map(({ name, route, href }) => ( + + {href ? ( + + {name} + + ) : ( + + {name} + + )} + + ))} + + + ))} + + {copyright} + + + + + ); +} + +// Typechecking props for the DefaultFooter +DefaultFooter.propTypes = { + content: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.object, PropTypes.array])).isRequired, +}; + +export default DefaultFooter; diff --git a/material-kit-react-main/material-kit-react-main/src/examples/Footers/SimpleFooter/index.js b/material-kit-react-main/material-kit-react-main/src/examples/Footers/SimpleFooter/index.js new file mode 100644 index 0000000..d6a7b34 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/examples/Footers/SimpleFooter/index.js @@ -0,0 +1,126 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Container from "@mui/material/Container"; +import Link from "@mui/material/Link"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 React base styles +import typography from "assets/theme/base/typography"; + +function SimpleFooter({ company, links, light }) { + const { href, name } = company; + const { size } = typography; + + const renderLinks = () => + links.map((link, key) => ( + + + + {link.name} + + + + )); + + return ( + + + + © {new Date().getFullYear()}, made with + + + favorite + + + by + + +  {name}  + + + for a better web. + + ({ + display: "flex", + flexWrap: "wrap", + alignItems: "center", + justifyContent: "center", + listStyle: "none", + mt: 3, + mb: 0, + p: 0, + + [breakpoints.up("lg")]: { + mt: 0, + }, + })} + > + {renderLinks()} + + + + ); +} + +// Setting default values for the props of SimpleFooter +SimpleFooter.defaultProps = { + company: { href: "https://www.creative-tim.com/", name: "Creative Tim" }, + links: [ + { href: "https://www.creative-tim.com/", name: "Creative Tim" }, + { href: "https://www.creative-tim.com/presentation", name: "About Us" }, + { href: "https://www.creative-tim.com/blog", name: "Blog" }, + { href: "https://www.creative-tim.com/license", name: "License" }, + ], + light: false, +}; + +// Typechecking props for the SimpleFooter +SimpleFooter.propTypes = { + company: PropTypes.objectOf(PropTypes.string), + links: PropTypes.arrayOf(PropTypes.shape), + light: PropTypes.bool, +}; + +export default SimpleFooter; diff --git a/material-kit-react-main/material-kit-react-main/src/examples/Navbars/DefaultNavbar/DefaultNavbarDropdown.js b/material-kit-react-main/material-kit-react-main/src/examples/Navbars/DefaultNavbar/DefaultNavbarDropdown.js new file mode 100644 index 0000000..100c08b --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/examples/Navbars/DefaultNavbar/DefaultNavbarDropdown.js @@ -0,0 +1,120 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// react-router-dom components +import { Link } from "react-router-dom"; + +// @mui material components +import Collapse from "@mui/material/Collapse"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function DefaultNavbarDropdown({ + name, + icon, + children, + collapseStatus, + light, + href, + route, + collapse, + ...rest +}) { + const linkComponent = { + component: "a", + href, + target: "_blank", + rel: "noreferrer", + }; + + const routeComponent = { + component: Link, + to: route, + }; + + return ( + <> + + + {icon} + + + {name} + + + + {collapse && "keyboard_arrow_down"} + + + + {children && ( + + {children} + + )} + + ); +} + +// Setting default values for the props of DefaultNavbarDropdown +DefaultNavbarDropdown.defaultProps = { + children: false, + collapseStatus: false, + light: false, + href: "", + route: "", +}; + +// Typechecking props for the DefaultNavbarDropdown +DefaultNavbarDropdown.propTypes = { + name: PropTypes.string.isRequired, + icon: PropTypes.node.isRequired, + children: PropTypes.node, + collapseStatus: PropTypes.bool, + light: PropTypes.bool, + href: PropTypes.string, + route: PropTypes.string, + collapse: PropTypes.bool.isRequired, +}; + +export default DefaultNavbarDropdown; diff --git a/material-kit-react-main/material-kit-react-main/src/examples/Navbars/DefaultNavbar/DefaultNavbarMobile.js b/material-kit-react-main/material-kit-react-main/src/examples/Navbars/DefaultNavbar/DefaultNavbarMobile.js new file mode 100644 index 0000000..72b0eb3 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/examples/Navbars/DefaultNavbar/DefaultNavbarMobile.js @@ -0,0 +1,166 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useState } from "react"; + +// react-router components +import { Link } from "react-router-dom"; + +// prop-types is a library for typechecking of props. +import PropTypes from "prop-types"; + +// @mui material components +import Collapse from "@mui/material/Collapse"; +import MuiLink from "@mui/material/Link"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 React example components +import DefaultNavbarDropdown from "examples/Navbars/DefaultNavbar/DefaultNavbarDropdown"; + +function DefaultNavbarMobile({ routes, open }) { + const [collapse, setCollapse] = useState(""); + + const handleSetCollapse = (name) => (collapse === name ? setCollapse(false) : setCollapse(name)); + + const renderNavbarItems = routes.map( + ({ name, icon, collapse: routeCollapses, href, route, collapse: navCollapse }) => ( + handleSetCollapse(name)} + href={href} + route={route} + collapse={Boolean(navCollapse)} + > + + {routeCollapses && + routeCollapses.map((item) => ( + + {item.collapse ? ( + <> + + {item.name} + + {item.collapse.map((el) => ( + ({ + borderRadius: borderRadius.md, + cursor: "pointer", + transition: "all 300ms linear", + + "&:hover": { + backgroundColor: grey[200], + color: dark.main, + }, + })} + > + {el.name} + + ))} + + ) : ( + ({ + borderRadius: borderRadius.md, + cursor: "pointer", + transition: "all 300ms linear", + py: 1, + px: 1.625, + + "&:hover": { + backgroundColor: grey[200], + color: dark.main, + + "& *": { + color: dark.main, + }, + }, + })} + > + + {item.name} + + + {item.description} + + + )} + + ))} + + + ) + ); + + return ( + + + {renderNavbarItems} + + + ); +} + +// Typechecking props for the DefaultNavbarMobile +DefaultNavbarMobile.propTypes = { + routes: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object])).isRequired, + open: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]).isRequired, +}; + +export default DefaultNavbarMobile; diff --git a/material-kit-react-main/material-kit-react-main/src/examples/Navbars/DefaultNavbar/index.js b/material-kit-react-main/material-kit-react-main/src/examples/Navbars/DefaultNavbar/index.js new file mode 100644 index 0000000..93eeaa6 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/examples/Navbars/DefaultNavbar/index.js @@ -0,0 +1,594 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { Fragment, useState, useEffect } from "react"; + +// react-router components +import { Link } from "react-router-dom"; + +// prop-types is a library for typechecking of props. +import PropTypes from "prop-types"; + +// @mui material components +import Container from "@mui/material/Container"; +import Icon from "@mui/material/Icon"; +import Popper from "@mui/material/Popper"; +import Grow from "@mui/material/Grow"; +import Grid from "@mui/material/Grid"; +import Divider from "@mui/material/Divider"; +import MuiLink from "@mui/material/Link"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKButton from "components/MKButton"; + +// Material Kit 2 React example components +import DefaultNavbarDropdown from "examples/Navbars/DefaultNavbar/DefaultNavbarDropdown"; +import DefaultNavbarMobile from "examples/Navbars/DefaultNavbar/DefaultNavbarMobile"; + +// Material Kit 2 React base styles +import breakpoints from "assets/theme/base/breakpoints"; + +function DefaultNavbar({ brand, routes, transparent, light, action, sticky, relative, center }) { + const [dropdown, setDropdown] = useState(""); + const [dropdownEl, setDropdownEl] = useState(""); + const [dropdownName, setDropdownName] = useState(""); + const [nestedDropdown, setNestedDropdown] = useState(""); + const [nestedDropdownEl, setNestedDropdownEl] = useState(""); + const [nestedDropdownName, setNestedDropdownName] = useState(""); + const [arrowRef, setArrowRef] = useState(null); + const [mobileNavbar, setMobileNavbar] = useState(false); + const [mobileView, setMobileView] = useState(false); + + const openMobileNavbar = () => setMobileNavbar(!mobileNavbar); + + useEffect(() => { + // A function that sets the display state for the DefaultNavbarMobile. + function displayMobileNavbar() { + if (window.innerWidth < breakpoints.values.lg) { + setMobileView(true); + setMobileNavbar(false); + } else { + setMobileView(false); + setMobileNavbar(false); + } + } + + /** + The event listener that's calling the displayMobileNavbar function when + resizing the window. + */ + window.addEventListener("resize", displayMobileNavbar); + + // Call the displayMobileNavbar function to set the state with the initial value. + displayMobileNavbar(); + + // Remove event listener on cleanup + return () => window.removeEventListener("resize", displayMobileNavbar); + }, []); + + const renderNavbarItems = routes.map(({ name, icon, href, route, collapse }) => ( + { + if (collapse) { + setDropdown(currentTarget); + setDropdownEl(currentTarget); + setDropdownName(name); + } + }} + onMouseLeave={() => collapse && setDropdown(null)} + light={light} + /> + )); + + // Render the routes on the dropdown menu + const renderRoutes = routes.map(({ name, collapse, columns, rowsPerColumn }) => { + let template; + + // Render the dropdown menu that should be display as columns + if (collapse && columns && name === dropdownName) { + const calculateColumns = collapse.reduce((resultArray, item, index) => { + const chunkIndex = Math.floor(index / rowsPerColumn); + + if (!resultArray[chunkIndex]) { + resultArray[chunkIndex] = []; + } + + resultArray[chunkIndex].push(item); + + return resultArray; + }, []); + + template = ( + + {calculateColumns.map((cols, key) => { + const gridKey = `grid-${key}`; + const dividerKey = `divider-${key}`; + + return ( + + {cols.map((col, index) => ( + + + {col.name} + + {col.collapse.map((item) => ( + e.preventDefault()} + target={item.href ? "_blank" : ""} + rel={item.href ? "noreferrer" : "noreferrer"} + minWidth="11.25rem" + display="block" + variant="button" + color="text" + textTransform="capitalize" + fontWeight="regular" + py={0.625} + px={2} + sx={({ palette: { grey, dark }, borders: { borderRadius } }) => ({ + borderRadius: borderRadius.md, + cursor: "pointer", + transition: "all 300ms linear", + + "&:hover": { + backgroundColor: grey[200], + color: dark.main, + }, + })} + > + {item.name} + + ))} + + ))} + {key !== 0 && ( + + )} + + ); + })} + + ); + + // Render the dropdown menu that should be display as list items + } else if (collapse && name === dropdownName) { + template = collapse.map((item) => { + const linkComponent = { + component: MuiLink, + href: item.href, + target: "_blank", + rel: "noreferrer", + }; + + const routeComponent = { + component: Link, + to: item.route, + }; + + return ( + ({ + borderRadius: borderRadius.md, + cursor: "pointer", + transition: "all 300ms linear", + + "&:hover": { + backgroundColor: grey[200], + color: dark.main, + + "& *": { + color: dark.main, + }, + }, + })} + onMouseEnter={({ currentTarget }) => { + if (item.dropdown) { + setNestedDropdown(currentTarget); + setNestedDropdownEl(currentTarget); + setNestedDropdownName(item.name); + } + }} + onMouseLeave={() => { + if (item.dropdown) { + setNestedDropdown(null); + } + }} + > + {item.description ? ( + + {item.name} + + {item.description} + + + ) : ( + item.name + )} + {item.collapse && ( + + keyboard_arrow_right + + )} + + ); + }); + } + + return template; + }); + + // Routes dropdown menu + const dropdownMenu = ( + setDropdown(dropdownEl)} + onMouseLeave={() => { + if (!nestedDropdown) { + setDropdown(null); + setDropdownName(""); + } + }} + > + {({ TransitionProps }) => ( + white.main, + }} + > + + + + arrow_drop_up + + + + {renderRoutes} + + + + )} + + ); + + // Render routes that are nested inside the dropdown menu routes + const renderNestedRoutes = routes.map(({ collapse, columns }) => + collapse && !columns + ? collapse.map(({ name: parentName, collapse: nestedCollapse }) => { + let template; + + if (parentName === nestedDropdownName) { + template = + nestedCollapse && + nestedCollapse.map((item) => { + const linkComponent = { + component: MuiLink, + href: item.href, + target: "_blank", + rel: "noreferrer", + }; + + const routeComponent = { + component: Link, + to: item.route, + }; + + return ( + ({ + borderRadius: borderRadius.md, + cursor: "pointer", + transition: "all 300ms linear", + + "&:hover": { + backgroundColor: grey[200], + color: dark.main, + + "& *": { + color: dark.main, + }, + }, + })} + > + {item.description ? ( + + {item.name} + + {item.description} + + + ) : ( + item.name + )} + {item.collapse && ( + + keyboard_arrow_right + + )} + + ); + }); + } + + return template; + }) + : null + ); + + // Dropdown menu for the nested dropdowns + const nestedDropdownMenu = ( + { + setNestedDropdown(nestedDropdownEl); + }} + onMouseLeave={() => { + setNestedDropdown(null); + setNestedDropdownName(""); + setDropdown(null); + }} + > + {({ TransitionProps }) => ( + white.main, + }} + > + + + {renderNestedRoutes} + + + + )} + + ); + + return ( + + ({ + backgroundColor: transparent ? transparentColor.main : rgba(white.main, 0.8), + backdropFilter: transparent ? "none" : `saturate(200%) blur(30px)`, + })} + > + + + + {brand} + + + + {renderNavbarItems} + + + {action && + (action.type === "internal" ? ( + + {action.label} + + ) : ( + + {action.label} + + ))} + + + {mobileNavbar ? "close" : "menu"} + + + + {mobileView && } + + + {dropdownMenu} + {nestedDropdownMenu} + + ); +} + +// Setting default values for the props of DefaultNavbar +DefaultNavbar.defaultProps = { + brand: "Material Kit 2", + transparent: false, + light: false, + action: false, + sticky: false, + relative: false, + center: false, +}; + +// Typechecking props for the DefaultNavbar +DefaultNavbar.propTypes = { + brand: PropTypes.string, + routes: PropTypes.arrayOf(PropTypes.shape).isRequired, + transparent: PropTypes.bool, + light: PropTypes.bool, + action: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.shape({ + type: PropTypes.oneOf(["external", "internal"]).isRequired, + route: PropTypes.string.isRequired, + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "dark", + "light", + "default", + "white", + ]), + label: PropTypes.string.isRequired, + }), + ]), + sticky: PropTypes.bool, + relative: PropTypes.bool, + center: PropTypes.bool, +}; + +export default DefaultNavbar; diff --git a/material-kit-react-main/material-kit-react-main/src/footer.routes.js b/material-kit-react-main/material-kit-react-main/src/footer.routes.js new file mode 100644 index 0000000..c00c651 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/footer.routes.js @@ -0,0 +1,91 @@ +// @mui icons +import FacebookIcon from "@mui/icons-material/Facebook"; +import TwitterIcon from "@mui/icons-material/Twitter"; +import GitHubIcon from "@mui/icons-material/GitHub"; +import YouTubeIcon from "@mui/icons-material/YouTube"; + +// Material Kit 2 React components +import MKTypography from "components/MKTypography"; + +// Images +import logoCT from "assets/images/logo-ct-dark.png"; + +const date = new Date().getFullYear(); + +export default { + brand: { + name: "Material Kit 2", + image: logoCT, + route: "/", + }, + socials: [ + { + icon: , + link: "https://www.facebook.com/CreativeTim/", + }, + { + icon: , + link: "https://twitter.com/creativetim", + }, + { + icon: , + link: "https://github.com/creativetimofficial", + }, + { + icon: , + link: "https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w", + }, + ], + menus: [ + { + name: "company", + items: [ + { name: "about us", href: "https://www.creative-tim.com/presentation" }, + { name: "freebies", href: "https://www.creative-tim.com/templates/free" }, + { name: "premium tools", href: "https://www.creative-tim.com/templates/premium" }, + { name: "blog", href: "https://www.creative-tim.com/blog" }, + ], + }, + { + name: "resources", + items: [ + { name: "illustrations", href: "https://iradesign.io/" }, + { name: "bits & snippets", href: "https://www.creative-tim.com/bits" }, + { name: "affiliate program", href: "https://www.creative-tim.com/affiliates/new" }, + ], + }, + { + name: "help & support", + items: [ + { name: "contact us", href: "https://www.creative-tim.com/contact-us" }, + { name: "knowledge center", href: "https://www.creative-tim.com/knowledge-center" }, + { name: "custom development", href: "https://services.creative-tim.com/" }, + { name: "sponsorships", href: "https://www.creative-tim.com/sponsorships" }, + ], + }, + { + name: "legal", + items: [ + { name: "terms & conditions", href: "https://www.creative-tim.com/terms" }, + { name: "privacy policy", href: "https://www.creative-tim.com/privacy" }, + { name: "licenses (EULA)", href: "https://www.creative-tim.com/license" }, + ], + }, + ], + copyright: ( + + All rights reserved. Copyright © {date} Material Kit by{" "} + + Creative Tim + + . + + ), +}; diff --git a/material-kit-react-main/material-kit-react-main/src/index.js b/material-kit-react-main/material-kit-react-main/src/index.js new file mode 100644 index 0000000..9b4a533 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/index.js @@ -0,0 +1,30 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import React from "react"; +import * as ReactDOMClient from "react-dom/client"; +import { BrowserRouter } from "react-router-dom"; +import App from "App"; + +const container = document.getElementById("root"); + +// Create a root. +const root = ReactDOMClient.createRoot(container); + +root.render( + + + +); diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/pages/authentication/sign-in/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/pages/authentication/sign-in/index.js new file mode 100644 index 0000000..2ad3ee6 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/pages/authentication/sign-in/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React pages +import SignIn from "pages/LandingPages/SignIn"; + +export default function SignInPage() { + return ; +} diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/pages/landing-pages/about-us/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/pages/landing-pages/about-us/index.js new file mode 100644 index 0000000..2fdb4b0 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/pages/landing-pages/about-us/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React pages +import AboutUs from "pages/LandingPages/AboutUs"; + +export default function AboutUsPage() { + return ; +} diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/pages/landing-pages/author/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/pages/landing-pages/author/index.js new file mode 100644 index 0000000..594f704 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/pages/landing-pages/author/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React pages +import Author from "pages/LandingPages/Author"; + +export default function AuthorPage() { + return ; +} diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/pages/landing-pages/contact-us/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/pages/landing-pages/contact-us/index.js new file mode 100644 index 0000000..1ee326c --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/pages/landing-pages/contact-us/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React pages +import ContactUs from "pages/LandingPages/ContactUs"; + +export default function ContactUsPage() { + return ; +} diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/pages/presentation/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/pages/presentation/index.js new file mode 100644 index 0000000..4c64eda --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/pages/presentation/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React pages +import Presentation from "pages/Presentation"; + +export default function PresentationPage() { + return ; +} diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/alerts/components/SimpleAlerts/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/alerts/components/SimpleAlerts/code.js new file mode 100644 index 0000000..6cf12cd --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/alerts/components/SimpleAlerts/code.js @@ -0,0 +1,46 @@ +const simpleAlertsCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKAlert from "components/MKAlert"; + +function SimpleAlerts() { + return ( + + + + + A simple primary alert—check it out! + + + A simple secondary alert—check it out! + + + A simple success alert—check it out! + + + A simple error alert—check it out! + + + A simple warning alert—check it out! + + + A simple info alert—check it out! + + + A simple light alert—check it out! + + + A simple dark alert—check it out! + + + + + ); +} + +export default SimpleAlerts;`; + +export default simpleAlertsCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/alerts/components/SimpleAlerts/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/alerts/components/SimpleAlerts/index.js new file mode 100644 index 0000000..b878cf2 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/alerts/components/SimpleAlerts/index.js @@ -0,0 +1,59 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKAlert from "components/MKAlert"; + +function SimpleAlerts() { + return ( + + + + + A simple primary alert—check it out! + + + A simple secondary alert—check it out! + + + A simple success alert—check it out! + + + A simple error alert—check it out! + + + A simple warning alert—check it out! + + + A simple info alert—check it out! + + + A simple light alert—check it out! + + + A simple dark alert—check it out! + + + + + ); +} + +export default SimpleAlerts; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/alerts/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/alerts/index.js new file mode 100644 index 0000000..5a7a4cc --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/alerts/index.js @@ -0,0 +1,42 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// ALerts page components +import SimpleAlerts from "layouts/sections/attention-catchers/alerts/components/SimpleAlerts"; + +// ALerts page components code +import simpleAlertsCode from "layouts/sections/attention-catchers/alerts/components/SimpleAlerts/code"; + +function Alerts() { + return ( + + + + + + ); +} + +export default Alerts; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/modals/components/SimpleModal/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/modals/components/SimpleModal/code.js new file mode 100644 index 0000000..a5ba4c1 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/modals/components/SimpleModal/code.js @@ -0,0 +1,76 @@ +const simpleModalCode = `import { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Modal from "@mui/material/Modal"; +import Divider from "@mui/material/Divider"; +import Slide from "@mui/material/Slide"; + +// @mui icons +import CloseIcon from "@mui/icons-material/Close"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +function SimpleModal() { + const [show, setShow] = useState(false); + const toggleModal = () => setShow(!show); + + return ( + + + + + Launch Demo Modal + + + + + + + Your modal title + + + + + + Society has put up so many boundaries, so many limitations on what's right + and wrong that it's almost impossible to get a pure thought out. +
+
+ It's like a little kid, a little boy, looking at colors, and no one told him + what colors are good, before somebody tells you you shouldn't like pink + because that's for girls, or you'd instantly become a gay two-year-old. + + + + + + close + + + save changes + + + + + + + + ); +} + +export default SimpleModal;`; + +export default simpleModalCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/modals/components/SimpleModal/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/modals/components/SimpleModal/index.js new file mode 100644 index 0000000..c9cec85 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/modals/components/SimpleModal/index.js @@ -0,0 +1,89 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Modal from "@mui/material/Modal"; +import Divider from "@mui/material/Divider"; +import Slide from "@mui/material/Slide"; + +// @mui icons +import CloseIcon from "@mui/icons-material/Close"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +function SimpleModal() { + const [show, setShow] = useState(false); + const toggleModal = () => setShow(!show); + + return ( + + + + + Launch Demo Modal + + + + + + + Your modal title + + + + + + Society has put up so many boundaries, so many limitations on what's right + and wrong that it's almost impossible to get a pure thought out. +
+
+ It's like a little kid, a little boy, looking at colors, and no one told him + what colors are good, before somebody tells you you shouldn't like pink + because that's for girls, or you'd instantly become a gay two-year-old. + + + + + + close + + + save changes + + + + + + + + ); +} + +export default SimpleModal; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/modals/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/modals/index.js new file mode 100644 index 0000000..526c247 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/modals/index.js @@ -0,0 +1,42 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Modals page components +import SimpleModal from "layouts/sections/attention-catchers/modals/components/SimpleModal"; + +// Modals page components code +import simpleModalCode from "layouts/sections/attention-catchers/modals/components/SimpleModal/code"; + +function Modals() { + return ( + + + + + + ); +} + +export default Modals; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/tooltips-popovers/components/Popovers/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/tooltips-popovers/components/Popovers/code.js new file mode 100644 index 0000000..11ce710 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/tooltips-popovers/components/Popovers/code.js @@ -0,0 +1,132 @@ +const popoversCode = `import { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; +import Popover from "@mui/material/Popover"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +function Popovers() { + const [popover, setPopover] = useState(null); + const [popoverOrigin, setPopoverOrigin] = useState({ + anchorOrigin: { + vertical: "top", + horizontal: "center", + }, + transformOrigin: { + vertical: "bottom", + horizontal: "center", + }, + }); + + const togglePopover = ({ currentTarget }) => setPopover(currentTarget); + const closePopover = () => setPopover(null); + + const popoverTemplate = ( + + + + That's the main thing people are controlled +
by! Thoughts- their perception of themselves! + + + + ); + + return ( + + + + + { + togglePopover(event); + setPopoverOrigin({ + anchorOrigin: { + vertical: "top", + horizontal: "center", + }, + transformOrigin: { + vertical: "bottom", + horizontal: "center", + }, + }); + }} + > + popover on top + + { + togglePopover(event); + setPopoverOrigin({ + anchorOrigin: { + vertical: "center", + horizontal: "right", + }, + transformOrigin: { + vertical: "center", + horizontal: "left", + }, + }); + }} + > + popover on right + + { + togglePopover(event); + setPopoverOrigin({ + anchorOrigin: { + vertical: "center", + horizontal: "left", + }, + transformOrigin: { + vertical: "center", + horizontal: "right", + }, + }); + }} + > + popover on left + + { + togglePopover(event); + setPopoverOrigin({ + anchorOrigin: { + vertical: "bottom", + horizontal: "center", + }, + transformOrigin: { + vertical: "top", + horizontal: "center", + }, + }); + }} + > + popover on bottom + + + + {popoverTemplate} + + + ); +} + +export default Popovers;`; + +export default popoversCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/tooltips-popovers/components/Popovers/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/tooltips-popovers/components/Popovers/index.js new file mode 100644 index 0000000..dbfc440 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/tooltips-popovers/components/Popovers/index.js @@ -0,0 +1,145 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; +import Popover from "@mui/material/Popover"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +function Popovers() { + const [popover, setPopover] = useState(null); + const [popoverOrigin, setPopoverOrigin] = useState({ + anchorOrigin: { + vertical: "top", + horizontal: "center", + }, + transformOrigin: { + vertical: "bottom", + horizontal: "center", + }, + }); + + const togglePopover = ({ currentTarget }) => setPopover(currentTarget); + const closePopover = () => setPopover(null); + + const popoverTemplate = ( + + + + That's the main thing people are controlled +
by! Thoughts- their perception of themselves! + + + + ); + + return ( + + + + + { + togglePopover(event); + setPopoverOrigin({ + anchorOrigin: { + vertical: "top", + horizontal: "center", + }, + transformOrigin: { + vertical: "bottom", + horizontal: "center", + }, + }); + }} + > + popover on top + + { + togglePopover(event); + setPopoverOrigin({ + anchorOrigin: { + vertical: "center", + horizontal: "right", + }, + transformOrigin: { + vertical: "center", + horizontal: "left", + }, + }); + }} + > + popover on right + + { + togglePopover(event); + setPopoverOrigin({ + anchorOrigin: { + vertical: "center", + horizontal: "left", + }, + transformOrigin: { + vertical: "center", + horizontal: "right", + }, + }); + }} + > + popover on left + + { + togglePopover(event); + setPopoverOrigin({ + anchorOrigin: { + vertical: "bottom", + horizontal: "center", + }, + transformOrigin: { + vertical: "top", + horizontal: "center", + }, + }); + }} + > + popover on bottom + + + + {popoverTemplate} + + + ); +} + +export default Popovers; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/tooltips-popovers/components/Tooltips/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/tooltips-popovers/components/Tooltips/code.js new file mode 100644 index 0000000..4fbc5b6 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/tooltips-popovers/components/Tooltips/code.js @@ -0,0 +1,46 @@ +const tooltipsCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; +import Tooltip from "@mui/material/Tooltip"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; + +function Tooltips() { + return ( + + + + + + + tooltip on top + + + + + tooltip on right + + + + + tooltip on bottom + + + + + tooltip on left + + + + + + + ); +} + +export default Tooltips;`; + +export default tooltipsCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/tooltips-popovers/components/Tooltips/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/tooltips-popovers/components/Tooltips/index.js new file mode 100644 index 0000000..24e2165 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/tooltips-popovers/components/Tooltips/index.js @@ -0,0 +1,59 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; +import Tooltip from "@mui/material/Tooltip"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; + +function Tooltips() { + return ( + + + + + + + tooltip on top + + + + + tooltip on right + + + + + tooltip on bottom + + + + + tooltip on left + + + + + + + ); +} + +export default Tooltips; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/tooltips-popovers/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/tooltips-popovers/index.js new file mode 100644 index 0000000..0b014b3 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/attention-catchers/tooltips-popovers/index.js @@ -0,0 +1,47 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Tooltips and popovers page components +import Popovers from "layouts/sections/attention-catchers/tooltips-popovers/components/Popovers"; +import Tooltips from "layouts/sections/attention-catchers/tooltips-popovers/components/Tooltips"; + +// Tooltips and popovers page components code +import popoversCode from "layouts/sections/attention-catchers/tooltips-popovers/components/Popovers/code"; +import tooltipsCode from "layouts/sections/attention-catchers/tooltips-popovers/components/Tooltips/code"; + +function TooltipsPopovers() { + return ( + + + + + + + + + ); +} + +export default TooltipsPopovers; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/components/BaseLayout/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/components/BaseLayout/index.js new file mode 100644 index 0000000..b599c74 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/components/BaseLayout/index.js @@ -0,0 +1,76 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; +import CenteredFooter from "examples/Footers/CenteredFooter"; +import Breadcrumbs from "examples/Breadcrumbs"; + +// Routes +import routes from "routes"; + +function BaseLayout({ breadcrumb, title, children }) { + return ( + + + + + + + + + + + {title} + + {children} + + + + + + + ); +} + +// Typechecking props for the BaseLayout +BaseLayout.propTypes = { + breadcrumb: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object])).isRequired, + title: PropTypes.string.isRequired, + children: PropTypes.node.isRequired, +}; + +export default BaseLayout; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/components/View/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/components/View/index.js new file mode 100644 index 0000000..c684f01 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/components/View/index.js @@ -0,0 +1,193 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useState, useEffect } from "react"; + +// prop-types is a library for type checking of props +import PropTypes from "prop-types"; + +// react-copy-to-clipboard components +import { CopyToClipboard } from "react-copy-to-clipboard"; + +// react-syntax-highlighter components +import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; +import { prism } from "react-syntax-highlighter/dist/esm/styles/prism"; + +// @mui material components +import Grid from "@mui/material/Grid"; +import AppBar from "@mui/material/AppBar"; +import Tabs from "@mui/material/Tabs"; +import Tab from "@mui/material/Tab"; +import Slide from "@mui/material/Slide"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKAlert from "components/MKAlert"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 React base styles +import colors from "assets/theme/base/colors"; + +function View({ children, code, title, height, ...rest }) { + const { grey } = colors; + + const [activeTab, setActiveTab] = useState(0); + const [success, setSuccess] = useState(false); + + const handleTabType = (event, newValue) => setActiveTab(newValue); + + useEffect(() => { + setTimeout(() => setSuccess(false), 3000); + }, [success]); + + return ( + + + `${borderWidth[1]} solid ${borderColor}`, + }} + > + + + + {title} + + + + + + size.sm }} + className="fas fa-desktop" + /> + } + label="Preview" + /> + size.sm }} + className="fas fa-code" + /> + } + label="Code" + /> + + + + + + + + + {children} + + + + + + + setSuccess(true)} + > + Copy + + + + + + + Code successfully copied! + + + + + + {code} + + + + + ); +} + +// Setting default props for the View +View.defaultProps = { + height: "auto", +}; + +// Typechecking props for the View +View.propTypes = { + children: PropTypes.node.isRequired, + code: PropTypes.node.isRequired, + title: PropTypes.string.isRequired, + height: PropTypes.string, +}; + +export default View; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/avatars/components/AvatarGroup/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/avatars/components/AvatarGroup/code.js new file mode 100644 index 0000000..45b39ba --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/avatars/components/AvatarGroup/code.js @@ -0,0 +1,35 @@ +const avatarGroupCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import MuiAvatarGroup from "@mui/material/AvatarGroup"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKAvatar from "components/MKAvatar"; + +// Images +import team1 from "assets/images/team-1.jpg"; +import team2 from "assets/images/team-2.jpg"; +import team3 from "assets/images/team-3.jpg"; +import team4 from "assets/images/team-4.jpg"; + +function AvatarGroup() { + return ( + + + + + + + + + + + + + ); +} + +export default AvatarGroup;`; + +export default avatarGroupCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/avatars/components/AvatarGroup/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/avatars/components/AvatarGroup/index.js new file mode 100644 index 0000000..1d3fa04 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/avatars/components/AvatarGroup/index.js @@ -0,0 +1,48 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import MuiAvatarGroup from "@mui/material/AvatarGroup"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKAvatar from "components/MKAvatar"; + +// Images +import team1 from "assets/images/team-1.jpg"; +import team2 from "assets/images/team-2.jpg"; +import team3 from "assets/images/team-3.jpg"; +import team4 from "assets/images/team-4.jpg"; + +function AvatarGroup() { + return ( + + + + + + + + + + + + + ); +} + +export default AvatarGroup; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/avatars/components/AvatarSize/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/avatars/components/AvatarSize/code.js new file mode 100644 index 0000000..375c574 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/avatars/components/AvatarSize/code.js @@ -0,0 +1,34 @@ +const avatarSizeCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKAvatar from "components/MKAvatar"; + +// Images +import team4 from "assets/images/team-4.jpg"; + +function AvatarSize() { + return ( + + + + + + + + + + + + + + + ); +} + +export default AvatarSize;`; + +export default avatarSizeCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/avatars/components/AvatarSize/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/avatars/components/AvatarSize/index.js new file mode 100644 index 0000000..5b568dc --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/avatars/components/AvatarSize/index.js @@ -0,0 +1,47 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKAvatar from "components/MKAvatar"; + +// Images +import team4 from "assets/images/team-4.jpg"; + +function AvatarSize() { + return ( + + + + + + + + + + + + + + + ); +} + +export default AvatarSize; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/avatars/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/avatars/index.js new file mode 100644 index 0000000..a0326d0 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/avatars/index.js @@ -0,0 +1,47 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Avatars page components +import AvatarGroup from "layouts/sections/elements/avatars/components/AvatarGroup"; +import AvatarSize from "layouts/sections/elements/avatars/components/AvatarSize"; + +// Avatars page components code +import avatarGroupCode from "layouts/sections/elements/avatars/components/AvatarGroup/code"; +import avatarSizeCode from "layouts/sections/elements/avatars/components/AvatarSize/code"; + +function Avatars() { + return ( + + + + + + + + + ); +} + +export default Avatars; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/badges/components/BadgesGradient/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/badges/components/BadgesGradient/code.js new file mode 100644 index 0000000..03aa4b4 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/badges/components/BadgesGradient/code.js @@ -0,0 +1,34 @@ +const badgesGradientCode = ` +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; + +function BadgesGradient() { + return ( + + + + + + + + + + + + + + + + + ); +} + +export default BadgesGradient;`; + +export default badgesGradientCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/badges/components/BadgesGradient/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/badges/components/BadgesGradient/index.js new file mode 100644 index 0000000..1eef9a6 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/badges/components/BadgesGradient/index.js @@ -0,0 +1,46 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; + +function BadgesGradient() { + return ( + + + + + + + + + + + + + + + + + ); +} + +export default BadgesGradient; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/badges/components/BadgesSimple/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/badges/components/BadgesSimple/code.js new file mode 100644 index 0000000..2a20c7e --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/badges/components/BadgesSimple/code.js @@ -0,0 +1,33 @@ +const badgesSimpleCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; + +function BadgesSimple() { + return ( + + + + + + + + + + + + + + + + + ); +} + +export default BadgesSimple;`; + +export default badgesSimpleCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/badges/components/BadgesSimple/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/badges/components/BadgesSimple/index.js new file mode 100644 index 0000000..b1305f3 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/badges/components/BadgesSimple/index.js @@ -0,0 +1,46 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; + +function BadgesSimple() { + return ( + + + + + + + + + + + + + + + + + ); +} + +export default BadgesSimple; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/badges/components/BadgesSimpleRounded/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/badges/components/BadgesSimpleRounded/code.js new file mode 100644 index 0000000..f2b3672 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/badges/components/BadgesSimpleRounded/code.js @@ -0,0 +1,57 @@ +const badgesSimpleRoundedCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; + +function BadgesSimpleRounded() { + return ( + + + + + + + + + + + + + + + + + ); +} + +export default BadgesSimpleRounded;`; + +export default badgesSimpleRoundedCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/badges/components/BadgesSimpleRounded/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/badges/components/BadgesSimpleRounded/index.js new file mode 100644 index 0000000..cb376c5 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/badges/components/BadgesSimpleRounded/index.js @@ -0,0 +1,70 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; + +function BadgesSimpleRounded() { + return ( + + + + + + + + + + + + + + + + + ); +} + +export default BadgesSimpleRounded; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/badges/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/badges/index.js new file mode 100644 index 0000000..98db2cf --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/badges/index.js @@ -0,0 +1,52 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Badges page components +import BadgesGradient from "layouts/sections/elements/badges/components/BadgesGradient"; +import BadgesSimple from "layouts/sections/elements/badges/components/BadgesSimple"; +import BadgesSimpleRounded from "layouts/sections/elements/badges/components/BadgesSimpleRounded"; + +// Badges page components code +import badgesGradientCode from "layouts/sections/elements/badges/components/BadgesGradient/code"; +import badgesSimpleCode from "layouts/sections/elements/badges/components/BadgesSimple/code"; +import badgesSimpleRoundedCode from "layouts/sections/elements/badges/components/BadgesSimpleRounded/code"; + +function Badges() { + return ( + + + + + + + + + + + + ); +} + +export default Badges; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/breadcrumbs/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/breadcrumbs/code.js new file mode 100644 index 0000000..97faa43 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/breadcrumbs/code.js @@ -0,0 +1,46 @@ +const badgesSimpleCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; + +// Material Kit 2 React examples +import Breadcrumbs from "examples/Breadcrumbs"; + +function BreadcrumbsEL() { + return ( + + + + + + + + + + + + + + + + ); +} + +export default BreadcrumbsEL;`; + +export default badgesSimpleCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/breadcrumbs/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/breadcrumbs/index.js new file mode 100644 index 0000000..84dfb5d --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/breadcrumbs/index.js @@ -0,0 +1,76 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; + +// Material Kit 2 React examples +import Breadcrumbs from "examples/Breadcrumbs"; + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Breadcrumbs page components code +import breadcrumbsCode from "layouts/sections/elements/breadcrumbs/code"; + +function BreadcrumbsEl() { + return ( + + + + + + + + + + + + + + + + + + + + ); +} + +export default BreadcrumbsEl; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsContained/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsContained/code.js new file mode 100644 index 0000000..92b1caa --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsContained/code.js @@ -0,0 +1,34 @@ +const buttonsContainedCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; + +function ButtonsContained() { + return ( + + + + + primary + secondary + info + success + warning + error + light + dark + White + + + + + ); +} + +export default ButtonsContained;`; + +export default buttonsContainedCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsContained/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsContained/index.js new file mode 100644 index 0000000..ddd8b45 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsContained/index.js @@ -0,0 +1,47 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; + +function ButtonsContained() { + return ( + + + + + primary + secondary + info + success + warning + error + light + dark + White + + + + + ); +} + +export default ButtonsContained; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsGradient/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsGradient/code.js new file mode 100644 index 0000000..197fd0e --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsGradient/code.js @@ -0,0 +1,52 @@ +const buttonsGradientCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; + +function ButtonsGradient() { + return ( + + + + + + primary + + + secondary + + + info + + + success + + + warning + + + error + + + light + + + dark + + + White + + + + + + ); +} + +export default ButtonsGradient;`; + +export default buttonsGradientCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsGradient/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsGradient/index.js new file mode 100644 index 0000000..aa048e7 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsGradient/index.js @@ -0,0 +1,65 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; + +function ButtonsGradient() { + return ( + + + + + + primary + + + secondary + + + info + + + success + + + warning + + + error + + + light + + + dark + + + White + + + + + + ); +} + +export default ButtonsGradient; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsIconLeft/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsIconLeft/code.js new file mode 100644 index 0000000..640d97b --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsIconLeft/code.js @@ -0,0 +1,38 @@ +const buttonsIconLeftCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; + +function ButtonsIconLeft() { + return ( + + + + + + favorite + small + + + favorite + default + + + favorite + large + + + + + + ); +} + +export default ButtonsIconLeft;`; + +export default buttonsIconLeftCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsIconLeft/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsIconLeft/index.js new file mode 100644 index 0000000..457e53f --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsIconLeft/index.js @@ -0,0 +1,51 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; + +function ButtonsIconLeft() { + return ( + + + + + + favorite + small + + + favorite + default + + + favorite + large + + + + + + ); +} + +export default ButtonsIconLeft; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsIconRight/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsIconRight/code.js new file mode 100644 index 0000000..0b87f52 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsIconRight/code.js @@ -0,0 +1,38 @@ +const buttonsIconRightCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; + +function ButtonsIconRight() { + return ( + + + + + + small + favorite + + + default + favorite + + + large + favorite + + + + + + ); +} + +export default ButtonsIconRight;`; + +export default buttonsIconRightCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsIconRight/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsIconRight/index.js new file mode 100644 index 0000000..2511db7 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsIconRight/index.js @@ -0,0 +1,51 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; + +function ButtonsIconRight() { + return ( + + + + + + small + favorite + + + default + favorite + + + large + favorite + + + + + + ); +} + +export default ButtonsIconRight; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsOutlined/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsOutlined/code.js new file mode 100644 index 0000000..4b378df --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsOutlined/code.js @@ -0,0 +1,52 @@ +const buttonsOutlinedCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; + +function ButtonsOutlined() { + return ( + + + + + + primary + + + secondary + + + info + + + success + + + warning + + + error + + + light + + + dark + + + White + + + + + + ); +} + +export default ButtonsOutlined;`; + +export default buttonsOutlinedCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsOutlined/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsOutlined/index.js new file mode 100644 index 0000000..87a8e47 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsOutlined/index.js @@ -0,0 +1,65 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; + +function ButtonsOutlined() { + return ( + + + + + + primary + + + secondary + + + info + + + success + + + warning + + + error + + + light + + + dark + + + White + + + + + + ); +} + +export default ButtonsOutlined; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsSizes/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsSizes/code.js new file mode 100644 index 0000000..a6abbba --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsSizes/code.js @@ -0,0 +1,32 @@ +const buttonsSizesCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; + +function ButtonsSizes() { + return ( + + + + + + small + + default + + large + + + + + + ); +} + +export default ButtonsSizes;`; + +export default buttonsSizesCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsSizes/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsSizes/index.js new file mode 100644 index 0000000..5026a7f --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/components/ButtonsSizes/index.js @@ -0,0 +1,45 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; + +function ButtonsSizes() { + return ( + + + + + + small + + default + + large + + + + + + ); +} + +export default ButtonsSizes; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/index.js new file mode 100644 index 0000000..4f239c7 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/buttons/index.js @@ -0,0 +1,67 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Buttons page components +import ButtonsGradient from "layouts/sections/elements/buttons/components/ButtonsGradient"; +import ButtonsContained from "layouts/sections/elements/buttons/components/ButtonsContained"; +import ButtonsOutlined from "layouts/sections/elements/buttons/components/ButtonsOutlined"; +import ButtonsSizes from "layouts/sections/elements/buttons/components/ButtonsSizes"; +import ButtonsIconLeft from "layouts/sections/elements/buttons/components/ButtonsIconLeft"; +import ButtonsIconRight from "layouts/sections/elements/buttons/components/ButtonsIconRight"; + +// Buttons page components code +import buttonsGradientCode from "layouts/sections/elements/buttons/components/ButtonsGradient/code"; +import buttonsContainedCode from "layouts/sections/elements/buttons/components/ButtonsContained/code"; +import buttonsOutlinedCode from "layouts/sections/elements/buttons/components/ButtonsOutlined/code"; +import buttonsSizesCode from "layouts/sections/elements/buttons/components/ButtonsSizes/code"; +import buttonsIconLeftCode from "layouts/sections/elements/buttons/components/ButtonsIconLeft/code"; +import buttonsIconRightCode from "layouts/sections/elements/buttons/components/ButtonsIconRight/code"; + +function Buttons() { + return ( + + + + + + + + + + + + + + + + + + + + + ); +} + +export default Buttons; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/dropdowns/components/DropdownAndDropup/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/dropdowns/components/DropdownAndDropup/code.js new file mode 100644 index 0000000..cec5a10 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/dropdowns/components/DropdownAndDropup/code.js @@ -0,0 +1,85 @@ +const dropdownAndDropupCode = `import { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; +import Menu from "@mui/material/Menu"; +import MenuItem from "@mui/material/MenuItem"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; + +function DropdownAndDropup() { + const [dropdown, setDropdown] = useState(null); + const [dropup, setDropup] = useState(null); + + const openDropdown = ({ currentTarget }) => setDropdown(currentTarget); + const closeDropdown = () => setDropdown(null); + + const openDropup = ({ currentTarget }) => setDropup(currentTarget); + const closeDropup = () => setDropup(null); + + // Styles + const iconStyles = { + ml: 1, + fontWeight: "bold", + transition: "transform 200ms ease-in-out", + }; + + const dropdownIconStyles = { + transform: dropdown ? "rotate(180deg)" : "rotate(0)", + ...iconStyles, + }; + + const dropupIconStyles = { + transform: dropup ? "rotate(180deg)" : "rotate(0)", + ...iconStyles, + }; + + return ( + + + + + + Dropdown expand_more + + + Action + Another action + Something else here + + + + + Dropup expand_more + + + Action + Another action + Something else here + + + + + + ); +} + +export default DropdownAndDropup;`; + +export default dropdownAndDropupCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/dropdowns/components/DropdownAndDropup/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/dropdowns/components/DropdownAndDropup/index.js new file mode 100644 index 0000000..75b040a --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/dropdowns/components/DropdownAndDropup/index.js @@ -0,0 +1,98 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; +import Menu from "@mui/material/Menu"; +import MenuItem from "@mui/material/MenuItem"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; + +function DropdownAndDropup() { + const [dropdown, setDropdown] = useState(null); + const [dropup, setDropup] = useState(null); + + const openDropdown = ({ currentTarget }) => setDropdown(currentTarget); + const closeDropdown = () => setDropdown(null); + + const openDropup = ({ currentTarget }) => setDropup(currentTarget); + const closeDropup = () => setDropup(null); + + // Styles + const iconStyles = { + ml: 1, + fontWeight: "bold", + transition: "transform 200ms ease-in-out", + }; + + const dropdownIconStyles = { + transform: dropdown ? "rotate(180deg)" : "rotate(0)", + ...iconStyles, + }; + + const dropupIconStyles = { + transform: dropup ? "rotate(180deg)" : "rotate(0)", + ...iconStyles, + }; + + return ( + + + + + + Dropdown expand_more + + + Action + Another action + Something else here + + + + + Dropup expand_more + + + Action + Another action + Something else here + + + + + + ); +} + +export default DropdownAndDropup; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/dropdowns/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/dropdowns/index.js new file mode 100644 index 0000000..b722c5d --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/dropdowns/index.js @@ -0,0 +1,42 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Dropdowns page components +import DropdownAndDropup from "layouts/sections/elements/dropdowns/components/DropdownAndDropup"; + +// Dropdowns page components code +import dropdownAndDropupCode from "layouts/sections/elements/dropdowns/components/DropdownAndDropup/code"; + +function Dropdowns() { + return ( + + + + + + ); +} + +export default Dropdowns; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/progress-bars/components/ProgressSimple/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/progress-bars/components/ProgressSimple/code.js new file mode 100644 index 0000000..54c6533 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/progress-bars/components/ProgressSimple/code.js @@ -0,0 +1,32 @@ +const progressSimpleCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKProgress from "components/MKProgress"; + +function ProgressSimple() { + return ( + + + + + + + + + + + + + + + + ); +} + +export default ProgressSimple;`; + +export default progressSimpleCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/progress-bars/components/ProgressSimple/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/progress-bars/components/ProgressSimple/index.js new file mode 100644 index 0000000..83efab5 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/progress-bars/components/ProgressSimple/index.js @@ -0,0 +1,45 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKProgress from "components/MKProgress"; + +function ProgressSimple() { + return ( + + + + + + + + + + + + + + + + ); +} + +export default ProgressSimple; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/progress-bars/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/progress-bars/index.js new file mode 100644 index 0000000..a600289 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/progress-bars/index.js @@ -0,0 +1,42 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// ProgressBars page components +import ProgressSimple from "layouts/sections/elements/progress-bars/components/ProgressSimple"; + +// ProgressBars page components code +import progressSimpleCode from "layouts/sections/elements/progress-bars/components/ProgressSimple/code"; + +function ProgressBars() { + return ( + + + + + + ); +} + +export default ProgressBars; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/toggles/components/Toggle/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/toggles/components/Toggle/code.js new file mode 100644 index 0000000..4e3bfb1 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/toggles/components/Toggle/code.js @@ -0,0 +1,42 @@ +const toggleCode = `import { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Switch from "@mui/material/Switch"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function Toggle() { + const [checked, setChecked] = useState(false); + + const toggleSwitch = () => setChecked(!checked); + + return ( + + + + + + + Remember me + + + + + + ); +} + +export default Toggle;`; + +export default toggleCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/toggles/components/Toggle/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/toggles/components/Toggle/index.js new file mode 100644 index 0000000..c858c1a --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/toggles/components/Toggle/index.js @@ -0,0 +1,55 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Switch from "@mui/material/Switch"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function Toggle() { + const [checked, setChecked] = useState(false); + + const toggleSwitch = () => setChecked(!checked); + + return ( + + + + + + + Remember me + + + + + + ); +} + +export default Toggle; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/toggles/components/ToggleContext/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/toggles/components/ToggleContext/code.js new file mode 100644 index 0000000..5d2ddd8 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/toggles/components/ToggleContext/code.js @@ -0,0 +1,40 @@ +const toggleContextCode = `import { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Switch from "@mui/material/Switch"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function ToggleContext() { + const [checked, setChecked] = useState(false); + + const toggleSwitch = () => setChecked(!checked); + + return ( + + + + + + + + Remember me + + + Be sure that you will always be logged in. + + + + + + + ); +} + +export default ToggleContext;`; + +export default toggleContextCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/toggles/components/ToggleContext/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/toggles/components/ToggleContext/index.js new file mode 100644 index 0000000..a0125b0 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/toggles/components/ToggleContext/index.js @@ -0,0 +1,53 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Switch from "@mui/material/Switch"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function ToggleContext() { + const [checked, setChecked] = useState(false); + + const toggleSwitch = () => setChecked(!checked); + + return ( + + + + + + + + Remember me + + + Be sure that you will always be logged in. + + + + + + + ); +} + +export default ToggleContext; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/toggles/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/toggles/index.js new file mode 100644 index 0000000..73e63ce --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/toggles/index.js @@ -0,0 +1,47 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Toggles page components +import Toggle from "layouts/sections/elements/toggles/components/Toggle"; +import ToggleContext from "layouts/sections/elements/toggles/components/ToggleContext"; + +// Toggles page components code +import toggleCode from "layouts/sections/elements/toggles/components/Toggle/code"; +import toggleContextCode from "layouts/sections/elements/toggles/components/ToggleContext/code"; + +function Toggles() { + return ( + + + + + + + + + ); +} + +export default Toggles; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/typography/components/TypographyRoboto/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/typography/components/TypographyRoboto/code.js new file mode 100644 index 0000000..36948a0 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/typography/components/TypographyRoboto/code.js @@ -0,0 +1,153 @@ +const typographyCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function Typography() { + return ( + + + + Typography - Font Family Roboto + + + + + Heading 1 + + + + + H1 Material Kit + + + + + + Heading 2 + + + + + H2 Material Kit + + + + + + Heading 3 + + + + + H3 Material Kit + + + + + + Heading 4 + + + + + H4 Material Kit + + + + + + Heading 5 + + + + + H5 Material Kit + + + + + + Heading 6 + + + + + H6 Material Kit + + + + + + Lead Text + + + + + + I will be the leader of a company that ends up being worth billions of dollars, + because I got the answers. I understand culture. I am the nucleus. I think that's + a responsibility that I have, to push possibilities, to show people, this is the level + that things could be at. + + + + + + + Paragraph + + + + + + I will be the leader of a company that ends up being worth billions of dollars, + because I got the answers. I understand culture. I am the nucleus. I think that's + a responsibility that I have, to push possibilities, to show people, this is the level + that things could be at. + + + + + + + Small + + + + + + I will be the leader of a company that ends up being worth billions of dollars, + because I got the answers. I understand culture. I am the nucleus. I think that's + a responsibility that I have, to push possibilities, to show people, this is the level + that things could be at. + + + + + + + Tiny + + + + + + I will be the leader of a company that ends up being worth billions of dollars, + because I got the answers. I understand culture. I am the nucleus. I think that's + a responsibility that I have, to push possibilities, to show people, this is the level + that things could be at. + + + + + + ); +} + +export default Typography;`; + +export default typographyCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/typography/components/TypographyRoboto/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/typography/components/TypographyRoboto/index.js new file mode 100644 index 0000000..eb3320d --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/typography/components/TypographyRoboto/index.js @@ -0,0 +1,166 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function Typography() { + return ( + + + + Typography - Font Family Roboto + + + + + Heading 1 + + + + + H1 Material Kit + + + + + + Heading 2 + + + + + H2 Material Kit + + + + + + Heading 3 + + + + + H3 Material Kit + + + + + + Heading 4 + + + + + H4 Material Kit + + + + + + Heading 5 + + + + + H5 Material Kit + + + + + + Heading 6 + + + + + H6 Material Kit + + + + + + Lead Text + + + + + + I will be the leader of a company that ends up being worth billions of dollars, + because I got the answers. I understand culture. I am the nucleus. I think that's + a responsibility that I have, to push possibilities, to show people, this is the level + that things could be at. + + + + + + + Paragraph + + + + + + I will be the leader of a company that ends up being worth billions of dollars, + because I got the answers. I understand culture. I am the nucleus. I think that's + a responsibility that I have, to push possibilities, to show people, this is the level + that things could be at. + + + + + + + Small + + + + + + I will be the leader of a company that ends up being worth billions of dollars, + because I got the answers. I understand culture. I am the nucleus. I think that's + a responsibility that I have, to push possibilities, to show people, this is the level + that things could be at. + + + + + + + Tiny + + + + + + I will be the leader of a company that ends up being worth billions of dollars, + because I got the answers. I understand culture. I am the nucleus. I think that's + a responsibility that I have, to push possibilities, to show people, this is the level + that things could be at. + + + + + + ); +} + +export default Typography; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/typography/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/typography/index.js new file mode 100644 index 0000000..f4a9e5d --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/elements/typography/index.js @@ -0,0 +1,42 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Typography page components +import TypographyRoboto from "layouts/sections/elements/typography/components/TypographyRoboto"; + +// Typography page components code +import typographyRobotoCode from "layouts/sections/elements/typography/components/TypographyRoboto/code"; + +function Typography() { + return ( + + + + + + ); +} + +export default Typography; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/forms/components/FormSimple/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/forms/components/FormSimple/code.js new file mode 100644 index 0000000..82ee775 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/forms/components/FormSimple/code.js @@ -0,0 +1,81 @@ +const formSimpleCode = `import { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Switch from "@mui/material/Switch"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +function FormSimple() { + const [checked, setChecked] = useState(true); + + const handleChecked = () => setChecked(!checked); + + return ( + + + + + Contact Us + + + + + + + + + + + + + + + + + + + + + +   I agree the  + + + Terms and Conditions + + + + + + Send Message + + + + + + + + ); +} + +export default FormSimple;`; + +export default formSimpleCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/forms/components/FormSimple/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/forms/components/FormSimple/index.js new file mode 100644 index 0000000..a2b5211 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/forms/components/FormSimple/index.js @@ -0,0 +1,94 @@ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Switch from "@mui/material/Switch"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +function FormSimple() { + const [checked, setChecked] = useState(true); + + const handleChecked = () => setChecked(!checked); + + return ( + + + + + Contact Us + + + + + + + + + + + + + + + + + + + + + +   I agree the  + + + Terms and Conditions + + + + + + Send Message + + + + + + + + ); +} + +export default FormSimple; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/forms/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/forms/index.js new file mode 100644 index 0000000..171fb2d --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/forms/index.js @@ -0,0 +1,42 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Forms page components +import FormSimple from "layouts/sections/input-areas/forms/components/FormSimple"; + +// Forms page components code +import formSimpleCode from "layouts/sections/input-areas/forms/components/FormSimple/code"; + +function Forms() { + return ( + + + + + + ); +} + +export default Forms; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputDisabled/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputDisabled/code.js new file mode 100644 index 0000000..3a010a8 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputDisabled/code.js @@ -0,0 +1,23 @@ +const inputDisabledCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputDisabled() { + return ( + + + + + + + + ); +} + +export default InputDisabled;`; + +export default inputDisabledCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputDisabled/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputDisabled/index.js new file mode 100644 index 0000000..39974ad --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputDisabled/index.js @@ -0,0 +1,37 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputDisabled() { + return ( + + + + + + + + ); +} + +export default InputDisabled; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputDynamic/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputDynamic/code.js new file mode 100644 index 0000000..192def7 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputDynamic/code.js @@ -0,0 +1,23 @@ +const inputDynamicCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputDynamic() { + return ( + + + + + + + + ); +} + +export default InputDynamic;`; + +export default inputDynamicCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputDynamic/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputDynamic/index.js new file mode 100644 index 0000000..fc84b41 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputDynamic/index.js @@ -0,0 +1,37 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputDynamic() { + return ( + + + + + + + + ); +} + +export default InputDynamic; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputError/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputError/code.js new file mode 100644 index 0000000..6fe6972 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputError/code.js @@ -0,0 +1,23 @@ +const inputErrorCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputError() { + return ( + + + + + + + + ); +} + +export default InputError;`; + +export default inputErrorCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputError/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputError/index.js new file mode 100644 index 0000000..464f20b --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputError/index.js @@ -0,0 +1,37 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputError() { + return ( + + + + + + + + ); +} + +export default InputError; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputIcon/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputIcon/code.js new file mode 100644 index 0000000..c2e551b --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputIcon/code.js @@ -0,0 +1,38 @@ +const inputIconCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import InputAdornment from "@mui/material/InputAdornment"; + +// @mui icons +import SearchIcon from "@mui/icons-material/Search"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputIcon() { + return ( + + + + + + + ), + }} + /> + + + + ); +} + +export default InputIcon;`; + +export default inputIconCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputIcon/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputIcon/index.js new file mode 100644 index 0000000..d173366 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputIcon/index.js @@ -0,0 +1,52 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import InputAdornment from "@mui/material/InputAdornment"; + +// @mui icons +import SearchIcon from "@mui/icons-material/Search"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputIcon() { + return ( + + + + + + + ), + }} + /> + + + + ); +} + +export default InputIcon; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputOutlined/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputOutlined/code.js new file mode 100644 index 0000000..ef08ae1 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputOutlined/code.js @@ -0,0 +1,23 @@ +const inputOutlinedCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputOutlined() { + return ( + + + + + + + + ); +} + +export default InputOutlined;`; + +export default inputOutlinedCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputOutlined/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputOutlined/index.js new file mode 100644 index 0000000..f21344c --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputOutlined/index.js @@ -0,0 +1,37 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputOutlined() { + return ( + + + + + + + + ); +} + +export default InputOutlined; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputStatic/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputStatic/code.js new file mode 100644 index 0000000..13f1708 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputStatic/code.js @@ -0,0 +1,29 @@ +const inputStaticCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputStatic() { + return ( + + + + + + + + ); +} + +export default InputStatic;`; + +export default inputStaticCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputStatic/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputStatic/index.js new file mode 100644 index 0000000..cd67101 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputStatic/index.js @@ -0,0 +1,43 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputStatic() { + return ( + + + + + + + + ); +} + +export default InputStatic; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputSuccess/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputSuccess/code.js new file mode 100644 index 0000000..d0bc0a2 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputSuccess/code.js @@ -0,0 +1,23 @@ +const inputSuccessCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputSuccess() { + return ( + + + + + + + + ); +} + +export default InputSuccess;`; + +export default inputSuccessCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputSuccess/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputSuccess/index.js new file mode 100644 index 0000000..17881b4 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/components/InputSuccess/index.js @@ -0,0 +1,37 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputSuccess() { + return ( + + + + + + + + ); +} + +export default InputSuccess; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/index.js new file mode 100644 index 0000000..49b3086 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/input-areas/inputs/index.js @@ -0,0 +1,72 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Inputs page components +import InputDynamic from "layouts/sections/input-areas/inputs/components/InputDynamic"; +import InputStatic from "layouts/sections/input-areas/inputs/components/InputStatic"; +import InputOutlined from "layouts/sections/input-areas/inputs/components/InputOutlined"; +import InputIcon from "layouts/sections/input-areas/inputs/components/InputIcon"; +import InputSuccess from "layouts/sections/input-areas/inputs/components/InputSuccess"; +import InputError from "layouts/sections/input-areas/inputs/components/InputError"; +import InputDisabled from "layouts/sections/input-areas/inputs/components/InputDisabled"; + +// Inputs page components code +import inputDynamicCode from "layouts/sections/input-areas/inputs/components/InputDynamic/code"; +import inputStaticCode from "layouts/sections/input-areas/inputs/components/InputStatic/code"; +import inputOutlinedCode from "layouts/sections/input-areas/inputs/components/InputOutlined/code"; +import inputIconCode from "layouts/sections/input-areas/inputs/components/InputIcon/code"; +import inputSuccessCode from "layouts/sections/input-areas/inputs/components/InputSuccess/code"; +import inputErrorCode from "layouts/sections/input-areas/inputs/components/InputError/code"; +import inputDisabledCode from "layouts/sections/input-areas/inputs/components/InputDisabled/code"; + +function Inputs() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default Inputs; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/nav-tabs/components/TabsSimple/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/nav-tabs/components/TabsSimple/code.js new file mode 100644 index 0000000..258c325 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/nav-tabs/components/TabsSimple/code.js @@ -0,0 +1,31 @@ +const tabsSimpleCode = `import { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import AppBar from "@mui/material/AppBar"; +import Tabs from "@mui/material/Tabs"; +import Tab from "@mui/material/Tab"; + +function TabsSimple() { + const [activeTab, setActiveTab] = useState(0); + + const handleTabType = (event, newValue) => setActiveTab(newValue); + + return ( + + + + + + + + + + + ); +} + +export default TabsSimple;`; + +export default tabsSimpleCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/nav-tabs/components/TabsSimple/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/nav-tabs/components/TabsSimple/index.js new file mode 100644 index 0000000..902920e --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/nav-tabs/components/TabsSimple/index.js @@ -0,0 +1,45 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import AppBar from "@mui/material/AppBar"; +import Tabs from "@mui/material/Tabs"; +import Tab from "@mui/material/Tab"; + +function TabsSimple() { + const [activeTab, setActiveTab] = useState(0); + + const handleTabType = (event, newValue) => setActiveTab(newValue); + + return ( + + + + + + + + + + + ); +} + +export default TabsSimple; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/nav-tabs/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/nav-tabs/index.js new file mode 100644 index 0000000..78c3d36 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/nav-tabs/index.js @@ -0,0 +1,47 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React components +import MKBox from "components/MKBox"; + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Stats page components +import TabsSimple from "layouts/sections/navigation/nav-tabs/components/TabsSimple"; + +// Stats page components code +import tabsSimpleCode from "layouts/sections/navigation/nav-tabs/components/TabsSimple/code"; + +function NavTabs() { + return ( + + + + + + + + ); +} + +export default NavTabs; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/navbars/components/NavbarDark/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/navbars/components/NavbarDark/code.js new file mode 100644 index 0000000..0dc856f --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/navbars/components/NavbarDark/code.js @@ -0,0 +1,32 @@ +const navbarDarkCode = `// Material Kit 2 React components +import MKBox from "components/MKBox"; + +// Material Kit 2 React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; + +// Routes +import routes from "routes"; + +function NavbarDark() { + return ( + + + + ); +} + +export default NavbarDark;`; + +export default navbarDarkCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/navbars/components/NavbarDark/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/navbars/components/NavbarDark/index.js new file mode 100644 index 0000000..7d107a6 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/navbars/components/NavbarDark/index.js @@ -0,0 +1,46 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React components +import MKBox from "components/MKBox"; + +// Material Kit 2 React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; + +// Routes +import routes from "routes"; + +function NavbarDark() { + return ( + + + + ); +} + +export default NavbarDark; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/navbars/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/navbars/index.js new file mode 100644 index 0000000..96748c1 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/navbars/index.js @@ -0,0 +1,47 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React components +import MKBox from "components/MKBox"; + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Stats page components +import NavbarDark from "layouts/sections/navigation/navbars/components/NavbarDark"; + +// Stats page components code +import navbarDarkCode from "layouts/sections/navigation/navbars/components/NavbarDark/code"; + +function Navbars() { + return ( + + + + + + + + ); +} + +export default Navbars; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/pagination/components/PaginationSimple/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/pagination/components/PaginationSimple/code.js new file mode 100644 index 0000000..8669ed6 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/pagination/components/PaginationSimple/code.js @@ -0,0 +1,35 @@ +const paginationSimpleCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 React components +import MKPagination from "components/MKPagination"; + +function PaginationSimple() { + return ( + + + + + keyboard_arrow_left + + + 1 + + 2 + 3 + 4 + 5 + + keyboard_arrow_right + + + + + ); +} + +export default PaginationSimple;`; + +export default paginationSimpleCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/pagination/components/PaginationSimple/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/pagination/components/PaginationSimple/index.js new file mode 100644 index 0000000..6dc39e4 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/pagination/components/PaginationSimple/index.js @@ -0,0 +1,49 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 React components +import MKPagination from "components/MKPagination"; + +function PaginationSimple() { + return ( + + + + + keyboard_arrow_left + + + 1 + + 2 + 3 + 4 + 5 + + keyboard_arrow_right + + + + + ); +} + +export default PaginationSimple; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/pagination/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/pagination/index.js new file mode 100644 index 0000000..29abec9 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/navigation/pagination/index.js @@ -0,0 +1,47 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Kit 2 React components +import MKBox from "components/MKBox"; + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Stats page components +import PaginationSimple from "layouts/sections/navigation/pagination/components/PaginationSimple"; + +// Stats page components code +import paginationSimpleCode from "layouts/sections/navigation/pagination/components/PaginationSimple/code"; + +function Pagination() { + return ( + + + + + + + + ); +} + +export default Pagination; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/page-sections/featuers/components/FeaturesOne/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/page-sections/featuers/components/FeaturesOne/code.js new file mode 100644 index 0000000..200c53b --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/page-sections/featuers/components/FeaturesOne/code.js @@ -0,0 +1,126 @@ +const featuresOneCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function FeaturesOne() { + return ( + + + + + + Read More About Us + + + Pain is what we go through as we become older. We get insulted by others, lose trust + for those others. We get back stabbed by friends. It becomes harder for us to give + others a hand. + + + More about us + arrow_forward + + + + + + + mediation + + + It becomes harder for us to give others a hand. +
+ We get our heart broken by people we love. + + + + + settings_overscan + + + As we live, our hearts turn colder. +
+ Cause pain is what we go through as we become older. + + + + + token + + + When we lose family over time. +
+ What else could rust the heart more over time? Blackgold. + + + + + + + + ); +} + +export default FeaturesOne;`; + +export default featuresOneCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/page-sections/featuers/components/FeaturesOne/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/page-sections/featuers/components/FeaturesOne/index.js new file mode 100644 index 0000000..ba8f063 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/page-sections/featuers/components/FeaturesOne/index.js @@ -0,0 +1,139 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function FeaturesOne() { + return ( + + + + + + Read More About Us + + + Pain is what we go through as we become older. We get insulted by others, lose trust + for those others. We get back stabbed by friends. It becomes harder for us to give + others a hand. + + + More about us + arrow_forward + + + + + + + mediation + + + It becomes harder for us to give others a hand. +
+ We get our heart broken by people we love. + + + + + settings_overscan + + + As we live, our hearts turn colder. +
+ Cause pain is what we go through as we become older. + + + + + token + + + When we lose family over time. +
+ What else could rust the heart more over time? Blackgold. + + + + + + + + ); +} + +export default FeaturesOne; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/page-sections/featuers/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/page-sections/featuers/index.js new file mode 100644 index 0000000..0661c76 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/page-sections/featuers/index.js @@ -0,0 +1,42 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Features page components +import FeaturesOne from "layouts/sections/page-sections/featuers/components/FeaturesOne"; + +// Features page components code +import featuresOneCode from "layouts/sections/page-sections/featuers/components/FeaturesOne/code"; + +function Features() { + return ( + + + + + + ); +} + +export default Features; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/page-sections/page-headers/components/HeaderOne/code.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/page-sections/page-headers/components/HeaderOne/code.js new file mode 100644 index 0000000..93174c3 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/page-sections/page-headers/components/HeaderOne/code.js @@ -0,0 +1,178 @@ +/* eslint-disable no-template-curly-in-string */ +const bgImage = + "`${linearGradient(rgba(gradients.dark.main, 0.5), rgba(gradients.dark.state, 0.5))}, url(${bgImage})`"; + +const headerOneCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Link from "@mui/material/Link"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +// Images +import bgImage from "assets/images/bg-coworking.jpeg"; + +function HeaderOne() { + return ( + + + + + + Material Design + + + + + + + e.preventDefault()} + > + Home + + + + e.preventDefault()} + > + About Us + + + + e.preventDefault()} + > + Contact Us + + + + + + e.preventDefault()} + > + + + + + e.preventDefault()} + > + + + + + e.preventDefault()} + > + + + + + + + + ${bgImage}, + backgroundSize: "cover", + backgroundPosition: "center", + }} + > + + + ({ + [breakpoints.down("md")]: { + fontSize: size["3xl"], + }, + })} + > + Material Kit + + + The time is now for it be okay to be great. People in this world shun people for being + nice. + + + Get Started + + Read more + + + + + + + ); +} + +export default HeaderOne;`; + +export default headerOneCode; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/page-sections/page-headers/components/HeaderOne/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/page-sections/page-headers/components/HeaderOne/index.js new file mode 100644 index 0000000..5421810 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/page-sections/page-headers/components/HeaderOne/index.js @@ -0,0 +1,191 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Link from "@mui/material/Link"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +// Images +import bgImage from "assets/images/bg-coworking.jpeg"; + +function HeaderOne() { + return ( + + + + + + Material Design + + + + + + + e.preventDefault()} + > + Home + + + + e.preventDefault()} + > + About Us + + + + e.preventDefault()} + > + Contact Us + + + + + + e.preventDefault()} + > + + + + + e.preventDefault()} + > + + + + + e.preventDefault()} + > + + + + + + + + + `${linearGradient( + rgba(gradients.dark.main, 0.5), + rgba(gradients.dark.state, 0.5) + )}, url(${bgImage})`, + backgroundSize: "cover", + backgroundPosition: "center", + }} + > + + + ({ + [breakpoints.down("md")]: { + fontSize: size["3xl"], + }, + })} + > + Material Kit + + + The time is now for it be okay to be great. People in this world shun people for being + nice. + + + Get Started + + Read more + + + + + + + ); +} + +export default HeaderOne; diff --git a/material-kit-react-main/material-kit-react-main/src/layouts/sections/page-sections/page-headers/index.js b/material-kit-react-main/material-kit-react-main/src/layouts/sections/page-sections/page-headers/index.js new file mode 100644 index 0000000..e7d8319 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/layouts/sections/page-sections/page-headers/index.js @@ -0,0 +1,42 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// PageHeaders page components +import HeaderOne from "layouts/sections/page-sections/page-headers/components/HeaderOne"; + +// PageHeaders page components code +import headerOneCode from "layouts/sections/page-sections/page-headers/components/HeaderOne/code"; + +function PageHeaders() { + return ( + + + + + + ); +} + +export default PageHeaders; diff --git a/material-kit-react-main/material-kit-react-main/src/pages/LandingPages/AboutUs/index.js b/material-kit-react-main/material-kit-react-main/src/pages/LandingPages/AboutUs/index.js new file mode 100644 index 0000000..ed8b723 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/pages/LandingPages/AboutUs/index.js @@ -0,0 +1,142 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Card from "@mui/material/Card"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKButton from "components/MKButton"; + +// Material Kit 2 React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; +import DefaultFooter from "examples/Footers/DefaultFooter"; + +// About Us page sections +import Information from "pages/LandingPages/AboutUs/sections/Information"; +import Team from "pages/LandingPages/AboutUs/sections/Team"; +import Featuring from "pages/LandingPages/AboutUs/sections/Featuring"; +import Newsletter from "pages/LandingPages/AboutUs/sections/Newsletter"; + +// Routes +import routes from "routes"; +import footerRoutes from "footer.routes"; + +// Images +import bgImage from "assets/images/bg-about-us.jpg"; + +function AboutUs() { + return ( + <> + + + `${linearGradient( + rgba(gradients.dark.main, 0.6), + rgba(gradients.dark.state, 0.6) + )}, url(${bgImage})`, + backgroundSize: "cover", + backgroundPosition: "center", + display: "grid", + placeItems: "center", + }} + > + + + ({ + [breakpoints.down("md")]: { + fontSize: size["3xl"], + }, + })} + > + Work with an amazing design + + + We're constantly trying to express ourselves and actualize our dreams. If you + have the opportunity to play this game + + dark.main }}> + create account + + + Find us on + + + + + + + + + + + + + + + + + + + xxl, + }} + > + + + + + + + + + + ); +} + +export default AboutUs; diff --git a/material-kit-react-main/material-kit-react-main/src/pages/LandingPages/AboutUs/sections/Featuring.js b/material-kit-react-main/material-kit-react-main/src/pages/LandingPages/AboutUs/sections/Featuring.js new file mode 100644 index 0000000..ce49abf --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/pages/LandingPages/AboutUs/sections/Featuring.js @@ -0,0 +1,90 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; + +// Material Kit 2 React examples +import DefaultCounterCard from "examples/Cards/CounterCards/DefaultCounterCard"; + +// Images +import coinbase from "assets/images/logos/gray-logos/logo-coinbase.svg"; +import nasa from "assets/images/logos/gray-logos/logo-nasa.svg"; +import netflix from "assets/images/logos/gray-logos/logo-netflix.svg"; +import pinterest from "assets/images/logos/gray-logos/logo-pinterest.svg"; +import spotify from "assets/images/logos/gray-logos/logo-spotify.svg"; +import vodafone from "assets/images/logos/gray-logos/logo-vodafone.svg"; + +function Featuring() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default Featuring; diff --git a/material-kit-react-main/material-kit-react-main/src/pages/LandingPages/AboutUs/sections/Information.js b/material-kit-react-main/material-kit-react-main/src/pages/LandingPages/AboutUs/sections/Information.js new file mode 100644 index 0000000..464ab7a --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/pages/LandingPages/AboutUs/sections/Information.js @@ -0,0 +1,91 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; + +// Material Kit 2 React examples +import DefaultInfoCard from "examples/Cards/InfoCards/DefaultInfoCard"; +import CenteredBlogCard from "examples/Cards/BlogCards/CenteredBlogCard"; + +function Information() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default Information; diff --git a/material-kit-react-main/material-kit-react-main/src/pages/LandingPages/AboutUs/sections/Newsletter.js b/material-kit-react-main/material-kit-react-main/src/pages/LandingPages/AboutUs/sections/Newsletter.js new file mode 100644 index 0000000..69a4e0c --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/pages/LandingPages/AboutUs/sections/Newsletter.js @@ -0,0 +1,63 @@ +/* eslint-disable react/jsx-no-duplicate-props */ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; + +// Images +import macbook from "assets/images/macbook.png"; + +function Newsletter() { + return ( + + + + + Be the first to see the news + + Your company may not be in the software business, but eventually, a software company + will be in your business. + + + + + + + + Subscribe + + + + + + + + + + + + + ); +} + +export default Newsletter; diff --git a/material-kit-react-main/material-kit-react-main/src/pages/LandingPages/AboutUs/sections/Team.js b/material-kit-react-main/material-kit-react-main/src/pages/LandingPages/AboutUs/sections/Team.js new file mode 100644 index 0000000..8cb2817 --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/pages/LandingPages/AboutUs/sections/Team.js @@ -0,0 +1,103 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 React examples +import HorizontalTeamCard from "examples/Cards/TeamCards/HorizontalTeamCard"; + +// Images +import team1 from "assets/images/team-5.jpg"; +import team2 from "assets/images/bruce-mars.jpg"; +import team3 from "assets/images/ivana-squares.jpg"; +import team4 from "assets/images/ivana-square.jpg"; + +function Team() { + return ( + + + + + + The Executive Team + + + There's nothing I really wanted to do in life that I wasn't able to get good + at. That's my skill. + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default Team; diff --git a/material-kit-react-main/material-kit-react-main/src/pages/LandingPages/Author/index.js b/material-kit-react-main/material-kit-react-main/src/pages/LandingPages/Author/index.js new file mode 100644 index 0000000..8cdf5ee --- /dev/null +++ b/material-kit-react-main/material-kit-react-main/src/pages/LandingPages/Author/index.js @@ -0,0 +1,88 @@ +/* +========================================================= +* Material Kit 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Card from "@mui/material/Card"; + +// Material Kit 2 React components +import MKBox from "components/MKBox"; + +// Material Kit 2 React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; + +// Author page sections +import Profile from "pages/LandingPages/Author/sections/Profile"; +import Posts from "pages/LandingPages/Author/sections/Posts"; +import Contact from "pages/LandingPages/Author/sections/Contact"; +import Footer from "pages/LandingPages/Author/sections/Footer"; + +// Routes +import routes from "routes"; + +// Images +import bgImage from "assets/images/city-profile.jpg"; + +function Author() { + return ( + <> + + + + `${linearGradient( + rgba(gradients.dark.main, 0.8), + rgba(gradients.dark.state, 0.8) + )}, url(${bgImage})`, + backgroundSize: "cover", + backgroundPosition: "center", + display: "grid", + placeItems: "center", + }} + /> + rgba(white.main, 0.8), + backdropFilter: "saturate(200%) blur(30px)", + boxShadow: ({ boxShadows: { xxl } }) => xxl, + }} + > + + + + +