diff --git a/.bunnyshell/templates/fastapi-react-postgres/README.md b/.bunnyshell/templates/fastapi-react-postgres/README.md new file mode 100644 index 00000000..954f0720 --- /dev/null +++ b/.bunnyshell/templates/fastapi-react-postgres/README.md @@ -0,0 +1,23 @@ +## Bunnyshell Environment Template for Python FastAPI + React + PostgreSQL + +This repository provides a template environment for developing a CRUD (Create, Read, Update, Delete) application using Python FastAPI, React, and PostgreSQL. +The application also features a visually appealing user interface based on CreativeTim's Material 2 Pro React template. + +## Local Usage + +To set up and use this environment locally, please follow the steps below: + +1. Make sure that Docker and Docker Compose are installed on your system. If not, please install them first. +2. Navigate to the "applications" directory using the command cd applications. +3. Build the Docker images by running the command docker-compose build. +4. Launch the Docker containers by executing the command docker-compose up. + You can now access the application by visiting http://0.0.0.0:8080/todo in your web browser. + Contributing + If you wish to contribute to this environment, please follow the steps outlined below: + +Fork this repository to your own GitHub account. +Create a new branch on your forked repository. +Implement your changes and commit them to your branch. +Push your changes to your forked repository. +Finally, submit a pull request from your branch to the original repository. +Thank you for considering contributing to this project. Your contributions are highly appreciated! diff --git a/.bunnyshell/templates/fastapi-react-postgres/bunnyshell.yaml b/.bunnyshell/templates/fastapi-react-postgres/bunnyshell.yaml new file mode 100644 index 00000000..254b0cbf --- /dev/null +++ b/.bunnyshell/templates/fastapi-react-postgres/bunnyshell.yaml @@ -0,0 +1,57 @@ +kind: Environment +name: Python (FastAPI) / React (CreativeTim Material Kit Pro react template) / PostgreSQL boilerplate +type: primary +components: + - kind: Application + name: backend + gitRepo: 'https://github.com/bunnyshell/templates.git' + gitBranch: main + gitApplicationPath: components/fastapi-todo-backend + dockerCompose: + build: + context: ./components/fastapi-todo-backend + dockerfile: .docker/Dockerfile + environment: + PORT: 8000 + DATABASE_URL: postgresql://postgres:need-to-replace@db:5432/fastapi_test + ports: + - '8080:8000' + hosts: + - hostname: 'backend-{{ env.base_domain }}' + path: / + servicePort: 8080 + - kind: Database + name: db + dockerCompose: + environment: + POSTGRES_DB: fastapi_test + POSTGRES_PASSWORD: need-to-replace + POSTGRES_USER: postgres + image: postgres:15.2-alpine3.17 + ports: + - '5432:5432' + volumes: + - name: data-volume + mount: /var/lib/postgresql/data + subPath: '' + - kind: Application + name: frontend + gitRepo: 'https://github.com/bunnyshell/templates.git' + gitBranch: main + gitApplicationPath: components/react-todo-app + dockerCompose: + build: + context: ./components/react-todo-app + dockerfile: .docker/Dockerfile + environment: + REACT_APP_BACKEND_URL: 'https://{{ components.backend.ingress.hosts[0] }}' + ports: + - '8080:3000' + hosts: + - hostname: 'frontend-{{ env.base_domain }}' + path: /todo + servicePort: 8080 +volumes: + - name: data-volume + size: 1Gi + type: disk diff --git a/.bunnyshell/templates/fastapi-react-postgres/template.yaml b/.bunnyshell/templates/fastapi-react-postgres/template.yaml new file mode 100644 index 00000000..09c3dd31 --- /dev/null +++ b/.bunnyshell/templates/fastapi-react-postgres/template.yaml @@ -0,0 +1,18 @@ +name: Python (FastAPI) + React (CreativeTim Material Kit Pro react template) + PostgreSQL +description: This is boilerplate for creating a Python (FastAPI) + React (CreativeTim Material 2 Pro react template) + PostgreSQL environment. It contains basic CRUD example for a todo list making it a good starting point for your next project. +tags: + - Python + - FastAPI + - PostgreSQL + - React + - CreativeTim Material Kit Pro react template +icons: ['python', 'postgres', 'react'] +stack: + packages: + - name: Python + version: '3.10' + - name: PostgreSQL + version: '15.2' + - name: React + version: '18.2.0' +discoverable: true diff --git a/components/fastapi-todo-backend/.docker/Dockerfile b/components/fastapi-todo-backend/.docker/Dockerfile new file mode 100644 index 00000000..25d51a04 --- /dev/null +++ b/components/fastapi-todo-backend/.docker/Dockerfile @@ -0,0 +1,11 @@ +FROM python:3 + +WORKDIR /app + +COPY requirements.txt ./ +RUN --mount=type=cache,target=/root/.cache/pip \ + pip install -r requirements.txt + +COPY ./app ./app + +ENTRYPOINT [ "python", "app/server.py" ] \ No newline at end of file diff --git a/components/fastapi-todo-backend/.docker/docker-compose.yml b/components/fastapi-todo-backend/.docker/docker-compose.yml new file mode 100644 index 00000000..88c99248 --- /dev/null +++ b/components/fastapi-todo-backend/.docker/docker-compose.yml @@ -0,0 +1,30 @@ +services: + api: + build: + context: ./../ + dockerfile: .docker/Dockerfile + environment: + PORT: 8000 + DATABASE_URL: postgresql://postgres:need-to-replace@db:5432/fastapi_test + ports: + - '8002:8000' + volumes: + - /var/run/docker.sock:/var/run/docker.sock + - ./../:/app + restart: 'no' + depends_on: + - db + db: + image: postgres:15.2-alpine3.17 + restart: always + user: postgres + volumes: + - db-data:/var/lib/postgresql/data + environment: + - POSTGRES_DB=fastapi_test + - POSTGRES_USER=postgres + - POSTGRES_PASSWORD=need-to-replace + expose: + - 5432 +volumes: + db-data: diff --git a/components/fastapi-todo-backend/app/__init__.py b/components/fastapi-todo-backend/app/__init__.py new file mode 100644 index 00000000..e69de29b diff --git a/components/fastapi-todo-backend/app/__pycache__/app.cpython-310.pyc b/components/fastapi-todo-backend/app/__pycache__/app.cpython-310.pyc new file mode 100644 index 00000000..2daf8d9c Binary files /dev/null and b/components/fastapi-todo-backend/app/__pycache__/app.cpython-310.pyc differ diff --git a/components/fastapi-todo-backend/app/__pycache__/app.cpython-311.pyc b/components/fastapi-todo-backend/app/__pycache__/app.cpython-311.pyc new file mode 100644 index 00000000..564ced70 Binary files /dev/null and b/components/fastapi-todo-backend/app/__pycache__/app.cpython-311.pyc differ diff --git a/components/fastapi-todo-backend/app/__pycache__/db.cpython-310.pyc b/components/fastapi-todo-backend/app/__pycache__/db.cpython-310.pyc new file mode 100644 index 00000000..fe13ae03 Binary files /dev/null and b/components/fastapi-todo-backend/app/__pycache__/db.cpython-310.pyc differ diff --git a/components/fastapi-todo-backend/app/__pycache__/db.cpython-311.pyc b/components/fastapi-todo-backend/app/__pycache__/db.cpython-311.pyc new file mode 100644 index 00000000..b6901209 Binary files /dev/null and b/components/fastapi-todo-backend/app/__pycache__/db.cpython-311.pyc differ diff --git a/components/fastapi-todo-backend/app/__pycache__/models.cpython-311.pyc b/components/fastapi-todo-backend/app/__pycache__/models.cpython-311.pyc new file mode 100644 index 00000000..7e7b91f0 Binary files /dev/null and b/components/fastapi-todo-backend/app/__pycache__/models.cpython-311.pyc differ diff --git a/components/fastapi-todo-backend/app/app.py b/components/fastapi-todo-backend/app/app.py new file mode 100644 index 00000000..ad64511d --- /dev/null +++ b/components/fastapi-todo-backend/app/app.py @@ -0,0 +1,57 @@ +from fastapi import FastAPI +from fastapi.middleware.cors import CORSMiddleware + +from sqlmodel import Session +from db import engine +from models import Todo + +app = FastAPI() + + +origins = ["*"] + +app.add_middleware( + CORSMiddleware, + allow_origins=origins, + allow_credentials=True, + allow_methods=["*"], + allow_headers=["*"], +) + + +@app.get("/") +def hello_world(): + return {"message": "OK"} + + +@app.get("/alive") +def hello_world(): + return {"message": "OK"} + +@app.post("/api/v1/add-todo") +def add_todo(todo: Todo): + print('Adding todo', todo) + + with Session(engine) as session: + session.add(todo) + session.commit() + + return {"message": "OK"} + + +@app.get("/api/v1/get-all-todos") +def get_all_todos(): + with Session(engine) as session: + todos = session.query(Todo).all() + + return todos + + +@app.delete("/api/v1/delete-todo/{todo_id}") +def delete_todo_by_id(todo_id: int): + with Session(engine) as session: + todo = session.get(Todo, todo_id) + session.delete(todo) + session.commit() + + return {"message": "OK"} \ No newline at end of file diff --git a/components/fastapi-todo-backend/app/db.py b/components/fastapi-todo-backend/app/db.py new file mode 100644 index 00000000..92ca43a7 --- /dev/null +++ b/components/fastapi-todo-backend/app/db.py @@ -0,0 +1,12 @@ +from sqlmodel import SQLModel, create_engine +from models import * +import os + +DATABASE_URL = os.environ.get("DATABASE_URL") + +engine = create_engine(DATABASE_URL) + + +def create_db_and_tables(): + print('Creating database and tables') + SQLModel.metadata.create_all(engine) \ No newline at end of file diff --git a/components/fastapi-todo-backend/app/models.py b/components/fastapi-todo-backend/app/models.py new file mode 100644 index 00000000..17d30fbf --- /dev/null +++ b/components/fastapi-todo-backend/app/models.py @@ -0,0 +1,6 @@ +from sqlmodel import SQLModel, Field +from typing import Optional + +class Todo(SQLModel, table=True): + id: Optional[int] = Field(default=None, primary_key=True) + todo: str diff --git a/components/fastapi-todo-backend/app/server.py b/components/fastapi-todo-backend/app/server.py new file mode 100644 index 00000000..4844c9c3 --- /dev/null +++ b/components/fastapi-todo-backend/app/server.py @@ -0,0 +1,9 @@ +import uvicorn +from db import create_db_and_tables +import os + +if __name__ == "__main__": + create_db_and_tables() + port = int(os.environ.get('PORT', 8000)) + + uvicorn.run("app:app", host="0.0.0.0", port=port, reload=True) \ No newline at end of file diff --git a/components/fastapi-todo-backend/requirements.txt b/components/fastapi-todo-backend/requirements.txt new file mode 100644 index 00000000..a7b889d8 --- /dev/null +++ b/components/fastapi-todo-backend/requirements.txt @@ -0,0 +1,4 @@ +fastapi +uvicorn +psycopg2==2.9.5 +sqlmodel==0.0.8 \ No newline at end of file diff --git a/components/react-todo-app/.docker/Dockerfile b/components/react-todo-app/.docker/Dockerfile new file mode 100644 index 00000000..6eb83939 --- /dev/null +++ b/components/react-todo-app/.docker/Dockerfile @@ -0,0 +1,17 @@ +# Use an official Node.js runtime as a parent image +FROM node:14-alpine + +WORKDIR /app/ + +COPY ./package.json /app/ + +# Install dependencies +RUN npm install + +# Set up an anonymous volume for the node_modules directory +VOLUME [ "/app/node_modules" ] + +# Copy the build directory to the container +COPY . /app/ + +ENTRYPOINT [ "npm", "run", "start"] \ No newline at end of file diff --git a/components/react-todo-app/.docker/docker-compose.yml b/components/react-todo-app/.docker/docker-compose.yml new file mode 100644 index 00000000..40cd7f96 --- /dev/null +++ b/components/react-todo-app/.docker/docker-compose.yml @@ -0,0 +1,18 @@ +services: + app: + build: + context: ./../ + dockerfile: .docker/Dockerfile + environment: + HOST: 0.0.0.0 + REACT_APP_BACKEND_URL: http://0.0.0.0:8002/ + ports: + - '8080:3000' + volumes: + - /var/run/docker.sock:/var/run/docker.sock + - ./../:/app + restart: 'no' + depends_on: + - api +volumes: + db-data: diff --git a/components/react-todo-app/.eslintrc.json b/components/react-todo-app/.eslintrc.json new file mode 100644 index 00000000..792b5cfa --- /dev/null +++ b/components/react-todo-app/.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/components/react-todo-app/.gitignore b/components/react-todo-app/.gitignore new file mode 100644 index 00000000..7389a200 --- /dev/null +++ b/components/react-todo-app/.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/components/react-todo-app/.npmrc b/components/react-todo-app/.npmrc new file mode 100644 index 00000000..5c6c9587 --- /dev/null +++ b/components/react-todo-app/.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/components/react-todo-app/.prettierrc.json b/components/react-todo-app/.prettierrc.json new file mode 100644 index 00000000..40fa8e5f --- /dev/null +++ b/components/react-todo-app/.prettierrc.json @@ -0,0 +1,8 @@ +{ + "printWidth": 100, + "trailingComma": "es5", + "tabWidth": 2, + "semi": true, + "singleQuote": false, + "endOfLine": "auto" +} diff --git a/components/react-todo-app/CHANGELOG.md b/components/react-todo-app/CHANGELOG.md new file mode 100644 index 00000000..269f45b0 --- /dev/null +++ b/components/react-todo-app/CHANGELOG.md @@ -0,0 +1,529 @@ +# Change Log + +## [2.1.0] 2023-05-22 + +- Fix issues +- Update dependencies +- Migrate to React 18 +- Fix vulnerabilities issues +- Fix installation issues + +## [2.0.0] 2022-01-07 + +### 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/ct-material-kit-pro-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 + +- Accordion +- Badge +- Card +- Clearfix +- CustomButtons +- CustomDropdown +- CustomFileInput +- CustomInput +- CustomLinearProgress +- CustomTabs +- CustomUpload +- Footer +- Grid +- Header +- InfoArea +- Intruction +- Media +- NavPills +- Pagination +- Parallax +- Snackbar +- Table +- Typography + +### Added components + +- MKAlert +- MKAvatar +- MKBadge +- MKBox +- MKButton +- MKDatePicker +- MKInput +- MKPagination +- MKProgress +- MKSnackbar +- MKSocialButton +- MKTypography +- Breadcrumbs +- Cards + - BackgroundCards + - ColoredBackgroundCard + - DefaultBackgroundCard + - InfoBackgroundCard + - SimpleBackgroundCard + - BlogCards + - BackgroundBlogCard + - CenteredBlogCard + - DefaultBlogCard + - RaisedBlogCard + - SimpleBlogCard + - TransparentBlogCard + - BookingCards + - DefaultBookingCard + - SimpleBookingCard + - CounterCards + - DefaultCounterCard + - InfoCards + - DefaultInfoCard + - FilledInfoCard + - SimpleInfoCard + - PricingCards + - DefaultPricingCard + - SimplePricingCard + - ReviewCards + - ComplexReviewCard + - DefaultReviewCard + - MiniReviewCard + - SimpleReviewCard + - RotatingCard + - TeamCards + - HorizontalTeamCard + - TransparentTeamCard +- Footers + - CenteredFooter + - DefaultFooter + - DetailedFooter + - SimpleFooter +- Navbars + - DefaultNavbar +- Tables + - Table + +### 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 +rellax +swiper +typed.js +uuid +web-vitals +``` + +### Updated dependencies + +### Warning + +## [1.10.0] 2021-05-12 + +### Bug fixing + +- https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/82 +- https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/78 +- https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/76 +- https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/69 +- https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/49 + +### Major style changes + +### Deleted components + +### Added components + +- `@babel/core@7.14.0` (to stop some of the console warnings) + +### Deleted dependencies + +- history (We'll use `BrowserRouter` instead of `Router` and `history`) +- `react-google-maps` (We'll use simple Google Maps API) +- `@types/googlemaps` +- `@types/markerclustererplus` +- `react-swipeable-views` (no longer maintained) + +### Added dependencies + +### Updated dependencies + +``` +@material-ui/core 4.10.1 → 4.11.4 +@material-ui/icons 4.9.1 → 4.11.2 +animate.css 4.1.0 → 4.1.1 +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-image-gallery 1.0.7 → 1.0.9 +react-scripts 3.4.1 → 4.0.3 +react-slick 0.26.1 → 0.28.1 +gulp-append-prepend 1.0.8 → 1.0.9 +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 +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-animate-on-scroll@2.1.5 requires a peer of react@>= 15.4.1 < 17.0.0-0 but none is installed. You must install peer dependencies yourself. +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. +npm WARN react-tagsinput@3.19.0 requires a peer of react@^16.0.0 || ^15.0.0 || ^0.14.0 but none is installed. You must install peer dependencies yourself. +npm WARN react-swipeable@5.5.1 requires a peer of react@^16.0.0-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-06-05 + +### Bug fixing + +- Changed the usage of `react-image-gallery` to new API, check `src/views/ProductPage/ProductPage.js` +- Solved https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/37 and https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/64 by adding for the `src/components/CustomFileInput/CustomFileInput.js` and `src/components/CustomUpload/ImageUpload.js` an `onChange` function that returns the uploaded files so people can send these to their back-end, API etc. +- Solved https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/41 +- Solved https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/46 +- Solved https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/51 +- Solved https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/60 + +### Major style changes + +- Move the keyframes from `src/assets/jss/material-kit-pro-react/views/presentationSections/componentsStyle.js` into scss file `src/assets/scss/core/_keyframes.scss` +- `src/assets/jss/material-kit-pro-react/customCheckboxRadioSwitchStyle.js` add primary color on hover for these 3 components +- `src/assets/jss/material-kit-pro-react/views/ecommerceSections/productsStyle.js` delete the hover effect for checkboxes +- `src/assets/scss/plugins/_plugin-react-image-gallery.scss` due to new `react-image-gallery` API +- `src/assets/jss/material-kit-pro-react/views/productStyle.js` due to new `react-image-gallery` API +- `src/assets/css/material-kit-pro-react.css` due to above changes +- `src/assets/css/material-kit-pro-react.css.map` due to above changes +- `src/assets/css/material-kit-pro-react.min.css` due to above changes + +### Deleted components + +### Added components + +### Deleted dependencies + +### Added dependencies + +### Updated dependencies + +``` +@material-ui/core 4.3.2 → 4.10.1 +@material-ui/icons 4.2.1 → 4.9.1 +animate.css 3.7.2 → 4.1.0 +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-image-gallery 0.8.18 → 1.0.7 +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 +@types/googlemaps 3.37.3 → 3.39.6 +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 +- Solved https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/41 +- 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/jss/material-kit-pro-react/components/cardBodyStyle.jsx` +- `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-image-gallery 0.8.17 → 0.8.18 +@types/googlemaps 3.36.4 → 3.37.0 +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 +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 +@types/googlemaps 3.37.0 → 3.37.3 +``` + +## [1.7.0] 2019-06-19 + +### Warning + +- **We've skipped versions 1.4.0, 1.5.0, 1.6.0 so that all React Material products would be on the same version.** +- **All linting errors are solved now, but due to google analytics stuff, we've needed to add target="\_blank" to our links, so this lint error still exists.** + +### 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/ct-material-kit-pro-react/issues/34 + +### Major style changes + +### Deleted components + +- `src/routes/index.jsx` + +### Added components + +### Deleted dependencies + +### Added dependencies + +- typescript@3.5.1 (To stop console warnings) + +### Updated dependencies + +``` +@material-ui/core 3.9.2 → 4.1.0 +@material-ui/icons 3.0.2 → 4.1.0 +@types/googlemaps 3.30.16 → 3.36.4 +ajv 6.9.1 → 6.10.0 +animate.css 3.7.0 → 3.7.2 +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-image-gallery 0.8.12 → 0.8.17 +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 +eslint-config-prettier 4.0.0 → 4.3.0 +eslint-plugin-prettier 3.0.1 → 3.1.0 +eslint-plugin-react 7.12.4 → 7.13.0 +prettier 1.16.4 → 1.18.2 +``` + +## [1.3.0] 2019-02-15 + +### Bug fixing + +- Dropped dynamic routing +- Deleted two of the Card inside `src/views/LoginPage/LoginPage.jsx` +- Changes caused by running [the prettier command](https://prettier.io/docs/en/install.html) for _.jsx_, _.js_, _.html_ and _.css_ files + +### Major styling changes + +- Changes caused by the fact that all colors are now variables and the prettier command + +### Deleted dependencies + +- `node-sass-chokidar` +- `npm-run-all` +- `babel-eslint` +- `eslint` + +### Added dependencies + +- `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** +- `@types/googlemaps` _3.30.13_ → **3.30.16** +- `ajv` _5.0.0_ → **6.8.1** +- `moment` _2.22.2_ → **2.24.0** +- `nouislider` _12.0.0_ → **13.1.0** +- `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-image-gallery` _0.8.11_ → **0.8.12** +- `react-scripts` _1.1.5_ → **2.1.5** +- `react-slick` _0.23.1_ → **0.23.2** +- `react-swipeable-views` _0.13.0_ → **0.13.1** +- `eslint-config-prettier` _3.0.1_ → **4.0.0** +- `eslint-plugin-prettier` _2.6.2_ → **3.0.1** +- `eslint-plugin-react` _7.11.1_ → **7.12.4** +- `prettier` _1.14.3_ → **1.16.4** + +## [1.2.0] 2018-08-29 + +### Bug fixing + +- Github own repo + - [https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/5](https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/5) + - [https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/12](https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/12) + - [https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/13](https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/13) +- Github other repos + - [https://github.com/creativetimofficial/material-kit-react/issues/36](https://github.com/creativetimofficial/material-kit-react/issues/36) + - [https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues/68](https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues/68) + - [https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues/70](https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues/70) + - [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-pro-react/components/snackbarContentStyle.jsx` +- `src/assets/jss/material-kit-pro-react/components/headerStyle.jsx` +- `src/assets/jss/material-kit-pro-react/views/loginPageStyle.jsx` +- `src/assets/jss/material-kit-pro-react/views/signupPageStyle.jsx` +- `src/assets/jss/material-kit-pro-react/customCheckboxRadioSwitchStyle.jsx` +- `src/assets/scss/plugins/_plugin-nouislider.scss` + +### Deleted dependencies + +- `react-nouislider` (since it was not well maintained) + +### Added dependencies + +- `nouislider` `12.0.0` (instead of `react-nouislider`) + +### Updated dependencies + +- `@material-ui/core` `1.5.0` → `3.1.1` +- `@material-ui/icons` `2.0.2` → `3.0.1` +- `@types/googlemaps` `3.30.11` → `3.30.13` +- `ajv` `6.5.2` → `5.0.0` +- `react` `16.4.2` → `16.5.2` +- `react-dom` `16.4.2` → `16.5.2` +- `react-image-gallery` `0.8.10` → `0.8.11` +- `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.1.0] 2018-08-14 + +### Bug fixing + +- No more use of `react-popper`, no it's beeing used `@material-ui/core/Popper` instead (see `CustomDropdown`) +- Github issues + - [https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/1](https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/1) + - [https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/2](https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/2) + - [https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/3](https://github.com/creativetimofficial/ct-material-kit-pro-react/issues/3) + +### Major styling changes + +- Added styles for `svg`'s, **font-awesome** classes and `.material-icons` class inside + - `src/assets/jss/material-kit-pro-react/components/buttonStyle.jsx` + - `src/assets/jss/material-kit-pro-react/components/cardStyle.jsx` + - `src/assets/jss/material-kit-pro-react/components/customInputStyle.jsx` + - `src/assets/jss/material-kit-pro-react/components/headerLinksStyle.jsx` + - `src/assets/jss/material-kit-pro-react/components/infoStyle.jsx` + - `src/assets/jss/material-kit-pro-react/views/componentsSections/contentAreas.jsx` + - `src/assets/jss/material-kit-pro-react/views/componentsSections/sectionCards.jsx` + - `src/assets/jss/material-kit-pro-react/views/presentationSections/overviewStyle.jsx` + - `src/assets/jss/material-kit-pro-react/views/sectionsSections/blogsStyle.jsx` + - `src/assets/jss/material-kit-pro-react/views/sectionsSections/contactsStyle.jsx` + - `src/assets/jss/material-kit-pro-react/views/sectionsSections/featuresStyle.jsx` + - `src/assets/jss/material-kit-pro-react/views/sectionsSections/pricingStyle.jsx` + - `src/assets/jss/material-kit-pro-react/views/sectionsSections/testimonialsStyle.jsx` + - `src/assets/jss/material-kit-pro-react/views/shoppingCartStyle.jsx` +- Others + - `src/assets/jss/material-kit-pro-react/views/productStyle.jsx` + +### Deleted dependencies + +- `react-parallax v1.7.0` + +### Updated dependencies + +- `@material-ui/core v1.3.1` to `@material-ui/core v1.5.0` +- `@material-ui/icons v1.1.0` to `@material-ui/icons v2.0.2` +- `@types/googlemaps v3.30.8` to `@types/googlemaps v3.30.11` +- `animate.css v3.6.1` to `animate.css v3.7.0` +- `moment v2.22.1` to `moment v2.22.2` +- `node-sass-chokidar v1.3.0` to `node-sass-chokidar v1.3.3` +- `npm-run-all v4.1.2` to `npm-run-all v4.1.3` +- `react v16.3.1` to `react v16.4.2` +- `react-animate-on-scroll v2.1.4` to `react-animate-on-scroll v2.1.5` +- `react-datetime v2.14.0` to `react-datetime v2.15.0` +- `react-dom v16.3.1` to `react-dom v16.4.2` +- `react-image-gallery v0.8.7` to `react-image-gallery v0.8.10` +- `react-router-dom v4.2.2` to `react-router-dom v4.3.1` +- `react-swipeable-views v0.12.13` to `react-swipeable-views v0.12.16` + +## [1.0.0] 2018-07-20 + +### Original Release + +- Added Material-UI as base framework +- Added design from Material Kit by Creative Tim diff --git a/components/react-todo-app/ISSUE_TEMPLATE.md b/components/react-todo-app/ISSUE_TEMPLATE.md new file mode 100644 index 00000000..2eb970fe --- /dev/null +++ b/components/react-todo-app/ISSUE_TEMPLATE.md @@ -0,0 +1,13 @@ + + + diff --git a/components/react-todo-app/README.md b/components/react-todo-app/README.md new file mode 100644 index 00000000..7f93a090 --- /dev/null +++ b/components/react-todo-app/README.md @@ -0,0 +1,228 @@ +# [Material Kit 2 PRO React](http://demos.creative-tim.com/material-kit-pro-react/#/?ref=readme-mkpr) [![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-pro-react&text=Check%20Material%20kit%202%20Pro%React%20made%20by%20@CreativeTim%20#webdesign%20#kit%20#materialdesign%20#react%20https://www.creative-tim.com/product/material-kit-pro-react) + +![version](https://img.shields.io/badge/version-2.1.0-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/ct-material-kit-pro-react.svg)](https://github.com/creativetimofficial/ct-material-kit-pro-react/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/ct-material-kit-pro-react.svg)](https://github.com/creativetimofficial/ct-material-kit-pro-react/issues?q=is%3Aissue+is%3Aclosed) + +![Image](https://s3.amazonaws.com/creativetim_bucket/products/89/original/material-kit-2-pro-react.jpg) + +Material Kit 2 PRO React is our newest premium 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 PRO React is built with over 100 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 Premium 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-pro-react/#/pages/landing-pages/coworking) + +**HELPFUL LINKS** + +- View [Github Repository](https://github.com/creativetimofficial/ct-material-kit-pro-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. +- [Rellax](https://dixonandmoe.com/rellax/) - Rellax is a buttery smooth, super lightweight, vanilla javascript parallax library. +- [SwiperJS](https://swiperjs.com/) - Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. +- [TypedJS](https://github.com/mattboldt/typed.js/) - A JavaScript Typing Animation Library. +- [ChromaJS](https://gka.github.io/chroma.js/) - A small-ish zero-dependency JavaScript library for all kinds of color conversions and color scales. +- [UUID](https://github.com/uuidjs/uuid) - JavaScript library for generating random id numbers. + +Let us know your thoughts below. And good luck with development! + +## Table of Contents + +- [Versions](#versions) +- [Demo](#demo) +- [Quick Start](#quick-start) +- [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-pro-react?ref=readme-mkpr) + +| React | +| ----- | + +| [![Material Kit 2 PRO React](https://s3.amazonaws.com/creativetim_bucket/products/89/thumb/material-kit-2-pro-react.jpg)](http://demos.creative-tim.com/material-kit-pro-react/#/?ref=readme-mkpr) + +## Demo + +- [Sign in page](https://demos.creative-tim.com/material-kit-pro-react/#/authentication/sign-in/basic?ref=readme-mkrp) +- [Sign up page](https://demos.creative-tim.com/material-kit-pro-react/#/authentication/sign-up/cover?ref=readme-mkrp) +- [About us page](https://demos.creative-tim.com/material-kit-pro-react/#/pages/company/about-us?ref=readme-mkrp) +- [Pricing page](https://demos.creative-tim.com/material-kit-pro-react/#/pages/company/pricing?ref=readme-mkrp) +- [Page headers](https://demos.creative-tim.com/material-kit-pro-react/#/sections/page-sections/page-headers?ref=readme-mkrp) + +[View More](https://demos.creative-tim.com/material-kit-pro-react/#/?ref=readme-mkp). + +## Quick start + +Quick start options: + +- Buy from [Creative Tim](https://www.creative-tim.com/product/material-kit-pro-react?ref=readme-mkpr). + +## 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. + +## Documentation + +The documentation for the Material Kit is hosted at our [website](https://www.creative-tim.com/learning-lab/react/overview/material-kit/?ref=readme-mkpr). + +### What's included + +Within the download you'll find the following directories and files: + +``` +material-kit-2-pro-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 + │ │   ├── MKProgress + │ │   ├── MKSnackbar + │ │   ├── MKSocialButton + │ │   └── MKTypography + │   ├── examples + │ │   ├── Breadcrumbs + │ │   ├── Cards + │ │   ├── Footer + │ │   ├── Navbars + │ │   └── Tables + │   ├── layouts + │ │   ├── authentication + │ │ │  ├── reset-password + │ │ │  ├── sign-in + │ │ │ └── sign-up + │ │   ├── pages + │ │ │  ├── apps + │ │ │  ├── blogs + │ │ │  ├── company + │ │ │  ├── extra + │ │ │  ├── landing-pages + │ │ │  ├── presentation + │ │ │ └── support + │ │   ├── sections + │ │ │  ├── attention-catchers + │ │ │  ├── components + │ │ │  ├── elements + │ │ │  ├── input-areas + │ │ │  ├── input-navigation + │ │ └── └── page-sections + │   ├── pages + │ │   ├── Apps + │ │   ├── Authentication + │ │   ├── Blogs + │ │   ├── Company + │ │   ├── Extra + │ │   ├── LandingPages + │ │   ├── Presentation + │ │ └── Support + │   ├── 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-pro-react/#/?ref=readme-mkpr) +- [Buy Page](https://www.creative-tim.com/product/material-kit-pro-react?ref=readme-mkpr) +- Documentation is [here](https://www.creative-tim.com/learning-lab/react/overview/material-kit/?ref=readme-mkpr) +- [License Agreement](https://www.creative-tim.com/license?ref=readme-mkpr) +- [Support](https://www.creative-tim.com/contact-us?ref=readme-mkpr) +- Issues: [Github Issues Page](https://github.com/creativetimofficial/ct-material-kit-pro-react/issues) + +## Reporting Issues + +We use GitHub Issues as the official bug tracker for the Material Kit 2 PRO 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 PRO React. Check the CHANGELOG from your dashboard on our [website](https://www.creative-tim.com/product/material-kit-pro-react?ref=readme-mkpr). +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-mkpr) instead of opening an issue. + +## Licensing + +- Copyright 2023 [Creative Tim](https://www.creative-tim.com?ref=readme-mkpr) +- Creative Tim [license](https://www.creative-tim.com/license?ref=readme-mkpr) + +## Useful Links + +- [More products](https://www.creative-tim.com/templates?ref=readme-mkpr) from Creative Tim + +- [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w) + +- [Freebies](https://www.creative-tim.com/bootstrap-themes/free?ref=readme-mkpr) from Creative Tim + +- [Affiliate Program](https://www.creative-tim.com/affiliates/new?ref=readme-mkpr) (earn money) + +##### Social Media + +Twitter: + +Facebook: + +Dribbble: + +Google+: + +Instagram: diff --git a/components/react-todo-app/jsconfig.json b/components/react-todo-app/jsconfig.json new file mode 100644 index 00000000..256380f5 --- /dev/null +++ b/components/react-todo-app/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "baseUrl": "src", + "paths": { + "*": ["src/*"] + } + } +} diff --git a/components/react-todo-app/package.json b/components/react-todo-app/package.json new file mode 100644 index 00000000..6b8ded4d --- /dev/null +++ b/components/react-todo-app/package.json @@ -0,0 +1,82 @@ +{ + "name": "material-kit-2-pro-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 PRO by Creative Tim", + "homepage": "https://demos.creative-tim.com/todo", + "bugs": { + "url": "https://github.com/creativetimofficial/ct-material-kit-pro-react/issues" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/creativetimofficial/ct-material-kit-pro-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", + "rellax": "1.12.1", + "swiper": "9.2.0", + "typed.js": "2.0.15", + "uuid": "9.0.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": { + "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" + }, + "overrides": { + "svgo": "3.0.2" + } +} \ No newline at end of file diff --git a/components/react-todo-app/public/apple-icon.png b/components/react-todo-app/public/apple-icon.png new file mode 100644 index 00000000..08664e1f Binary files /dev/null and b/components/react-todo-app/public/apple-icon.png differ diff --git a/components/react-todo-app/public/favicon.png b/components/react-todo-app/public/favicon.png new file mode 100644 index 00000000..08664e1f Binary files /dev/null and b/components/react-todo-app/public/favicon.png differ diff --git a/components/react-todo-app/public/index.html b/components/react-todo-app/public/index.html new file mode 100644 index 00000000..adb1b235 --- /dev/null +++ b/components/react-todo-app/public/index.html @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + Material Kit 2 PRO React by Creative Tim + + + + + + + + + + + +
+ + diff --git a/components/react-todo-app/public/manifest.json b/components/react-todo-app/public/manifest.json new file mode 100644 index 00000000..467fae6a --- /dev/null +++ b/components/react-todo-app/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "Material Kit", + "name": "Material Kit 2 PRO 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/components/react-todo-app/public/robots.txt b/components/react-todo-app/public/robots.txt new file mode 100644 index 00000000..e9e57dc4 --- /dev/null +++ b/components/react-todo-app/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/components/react-todo-app/src/App.js b/components/react-todo-app/src/App.js new file mode 100644 index 00000000..4741e720 --- /dev/null +++ b/components/react-todo-app/src/App.js @@ -0,0 +1,64 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { 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 PRO React themes +import theme from "assets/theme"; +import Presentation from "layouts/pages/presentation"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/images/annie-spratt.jpg b/components/react-todo-app/src/assets/images/annie-spratt.jpg new file mode 100644 index 00000000..6ffc9ef6 Binary files /dev/null and b/components/react-todo-app/src/assets/images/annie-spratt.jpg differ diff --git a/components/react-todo-app/src/assets/images/apple-icon.png b/components/react-todo-app/src/assets/images/apple-icon.png new file mode 100644 index 00000000..08664e1f Binary files /dev/null and b/components/react-todo-app/src/assets/images/apple-icon.png differ diff --git a/components/react-todo-app/src/assets/images/automotive/amg-gt.png b/components/react-todo-app/src/assets/images/automotive/amg-gt.png new file mode 100644 index 00000000..ff9b7933 Binary files /dev/null and b/components/react-todo-app/src/assets/images/automotive/amg-gt.png differ diff --git a/components/react-todo-app/src/assets/images/automotive/cls.png b/components/react-todo-app/src/assets/images/automotive/cls.png new file mode 100644 index 00000000..8ce88023 Binary files /dev/null and b/components/react-todo-app/src/assets/images/automotive/cls.png differ diff --git a/components/react-todo-app/src/assets/images/automotive/g-amg.png b/components/react-todo-app/src/assets/images/automotive/g-amg.png new file mode 100644 index 00000000..196ae108 Binary files /dev/null and b/components/react-todo-app/src/assets/images/automotive/g-amg.png differ diff --git a/components/react-todo-app/src/assets/images/automotive/glc.png b/components/react-todo-app/src/assets/images/automotive/glc.png new file mode 100644 index 00000000..aee27bd5 Binary files /dev/null and b/components/react-todo-app/src/assets/images/automotive/glc.png differ diff --git a/components/react-todo-app/src/assets/images/automotive/s-maybach.png b/components/react-todo-app/src/assets/images/automotive/s-maybach.png new file mode 100644 index 00000000..22a9d88a Binary files /dev/null and b/components/react-todo-app/src/assets/images/automotive/s-maybach.png differ diff --git a/components/react-todo-app/src/assets/images/bg-about-us.jpg b/components/react-todo-app/src/assets/images/bg-about-us.jpg new file mode 100644 index 00000000..a29b7207 Binary files /dev/null and b/components/react-todo-app/src/assets/images/bg-about-us.jpg differ diff --git a/components/react-todo-app/src/assets/images/bg-coworking.jpeg b/components/react-todo-app/src/assets/images/bg-coworking.jpeg new file mode 100644 index 00000000..df4651de Binary files /dev/null and b/components/react-todo-app/src/assets/images/bg-coworking.jpeg differ diff --git a/components/react-todo-app/src/assets/images/bg-presentation.jpg b/components/react-todo-app/src/assets/images/bg-presentation.jpg new file mode 100644 index 00000000..9292df20 Binary files /dev/null and b/components/react-todo-app/src/assets/images/bg-presentation.jpg differ diff --git a/components/react-todo-app/src/assets/images/bg-rental.jpeg b/components/react-todo-app/src/assets/images/bg-rental.jpeg new file mode 100644 index 00000000..0d239967 Binary files /dev/null and b/components/react-todo-app/src/assets/images/bg-rental.jpeg differ diff --git a/components/react-todo-app/src/assets/images/bg-reset-cover.jpeg b/components/react-todo-app/src/assets/images/bg-reset-cover.jpeg new file mode 100644 index 00000000..b2151d40 Binary files /dev/null and b/components/react-todo-app/src/assets/images/bg-reset-cover.jpeg differ diff --git a/components/react-todo-app/src/assets/images/bg-sign-in-basic.jpeg b/components/react-todo-app/src/assets/images/bg-sign-in-basic.jpeg new file mode 100644 index 00000000..25648496 Binary files /dev/null and b/components/react-todo-app/src/assets/images/bg-sign-in-basic.jpeg differ diff --git a/components/react-todo-app/src/assets/images/bg-sign-in-cover.jpeg b/components/react-todo-app/src/assets/images/bg-sign-in-cover.jpeg new file mode 100644 index 00000000..cc5ae7eb Binary files /dev/null and b/components/react-todo-app/src/assets/images/bg-sign-in-cover.jpeg differ diff --git a/components/react-todo-app/src/assets/images/bg-sign-up-cover.jpeg b/components/react-todo-app/src/assets/images/bg-sign-up-cover.jpeg new file mode 100644 index 00000000..576ae5bf Binary files /dev/null and b/components/react-todo-app/src/assets/images/bg-sign-up-cover.jpeg differ diff --git a/components/react-todo-app/src/assets/images/bg-smart-home-1.jpg b/components/react-todo-app/src/assets/images/bg-smart-home-1.jpg new file mode 100644 index 00000000..b9f051c3 Binary files /dev/null and b/components/react-todo-app/src/assets/images/bg-smart-home-1.jpg differ diff --git a/components/react-todo-app/src/assets/images/bg.jpg b/components/react-todo-app/src/assets/images/bg.jpg new file mode 100644 index 00000000..fe8ec2a7 Binary files /dev/null and b/components/react-todo-app/src/assets/images/bg.jpg differ diff --git a/components/react-todo-app/src/assets/images/bg0.jpg b/components/react-todo-app/src/assets/images/bg0.jpg new file mode 100644 index 00000000..4b3d5f8c Binary files /dev/null and b/components/react-todo-app/src/assets/images/bg0.jpg differ diff --git a/components/react-todo-app/src/assets/images/bg10.jpg b/components/react-todo-app/src/assets/images/bg10.jpg new file mode 100644 index 00000000..424358e7 Binary files /dev/null and b/components/react-todo-app/src/assets/images/bg10.jpg differ diff --git a/components/react-todo-app/src/assets/images/bg2.jpg b/components/react-todo-app/src/assets/images/bg2.jpg new file mode 100644 index 00000000..0ac6c055 Binary files /dev/null and b/components/react-todo-app/src/assets/images/bg2.jpg differ diff --git a/components/react-todo-app/src/assets/images/bg3.jpg b/components/react-todo-app/src/assets/images/bg3.jpg new file mode 100644 index 00000000..218da7f7 Binary files /dev/null and b/components/react-todo-app/src/assets/images/bg3.jpg differ diff --git a/components/react-todo-app/src/assets/images/bg5.jpg b/components/react-todo-app/src/assets/images/bg5.jpg new file mode 100644 index 00000000..58350f5b Binary files /dev/null and b/components/react-todo-app/src/assets/images/bg5.jpg differ diff --git a/components/react-todo-app/src/assets/images/bg6.jpg b/components/react-todo-app/src/assets/images/bg6.jpg new file mode 100644 index 00000000..73251bab Binary files /dev/null and b/components/react-todo-app/src/assets/images/bg6.jpg differ diff --git a/components/react-todo-app/src/assets/images/bg8.jpg b/components/react-todo-app/src/assets/images/bg8.jpg new file mode 100644 index 00000000..939afeae Binary files /dev/null and b/components/react-todo-app/src/assets/images/bg8.jpg differ diff --git a/components/react-todo-app/src/assets/images/brooke.jpg b/components/react-todo-app/src/assets/images/brooke.jpg new file mode 100644 index 00000000..669d3afa Binary files /dev/null and b/components/react-todo-app/src/assets/images/brooke.jpg differ diff --git a/components/react-todo-app/src/assets/images/bruce-mars.jpg b/components/react-todo-app/src/assets/images/bruce-mars.jpg new file mode 100644 index 00000000..335cf58b Binary files /dev/null and b/components/react-todo-app/src/assets/images/bruce-mars.jpg differ diff --git a/components/react-todo-app/src/assets/images/charles.jpg b/components/react-todo-app/src/assets/images/charles.jpg new file mode 100644 index 00000000..fe7b9a66 Binary files /dev/null and b/components/react-todo-app/src/assets/images/charles.jpg differ diff --git a/components/react-todo-app/src/assets/images/city-profile.jpg b/components/react-todo-app/src/assets/images/city-profile.jpg new file mode 100644 index 00000000..7fcd1a9e Binary files /dev/null and b/components/react-todo-app/src/assets/images/city-profile.jpg differ diff --git a/components/react-todo-app/src/assets/images/dg1.jpg b/components/react-todo-app/src/assets/images/dg1.jpg new file mode 100644 index 00000000..f03004cf Binary files /dev/null and b/components/react-todo-app/src/assets/images/dg1.jpg differ diff --git a/components/react-todo-app/src/assets/images/dg2.jpg b/components/react-todo-app/src/assets/images/dg2.jpg new file mode 100644 index 00000000..a22aea33 Binary files /dev/null and b/components/react-todo-app/src/assets/images/dg2.jpg differ diff --git a/components/react-todo-app/src/assets/images/dg3.jpg b/components/react-todo-app/src/assets/images/dg3.jpg new file mode 100644 index 00000000..7a239594 Binary files /dev/null and b/components/react-todo-app/src/assets/images/dg3.jpg differ diff --git a/components/react-todo-app/src/assets/images/down-arrow-dark.svg b/components/react-todo-app/src/assets/images/down-arrow-dark.svg new file mode 100644 index 00000000..11bb8d8c --- /dev/null +++ b/components/react-todo-app/src/assets/images/down-arrow-dark.svg @@ -0,0 +1,11 @@ + + + down-arrow + + + + + + + + diff --git a/components/react-todo-app/src/assets/images/down-arrow-white.svg b/components/react-todo-app/src/assets/images/down-arrow-white.svg new file mode 100644 index 00000000..f13dc2f8 --- /dev/null +++ b/components/react-todo-app/src/assets/images/down-arrow-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/down-arrow.svg b/components/react-todo-app/src/assets/images/down-arrow.svg new file mode 100644 index 00000000..8a5fb42a --- /dev/null +++ b/components/react-todo-app/src/assets/images/down-arrow.svg @@ -0,0 +1,11 @@ + + + down-arrow + + + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/examples/blog-9-1.jpg b/components/react-todo-app/src/assets/images/examples/blog-9-1.jpg new file mode 100644 index 00000000..548c1b1f Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/blog-9-1.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/blog-9-2.jpg b/components/react-todo-app/src/assets/images/examples/blog-9-2.jpg new file mode 100644 index 00000000..353b3ad9 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/blog-9-2.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/blog-9-3.jpg b/components/react-todo-app/src/assets/images/examples/blog-9-3.jpg new file mode 100644 index 00000000..96395f9e Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/blog-9-3.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/blog-9-4.jpg b/components/react-todo-app/src/assets/images/examples/blog-9-4.jpg new file mode 100644 index 00000000..d85643ef Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/blog-9-4.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/blog-post-1.jpg b/components/react-todo-app/src/assets/images/examples/blog-post-1.jpg new file mode 100644 index 00000000..317efd2b Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/blog-post-1.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/blog-post-2.jpg b/components/react-todo-app/src/assets/images/examples/blog-post-2.jpg new file mode 100644 index 00000000..a5683918 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/blog-post-2.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/blog-post-3.jpg b/components/react-todo-app/src/assets/images/examples/blog-post-3.jpg new file mode 100644 index 00000000..febefbef Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/blog-post-3.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/blog-post-6.jpg b/components/react-todo-app/src/assets/images/examples/blog-post-6.jpg new file mode 100644 index 00000000..d30f4685 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/blog-post-6.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/blog1.jpg b/components/react-todo-app/src/assets/images/examples/blog1.jpg new file mode 100644 index 00000000..dec570af Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/blog1.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/blog2.jpg b/components/react-todo-app/src/assets/images/examples/blog2.jpg new file mode 100644 index 00000000..d05e5113 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/blog2.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/blog3.jpg b/components/react-todo-app/src/assets/images/examples/blog3.jpg new file mode 100644 index 00000000..640e7e39 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/blog3.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/blog4.jpg b/components/react-todo-app/src/assets/images/examples/blog4.jpg new file mode 100644 index 00000000..24f0f4ea Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/blog4.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/blog5.jpg b/components/react-todo-app/src/assets/images/examples/blog5.jpg new file mode 100644 index 00000000..41aac59d Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/blog5.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/blog6.jpg b/components/react-todo-app/src/assets/images/examples/blog6.jpg new file mode 100644 index 00000000..494bcf0b Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/blog6.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/blog7.jpg b/components/react-todo-app/src/assets/images/examples/blog7.jpg new file mode 100644 index 00000000..992e6333 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/blog7.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/blog8.jpg b/components/react-todo-app/src/assets/images/examples/blog8.jpg new file mode 100644 index 00000000..b6c6a1bd Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/blog8.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/card-blog2.jpg b/components/react-todo-app/src/assets/images/examples/card-blog2.jpg new file mode 100644 index 00000000..ecf61fb9 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/card-blog2.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/card-blog3.jpg b/components/react-todo-app/src/assets/images/examples/card-blog3.jpg new file mode 100644 index 00000000..3b55d913 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/card-blog3.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/card-blog4.jpg b/components/react-todo-app/src/assets/images/examples/card-blog4.jpg new file mode 100644 index 00000000..45db5e9d Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/card-blog4.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/card-blog6.jpg b/components/react-todo-app/src/assets/images/examples/card-blog6.jpg new file mode 100644 index 00000000..10503085 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/card-blog6.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/card-product1.jpg b/components/react-todo-app/src/assets/images/examples/card-product1.jpg new file mode 100644 index 00000000..033cb832 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/card-product1.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/card-product2.jpg b/components/react-todo-app/src/assets/images/examples/card-product2.jpg new file mode 100644 index 00000000..0eabb8b6 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/card-product2.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/card-product3.jpg b/components/react-todo-app/src/assets/images/examples/card-product3.jpg new file mode 100644 index 00000000..a0c0800e Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/card-product3.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/card-product4.jpg b/components/react-todo-app/src/assets/images/examples/card-product4.jpg new file mode 100644 index 00000000..2056b507 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/card-product4.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/card-profile1.jpg b/components/react-todo-app/src/assets/images/examples/card-profile1.jpg new file mode 100644 index 00000000..21ea18cf Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/card-profile1.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/card-profile2.jpg b/components/react-todo-app/src/assets/images/examples/card-profile2.jpg new file mode 100644 index 00000000..5fddf83b Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/card-profile2.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/card-profile7.jpg b/components/react-todo-app/src/assets/images/examples/card-profile7.jpg new file mode 100644 index 00000000..0d540e3f Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/card-profile7.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/card-project5.jpg b/components/react-todo-app/src/assets/images/examples/card-project5.jpg new file mode 100644 index 00000000..6ebd4715 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/card-project5.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/city.jpg b/components/react-todo-app/src/assets/images/examples/city.jpg new file mode 100644 index 00000000..7fcd1a9e Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/city.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/clem-onojegaw.jpg b/components/react-todo-app/src/assets/images/examples/clem-onojegaw.jpg new file mode 100644 index 00000000..1291ce30 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/clem-onojegaw.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/clem-onojeghuou.jpg b/components/react-todo-app/src/assets/images/examples/clem-onojeghuou.jpg new file mode 100644 index 00000000..5d605114 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/clem-onojeghuou.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/color1.jpg b/components/react-todo-app/src/assets/images/examples/color1.jpg new file mode 100644 index 00000000..9d9fe462 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/color1.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/color2.jpg b/components/react-todo-app/src/assets/images/examples/color2.jpg new file mode 100644 index 00000000..465d0ea2 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/color2.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/color3.jpg b/components/react-todo-app/src/assets/images/examples/color3.jpg new file mode 100644 index 00000000..db407e5f Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/color3.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/content-1.jpg b/components/react-todo-app/src/assets/images/examples/content-1.jpg new file mode 100644 index 00000000..dded4bb0 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/content-1.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/content-2.jpg b/components/react-todo-app/src/assets/images/examples/content-2.jpg new file mode 100644 index 00000000..988d7534 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/content-2.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/content-3.jpg b/components/react-todo-app/src/assets/images/examples/content-3.jpg new file mode 100644 index 00000000..c5cdc480 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/content-3.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/content-4.jpg b/components/react-todo-app/src/assets/images/examples/content-4.jpg new file mode 100644 index 00000000..6f722d1f Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/content-4.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/content-5.jpg b/components/react-todo-app/src/assets/images/examples/content-5.jpg new file mode 100644 index 00000000..4493a516 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/content-5.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/header-5-img-1.jpg b/components/react-todo-app/src/assets/images/examples/header-5-img-1.jpg new file mode 100644 index 00000000..cb2b7154 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/header-5-img-1.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/header-5-img-2.jpg b/components/react-todo-app/src/assets/images/examples/header-5-img-2.jpg new file mode 100644 index 00000000..c8095001 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/header-5-img-2.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/header-5-img-3.jpg b/components/react-todo-app/src/assets/images/examples/header-5-img-3.jpg new file mode 100644 index 00000000..4106ad05 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/header-5-img-3.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/header-5-img-4.jpg b/components/react-todo-app/src/assets/images/examples/header-5-img-4.jpg new file mode 100644 index 00000000..1f69fee0 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/header-5-img-4.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/header-5-img-5.jpg b/components/react-todo-app/src/assets/images/examples/header-5-img-5.jpg new file mode 100644 index 00000000..6f082672 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/header-5-img-5.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/header-5-img-6.jpg b/components/react-todo-app/src/assets/images/examples/header-5-img-6.jpg new file mode 100644 index 00000000..dacbe8c7 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/header-5-img-6.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/header-5-img-7.jpg b/components/react-todo-app/src/assets/images/examples/header-5-img-7.jpg new file mode 100644 index 00000000..f21491b4 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/header-5-img-7.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/iphone.png b/components/react-todo-app/src/assets/images/examples/iphone.png new file mode 100644 index 00000000..0d82638d Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/iphone.png differ diff --git a/components/react-todo-app/src/assets/images/examples/product1.jpg b/components/react-todo-app/src/assets/images/examples/product1.jpg new file mode 100644 index 00000000..929beed7 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/product1.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/product2.png b/components/react-todo-app/src/assets/images/examples/product2.png new file mode 100644 index 00000000..adbd0c6f Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/product2.png differ diff --git a/components/react-todo-app/src/assets/images/examples/product3.png b/components/react-todo-app/src/assets/images/examples/product3.png new file mode 100644 index 00000000..e36d2f03 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/product3.png differ diff --git a/components/react-todo-app/src/assets/images/examples/product4.jpg b/components/react-todo-app/src/assets/images/examples/product4.jpg new file mode 100644 index 00000000..2e4472a6 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/product4.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/studio-2.jpg b/components/react-todo-app/src/assets/images/examples/studio-2.jpg new file mode 100644 index 00000000..e1a2f073 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/studio-2.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/studio-3.jpg b/components/react-todo-app/src/assets/images/examples/studio-3.jpg new file mode 100644 index 00000000..a35d0f9a Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/studio-3.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/studio-5.jpg b/components/react-todo-app/src/assets/images/examples/studio-5.jpg new file mode 100644 index 00000000..ab453f97 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/studio-5.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/testimonial-6-1.jpg b/components/react-todo-app/src/assets/images/examples/testimonial-6-1.jpg new file mode 100644 index 00000000..9dba5645 Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/testimonial-6-1.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/testimonial-6-2.jpg b/components/react-todo-app/src/assets/images/examples/testimonial-6-2.jpg new file mode 100644 index 00000000..3d2aee6e Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/testimonial-6-2.jpg differ diff --git a/components/react-todo-app/src/assets/images/examples/testimonial-6-3.jpg b/components/react-todo-app/src/assets/images/examples/testimonial-6-3.jpg new file mode 100644 index 00000000..686bebbb Binary files /dev/null and b/components/react-todo-app/src/assets/images/examples/testimonial-6-3.jpg differ diff --git a/components/react-todo-app/src/assets/images/favicon.png b/components/react-todo-app/src/assets/images/favicon.png new file mode 100644 index 00000000..08664e1f Binary files /dev/null and b/components/react-todo-app/src/assets/images/favicon.png differ diff --git a/components/react-todo-app/src/assets/images/illustrations/illustration-reset.jpg b/components/react-todo-app/src/assets/images/illustrations/illustration-reset.jpg new file mode 100644 index 00000000..6eb78266 Binary files /dev/null and b/components/react-todo-app/src/assets/images/illustrations/illustration-reset.jpg differ diff --git a/components/react-todo-app/src/assets/images/illustrations/illustration-signin.jpg b/components/react-todo-app/src/assets/images/illustrations/illustration-signin.jpg new file mode 100644 index 00000000..f01cb23d Binary files /dev/null and b/components/react-todo-app/src/assets/images/illustrations/illustration-signin.jpg differ diff --git a/components/react-todo-app/src/assets/images/illustrations/illustration-signup.jpg b/components/react-todo-app/src/assets/images/illustrations/illustration-signup.jpg new file mode 100644 index 00000000..e9df9102 Binary files /dev/null and b/components/react-todo-app/src/assets/images/illustrations/illustration-signup.jpg differ diff --git a/components/react-todo-app/src/assets/images/iphones.png b/components/react-todo-app/src/assets/images/iphones.png new file mode 100644 index 00000000..0c6fa40d Binary files /dev/null and b/components/react-todo-app/src/assets/images/iphones.png differ diff --git a/components/react-todo-app/src/assets/images/ivana-square.jpg b/components/react-todo-app/src/assets/images/ivana-square.jpg new file mode 100644 index 00000000..f6308ce2 Binary files /dev/null and b/components/react-todo-app/src/assets/images/ivana-square.jpg differ diff --git a/components/react-todo-app/src/assets/images/ivana-squares.jpg b/components/react-todo-app/src/assets/images/ivana-squares.jpg new file mode 100644 index 00000000..a63739f5 Binary files /dev/null and b/components/react-todo-app/src/assets/images/ivana-squares.jpg differ diff --git a/components/react-todo-app/src/assets/images/ivana.jpg b/components/react-todo-app/src/assets/images/ivana.jpg new file mode 100644 index 00000000..7ac6d317 Binary files /dev/null and b/components/react-todo-app/src/assets/images/ivana.jpg differ diff --git a/components/react-todo-app/src/assets/images/kal-visuals.jpg b/components/react-todo-app/src/assets/images/kal-visuals.jpg new file mode 100644 index 00000000..e3138b75 Binary files /dev/null and b/components/react-todo-app/src/assets/images/kal-visuals.jpg differ diff --git a/components/react-todo-app/src/assets/images/logo-ct-dark.png b/components/react-todo-app/src/assets/images/logo-ct-dark.png new file mode 100644 index 00000000..4c2b2518 Binary files /dev/null and b/components/react-todo-app/src/assets/images/logo-ct-dark.png differ diff --git a/components/react-todo-app/src/assets/images/logos/gray-logos/logo-apple.svg b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-apple.svg new file mode 100644 index 00000000..22e39dcb --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-apple.svg @@ -0,0 +1,10 @@ + + + Logos + + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/gray-logos/logo-behance.svg b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-behance.svg new file mode 100644 index 00000000..4bb58907 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-behance.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/gray-logos/logo-coinbase.svg b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-coinbase.svg new file mode 100644 index 00000000..1854688a --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-coinbase.svg @@ -0,0 +1,16 @@ + + + Logos + + + + + + + + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/gray-logos/logo-digitalocean.svg b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-digitalocean.svg new file mode 100644 index 00000000..2c8d8fb2 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-digitalocean.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/gray-logos/logo-facebook.svg b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-facebook.svg new file mode 100644 index 00000000..0997fefe --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-facebook.svg @@ -0,0 +1,11 @@ + + + Logos + + + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/gray-logos/logo-google.svg b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-google.svg new file mode 100644 index 00000000..8724eff8 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-google.svg @@ -0,0 +1,14 @@ + + + Logos + + + + + + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/gray-logos/logo-mailchimp.svg b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-mailchimp.svg new file mode 100644 index 00000000..f54f47c4 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-mailchimp.svg @@ -0,0 +1,11 @@ + + + Logos + + + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/gray-logos/logo-nasa.svg b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-nasa.svg new file mode 100644 index 00000000..282f50f0 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-nasa.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/gray-logos/logo-netflix.svg b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-netflix.svg new file mode 100644 index 00000000..9579c0d8 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-netflix.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/gray-logos/logo-pinterest.svg b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-pinterest.svg new file mode 100644 index 00000000..734ffb1d --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-pinterest.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/gray-logos/logo-spotify.svg b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-spotify.svg new file mode 100644 index 00000000..eb7862fc --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-spotify.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/gray-logos/logo-vodafone.svg b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-vodafone.svg new file mode 100644 index 00000000..b22cbe75 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/gray-logos/logo-vodafone.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/medium-logos/logo-behance.svg b/components/react-todo-app/src/assets/images/logos/medium-logos/logo-behance.svg new file mode 100644 index 00000000..779aab43 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/medium-logos/logo-behance.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/medium-logos/logo-coinbase.svg b/components/react-todo-app/src/assets/images/logos/medium-logos/logo-coinbase.svg new file mode 100644 index 00000000..a6a5ce79 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/medium-logos/logo-coinbase.svg @@ -0,0 +1,16 @@ + + + Logos + + + + + + + + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/medium-logos/logo-google.svg b/components/react-todo-app/src/assets/images/logos/medium-logos/logo-google.svg new file mode 100644 index 00000000..8f06b69c --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/medium-logos/logo-google.svg @@ -0,0 +1,14 @@ + + + Logos + + + + + + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/medium-logos/logo-nasa.svg b/components/react-todo-app/src/assets/images/logos/medium-logos/logo-nasa.svg new file mode 100644 index 00000000..93b711a0 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/medium-logos/logo-nasa.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/medium-logos/logo-netflix.svg b/components/react-todo-app/src/assets/images/logos/medium-logos/logo-netflix.svg new file mode 100644 index 00000000..8fc26f78 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/medium-logos/logo-netflix.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/medium-logos/logo-pinterest.svg b/components/react-todo-app/src/assets/images/logos/medium-logos/logo-pinterest.svg new file mode 100644 index 00000000..4410d5cb --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/medium-logos/logo-pinterest.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/medium-logos/logo-spotify.svg b/components/react-todo-app/src/assets/images/logos/medium-logos/logo-spotify.svg new file mode 100644 index 00000000..4a757716 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/medium-logos/logo-spotify.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/medium-logos/logo-vodafone.svg b/components/react-todo-app/src/assets/images/logos/medium-logos/logo-vodafone.svg new file mode 100644 index 00000000..324883bc --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/medium-logos/logo-vodafone.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/small-logos/logo-amazon.svg b/components/react-todo-app/src/assets/images/logos/small-logos/logo-amazon.svg new file mode 100644 index 00000000..db929875 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/small-logos/logo-amazon.svg @@ -0,0 +1,11 @@ + + + logo-amazon + + + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/small-logos/logo-apple.svg b/components/react-todo-app/src/assets/images/logos/small-logos/logo-apple.svg new file mode 100644 index 00000000..e33f2054 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/small-logos/logo-apple.svg @@ -0,0 +1,9 @@ + + + Artboard + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/small-logos/logo-asana.svg b/components/react-todo-app/src/assets/images/logos/small-logos/logo-asana.svg new file mode 100644 index 00000000..c37d9bf9 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/small-logos/logo-asana.svg @@ -0,0 +1,16 @@ + + + Logos + + + + + + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/small-logos/logo-atlassian.svg b/components/react-todo-app/src/assets/images/logos/small-logos/logo-atlassian.svg new file mode 100644 index 00000000..6df68253 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/small-logos/logo-atlassian.svg @@ -0,0 +1,16 @@ + + + Logos + + + + + + + + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/small-logos/logo-dribbble.svg b/components/react-todo-app/src/assets/images/logos/small-logos/logo-dribbble.svg new file mode 100644 index 00000000..09422be3 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/small-logos/logo-dribbble.svg @@ -0,0 +1,9 @@ + + + logo-dribbble + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/small-logos/logo-github.svg b/components/react-todo-app/src/assets/images/logos/small-logos/logo-github.svg new file mode 100644 index 00000000..4fedc164 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/small-logos/logo-github.svg @@ -0,0 +1,10 @@ + + + logo-github + + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/small-logos/logo-google-cloud.svg b/components/react-todo-app/src/assets/images/logos/small-logos/logo-google-cloud.svg new file mode 100644 index 00000000..9856c1c0 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/small-logos/logo-google-cloud.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/small-logos/logo-invision.svg b/components/react-todo-app/src/assets/images/logos/small-logos/logo-invision.svg new file mode 100644 index 00000000..44e72b61 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/small-logos/logo-invision.svg @@ -0,0 +1,10 @@ + + + Logos + + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/small-logos/logo-jira.svg b/components/react-todo-app/src/assets/images/logos/small-logos/logo-jira.svg new file mode 100644 index 00000000..dac3ddbb --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/small-logos/logo-jira.svg @@ -0,0 +1,21 @@ + + + Logos + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/small-logos/logo-shopify.svg b/components/react-todo-app/src/assets/images/logos/small-logos/logo-shopify.svg new file mode 100644 index 00000000..3a6075e3 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/small-logos/logo-shopify.svg @@ -0,0 +1,11 @@ + + + Logos + + + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/small-logos/logo-slack.svg b/components/react-todo-app/src/assets/images/logos/small-logos/logo-slack.svg new file mode 100644 index 00000000..6b8eba67 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/small-logos/logo-slack.svg @@ -0,0 +1,12 @@ + + + Logos + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/small-logos/logo-spotify.svg b/components/react-todo-app/src/assets/images/logos/small-logos/logo-spotify.svg new file mode 100644 index 00000000..1c930b3b --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/small-logos/logo-spotify.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/small-logos/logo-twitter.svg b/components/react-todo-app/src/assets/images/logos/small-logos/logo-twitter.svg new file mode 100644 index 00000000..4b2e75ae --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/small-logos/logo-twitter.svg @@ -0,0 +1,9 @@ + + + logo-twitter + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/small-logos/logo-webdev.svg b/components/react-todo-app/src/assets/images/logos/small-logos/logo-webdev.svg new file mode 100644 index 00000000..4d226495 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/small-logos/logo-webdev.svg @@ -0,0 +1,11 @@ + + + Logos + + + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/small-logos/logo-xd.svg b/components/react-todo-app/src/assets/images/logos/small-logos/logo-xd.svg new file mode 100644 index 00000000..5cd1bd4a --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/small-logos/logo-xd.svg @@ -0,0 +1,11 @@ + + + Logos + + + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/small-logos/logo-youtube.svg b/components/react-todo-app/src/assets/images/logos/small-logos/logo-youtube.svg new file mode 100644 index 00000000..35a008a5 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/small-logos/logo-youtube.svg @@ -0,0 +1,10 @@ + + + logo-youtube + + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/small-logos/logo-zoom.svg b/components/react-todo-app/src/assets/images/logos/small-logos/logo-zoom.svg new file mode 100644 index 00000000..be0b235f --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/small-logos/logo-zoom.svg @@ -0,0 +1,10 @@ + + + logo-zoom + + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/white-logos/logo-behance-white.svg b/components/react-todo-app/src/assets/images/logos/white-logos/logo-behance-white.svg new file mode 100644 index 00000000..18d85df6 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/white-logos/logo-behance-white.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/logos/white-logos/logo-nasa-white.svg b/components/react-todo-app/src/assets/images/logos/white-logos/logo-nasa-white.svg new file mode 100644 index 00000000..35d98a98 --- /dev/null +++ b/components/react-todo-app/src/assets/images/logos/white-logos/logo-nasa-white.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/macbook-2.png b/components/react-todo-app/src/assets/images/macbook-2.png new file mode 100644 index 00000000..395724f5 Binary files /dev/null and b/components/react-todo-app/src/assets/images/macbook-2.png differ diff --git a/components/react-todo-app/src/assets/images/macbook.png b/components/react-todo-app/src/assets/images/macbook.png new file mode 100644 index 00000000..16a17768 Binary files /dev/null and b/components/react-todo-app/src/assets/images/macbook.png differ diff --git a/components/react-todo-app/src/assets/images/marie.jpg b/components/react-todo-app/src/assets/images/marie.jpg new file mode 100644 index 00000000..ad0b807f Binary files /dev/null and b/components/react-todo-app/src/assets/images/marie.jpg differ diff --git a/components/react-todo-app/src/assets/images/nastuh.jpg b/components/react-todo-app/src/assets/images/nastuh.jpg new file mode 100644 index 00000000..9d7ccdad Binary files /dev/null and b/components/react-todo-app/src/assets/images/nastuh.jpg differ diff --git a/components/react-todo-app/src/assets/images/office-dark.jpg b/components/react-todo-app/src/assets/images/office-dark.jpg new file mode 100644 index 00000000..923d7533 Binary files /dev/null and b/components/react-todo-app/src/assets/images/office-dark.jpg differ diff --git a/components/react-todo-app/src/assets/images/products/product-1-min.jpg b/components/react-todo-app/src/assets/images/products/product-1-min.jpg new file mode 100644 index 00000000..2f7777d6 Binary files /dev/null and b/components/react-todo-app/src/assets/images/products/product-1-min.jpg differ diff --git a/components/react-todo-app/src/assets/images/products/product-2-min.jpg b/components/react-todo-app/src/assets/images/products/product-2-min.jpg new file mode 100644 index 00000000..dc4c8c41 Binary files /dev/null and b/components/react-todo-app/src/assets/images/products/product-2-min.jpg differ diff --git a/components/react-todo-app/src/assets/images/products/product-3-min.jpg b/components/react-todo-app/src/assets/images/products/product-3-min.jpg new file mode 100644 index 00000000..8b7dd639 Binary files /dev/null and b/components/react-todo-app/src/assets/images/products/product-3-min.jpg differ diff --git a/components/react-todo-app/src/assets/images/products/product-5-min.jpg b/components/react-todo-app/src/assets/images/products/product-5-min.jpg new file mode 100644 index 00000000..7f48d173 Binary files /dev/null and b/components/react-todo-app/src/assets/images/products/product-5-min.jpg differ diff --git a/components/react-todo-app/src/assets/images/products/product-6-min.jpg b/components/react-todo-app/src/assets/images/products/product-6-min.jpg new file mode 100644 index 00000000..68e59956 Binary files /dev/null and b/components/react-todo-app/src/assets/images/products/product-6-min.jpg differ diff --git a/components/react-todo-app/src/assets/images/products/product-7-min.jpg b/components/react-todo-app/src/assets/images/products/product-7-min.jpg new file mode 100644 index 00000000..6b1d37d3 Binary files /dev/null and b/components/react-todo-app/src/assets/images/products/product-7-min.jpg differ diff --git a/components/react-todo-app/src/assets/images/rotating-card-bg-back.jpeg b/components/react-todo-app/src/assets/images/rotating-card-bg-back.jpeg new file mode 100644 index 00000000..0ff65fc1 Binary files /dev/null and b/components/react-todo-app/src/assets/images/rotating-card-bg-back.jpeg differ diff --git a/components/react-todo-app/src/assets/images/rotating-card-bg-front.jpeg b/components/react-todo-app/src/assets/images/rotating-card-bg-front.jpeg new file mode 100644 index 00000000..8dc5dbda Binary files /dev/null and b/components/react-todo-app/src/assets/images/rotating-card-bg-front.jpeg differ diff --git a/components/react-todo-app/src/assets/images/shapes/pattern-lines.svg b/components/react-todo-app/src/assets/images/shapes/pattern-lines.svg new file mode 100644 index 00000000..32923878 --- /dev/null +++ b/components/react-todo-app/src/assets/images/shapes/pattern-lines.svg @@ -0,0 +1,91 @@ + + + pattern-lines + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/shapes/waves-white.svg b/components/react-todo-app/src/assets/images/shapes/waves-white.svg new file mode 100644 index 00000000..b2f04fde --- /dev/null +++ b/components/react-todo-app/src/assets/images/shapes/waves-white.svg @@ -0,0 +1,324 @@ + + + Artboard + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/components/react-todo-app/src/assets/images/small-logos/icon-sun-cloud.png b/components/react-todo-app/src/assets/images/small-logos/icon-sun-cloud.png new file mode 100644 index 00000000..25643d62 Binary files /dev/null and b/components/react-todo-app/src/assets/images/small-logos/icon-sun-cloud.png differ diff --git a/components/react-todo-app/src/assets/images/team-1.jpg b/components/react-todo-app/src/assets/images/team-1.jpg new file mode 100644 index 00000000..8f95305e Binary files /dev/null and b/components/react-todo-app/src/assets/images/team-1.jpg differ diff --git a/components/react-todo-app/src/assets/images/team-2.jpg b/components/react-todo-app/src/assets/images/team-2.jpg new file mode 100644 index 00000000..976c1150 Binary files /dev/null and b/components/react-todo-app/src/assets/images/team-2.jpg differ diff --git a/components/react-todo-app/src/assets/images/team-3.jpg b/components/react-todo-app/src/assets/images/team-3.jpg new file mode 100644 index 00000000..324ad7d9 Binary files /dev/null and b/components/react-todo-app/src/assets/images/team-3.jpg differ diff --git a/components/react-todo-app/src/assets/images/team-4.jpg b/components/react-todo-app/src/assets/images/team-4.jpg new file mode 100644 index 00000000..abfa43fa Binary files /dev/null and b/components/react-todo-app/src/assets/images/team-4.jpg differ diff --git a/components/react-todo-app/src/assets/images/team-5.jpg b/components/react-todo-app/src/assets/images/team-5.jpg new file mode 100644 index 00000000..8b7f184a Binary files /dev/null and b/components/react-todo-app/src/assets/images/team-5.jpg differ diff --git a/components/react-todo-app/src/assets/images/toa-heftiba.jpg b/components/react-todo-app/src/assets/images/toa-heftiba.jpg new file mode 100644 index 00000000..8066c968 Binary files /dev/null and b/components/react-todo-app/src/assets/images/toa-heftiba.jpg differ diff --git a/components/react-todo-app/src/assets/images/vr-bg.jpg b/components/react-todo-app/src/assets/images/vr-bg.jpg new file mode 100644 index 00000000..18c908a3 Binary files /dev/null and b/components/react-todo-app/src/assets/images/vr-bg.jpg differ diff --git a/components/react-todo-app/src/assets/theme/base/borders.js b/components/react-todo-app/src/assets/theme/base/borders.js new file mode 100644 index 00000000..734f9c4f --- /dev/null +++ b/components/react-todo-app/src/assets/theme/base/borders.js @@ -0,0 +1,51 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +/** + * The base border styles for the Material Kit 2 PRO 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 PRO React using thie file. + */ + +// Material Kit 2 PRO React Base Styles +import colors from "assets/theme/base/colors"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/base/boxShadows.js b/components/react-todo-app/src/assets/theme/base/boxShadows.js new file mode 100644 index 00000000..69e212c7 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/base/boxShadows.js @@ -0,0 +1,116 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +/** + * The base box-shadow styles for the Material Kit 2 PRO React. + * You can add new box-shadow using this file. + * You can customized the box-shadow for the entire Material Kit 2 PRO React using thie file. + */ + +// Material Kit 2 PRO React Base Styles +import colors from "assets/theme/base/colors"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/base/breakpoints.js b/components/react-todo-app/src/assets/theme/base/breakpoints.js new file mode 100644 index 00000000..0055bf2c --- /dev/null +++ b/components/react-todo-app/src/assets/theme/base/breakpoints.js @@ -0,0 +1,31 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +/** + * The base breakpoints for the Material Kit 2 PRO React. + * You can add new breakpoints using this file. + * You can customized the breakpoints for the entire Material Kit 2 PRO React using thie file. + */ + +export default { + values: { + xs: 0, + sm: 576, + md: 768, + lg: 992, + xl: 1200, + xxl: 1400, + }, +}; diff --git a/components/react-todo-app/src/assets/theme/base/colors.js b/components/react-todo-app/src/assets/theme/base/colors.js new file mode 100644 index 00000000..85f3ba38 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/base/colors.js @@ -0,0 +1,261 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +/** + * The base colors for the Material Kit 2 PRO React. + * You can add new color using this file. + * You can customized the colors for the entire Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/base/globals.js b/components/react-todo-app/src/assets/theme/base/globals.js new file mode 100644 index 00000000..4532afc5 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/base/globals.js @@ -0,0 +1,39 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/base/typography.js b/components/react-todo-app/src/assets/theme/base/typography.js new file mode 100644 index 00000000..a0b5c034 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/base/typography.js @@ -0,0 +1,205 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +/** + * The base typography styles for the Material Kit 2 PRO React. + * You can add new typography style using this file. + * You can customized the typography styles for the entire Material Kit 2 PRO React using thie file. + */ + +// Material Kit 2 PRO React Base Styles +import colors from "assets/theme/base/colors"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/appBar.js b/components/react-todo-app/src/assets/theme/components/appBar.js new file mode 100644 index 00000000..f2d3dec3 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/appBar.js @@ -0,0 +1,26 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +export default { + defaultProps: { + color: "transparent", + }, + + styleOverrides: { + root: { + boxShadow: "none", + }, + }, +}; diff --git a/components/react-todo-app/src/assets/theme/components/avatar.js b/components/react-todo-app/src/assets/theme/components/avatar.js new file mode 100644 index 00000000..531fc66c --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/avatar.js @@ -0,0 +1,35 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/breadcrumbs.js b/components/react-todo-app/src/assets/theme/components/breadcrumbs.js new file mode 100644 index 00000000..4013df17 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/breadcrumbs.js @@ -0,0 +1,34 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/button/contained.js b/components/react-todo-app/src/assets/theme/components/button/contained.js new file mode 100644 index 00000000..b5b2ba3b --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/button/contained.js @@ -0,0 +1,89 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/button/index.js b/components/react-todo-app/src/assets/theme/components/button/index.js new file mode 100644 index 00000000..9ed8a85e --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/button/index.js @@ -0,0 +1,44 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/button/outlined.js b/components/react-todo-app/src/assets/theme/components/button/outlined.js new file mode 100644 index 00000000..910e84d1 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/button/outlined.js @@ -0,0 +1,80 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/button/root.js b/components/react-todo-app/src/assets/theme/components/button/root.js new file mode 100644 index 00000000..32343d9a --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/button/root.js @@ -0,0 +1,51 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React Base Styles +import typography from "assets/theme/base/typography"; +import borders from "assets/theme/base/borders"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/button/text.js b/components/react-todo-app/src/assets/theme/components/button/text.js new file mode 100644 index 00000000..9faa5eea --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/button/text.js @@ -0,0 +1,102 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/buttonBase.js b/components/react-todo-app/src/assets/theme/components/buttonBase.js new file mode 100644 index 00000000..b77d1ad4 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/buttonBase.js @@ -0,0 +1,20 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +export default { + defaultProps: { + disableRipple: false, + }, +}; diff --git a/components/react-todo-app/src/assets/theme/components/card/cardContent.js b/components/react-todo-app/src/assets/theme/components/card/cardContent.js new file mode 100644 index 00000000..6a20989e --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/card/cardContent.js @@ -0,0 +1,27 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/card/cardMedia.js b/components/react-todo-app/src/assets/theme/components/card/cardMedia.js new file mode 100644 index 00000000..687ca288 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/card/cardMedia.js @@ -0,0 +1,35 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React Base Styles +import borders from "assets/theme/base/borders"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/card/index.js b/components/react-todo-app/src/assets/theme/components/card/index.js new file mode 100644 index 00000000..a5425390 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/card/index.js @@ -0,0 +1,44 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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 PRO 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/components/react-todo-app/src/assets/theme/components/container.js b/components/react-todo-app/src/assets/theme/components/container.js new file mode 100644 index 00000000..fa87894a --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/container.js @@ -0,0 +1,72 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React base styles +import breakpoints from "assets/theme/base/breakpoints"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/dialog/dialogActions.js b/components/react-todo-app/src/assets/theme/components/dialog/dialogActions.js new file mode 100644 index 00000000..8cfb9dc2 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/dialog/dialogActions.js @@ -0,0 +1,25 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +export default { + styleOverrides: { + root: { + padding: pxToRem(16), + }, + }, +}; diff --git a/components/react-todo-app/src/assets/theme/components/dialog/dialogContent.js b/components/react-todo-app/src/assets/theme/components/dialog/dialogContent.js new file mode 100644 index 00000000..e0c8fd5a --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/dialog/dialogContent.js @@ -0,0 +1,41 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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 PRO 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/components/react-todo-app/src/assets/theme/components/dialog/dialogContentText.js b/components/react-todo-app/src/assets/theme/components/dialog/dialogContentText.js new file mode 100644 index 00000000..eddb99f9 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/dialog/dialogContentText.js @@ -0,0 +1,33 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React base styles +import typography from "assets/theme/base/typography"; +import colors from "assets/theme/base/colors"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/dialog/dialogTitle.js b/components/react-todo-app/src/assets/theme/components/dialog/dialogTitle.js new file mode 100644 index 00000000..03647892 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/dialog/dialogTitle.js @@ -0,0 +1,31 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React base styles +import typography from "assets/theme/base/typography"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/dialog/index.js b/components/react-todo-app/src/assets/theme/components/dialog/index.js new file mode 100644 index 00000000..d0411c59 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/dialog/index.js @@ -0,0 +1,34 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/divider.js b/components/react-todo-app/src/assets/theme/components/divider.js new file mode 100644 index 00000000..d14acdc9 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/divider.js @@ -0,0 +1,51 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React base styles +import colors from "assets/theme/base/colors"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/flatpickr.js b/components/react-todo-app/src/assets/theme/components/flatpickr.js new file mode 100644 index 00000000..bad9eb8d --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/flatpickr.js @@ -0,0 +1,53 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React base styles +import colors from "assets/theme/base/colors"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/form/autocomplete.js b/components/react-todo-app/src/assets/theme/components/form/autocomplete.js new file mode 100644 index 00000000..ad669309 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/form/autocomplete.js @@ -0,0 +1,98 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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 PRO 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/components/react-todo-app/src/assets/theme/components/form/checkbox.js b/components/react-todo-app/src/assets/theme/components/form/checkbox.js new file mode 100644 index 00000000..5c0b0db1 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/form/checkbox.js @@ -0,0 +1,81 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React base styles +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/form/formControlLabel.js b/components/react-todo-app/src/assets/theme/components/form/formControlLabel.js new file mode 100644 index 00000000..24bd313a --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/form/formControlLabel.js @@ -0,0 +1,48 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React base styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/form/formLabel.js b/components/react-todo-app/src/assets/theme/components/form/formLabel.js new file mode 100644 index 00000000..cfa170c2 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/form/formLabel.js @@ -0,0 +1,27 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React base styles +import colors from "assets/theme/base/colors"; + +const { text } = colors; + +export default { + styleOverrides: { + root: { + color: text.main, + }, + }, +}; diff --git a/components/react-todo-app/src/assets/theme/components/form/input.js b/components/react-todo-app/src/assets/theme/components/form/input.js new file mode 100644 index 00000000..224d8443 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/form/input.js @@ -0,0 +1,44 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/form/inputLabel.js b/components/react-todo-app/src/assets/theme/components/form/inputLabel.js new file mode 100644 index 00000000..3f286b3c --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/form/inputLabel.js @@ -0,0 +1,58 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/form/inputOutlined.js b/components/react-todo-app/src/assets/theme/components/form/inputOutlined.js new file mode 100644 index 00000000..99e73dac --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/form/inputOutlined.js @@ -0,0 +1,66 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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 PRO 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/components/react-todo-app/src/assets/theme/components/form/radio.js b/components/react-todo-app/src/assets/theme/components/form/radio.js new file mode 100644 index 00000000..f614d26c --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/form/radio.js @@ -0,0 +1,95 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React base styles +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/form/select.js b/components/react-todo-app/src/assets/theme/components/form/select.js new file mode 100644 index 00000000..3b91e3c9 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/form/select.js @@ -0,0 +1,47 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React base styles +import colors from "assets/theme/base/colors"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/form/switchButton.js b/components/react-todo-app/src/assets/theme/components/form/switchButton.js new file mode 100644 index 00000000..77ca6815 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/form/switchButton.js @@ -0,0 +1,86 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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 PRO 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/components/react-todo-app/src/assets/theme/components/form/textField.js b/components/react-todo-app/src/assets/theme/components/form/textField.js new file mode 100644 index 00000000..9229a610 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/form/textField.js @@ -0,0 +1,27 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React Base Styles +import colors from "assets/theme/base/colors"; + +const { transparent } = colors; + +export default { + styleOverrides: { + root: { + backgroundColor: transparent.main, + }, + }, +}; diff --git a/components/react-todo-app/src/assets/theme/components/icon.js b/components/react-todo-app/src/assets/theme/components/icon.js new file mode 100644 index 00000000..7df1c5f9 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/icon.js @@ -0,0 +1,38 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/iconButton.js b/components/react-todo-app/src/assets/theme/components/iconButton.js new file mode 100644 index 00000000..1fe5e04e --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/iconButton.js @@ -0,0 +1,29 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React Base Styles +import colors from "assets/theme/base/colors"; + +const { transparent } = colors; + +export default { + styleOverrides: { + root: { + "&:hover": { + backgroundColor: transparent.main, + }, + }, + }, +}; diff --git a/components/react-todo-app/src/assets/theme/components/linearProgress.js b/components/react-todo-app/src/assets/theme/components/linearProgress.js new file mode 100644 index 00000000..67630369 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/linearProgress.js @@ -0,0 +1,51 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React base styles +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/link.js b/components/react-todo-app/src/assets/theme/components/link.js new file mode 100644 index 00000000..bd0eaa6a --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/link.js @@ -0,0 +1,21 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +export default { + defaultProps: { + underline: "none", + color: "inherit", + }, +}; diff --git a/components/react-todo-app/src/assets/theme/components/list/index.js b/components/react-todo-app/src/assets/theme/components/list/index.js new file mode 100644 index 00000000..200f9ddf --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/list/index.js @@ -0,0 +1,23 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +export default { + styleOverrides: { + padding: { + paddingTop: 0, + paddingBottom: 0, + }, + }, +}; diff --git a/components/react-todo-app/src/assets/theme/components/list/listItem.js b/components/react-todo-app/src/assets/theme/components/list/listItem.js new file mode 100644 index 00000000..02735be9 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/list/listItem.js @@ -0,0 +1,27 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +export default { + defaultProps: { + disableGutters: true, + }, + + styleOverrides: { + root: { + paddingTop: 0, + paddingBottom: 0, + }, + }, +}; diff --git a/components/react-todo-app/src/assets/theme/components/list/listItemText.js b/components/react-todo-app/src/assets/theme/components/list/listItemText.js new file mode 100644 index 00000000..d5aeea6a --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/list/listItemText.js @@ -0,0 +1,23 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +export default { + styleOverrides: { + root: { + marginTop: 0, + marginBottom: 0, + }, + }, +}; diff --git a/components/react-todo-app/src/assets/theme/components/menu/index.js b/components/react-todo-app/src/assets/theme/components/menu/index.js new file mode 100644 index 00000000..600c8bfd --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/menu/index.js @@ -0,0 +1,47 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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 PRO 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/components/react-todo-app/src/assets/theme/components/menu/menuItem.js b/components/react-todo-app/src/assets/theme/components/menu/menuItem.js new file mode 100644 index 00000000..a12e653d --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/menu/menuItem.js @@ -0,0 +1,45 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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 PRO 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/components/react-todo-app/src/assets/theme/components/popover.js b/components/react-todo-app/src/assets/theme/components/popover.js new file mode 100644 index 00000000..1b6a0272 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/popover.js @@ -0,0 +1,33 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/slider.js b/components/react-todo-app/src/assets/theme/components/slider.js new file mode 100644 index 00000000..49e59f30 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/slider.js @@ -0,0 +1,79 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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 PRO 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/components/react-todo-app/src/assets/theme/components/stepper/index.js b/components/react-todo-app/src/assets/theme/components/stepper/index.js new file mode 100644 index 00000000..f70d3f2a --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/stepper/index.js @@ -0,0 +1,42 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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 PRO 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/components/react-todo-app/src/assets/theme/components/stepper/step.js b/components/react-todo-app/src/assets/theme/components/stepper/step.js new file mode 100644 index 00000000..878e9734 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/stepper/step.js @@ -0,0 +1,25 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +export default { + styleOverrides: { + root: { + padding: `0 ${pxToRem(6)}`, + }, + }, +}; diff --git a/components/react-todo-app/src/assets/theme/components/stepper/stepConnector.js b/components/react-todo-app/src/assets/theme/components/stepper/stepConnector.js new file mode 100644 index 00000000..7ca9351c --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/stepper/stepConnector.js @@ -0,0 +1,50 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/stepper/stepIcon.js b/components/react-todo-app/src/assets/theme/components/stepper/stepIcon.js new file mode 100644 index 00000000..7055a958 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/stepper/stepIcon.js @@ -0,0 +1,55 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React base styles +import colors from "assets/theme/base/colors"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/stepper/stepLabel.js b/components/react-todo-app/src/assets/theme/components/stepper/stepLabel.js new file mode 100644 index 00000000..abd3b5f0 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/stepper/stepLabel.js @@ -0,0 +1,47 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React base styles +import typography from "assets/theme/base/typography"; +import colors from "assets/theme/base/colors"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/svgIcon.js b/components/react-todo-app/src/assets/theme/components/svgIcon.js new file mode 100644 index 00000000..23b960c2 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/svgIcon.js @@ -0,0 +1,37 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/swiper.js b/components/react-todo-app/src/assets/theme/components/swiper.js new file mode 100644 index 00000000..36f4d9b7 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/swiper.js @@ -0,0 +1,27 @@ +// Material Kit 2 PRO React base styles +import colors from "assets/theme/base/colors"; + +// Material Kit 2 PRO React helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { white } = colors; + +export default { + ".swiper-button-prev, .swiper-button-next": { + position: "absolute", + top: "50%", + padding: `0 ${pxToRem(64)}`, + color: white.main, + opacity: 0.5, + transform: "translateY(-250%)", + transition: "opacity 0.15s ease", + + "&::after": { + fontSize: pxToRem(28), + }, + + "&:hover, &:focus": { + opacity: 1, + }, + }, +}; diff --git a/components/react-todo-app/src/assets/theme/components/table/tableCell.js b/components/react-todo-app/src/assets/theme/components/table/tableCell.js new file mode 100644 index 00000000..6144973a --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/table/tableCell.js @@ -0,0 +1,33 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React base styles +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/table/tableContainer.js b/components/react-todo-app/src/assets/theme/components/table/tableContainer.js new file mode 100644 index 00000000..a9698a44 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/table/tableContainer.js @@ -0,0 +1,33 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/table/tableHead.js b/components/react-todo-app/src/assets/theme/components/table/tableHead.js new file mode 100644 index 00000000..12a2d785 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/table/tableHead.js @@ -0,0 +1,32 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React base styles +import borders from "assets/theme/base/borders"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/components/tabs/index.js b/components/react-todo-app/src/assets/theme/components/tabs/index.js new file mode 100644 index 00000000..6a38e82d --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/tabs/index.js @@ -0,0 +1,63 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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 PRO 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/components/react-todo-app/src/assets/theme/components/tabs/tab.js b/components/react-todo-app/src/assets/theme/components/tabs/tab.js new file mode 100644 index 00000000..d15ffa71 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/tabs/tab.js @@ -0,0 +1,67 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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 PRO 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/components/react-todo-app/src/assets/theme/components/tooltip.js b/components/react-todo-app/src/assets/theme/components/tooltip.js new file mode 100644 index 00000000..f90a9afb --- /dev/null +++ b/components/react-todo-app/src/assets/theme/components/tooltip.js @@ -0,0 +1,54 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Fade from "@mui/material/Fade"; + +// Material Kit 2 PRO 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 PRO 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/components/react-todo-app/src/assets/theme/functions/boxShadow.js b/components/react-todo-app/src/assets/theme/functions/boxShadow.js new file mode 100644 index 00000000..f3401445 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/functions/boxShadow.js @@ -0,0 +1,34 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +/** + The boxShadow() function helps you to create a box shadow for an element + */ + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/functions/gradientChartLine.js b/components/react-todo-app/src/assets/theme/functions/gradientChartLine.js new file mode 100644 index 00000000..5458b226 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/functions/gradientChartLine.js @@ -0,0 +1,35 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +/** + The gradientChartLine() function helps you to create a gradient color for the chart line + */ + +// Material Kit 2 PRO 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/components/react-todo-app/src/assets/theme/functions/hexToRgb.js b/components/react-todo-app/src/assets/theme/functions/hexToRgb.js new file mode 100644 index 00000000..8fa483bd --- /dev/null +++ b/components/react-todo-app/src/assets/theme/functions/hexToRgb.js @@ -0,0 +1,28 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +/** + 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/components/react-todo-app/src/assets/theme/functions/linearGradient.js b/components/react-todo-app/src/assets/theme/functions/linearGradient.js new file mode 100644 index 00000000..9f4d7ba4 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/functions/linearGradient.js @@ -0,0 +1,24 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +/** + 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/components/react-todo-app/src/assets/theme/functions/pxToRem.js b/components/react-todo-app/src/assets/theme/functions/pxToRem.js new file mode 100644 index 00000000..839579ef --- /dev/null +++ b/components/react-todo-app/src/assets/theme/functions/pxToRem.js @@ -0,0 +1,24 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +/** + 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/components/react-todo-app/src/assets/theme/functions/rgba.js b/components/react-todo-app/src/assets/theme/functions/rgba.js new file mode 100644 index 00000000..c99a8ee2 --- /dev/null +++ b/components/react-todo-app/src/assets/theme/functions/rgba.js @@ -0,0 +1,28 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +/** + 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 PRO 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/components/react-todo-app/src/assets/theme/index.js b/components/react-todo-app/src/assets/theme/index.js new file mode 100644 index 00000000..82b7fa0b --- /dev/null +++ b/components/react-todo-app/src/assets/theme/index.js @@ -0,0 +1,160 @@ +/** +========================================================= +* Material Kit 2 PRO 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 PRO 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 PRO 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 PRO 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"; +import swiper from "assets/theme/components/swiper"; + +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, + ...swiper, + }, + }, + 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/components/react-todo-app/src/components/MKAlert/MKAlertCloseIcon.js b/components/react-todo-app/src/components/MKAlert/MKAlertCloseIcon.js new file mode 100644 index 00000000..ac5910c4 --- /dev/null +++ b/components/react-todo-app/src/components/MKAlert/MKAlertCloseIcon.js @@ -0,0 +1,35 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @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/components/react-todo-app/src/components/MKAlert/MKAlertRoot.js b/components/react-todo-app/src/components/MKAlert/MKAlertRoot.js new file mode 100644 index 00000000..a764ce0f --- /dev/null +++ b/components/react-todo-app/src/components/MKAlert/MKAlertRoot.js @@ -0,0 +1,48 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @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/components/react-todo-app/src/components/MKAlert/index.js b/components/react-todo-app/src/components/MKAlert/index.js new file mode 100644 index 00000000..03d52979 --- /dev/null +++ b/components/react-todo-app/src/components/MKAlert/index.js @@ -0,0 +1,92 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { 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 PRO 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/components/react-todo-app/src/components/MKAvatar/MKAvatarRoot.js b/components/react-todo-app/src/components/MKAvatar/MKAvatarRoot.js new file mode 100644 index 00000000..f3aaad21 --- /dev/null +++ b/components/react-todo-app/src/components/MKAvatar/MKAvatarRoot.js @@ -0,0 +1,89 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @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/components/react-todo-app/src/components/MKAvatar/index.js b/components/react-todo-app/src/components/MKAvatar/index.js new file mode 100644 index 00000000..0cbeb7b0 --- /dev/null +++ b/components/react-todo-app/src/components/MKAvatar/index.js @@ -0,0 +1,52 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 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/components/react-todo-app/src/components/MKBadge/MKBadgeRoot.js b/components/react-todo-app/src/components/MKBadge/MKBadgeRoot.js new file mode 100644 index 00000000..6746e07c --- /dev/null +++ b/components/react-todo-app/src/components/MKBadge/MKBadgeRoot.js @@ -0,0 +1,138 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @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/components/react-todo-app/src/components/MKBadge/index.js b/components/react-todo-app/src/components/MKBadge/index.js new file mode 100644 index 00000000..9d6a93b9 --- /dev/null +++ b/components/react-todo-app/src/components/MKBadge/index.js @@ -0,0 +1,71 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 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/components/react-todo-app/src/components/MKBox/MKBoxRoot.js b/components/react-todo-app/src/components/MKBox/MKBoxRoot.js new file mode 100644 index 00000000..19dd276c --- /dev/null +++ b/components/react-todo-app/src/components/MKBox/MKBoxRoot.js @@ -0,0 +1,122 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @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/components/react-todo-app/src/components/MKBox/index.js b/components/react-todo-app/src/components/MKBox/index.js new file mode 100644 index 00000000..04de84a0 --- /dev/null +++ b/components/react-todo-app/src/components/MKBox/index.js @@ -0,0 +1,66 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 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/components/react-todo-app/src/components/MKButton/MKButtonRoot.js b/components/react-todo-app/src/components/MKButton/MKButtonRoot.js new file mode 100644 index 00000000..3c77f075 --- /dev/null +++ b/components/react-todo-app/src/components/MKButton/MKButtonRoot.js @@ -0,0 +1,279 @@ +/* eslint-disable prefer-destructuring */ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @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/components/react-todo-app/src/components/MKButton/index.js b/components/react-todo-app/src/components/MKButton/index.js new file mode 100644 index 00000000..bd7ccc25 --- /dev/null +++ b/components/react-todo-app/src/components/MKButton/index.js @@ -0,0 +1,69 @@ +/** +========================================================= +* Material Kit 2 PRO React React - v1.0.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/components/react-todo-app/src/components/MKDatePicker/index.js b/components/react-todo-app/src/components/MKDatePicker/index.js new file mode 100644 index 00000000..3a2b4d6c --- /dev/null +++ b/components/react-todo-app/src/components/MKDatePicker/index.js @@ -0,0 +1,49 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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 PRO 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.any), +}; + +export default MKDatePicker; diff --git a/components/react-todo-app/src/components/MKInput/MKInputRoot.js b/components/react-todo-app/src/components/MKInput/MKInputRoot.js new file mode 100644 index 00000000..fdc52c32 --- /dev/null +++ b/components/react-todo-app/src/components/MKInput/MKInputRoot.js @@ -0,0 +1,71 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @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/components/react-todo-app/src/components/MKInput/index.js b/components/react-todo-app/src/components/MKInput/index.js new file mode 100644 index 00000000..b83c61bb --- /dev/null +++ b/components/react-todo-app/src/components/MKInput/index.js @@ -0,0 +1,42 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 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/components/react-todo-app/src/components/MKPagination/MKPaginationItemRoot.js b/components/react-todo-app/src/components/MKPagination/MKPaginationItemRoot.js new file mode 100644 index 00000000..2d54a3ea --- /dev/null +++ b/components/react-todo-app/src/components/MKPagination/MKPaginationItemRoot.js @@ -0,0 +1,62 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import { styled } from "@mui/material/styles"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/components/MKPagination/index.js b/components/react-todo-app/src/components/MKPagination/index.js new file mode 100644 index 00000000..4608d31b --- /dev/null +++ b/components/react-todo-app/src/components/MKPagination/index.js @@ -0,0 +1,102 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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, createContext, useContext } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// Material Kit 2 PRO 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; + 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/components/react-todo-app/src/components/MKProgress/MKProgressRoot.js b/components/react-todo-app/src/components/MKProgress/MKProgressRoot.js new file mode 100644 index 00000000..fdd96c9d --- /dev/null +++ b/components/react-todo-app/src/components/MKProgress/MKProgressRoot.js @@ -0,0 +1,47 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @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/components/react-todo-app/src/components/MKProgress/index.js b/components/react-todo-app/src/components/MKProgress/index.js new file mode 100644 index 00000000..f46c6fc1 --- /dev/null +++ b/components/react-todo-app/src/components/MKProgress/index.js @@ -0,0 +1,69 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/components/MKSnackbar/MKSnackbarIconRoot.js b/components/react-todo-app/src/components/MKSnackbar/MKSnackbarIconRoot.js new file mode 100644 index 00000000..a6af750f --- /dev/null +++ b/components/react-todo-app/src/components/MKSnackbar/MKSnackbarIconRoot.js @@ -0,0 +1,47 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Icon from "@mui/material/Icon"; +import { styled } from "@mui/material/styles"; + +export default styled(Icon)(({ theme, ownerState }) => { + const { palette, functions, typography } = theme; + const { color, bgWhite } = ownerState; + + const { white, transparent, gradients } = palette; + const { pxToRem, linearGradient } = functions; + const { size } = typography; + + // backgroundImage value + let backgroundImageValue; + + if (bgWhite) { + backgroundImageValue = gradients[color] + ? linearGradient(gradients[color].main, gradients[color].state) + : linearGradient(gradients.info.main, gradients.info.state); + } else if (color === "light") { + backgroundImageValue = linearGradient(gradients.dark.main, gradients.dark.state); + } + + return { + backgroundImage: backgroundImageValue, + WebkitTextFillColor: bgWhite || color === "light" ? transparent.main : white.main, + WebkitBackgroundClip: "text", + marginRight: pxToRem(8), + fontSize: size.lg, + transform: `translateY(${pxToRem(-2)})`, + }; +}); diff --git a/components/react-todo-app/src/components/MKSnackbar/index.js b/components/react-todo-app/src/components/MKSnackbar/index.js new file mode 100644 index 00000000..f8f30d3e --- /dev/null +++ b/components/react-todo-app/src/components/MKSnackbar/index.js @@ -0,0 +1,160 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Snackbar from "@mui/material/Snackbar"; +import IconButton from "@mui/material/IconButton"; +import Icon from "@mui/material/Icon"; +import Divider from "@mui/material/Divider"; +import Fade from "@mui/material/Fade"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Custom styles for the MKSnackbar +import MKSnackbarIconRoot from "components/MKSnackbar/MKSnackbarIconRoot"; + +function MKSnackbar({ color, icon, title, dateTime, content, close, bgWhite, ...rest }) { + let titleColor; + let dateTimeColor; + let dividerColor; + + if (bgWhite) { + titleColor = color; + dateTimeColor = "dark"; + dividerColor = false; + } else if (color === "light") { + titleColor = "dark"; + dateTimeColor = "text"; + dividerColor = false; + } else { + titleColor = "white"; + dateTimeColor = "white"; + dividerColor = true; + } + + return ( + + close + + } + > + palette[color] || palette.white.main, + }} + > + + + + {icon} + + + {title} + + + + + {dateTime} + + + bgWhite || color === "light" ? dark.main : white.main, + fontWeight: ({ typography: { fontWeightBold } }) => fontWeightBold, + cursor: "pointer", + marginLeft: 2, + transform: "translateY(-1px)", + }} + onClick={close} + > + close + + + + + size.sm, + color: ({ palette: { white, text } }) => + bgWhite || color === "light" ? text.main : white.main, + }} + > + {content} + + + + ); +} + +// Setting default values for the props of MKSnackbar +MKSnackbar.defaultProps = { + bgWhite: false, + color: "info", +}; + +// Typechecking props for MKSnackbar +MKSnackbar.propTypes = { + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "dark", + "light", + ]), + icon: PropTypes.node.isRequired, + title: PropTypes.string.isRequired, + dateTime: PropTypes.string.isRequired, + content: PropTypes.node.isRequired, + close: PropTypes.func.isRequired, + bgWhite: PropTypes.bool, +}; + +export default MKSnackbar; diff --git a/components/react-todo-app/src/components/MKSocialButton/MKSocialButtonRoot.js b/components/react-todo-app/src/components/MKSocialButton/MKSocialButtonRoot.js new file mode 100644 index 00000000..5d75778e --- /dev/null +++ b/components/react-todo-app/src/components/MKSocialButton/MKSocialButtonRoot.js @@ -0,0 +1,95 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @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/components/react-todo-app/src/components/MKSocialButton/index.js b/components/react-todo-app/src/components/MKSocialButton/index.js new file mode 100644 index 00000000..d6808a84 --- /dev/null +++ b/components/react-todo-app/src/components/MKSocialButton/index.js @@ -0,0 +1,67 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 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/components/react-todo-app/src/components/MKTypography/MKTypographyRoot.js b/components/react-todo-app/src/components/MKTypography/MKTypographyRoot.js new file mode 100644 index 00000000..d407a275 --- /dev/null +++ b/components/react-todo-app/src/components/MKTypography/MKTypographyRoot.js @@ -0,0 +1,62 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @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/components/react-todo-app/src/components/MKTypography/index.js b/components/react-todo-app/src/components/MKTypography/index.js new file mode 100644 index 00000000..2bcc3fd7 --- /dev/null +++ b/components/react-todo-app/src/components/MKTypography/index.js @@ -0,0 +1,89 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 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/components/react-todo-app/src/examples/Breadcrumbs/index.js b/components/react-todo-app/src/examples/Breadcrumbs/index.js new file mode 100644 index 00000000..cc6216ab --- /dev/null +++ b/components/react-todo-app/src/examples/Breadcrumbs/index.js @@ -0,0 +1,67 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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 PRO 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/components/react-todo-app/src/examples/Cards/BackgroundCards/ColoredBackgroundCard/index.js b/components/react-todo-app/src/examples/Cards/BackgroundCards/ColoredBackgroundCard/index.js new file mode 100644 index 00000000..57c6e727 --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/BackgroundCards/ColoredBackgroundCard/index.js @@ -0,0 +1,132 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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-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 Card from "@mui/material/Card"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +function ColoredBackgroundCard({ color, image, label, title, description, action }) { + return ( + ({ + backgroundImage: `${linearGradient( + rgba(gradients[color] ? gradients[color].main : gradients.info.main, 0.9), + rgba(gradients[color] ? gradients[color].state : gradients.info.state, 0.9) + )}, url(${image})`, + backgroundSize: "cover", + backgroundPosition: "center", + borderRadius: borderRadius.xl, + height: "100%", + display: "grid", + placeItems: "center", + })} + > + + {label && ( + + {label} + + )} + + {title} + + + {description} + + {action.type === "internal" ? ( + + {action.label} + + ) : ( + + {action.label} + + )} + + + ); +} + +// Setting default values for the props of ColoredBackgroundCard +ColoredBackgroundCard.defaultProps = { + color: "info", + label: "", +}; + +// Typechecking props for the ColoredBackgroundCard +ColoredBackgroundCard.propTypes = { + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "dark", + "light", + ]), + image: PropTypes.string.isRequired, + label: PropTypes.string, + title: PropTypes.string.isRequired, + description: PropTypes.node.isRequired, + action: PropTypes.shape({ + type: PropTypes.oneOf(["external", "internal"]).isRequired, + route: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + }).isRequired, +}; + +export default ColoredBackgroundCard; diff --git a/components/react-todo-app/src/examples/Cards/BackgroundCards/DefaultBackgroundCard/index.js b/components/react-todo-app/src/examples/Cards/BackgroundCards/DefaultBackgroundCard/index.js new file mode 100644 index 00000000..68c6522d --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/BackgroundCards/DefaultBackgroundCard/index.js @@ -0,0 +1,99 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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-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 Card from "@mui/material/Card"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +function DefaultBackgroundCard({ image, label, title, description, action }) { + return ( + ({ + backgroundImage: `${linearGradient( + rgba(black.main, 0.5), + rgba(black.main, 0.5) + )}, url(${image})`, + backgroundSize: "cover", + backgroundPosition: "center", + borderRadius: borderRadius.xl, + })} + > + + {label && ( + + {label} + + )} + + {title} + + + {description} + + {action.type === "internal" ? ( + + {action.label} + + ) : ( + + {action.label} + + )} + + + ); +} + +// Setting default values for the props of DefaultBackgroundCard +DefaultBackgroundCard.defaultProps = { + label: "", +}; + +// Typechecking props for the DefaultBackgroundCard +DefaultBackgroundCard.propTypes = { + image: PropTypes.string.isRequired, + label: PropTypes.string, + title: PropTypes.string.isRequired, + description: PropTypes.node.isRequired, + action: PropTypes.shape({ + type: PropTypes.oneOf(["external", "internal"]).isRequired, + route: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + }).isRequired, +}; + +export default DefaultBackgroundCard; diff --git a/components/react-todo-app/src/examples/Cards/BackgroundCards/InfoBackgroundCard/index.js b/components/react-todo-app/src/examples/Cards/BackgroundCards/InfoBackgroundCard/index.js new file mode 100644 index 00000000..4766225e --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/BackgroundCards/InfoBackgroundCard/index.js @@ -0,0 +1,86 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function InfoBackgroundCard({ image, icon, title, label }) { + return ( + ({ + backgroundImage: `${linearGradient( + rgba(gradients.dark.main, 0.8), + rgba(gradients.dark.state, 0.8) + )}, url(${image})`, + backgroundSize: "cover", + backgroundPosition: "center", + borderRadius: borderRadius.xl, + height: "100%", + display: "flex", + flexDirection: "column", + justifyContent: "space-between", + })} + > + + + {typeof icon === "string" ? {icon} : icon} + + + + + {title} + + {label && ( + + {label} + + )} + + + ); +} + +// Setting default values for the props of InfoBackgroundCard +InfoBackgroundCard.defaultProps = { + label: "", +}; + +// Typechecking props for the InfoBackgroundCard +InfoBackgroundCard.propTypes = { + image: PropTypes.string.isRequired, + icon: PropTypes.node.isRequired, + title: PropTypes.string.isRequired, + label: PropTypes.string, +}; + +export default InfoBackgroundCard; diff --git a/components/react-todo-app/src/examples/Cards/BackgroundCards/SimpleBackgroundCard/index.js b/components/react-todo-app/src/examples/Cards/BackgroundCards/SimpleBackgroundCard/index.js new file mode 100644 index 00000000..da50b5db --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/BackgroundCards/SimpleBackgroundCard/index.js @@ -0,0 +1,65 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function SimpleBackgroundCard({ image, title, description }) { + return ( + ({ + backgroundImage: `${linearGradient( + rgba(black.main, 0.5), + rgba(black.main, 0.5) + )}, url(${image})`, + backgroundSize: "cover", + backgroundPosition: "center", + borderRadius: borderRadius.xl, + height: "100%", + display: "grid", + justifyContent: "end", + })} + > + + + {title} + + + {description} + + + + ); +} + +// Typechecking props for the SimpleBackgroundCard +SimpleBackgroundCard.propTypes = { + image: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + description: PropTypes.node.isRequired, +}; + +export default SimpleBackgroundCard; diff --git a/components/react-todo-app/src/examples/Cards/BlogCards/BackgroundBlogCard/index.js b/components/react-todo-app/src/examples/Cards/BlogCards/BackgroundBlogCard/index.js new file mode 100644 index 00000000..856da732 --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/BlogCards/BackgroundBlogCard/index.js @@ -0,0 +1,120 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 MuiLink from "@mui/material/Link"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/examples/Cards/BlogCards/CenteredBlogCard/index.js b/components/react-todo-app/src/examples/Cards/BlogCards/CenteredBlogCard/index.js new file mode 100644 index 00000000..88cb14ec --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/BlogCards/CenteredBlogCard/index.js @@ -0,0 +1,119 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 MuiLink from "@mui/material/Link"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/examples/Cards/BlogCards/DefaultBlogCard/index.js b/components/react-todo-app/src/examples/Cards/BlogCards/DefaultBlogCard/index.js new file mode 100644 index 00000000..723d967c --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/BlogCards/DefaultBlogCard/index.js @@ -0,0 +1,182 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 MuiLink from "@mui/material/Link"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKAvatar from "components/MKAvatar"; + +function DefaultBlogCard({ image, category, title, description, author, raised, action }) { + const imageTemplate = ( + <> + + + + ); + + return ( + + + {action.type === "internal" ? ( + {imageTemplate} + ) : ( + + {imageTemplate} + + )} + + + {category && ( + + {category.label} + + )} + {action.type === "internal" ? ( + + + {title} + + + ) : ( + + + {title} + + + )} + + {description} + + {author && ( + + + + + {author.name} + + + {author.date} + + + + )} + + + ); +} + +// Setting default props for the DefaultBlogCard +DefaultBlogCard.defaultProps = { + category: false, + author: false, + raised: true, +}; + +// Typechecking props for the DefaultBlogCard +DefaultBlogCard.propTypes = { + image: PropTypes.string.isRequired, + category: PropTypes.oneOfType([ + PropTypes.shape({ + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "dark", + ]).isRequired, + label: PropTypes.string.isRequired, + }), + PropTypes.bool, + ]), + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + author: PropTypes.oneOfType([ + PropTypes.shape({ + image: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + date: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, + }), + PropTypes.bool, + ]), + raised: PropTypes.bool, + action: PropTypes.shape({ + type: PropTypes.oneOf(["external", "internal"]).isRequired, + route: PropTypes.string.isRequired, + }).isRequired, +}; + +export default DefaultBlogCard; diff --git a/components/react-todo-app/src/examples/Cards/BlogCards/RaisedBlogCard/index.js b/components/react-todo-app/src/examples/Cards/BlogCards/RaisedBlogCard/index.js new file mode 100644 index 00000000..d6f33cda --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/BlogCards/RaisedBlogCard/index.js @@ -0,0 +1,139 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function RaisedBlogCard({ image, title, description, action }) { + const cardActionStyles = { + display: "flex", + alignItems: "center", + + "& .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 ( + + + + + + + + {title} + + + + {description} + + + {action.type === "external" ? ( + + {action.label} + arrow_forward + + ) : ( + + {action.label} + arrow_forward + + )} + + + ); +} + +// Typechecking props for the RaisedBlogCard +RaisedBlogCard.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 RaisedBlogCard; diff --git a/components/react-todo-app/src/examples/Cards/BlogCards/SimpleBlogCard/index.js b/components/react-todo-app/src/examples/Cards/BlogCards/SimpleBlogCard/index.js new file mode 100644 index 00000000..c2c5fb13 --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/BlogCards/SimpleBlogCard/index.js @@ -0,0 +1,120 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 MuiLink from "@mui/material/Link"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKButton from "components/MKButton"; + +function SimpleBlogCard({ image, title, description, action }) { + return ( + + + + + + + + {title} + + + + {description} + + + {action.type === "external" ? ( + + {action.label} + + ) : ( + + {action.label} + + )} + + + ); +} + +// Typechecking props for the SimpleBlogCard +SimpleBlogCard.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 SimpleBlogCard; diff --git a/components/react-todo-app/src/examples/Cards/BlogCards/TransparentBlogCard/index.js b/components/react-todo-app/src/examples/Cards/BlogCards/TransparentBlogCard/index.js new file mode 100644 index 00000000..29a1c105 --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/BlogCards/TransparentBlogCard/index.js @@ -0,0 +1,168 @@ +/** +========================================================= +* Material Kit 2 PRO 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 PRO 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/components/react-todo-app/src/examples/Cards/BookingCards/SimpleBookingCard/index.js b/components/react-todo-app/src/examples/Cards/BookingCards/SimpleBookingCard/index.js new file mode 100644 index 00000000..c5d4f90f --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/BookingCards/SimpleBookingCard/index.js @@ -0,0 +1,141 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { Fragment } 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 Card from "@mui/material/Card"; +import MuiLink from "@mui/material/Link"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKButton from "components/MKButton"; + +function SimpleBookingCard({ image, title, description, categories, action }) { + return ( + + + + + + + {categories.length > 0 && ( + + {categories.map((category) => ( + {category} •  + ))} + + )} + + {title} + + + + {description} + + + {action.type === "external" ? ( + + {action.label} + + ) : ( + + {action.label} + + )} + + + ); +} + +// Setting default props for the SimpleBookingCard +SimpleBookingCard.defaultProps = { + categories: [], +}; + +// Typechecking props for the SimpleBookingCard +SimpleBookingCard.propTypes = { + image: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + categories: PropTypes.arrayOf(PropTypes.string), + 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 SimpleBookingCard; diff --git a/components/react-todo-app/src/examples/Cards/CounterCards/DefaultCounterCard/index.js b/components/react-todo-app/src/examples/Cards/CounterCards/DefaultCounterCard/index.js new file mode 100644 index 00000000..8f0dc23e --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/CounterCards/DefaultCounterCard/index.js @@ -0,0 +1,70 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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 PRO 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/components/react-todo-app/src/examples/Cards/InfoCards/DefaultInfoCard/index.js b/components/react-todo-app/src/examples/Cards/InfoCards/DefaultInfoCard/index.js new file mode 100644 index 00000000..15b48305 --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/InfoCards/DefaultInfoCard/index.js @@ -0,0 +1,90 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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 PRO 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/components/react-todo-app/src/examples/Cards/InfoCards/FilledInfoCard/index.js b/components/react-todo-app/src/examples/Cards/InfoCards/FilledInfoCard/index.js new file mode 100644 index 00000000..be41eed9 --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/InfoCards/FilledInfoCard/index.js @@ -0,0 +1,156 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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 PRO 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/components/react-todo-app/src/examples/Cards/InfoCards/SimpleInfoCard/index.js b/components/react-todo-app/src/examples/Cards/InfoCards/SimpleInfoCard/index.js new file mode 100644 index 00000000..7ffbf905 --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/InfoCards/SimpleInfoCard/index.js @@ -0,0 +1,92 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function SimpleInfoCard({ color, icon, title, description, direction }) { + let alignment = "flex-start"; + + if (direction === "center") { + alignment = "center"; + } else if (direction === "right") { + alignment = "flex-end"; + } + + return ( + + + {typeof icon === "string" ? {icon} : icon} + + + {title} + + + {description} + + + ); +} + +// Setting default props for the SimpleInfoCard +SimpleInfoCard.defaultProps = { + color: "info", + direction: "left", +}; + +// Typechecking props for the SimpleInfoCard +SimpleInfoCard.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"]), +}; + +export default SimpleInfoCard; diff --git a/components/react-todo-app/src/examples/Cards/PricingCards/DefaultPricingCard/index.js b/components/react-todo-app/src/examples/Cards/PricingCards/DefaultPricingCard/index.js new file mode 100644 index 00000000..38b92cd4 --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/PricingCards/DefaultPricingCard/index.js @@ -0,0 +1,200 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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-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 Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKButton from "components/MKButton"; + +function DefaultPricingCard({ color, badge, price, specifications, action, shadow }) { + const renderSpecifications = specifications.map(({ label, includes }) => ( + + + + {includes ? "done" : "remove"} + + + + {label} + + + )); + + return ( + (shadow ? lg : "none") }}> + + + + {badge.label} + + + + + + + {price.currency} + + {price.value} + + /{price.type} + + + + + + {renderSpecifications} + {action.type === "internal" ? ( + + + {action.label}  + arrow_forward + + + ) : ( + + + {action.label}  + arrow_forward + + + )} + + + + ); +} + +// Setting default props for the DefaultPricingCard +DefaultPricingCard.defaultProps = { + color: "white", + shadow: true, +}; + +// Typechecking props for the DefaultPricingCard +DefaultPricingCard.propTypes = { + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + "white", + ]), + badge: PropTypes.shape({ + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]).isRequired, + label: PropTypes.string.isRequired, + }).isRequired, + price: PropTypes.shape({ + currency: PropTypes.string.isRequired, + value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + type: PropTypes.string.isRequired, + }).isRequired, + specifications: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object])).isRequired, + action: PropTypes.shape({ + type: PropTypes.oneOf(["external", "internal"]).isRequired, + route: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]).isRequired, + }).isRequired, + shadow: PropTypes.bool, +}; + +export default DefaultPricingCard; diff --git a/components/react-todo-app/src/examples/Cards/PricingCards/SimplePricingCard/index.js b/components/react-todo-app/src/examples/Cards/PricingCards/SimplePricingCard/index.js new file mode 100644 index 00000000..00888814 --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/PricingCards/SimplePricingCard/index.js @@ -0,0 +1,188 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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-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 Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; +import Divider from "@mui/material/Divider"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKButton from "components/MKButton"; + +function SimplePricingCard({ variant, color, title, description, price, specifications, action }) { + let titleColor = "white"; + let priceColor = "white"; + let buttonColor = "white"; + + if (variant === "contained") { + titleColor = color; + priceColor = color; + buttonColor = color; + } else if (variant === "gradient" && color === "light") { + titleColor = "dark"; + priceColor = "dark"; + buttonColor = "dark"; + } + + const renderSpecifications = specifications.map((specification) => ( + + + + done + + + + {specification} + + + )); + + return ( + + + + + {title} + + + {description} + + + {price.value}  + {price.type && ( + h1.fontFamily, + }} + > + / {price.type} + + )} + + {action.type === "internal" ? ( + + + {action.label} + + + ) : ( + + + {action.label} + + + )} + + + {renderSpecifications} + + + ); +} + +// Setting default props for the SimplePricingCard +SimplePricingCard.defaultProps = { + color: "dark", + variant: "contained", +}; + +// Typechecking props for the SimplePricingCard +SimplePricingCard.propTypes = { + variant: PropTypes.oneOf(["contained", "gradient"]), + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + price: PropTypes.shape({ + value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + type: PropTypes.string, + }).isRequired, + specifications: PropTypes.arrayOf(PropTypes.string).isRequired, + action: PropTypes.shape({ + type: PropTypes.oneOf(["external", "internal"]).isRequired, + route: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + }).isRequired, +}; + +export default SimplePricingCard; diff --git a/components/react-todo-app/src/examples/Cards/ReviewCards/ComplexReviewCard/index.js b/components/react-todo-app/src/examples/Cards/ReviewCards/ComplexReviewCard/index.js new file mode 100644 index 00000000..665d69b2 --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/ReviewCards/ComplexReviewCard/index.js @@ -0,0 +1,122 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// prop-types is library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKAvatar from "components/MKAvatar"; +import MKTypography from "components/MKTypography"; + +function ComplexReviewCard({ image, color, title, review, author }) { + return ( + + + + + + + + + - Customer Story + + + {title} + + + "{review}" + + + + + + {author.name} + + + {author.role} + + + + + + quote-down + + + + + + + + ); +} + +// Setting default props for the ComplexReviewCard +ComplexReviewCard.defaultProps = { + color: "dark", +}; + +// Typechecking props for the ComplexReviewCard +ComplexReviewCard.propTypes = { + image: PropTypes.string.isRequired, + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "error", + "warning", + "dark", + "light", + ]), + title: PropTypes.string.isRequired, + review: PropTypes.string.isRequired, + author: PropTypes.shape({ + logo: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + role: PropTypes.string.isRequired, + }).isRequired, +}; + +export default ComplexReviewCard; diff --git a/components/react-todo-app/src/examples/Cards/ReviewCards/DefaultReviewCard/index.js b/components/react-todo-app/src/examples/Cards/ReviewCards/DefaultReviewCard/index.js new file mode 100644 index 00000000..fe4b3761 --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/ReviewCards/DefaultReviewCard/index.js @@ -0,0 +1,192 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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 PRO 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/components/react-todo-app/src/examples/Cards/ReviewCards/MiniReviewCard/index.js b/components/react-todo-app/src/examples/Cards/ReviewCards/MiniReviewCard/index.js new file mode 100644 index 00000000..e38fc34e --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/ReviewCards/MiniReviewCard/index.js @@ -0,0 +1,90 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// prop-types is library for typechecking of props +import PropTypes from "prop-types"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKAvatar from "components/MKAvatar"; +import MKTypography from "components/MKTypography"; + +function MiniReviewCard({ color, review, author }) { + return ( + + + "{review}" + + + + + + {author.name} + + + {author.date} + + + + + ); +} + +// Setting default values for the props of MiniReviewCard +MiniReviewCard.defaultProps = { + color: "transparent", +}; + +// Typechecking props for the MiniReviewCard +MiniReviewCard.propTypes = { + color: PropTypes.oneOf([ + "transparent", + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "dark", + "light", + ]), + review: PropTypes.string.isRequired, + author: PropTypes.shape({ + image: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + date: PropTypes.string.isRequired, + }).isRequired, +}; + +export default MiniReviewCard; diff --git a/components/react-todo-app/src/examples/Cards/ReviewCards/SimpleReviewCard/index.js b/components/react-todo-app/src/examples/Cards/ReviewCards/SimpleReviewCard/index.js new file mode 100644 index 00000000..a8e3bb00 --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/ReviewCards/SimpleReviewCard/index.js @@ -0,0 +1,106 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// prop-types is library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Card from "@mui/material/Card"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKAvatar from "components/MKAvatar"; + +function SimpleReviewCard({ image, name, username, review }) { + return ( + + + + + + + + {name} + + {username && ( + + @{username} + + )} + + {review} + + + + + quote-down + + + + + + + ); +} + +// Setting default values for the props of SimpleReviewCard +SimpleReviewCard.defaultProps = { + username: "", +}; + +// Typechecking props for the SimpleReviewCard +SimpleReviewCard.propTypes = { + image: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + username: PropTypes.string, + review: PropTypes.string.isRequired, +}; + +export default SimpleReviewCard; diff --git a/components/react-todo-app/src/examples/Cards/RotatingCard/RotatingCardBack.js b/components/react-todo-app/src/examples/Cards/RotatingCard/RotatingCardBack.js new file mode 100644 index 00000000..680a648c --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/RotatingCard/RotatingCardBack.js @@ -0,0 +1,118 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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 PRO 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/components/react-todo-app/src/examples/Cards/RotatingCard/RotatingCardFront.js b/components/react-todo-app/src/examples/Cards/RotatingCard/RotatingCardFront.js new file mode 100644 index 00000000..37ec37ce --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/RotatingCard/RotatingCardFront.js @@ -0,0 +1,88 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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 PRO 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/components/react-todo-app/src/examples/Cards/RotatingCard/index.js b/components/react-todo-app/src/examples/Cards/RotatingCard/index.js new file mode 100644 index 00000000..068189e7 --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/RotatingCard/index.js @@ -0,0 +1,56 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { 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 PRO 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/components/react-todo-app/src/examples/Cards/TeamCards/HorizontalTeamCard/index.js b/components/react-todo-app/src/examples/Cards/TeamCards/HorizontalTeamCard/index.js new file mode 100644 index 00000000..b6d723f0 --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/TeamCards/HorizontalTeamCard/index.js @@ -0,0 +1,79 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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 PRO 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/components/react-todo-app/src/examples/Cards/TeamCards/TransparentTeamCard/index.js b/components/react-todo-app/src/examples/Cards/TeamCards/TransparentTeamCard/index.js new file mode 100644 index 00000000..6c79e68a --- /dev/null +++ b/components/react-todo-app/src/examples/Cards/TeamCards/TransparentTeamCard/index.js @@ -0,0 +1,90 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Stack from "@mui/material/Stack"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKAvatar from "components/MKAvatar"; +import MKTypography from "components/MKTypography"; + +function TransparentTeamCard({ image, name, position, description, socials }) { + return ( + + + borderRadius.xl, + position: "relative", + zIndex: 2, + }} + /> + + + + {name} + + {position} + + + {description} + + + {socials} + + + + ); +} + +// Setting default props for the TransparentTeamCard +TransparentTeamCard.defaultProps = { + description: "", + socials: "", +}; + +// Typechecking props for the TransparentTeamCard +TransparentTeamCard.propTypes = { + image: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + position: PropTypes.string.isRequired, + description: PropTypes.string, + socials: PropTypes.node, +}; + +export default TransparentTeamCard; diff --git a/components/react-todo-app/src/examples/Footers/CenteredFooter/index.js b/components/react-todo-app/src/examples/Footers/CenteredFooter/index.js new file mode 100644 index 00000000..71c29ced --- /dev/null +++ b/components/react-todo-app/src/examples/Footers/CenteredFooter/index.js @@ -0,0 +1,144 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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 PRO 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/components/react-todo-app/src/examples/Footers/DefaultFooter/index.js b/components/react-todo-app/src/examples/Footers/DefaultFooter/index.js new file mode 100644 index 00000000..00590dcd --- /dev/null +++ b/components/react-todo-app/src/examples/Footers/DefaultFooter/index.js @@ -0,0 +1,118 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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-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 PRO 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/components/react-todo-app/src/examples/Footers/DetailedFooter/index.js b/components/react-todo-app/src/examples/Footers/DetailedFooter/index.js new file mode 100644 index 00000000..0866f0bd --- /dev/null +++ b/components/react-todo-app/src/examples/Footers/DetailedFooter/index.js @@ -0,0 +1,124 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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-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"; +import Divider from "@mui/material/Divider"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function DetailedFooter({ content }) { + const { brand, socials, menus, copyright } = content; + + return ( + + + + + + {brand.name} + + + {brand.description} + + + {socials.map(({ icon, link }, key) => ( + + {icon} + + ))} + + + {menus.map(({ name: title, items }, key) => ( + + + {title} + + + {items.map(({ name, route, href }) => ( + + {href ? ( + + {name} + + ) : ( + + {name} + + )} + + ))} + + + ))} + + + {copyright} + + + + + ); +} + +// Typechecking props for the DetailedFooter +DetailedFooter.propTypes = { + content: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.object, PropTypes.array])).isRequired, +}; + +export default DetailedFooter; diff --git a/components/react-todo-app/src/examples/Footers/SimpleFooter/index.js b/components/react-todo-app/src/examples/Footers/SimpleFooter/index.js new file mode 100644 index 00000000..3dda27e8 --- /dev/null +++ b/components/react-todo-app/src/examples/Footers/SimpleFooter/index.js @@ -0,0 +1,126 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO 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.oneOfType([PropTypes.object])), + light: PropTypes.bool, +}; + +export default SimpleFooter; diff --git a/components/react-todo-app/src/examples/Navbars/DefaultNavbar/DefaultNavbarDropdown.js b/components/react-todo-app/src/examples/Navbars/DefaultNavbar/DefaultNavbarDropdown.js new file mode 100644 index 00000000..e6f34c25 --- /dev/null +++ b/components/react-todo-app/src/examples/Navbars/DefaultNavbar/DefaultNavbarDropdown.js @@ -0,0 +1,120 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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 PRO 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/components/react-todo-app/src/examples/Navbars/DefaultNavbar/DefaultNavbarMobile.js b/components/react-todo-app/src/examples/Navbars/DefaultNavbar/DefaultNavbarMobile.js new file mode 100644 index 00000000..1837a3e1 --- /dev/null +++ b/components/react-todo-app/src/examples/Navbars/DefaultNavbar/DefaultNavbarMobile.js @@ -0,0 +1,166 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { 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 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +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/components/react-todo-app/src/examples/Navbars/DefaultNavbar/index.js b/components/react-todo-app/src/examples/Navbars/DefaultNavbar/index.js new file mode 100644 index 00000000..5ed6cf8c --- /dev/null +++ b/components/react-todo-app/src/examples/Navbars/DefaultNavbar/index.js @@ -0,0 +1,594 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { 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 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKButton from "components/MKButton"; + +// Material Kit 2 PRO React examples +import DefaultNavbarDropdown from "examples/Navbars/DefaultNavbar/DefaultNavbarDropdown"; +import DefaultNavbarMobile from "examples/Navbars/DefaultNavbar/DefaultNavbarMobile"; + +// Material Kit 2 PRO 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.oneOfType([PropTypes.object])).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/components/react-todo-app/src/examples/Tables/Table/index.js b/components/react-todo-app/src/examples/Tables/Table/index.js new file mode 100644 index 00000000..b927920f --- /dev/null +++ b/components/react-todo-app/src/examples/Tables/Table/index.js @@ -0,0 +1,156 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { useMemo } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// uuid is a library for generating unique id +import { v4 as uuidv4 } from "uuid"; + +// @mui material components +import MuiTable from "@mui/material/Table"; +import TableBody from "@mui/material/TableBody"; +import TableContainer from "@mui/material/TableContainer"; +import TableRow from "@mui/material/TableRow"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKAvatar from "components/MKAvatar"; +import MKTypography from "components/MKTypography"; + +function Table({ columns, rows }) { + const renderColumns = columns.map(({ name, align, width }, key) => { + let pl; + let pr; + + if (key === 0) { + pl = 3; + pr = 3; + } else if (key === columns.length - 1) { + pl = 3; + pr = 3; + } else { + pl = 1; + pr = 1; + } + + return ( + ({ + fontSize: size.xxs, + fontWeight: fontWeightBold, + borderBottom: `${borderWidth[1]} solid ${borderColor}`, + })} + > + {name.toUpperCase()} + + ); + }); + + const renderRows = rows.map((row, key) => { + const rowKey = `row-${key}`; + + const tableRow = columns.map(({ name, align }) => { + let template; + + if (Array.isArray(row[name])) { + template = ( + ({ + borderBottom: row.hasBorder ? `${borderWidth[1]} solid ${borderColor}` : 0, + })} + > + + + + + + {row[name][1]} + + + + ); + } else { + template = ( + ({ + borderBottom: row.hasBorder ? `${borderWidth[1]} solid ${borderColor}` : 0, + })} + > + + {row[name]} + + + ); + } + + return template; + }); + + return {tableRow}; + }); + + return useMemo( + () => ( + + + + {renderColumns} + + {renderRows} + + + ), + [columns, rows] + ); +} + +// Setting default values for the props of Table +Table.defaultProps = { + columns: [], + rows: [{}], +}; + +// Typechecking props for the Table +Table.propTypes = { + columns: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object])), + rows: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object])), +}; + +export default Table; diff --git a/components/react-todo-app/src/footer.routes.js b/components/react-todo-app/src/footer.routes.js new file mode 100644 index 00000000..159a870b --- /dev/null +++ b/components/react-todo-app/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 PRO 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 PRO", + 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/components/react-todo-app/src/index.js b/components/react-todo-app/src/index.js new file mode 100644 index 00000000..a6b14110 --- /dev/null +++ b/components/react-todo-app/src/index.js @@ -0,0 +1,28 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 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"); +const root = ReactDOMClient.createRoot(container); + +root.render( + + + +); diff --git a/components/react-todo-app/src/layouts/authentication/reset-password/cover/index.js b/components/react-todo-app/src/layouts/authentication/reset-password/cover/index.js new file mode 100644 index 00000000..963c8d49 --- /dev/null +++ b/components/react-todo-app/src/layouts/authentication/reset-password/cover/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React pages +import ResetPassword from "pages/Authentication/ResetPassword/Cover"; + +export default function ResetPasswordPage() { + return ; +} diff --git a/components/react-todo-app/src/layouts/authentication/sign-in/basic/index.js b/components/react-todo-app/src/layouts/authentication/sign-in/basic/index.js new file mode 100644 index 00000000..4353b247 --- /dev/null +++ b/components/react-todo-app/src/layouts/authentication/sign-in/basic/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React pages +import SignInBasic from "pages/Authentication/SignIn/Basic"; + +export default function SignInBasicPage() { + return ; +} diff --git a/components/react-todo-app/src/layouts/authentication/sign-in/cover/index.js b/components/react-todo-app/src/layouts/authentication/sign-in/cover/index.js new file mode 100644 index 00000000..edde8531 --- /dev/null +++ b/components/react-todo-app/src/layouts/authentication/sign-in/cover/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React pages +import SignInCover from "pages/Authentication/SignIn/Cover"; + +export default function SignInCoverPage() { + return ; +} diff --git a/components/react-todo-app/src/layouts/authentication/sign-in/illustration/index.js b/components/react-todo-app/src/layouts/authentication/sign-in/illustration/index.js new file mode 100644 index 00000000..5f5054e6 --- /dev/null +++ b/components/react-todo-app/src/layouts/authentication/sign-in/illustration/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React pages +import SignInIllustration from "pages/Authentication/SignIn/Illustration"; + +export default function SignInIllustrationPage() { + return ; +} diff --git a/components/react-todo-app/src/layouts/authentication/sign-in/simple/index.js b/components/react-todo-app/src/layouts/authentication/sign-in/simple/index.js new file mode 100644 index 00000000..51e1eb80 --- /dev/null +++ b/components/react-todo-app/src/layouts/authentication/sign-in/simple/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React pages +import SignInSimple from "pages/Authentication/SignIn/Simple"; + +export default function SignInSimplePage() { + return ; +} diff --git a/components/react-todo-app/src/layouts/authentication/sign-up/cover/index.js b/components/react-todo-app/src/layouts/authentication/sign-up/cover/index.js new file mode 100644 index 00000000..653756ee --- /dev/null +++ b/components/react-todo-app/src/layouts/authentication/sign-up/cover/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React pages +import SignUpCover from "pages/Authentication/SignUp/Cover"; + +export default function SignUpCoverPage() { + return ; +} diff --git a/components/react-todo-app/src/layouts/pages/apps/desktop-app/index.js b/components/react-todo-app/src/layouts/pages/apps/desktop-app/index.js new file mode 100644 index 00000000..82554204 --- /dev/null +++ b/components/react-todo-app/src/layouts/pages/apps/desktop-app/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React pages +import DesktopApp from "pages/Apps/DesktopApp"; + +export default function DesktopAppPage() { + return ; +} diff --git a/components/react-todo-app/src/layouts/pages/blogs/author/index.js b/components/react-todo-app/src/layouts/pages/blogs/author/index.js new file mode 100644 index 00000000..118e67db --- /dev/null +++ b/components/react-todo-app/src/layouts/pages/blogs/author/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React pages +import Author from "pages/Blogs/Author"; + +export default function AuthorPage() { + return ; +} diff --git a/components/react-todo-app/src/layouts/pages/blogs/single-article/index.js b/components/react-todo-app/src/layouts/pages/blogs/single-article/index.js new file mode 100644 index 00000000..2fe5f258 --- /dev/null +++ b/components/react-todo-app/src/layouts/pages/blogs/single-article/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React pages +import SingleArticle from "pages/Blogs/SingleArticle"; + +export default function SingleArticlePage() { + return ; +} diff --git a/components/react-todo-app/src/layouts/pages/company/about-us/index.js b/components/react-todo-app/src/layouts/pages/company/about-us/index.js new file mode 100644 index 00000000..eb4bb43a --- /dev/null +++ b/components/react-todo-app/src/layouts/pages/company/about-us/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React pages +import AboutUs from "pages/Company/AboutUs"; + +export default function AboutUsPage() { + return ; +} diff --git a/components/react-todo-app/src/layouts/pages/company/pricing/index.js b/components/react-todo-app/src/layouts/pages/company/pricing/index.js new file mode 100644 index 00000000..2c5397c7 --- /dev/null +++ b/components/react-todo-app/src/layouts/pages/company/pricing/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React pages +import Pricing from "pages/Company/Pricing"; + +export default function PricingPage() { + return ; +} diff --git a/components/react-todo-app/src/layouts/pages/extra/virtual-reality/index.js b/components/react-todo-app/src/layouts/pages/extra/virtual-reality/index.js new file mode 100644 index 00000000..91b0e8dd --- /dev/null +++ b/components/react-todo-app/src/layouts/pages/extra/virtual-reality/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React pages +import VirtualReality from "pages/Extra/VirtualReality"; + +export default function VirtualRealityPage() { + return ; +} diff --git a/components/react-todo-app/src/layouts/pages/landing-pages/coworking/index.js b/components/react-todo-app/src/layouts/pages/landing-pages/coworking/index.js new file mode 100644 index 00000000..f7bf7c18 --- /dev/null +++ b/components/react-todo-app/src/layouts/pages/landing-pages/coworking/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React pages +import Coworking from "pages/LandingPages/Coworking"; + +export default function CoworkingPage() { + return ; +} diff --git a/components/react-todo-app/src/layouts/pages/landing-pages/rental/index.js b/components/react-todo-app/src/layouts/pages/landing-pages/rental/index.js new file mode 100644 index 00000000..fced6c87 --- /dev/null +++ b/components/react-todo-app/src/layouts/pages/landing-pages/rental/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React pages +import Rental from "pages/LandingPages/Rental"; + +export default function RentalPage() { + return ; +} diff --git a/components/react-todo-app/src/layouts/pages/presentation/index.js b/components/react-todo-app/src/layouts/pages/presentation/index.js new file mode 100644 index 00000000..6d09a9ee --- /dev/null +++ b/components/react-todo-app/src/layouts/pages/presentation/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React pages +import Presentation from "pages/presentation"; + +export default function PresentationPage() { + return ; +} diff --git a/components/react-todo-app/src/layouts/pages/support/contact-us/index.js b/components/react-todo-app/src/layouts/pages/support/contact-us/index.js new file mode 100644 index 00000000..d2c474ca --- /dev/null +++ b/components/react-todo-app/src/layouts/pages/support/contact-us/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React pages +import ContactUs from "pages/Support/ContactUs"; + +export default function ContactUsPage() { + return ; +} diff --git a/components/react-todo-app/src/layouts/pages/support/faq/index.js b/components/react-todo-app/src/layouts/pages/support/faq/index.js new file mode 100644 index 00000000..214598e2 --- /dev/null +++ b/components/react-todo-app/src/layouts/pages/support/faq/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React pages +import Faq from "pages/Support/Faq"; + +export default function FaqPage() { + return ; +} diff --git a/components/react-todo-app/src/layouts/pages/support/help-center/index.js b/components/react-todo-app/src/layouts/pages/support/help-center/index.js new file mode 100644 index 00000000..0327f693 --- /dev/null +++ b/components/react-todo-app/src/layouts/pages/support/help-center/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React pages +import HelpCenter from "pages/Support/HelpCenter"; + +export default function HelpCenterPage() { + return ; +} diff --git a/components/react-todo-app/src/layouts/pages/support/privacy/index.js b/components/react-todo-app/src/layouts/pages/support/privacy/index.js new file mode 100644 index 00000000..d1660326 --- /dev/null +++ b/components/react-todo-app/src/layouts/pages/support/privacy/index.js @@ -0,0 +1,21 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React pages +import Privacy from "pages/Support/Privacy"; + +export default function PrivacyPage() { + return ; +} diff --git a/components/react-todo-app/src/layouts/pages/todo/index.js b/components/react-todo-app/src/layouts/pages/todo/index.js new file mode 100644 index 00000000..263fde92 --- /dev/null +++ b/components/react-todo-app/src/layouts/pages/todo/index.js @@ -0,0 +1,120 @@ +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKInput from "components/MKInput"; +import MKTypography from "components/MKTypography"; +import DefaultFooter from "examples/Footers/DefaultFooter"; +import footerRoutes from "footer.routes"; +import { addTodo, deleteTodoById, getTodo } from "layouts/pages/todo/service"; +import { useEffect, useState } from "react"; +// Routes +import routes from "routes"; +// Images + +function Todo() { + const [todos, setTodo] = useState([]), + [newTodo, setNewTodo] = useState(""), + [refresh, setRefresh] = useState(false); + + useEffect(() => { + getTodo(setTodo); + }, [refresh]); + + let todoElements; + + if (todos.length === 0) { + todoElements = No todos found; + } else { + const allTodos = todos.map((todo, index) => ( + + {todo.todo} + deleteTodoById(todo.id, () => setRefresh(!refresh))}> + Clear + + + )); + todoElements = ( + <> + Following are the todos + {allTodos} + + ); + } + + return ( + + + + `${linearGradient(rgba(gradients.light.main, 0.5), rgba(gradients.light.state, 0.5))}`, + backgroundSize: "cover", + backgroundPosition: "center", + }} + > + + + ({ + [breakpoints.down("md")]: { + fontSize: size["3xl"], + }, + })} + > + Todo List + + setNewTodo(event.target.value)} + /> + + + { + addTodo(newTodo, () => { + setRefresh(!refresh); + setNewTodo(""); + }); + }} + > + Add + + + +
+ + {todoElements} + + + + + + + + ); +} + +export default Todo; diff --git a/components/react-todo-app/src/layouts/pages/todo/service.js b/components/react-todo-app/src/layouts/pages/todo/service.js new file mode 100644 index 00000000..a0f0e3be --- /dev/null +++ b/components/react-todo-app/src/layouts/pages/todo/service.js @@ -0,0 +1,33 @@ +const baseUrl = process.env.REACT_APP_BACKEND_URL; + +export function getTodo(callback) { + fetch(`${baseUrl}api/v1/get-all-todos`) + .then((response) => { + console.log({ + url: baseUrl, + }); + console.log(response); + return response.json(); + }) + .then((data) => callback(data)); +} + +export function addTodo(todo, callback) { + fetch(`${baseUrl}api/v1/add-todo`, { + method: "POST", + body: JSON.stringify({ todo }), + headers: { + "Content-Type": "application/json", + }, + }).then(() => { + callback(); + }); +} + +export function deleteTodoById(id, callback) { + fetch(`${baseUrl}api/v1/delete-todo/${id}`, { + method: "DELETE", + }).then(() => { + callback(); + }); +} diff --git a/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/AlertWithContent/code.js b/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/AlertWithContent/code.js new file mode 100644 index 00000000..a80caf23 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/AlertWithContent/code.js @@ -0,0 +1,43 @@ +const alertWithContentCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Divider from "@mui/material/Divider"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKAlert from "components/MKAlert"; +import MKTypography from "components/MKTypography"; + +function AlertWithContent() { + return ( + + + + + + + + Good job! + + + That's the main thing people are controlled by! Thoughts- their perception of + themselves! They're slowed down by their perception of themselves. If + you're taught you can't do anything, you won't do anything. I was + taught I could do everything. + + + + What else could rust the heart more over time? Blackgold. + + + + + + + + ); +} + +export default AlertWithContent;`; + +export default alertWithContentCode; diff --git a/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/AlertWithContent/index.js b/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/AlertWithContent/index.js new file mode 100644 index 00000000..9d08159a --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/AlertWithContent/index.js @@ -0,0 +1,56 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Divider from "@mui/material/Divider"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKAlert from "components/MKAlert"; +import MKTypography from "components/MKTypography"; + +function AlertWithContent() { + return ( + + + + + + + + Good job! + + + That's the main thing people are controlled by! Thoughts- their perception of + themselves! They're slowed down by their perception of themselves. If + you're taught you can't do anything, you won't do anything. I was + taught I could do everything. + + + + What else could rust the heart more over time? Blackgold. + + + + + + + + ); +} + +export default AlertWithContent; diff --git a/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/AlertsWithLinks/code.js b/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/AlertsWithLinks/code.js new file mode 100644 index 00000000..334348d7 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/AlertsWithLinks/code.js @@ -0,0 +1,95 @@ +const alertsWithLinksCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKAlert from "components/MKAlert"; +import MKTypography from "components/MKTypography"; + +function AlertsWithLinks() { + return ( + + + + + + A simple primary alert with an  + + example link + + . Give it a click if you like. + + + + + A simple secondary alert with an  + + example link + + . Give it a click if you like. + + + + + A simple success alert with an  + + example link + + . Give it a click if you like. + + + + + A simple error alert with an  + + example link + + . Give it a click if you like. + + + + + A simple warning alert with an  + + example link + + . Give it a click if you like. + + + + + A simple info alert with an  + + example link + + . Give it a click if you like. + + + + + A simple light alert with an  + + example link + + . Give it a click if you like. + + + + + A simple dark alert with an  + + example link + + . Give it a click if you like. + + + + + + ); +} + +export default AlertsWithLinks;`; + +export default alertsWithLinksCode; diff --git a/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/AlertsWithLinks/index.js b/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/AlertsWithLinks/index.js new file mode 100644 index 00000000..f53a5637 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/AlertsWithLinks/index.js @@ -0,0 +1,108 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKAlert from "components/MKAlert"; +import MKTypography from "components/MKTypography"; + +function AlertsWithLinks() { + return ( + + + + + + A simple primary alert with an  + + example link + + . Give it a click if you like. + + + + + A simple secondary alert with an  + + example link + + . Give it a click if you like. + + + + + A simple success alert with an  + + example link + + . Give it a click if you like. + + + + + A simple error alert with an  + + example link + + . Give it a click if you like. + + + + + A simple warning alert with an  + + example link + + . Give it a click if you like. + + + + + A simple info alert with an  + + example link + + . Give it a click if you like. + + + + + A simple light alert with an  + + example link + + . Give it a click if you like. + + + + + A simple dark alert with an  + + example link + + . Give it a click if you like. + + + + + + ); +} + +export default AlertsWithLinks; diff --git a/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/DismissingAlert/code.js b/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/DismissingAlert/code.js new file mode 100644 index 00000000..309468e9 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/DismissingAlert/code.js @@ -0,0 +1,27 @@ +const dismissingAlertCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKAlert from "components/MKAlert"; + +function DismissingAlert() { + return ( + + + + + + Holy molly!  You should check in on some of those fields below. + + + + + + ); +} + +export default DismissingAlert;`; + +export default dismissingAlertCode; diff --git a/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/DismissingAlert/index.js b/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/DismissingAlert/index.js new file mode 100644 index 00000000..ed147260 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/DismissingAlert/index.js @@ -0,0 +1,40 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKAlert from "components/MKAlert"; + +function DismissingAlert() { + return ( + + + + + + Holy molly!  You should check in on some of those fields below. + + + + + + ); +} + +export default DismissingAlert; diff --git a/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/SimpleAlerts/code.js b/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/SimpleAlerts/code.js new file mode 100644 index 00000000..2c2cc916 --- /dev/null +++ b/components/react-todo-app/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 PRO 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/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/SimpleAlerts/index.js b/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/SimpleAlerts/index.js new file mode 100644 index 00000000..e181d4d1 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/components/SimpleAlerts/index.js @@ -0,0 +1,59 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/index.js b/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/index.js new file mode 100644 index 00000000..e3b7cbb1 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/attention-catchers/alerts/index.js @@ -0,0 +1,57 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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"; +import AlertsWithLinks from "layouts/sections/attention-catchers/alerts/components/AlertsWithLinks"; +import AlertWithContent from "layouts/sections/attention-catchers/alerts/components/AlertWithContent"; +import DismissingAlert from "layouts/sections/attention-catchers/alerts/components/DismissingAlert"; + +// ALerts page components code +import simpleAlertsCode from "layouts/sections/attention-catchers/alerts/components/SimpleAlerts/code"; +import alertsWithLinksCode from "layouts/sections/attention-catchers/alerts/components/AlertsWithLinks/code"; +import alertWithContentCode from "layouts/sections/attention-catchers/alerts/components/AlertWithContent/code"; +import dismissingAlertCode from "layouts/sections/attention-catchers/alerts/components/DismissingAlert/code"; + +function Alerts() { + return ( + + + + + + + + + + + + + + + ); +} + +export default Alerts; diff --git a/components/react-todo-app/src/layouts/sections/attention-catchers/modals/components/NotificationModal/code.js b/components/react-todo-app/src/layouts/sections/attention-catchers/modals/components/NotificationModal/code.js new file mode 100644 index 00000000..cc05f26e --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/attention-catchers/modals/components/NotificationModal/code.js @@ -0,0 +1,90 @@ +const notificationModalCode = `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"; +import Icon from "@mui/material/Icon"; + +// @mui icons +import CloseIcon from "@mui/icons-material/Close"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +function NotificationModal() { + const [show, setShow] = useState(false); + const toggleModal = () => setShow(!show); + + return ( + + + + + Launch Demo Modal + + + + + + + + Your attention is required + + + + + + + notifications_active + + + You should read this! + + + A small river named Duden flows by their place and supplies it with the necessary + regelialia. + + + + + ok, got it + + close + + + + + + + + ); +} + +export default NotificationModal;`; + +export default notificationModalCode; diff --git a/components/react-todo-app/src/layouts/sections/attention-catchers/modals/components/NotificationModal/index.js b/components/react-todo-app/src/layouts/sections/attention-catchers/modals/components/NotificationModal/index.js new file mode 100644 index 00000000..ca898ecd --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/attention-catchers/modals/components/NotificationModal/index.js @@ -0,0 +1,103 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { 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"; +import Icon from "@mui/material/Icon"; + +// @mui icons +import CloseIcon from "@mui/icons-material/Close"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +function NotificationModal() { + const [show, setShow] = useState(false); + const toggleModal = () => setShow(!show); + + return ( + + + + + Launch Demo Modal + + + + + + + + Your attention is required + + + + + + + notifications_active + + + You should read this! + + + A small river named Duden flows by their place and supplies it with the necessary + regelialia. + + + + + ok, got it + + close + + + + + + + + ); +} + +export default NotificationModal; diff --git a/components/react-todo-app/src/layouts/sections/attention-catchers/modals/components/SimpleModal/code.js b/components/react-todo-app/src/layouts/sections/attention-catchers/modals/components/SimpleModal/code.js new file mode 100644 index 00000000..aca5daca --- /dev/null +++ b/components/react-todo-app/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 PRO 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/components/react-todo-app/src/layouts/sections/attention-catchers/modals/components/SimpleModal/index.js b/components/react-todo-app/src/layouts/sections/attention-catchers/modals/components/SimpleModal/index.js new file mode 100644 index 00000000..a52e5c87 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/attention-catchers/modals/components/SimpleModal/index.js @@ -0,0 +1,89 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { 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 PRO 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/components/react-todo-app/src/layouts/sections/attention-catchers/modals/index.js b/components/react-todo-app/src/layouts/sections/attention-catchers/modals/index.js new file mode 100644 index 00000000..4e133d40 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/attention-catchers/modals/index.js @@ -0,0 +1,47 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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"; +import NotificationModal from "layouts/sections/attention-catchers/modals/components/NotificationModal"; + +// Modals page components code +import simpleModalCode from "layouts/sections/attention-catchers/modals/components/SimpleModal/code"; +import notificationModalCode from "layouts/sections/attention-catchers/modals/components/NotificationModal/code"; + +function Modals() { + return ( + + + + + + + + + ); +} + +export default Modals; diff --git a/components/react-todo-app/src/layouts/sections/attention-catchers/notifications/components/ToastBasic/code.js b/components/react-todo-app/src/layouts/sections/attention-catchers/notifications/components/ToastBasic/code.js new file mode 100644 index 00000000..86ea27ed --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/attention-catchers/notifications/components/ToastBasic/code.js @@ -0,0 +1,41 @@ +const toastBasicCode = `import { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKSnackbar from "components/MKSnackbar"; + +function ToastBasic() { + const [show, setShow] = useState(false); + const toggleSnackbar = () => setShow(!show); + + return ( + + + + + Show Snackbar + + + + + + ); +} + +export default ToastBasic;`; + +export default toastBasicCode; diff --git a/components/react-todo-app/src/layouts/sections/attention-catchers/notifications/components/ToastBasic/index.js b/components/react-todo-app/src/layouts/sections/attention-catchers/notifications/components/ToastBasic/index.js new file mode 100644 index 00000000..1954cbe6 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/attention-catchers/notifications/components/ToastBasic/index.js @@ -0,0 +1,54 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKSnackbar from "components/MKSnackbar"; + +function ToastBasic() { + const [show, setShow] = useState(false); + const toggleSnackbar = () => setShow(!show); + + return ( + + + + + Show Snackbar + + + + + + ); +} + +export default ToastBasic; diff --git a/components/react-todo-app/src/layouts/sections/attention-catchers/notifications/components/ToastMessage/code.js b/components/react-todo-app/src/layouts/sections/attention-catchers/notifications/components/ToastMessage/code.js new file mode 100644 index 00000000..367b2991 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/attention-catchers/notifications/components/ToastMessage/code.js @@ -0,0 +1,71 @@ +const toastMessageCode = `import { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Snackbar from "@mui/material/Snackbar"; + +// @mui icons +import CloseIcon from "@mui/icons-material/Close"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; + +function ToastMessage() { + const [show, setShow] = useState(false); + const toggleSnackbar = () => setShow(!show); + + const toastStyles = ({ + palette: { info }, + borders: { borderRadius }, + typography: { size }, + boxShadows: { lg }, + }) => ({ + "& .MuiPaper-root": { + backgroundColor: info.main, + borderRadius: borderRadius.lg, + fontSize: size.sm, + fontWeight: 400, + boxShadow: lg, + px: 2, + py: 0.5, + }, + }); + + const toastTemplate = ( + + Hello, world! This is a notification message. + + + ); + + return ( + + + + + Show Snackbar + + + + + + ); +} + +export default ToastMessage;`; + +export default toastMessageCode; diff --git a/components/react-todo-app/src/layouts/sections/attention-catchers/notifications/components/ToastMessage/index.js b/components/react-todo-app/src/layouts/sections/attention-catchers/notifications/components/ToastMessage/index.js new file mode 100644 index 00000000..bd2d9ffc --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/attention-catchers/notifications/components/ToastMessage/index.js @@ -0,0 +1,81 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Snackbar from "@mui/material/Snackbar"; + +// @mui icons +import CloseIcon from "@mui/icons-material/Close"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; + +function ToastMessage() { + const [show, setShow] = useState(false); + const toggleSnackbar = () => setShow(!show); + + const toastStyles = ({ + palette: { info }, + borders: { borderRadius }, + typography: { size }, + boxShadows: { lg }, + }) => ({ + "& .MuiPaper-root": { + backgroundColor: info.main, + borderRadius: borderRadius.lg, + fontSize: size.sm, + fontWeight: 400, + boxShadow: lg, + px: 2, + py: 0.5, + }, + }); + + const toastTemplate = ( + + Hello, world! This is a notification message. + + ); + + return ( + + + + + Show Snackbar + + + + } + sx={toastStyles} + /> + + + ); +} + +export default ToastMessage; diff --git a/components/react-todo-app/src/layouts/sections/attention-catchers/notifications/index.js b/components/react-todo-app/src/layouts/sections/attention-catchers/notifications/index.js new file mode 100644 index 00000000..331f35be --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/attention-catchers/notifications/index.js @@ -0,0 +1,47 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Notifications page components +import ToastBasic from "layouts/sections/attention-catchers/notifications/components/ToastBasic"; +import ToastMessage from "layouts/sections/attention-catchers/notifications/components/ToastMessage"; + +// Notifications page components code +import toastBasicCode from "layouts/sections/attention-catchers/notifications/components/ToastBasic/code"; +import toastMessageCode from "layouts/sections/attention-catchers/notifications/components/ToastMessage/code"; + +function Notifications() { + return ( + + + + + + + + + ); +} + +export default Notifications; diff --git a/components/react-todo-app/src/layouts/sections/attention-catchers/tooltips-popovers/components/Popovers/code.js b/components/react-todo-app/src/layouts/sections/attention-catchers/tooltips-popovers/components/Popovers/code.js new file mode 100644 index 00000000..f85b6a98 --- /dev/null +++ b/components/react-todo-app/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 PRO 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/components/react-todo-app/src/layouts/sections/attention-catchers/tooltips-popovers/components/Popovers/index.js b/components/react-todo-app/src/layouts/sections/attention-catchers/tooltips-popovers/components/Popovers/index.js new file mode 100644 index 00000000..9c6e969d --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/attention-catchers/tooltips-popovers/components/Popovers/index.js @@ -0,0 +1,145 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { 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 PRO 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/components/react-todo-app/src/layouts/sections/attention-catchers/tooltips-popovers/components/Tooltips/code.js b/components/react-todo-app/src/layouts/sections/attention-catchers/tooltips-popovers/components/Tooltips/code.js new file mode 100644 index 00000000..10ef7864 --- /dev/null +++ b/components/react-todo-app/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 PRO 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/components/react-todo-app/src/layouts/sections/attention-catchers/tooltips-popovers/components/Tooltips/index.js b/components/react-todo-app/src/layouts/sections/attention-catchers/tooltips-popovers/components/Tooltips/index.js new file mode 100644 index 00000000..6091ad9c --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/attention-catchers/tooltips-popovers/components/Tooltips/index.js @@ -0,0 +1,59 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @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 PRO 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/components/react-todo-app/src/layouts/sections/attention-catchers/tooltips-popovers/index.js b/components/react-todo-app/src/layouts/sections/attention-catchers/tooltips-popovers/index.js new file mode 100644 index 00000000..e05b1552 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/attention-catchers/tooltips-popovers/index.js @@ -0,0 +1,47 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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/components/react-todo-app/src/layouts/sections/components/BaseLayout/index.js b/components/react-todo-app/src/layouts/sections/components/BaseLayout/index.js new file mode 100644 index 00000000..e8a8cb8b --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/components/BaseLayout/index.js @@ -0,0 +1,76 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/layouts/sections/components/View/index.js b/components/react-todo-app/src/layouts/sections/components/View/index.js new file mode 100644 index 00000000..69fb4f60 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/components/View/index.js @@ -0,0 +1,193 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { 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 PRO 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 PRO 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/components/react-todo-app/src/layouts/sections/elements/avatars/components/AvatarGroup/code.js b/components/react-todo-app/src/layouts/sections/elements/avatars/components/AvatarGroup/code.js new file mode 100644 index 00000000..8672047c --- /dev/null +++ b/components/react-todo-app/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 PRO 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/components/react-todo-app/src/layouts/sections/elements/avatars/components/AvatarGroup/index.js b/components/react-todo-app/src/layouts/sections/elements/avatars/components/AvatarGroup/index.js new file mode 100644 index 00000000..ded81c78 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/avatars/components/AvatarGroup/index.js @@ -0,0 +1,48 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import MuiAvatarGroup from "@mui/material/AvatarGroup"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/layouts/sections/elements/avatars/components/AvatarSize/code.js b/components/react-todo-app/src/layouts/sections/elements/avatars/components/AvatarSize/code.js new file mode 100644 index 00000000..68750730 --- /dev/null +++ b/components/react-todo-app/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 PRO 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/components/react-todo-app/src/layouts/sections/elements/avatars/components/AvatarSize/index.js b/components/react-todo-app/src/layouts/sections/elements/avatars/components/AvatarSize/index.js new file mode 100644 index 00000000..e6f877b0 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/avatars/components/AvatarSize/index.js @@ -0,0 +1,47 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/layouts/sections/elements/avatars/index.js b/components/react-todo-app/src/layouts/sections/elements/avatars/index.js new file mode 100644 index 00000000..39e47e59 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/avatars/index.js @@ -0,0 +1,47 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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/components/react-todo-app/src/layouts/sections/elements/badges/components/BadgesGradient/code.js b/components/react-todo-app/src/layouts/sections/elements/badges/components/BadgesGradient/code.js new file mode 100644 index 00000000..0f1dca1d --- /dev/null +++ b/components/react-todo-app/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 PRO React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; + +function BadgesGradient() { + return ( + + + + + + + + + + + + + + + + + ); +} + +export default BadgesGradient;`; + +export default badgesGradientCode; diff --git a/components/react-todo-app/src/layouts/sections/elements/badges/components/BadgesGradient/index.js b/components/react-todo-app/src/layouts/sections/elements/badges/components/BadgesGradient/index.js new file mode 100644 index 00000000..777d3c65 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/badges/components/BadgesGradient/index.js @@ -0,0 +1,46 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; + +function BadgesGradient() { + return ( + + + + + + + + + + + + + + + + + ); +} + +export default BadgesGradient; diff --git a/components/react-todo-app/src/layouts/sections/elements/badges/components/BadgesSimple/code.js b/components/react-todo-app/src/layouts/sections/elements/badges/components/BadgesSimple/code.js new file mode 100644 index 00000000..64e676ae --- /dev/null +++ b/components/react-todo-app/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 PRO React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; + +function BadgesSimple() { + return ( + + + + + + + + + + + + + + + + + ); +} + +export default BadgesSimple;`; + +export default badgesSimpleCode; diff --git a/components/react-todo-app/src/layouts/sections/elements/badges/components/BadgesSimple/index.js b/components/react-todo-app/src/layouts/sections/elements/badges/components/BadgesSimple/index.js new file mode 100644 index 00000000..feffb321 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/badges/components/BadgesSimple/index.js @@ -0,0 +1,46 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; + +function BadgesSimple() { + return ( + + + + + + + + + + + + + + + + + ); +} + +export default BadgesSimple; diff --git a/components/react-todo-app/src/layouts/sections/elements/badges/components/BadgesSimpleRounded/code.js b/components/react-todo-app/src/layouts/sections/elements/badges/components/BadgesSimpleRounded/code.js new file mode 100644 index 00000000..c86171b4 --- /dev/null +++ b/components/react-todo-app/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 PRO React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; + +function BadgesSimpleRounded() { + return ( + + + + + + + + + + + + + + + + + ); +} + +export default BadgesSimpleRounded;`; + +export default badgesSimpleRoundedCode; diff --git a/components/react-todo-app/src/layouts/sections/elements/badges/components/BadgesSimpleRounded/index.js b/components/react-todo-app/src/layouts/sections/elements/badges/components/BadgesSimpleRounded/index.js new file mode 100644 index 00000000..a30188d6 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/badges/components/BadgesSimpleRounded/index.js @@ -0,0 +1,70 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; + +function BadgesSimpleRounded() { + return ( + + + + + + + + + + + + + + + + + ); +} + +export default BadgesSimpleRounded; diff --git a/components/react-todo-app/src/layouts/sections/elements/badges/index.js b/components/react-todo-app/src/layouts/sections/elements/badges/index.js new file mode 100644 index 00000000..69d996e2 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/badges/index.js @@ -0,0 +1,52 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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/components/react-todo-app/src/layouts/sections/elements/breadcrumbs/code.js b/components/react-todo-app/src/layouts/sections/elements/breadcrumbs/code.js new file mode 100644 index 00000000..522c572e --- /dev/null +++ b/components/react-todo-app/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"; + +// Mataerial Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Mataerial Kit 2 PRO React examples +import Breadcrumbs from "examples/Breadcrumbs"; + +function BreadcrumbsEL() { + return ( + + + + + + + + + + + + + + + + ); +} + +export default BreadcrumbsEL;`; + +export default badgesSimpleCode; diff --git a/components/react-todo-app/src/layouts/sections/elements/breadcrumbs/index.js b/components/react-todo-app/src/layouts/sections/elements/breadcrumbs/index.js new file mode 100644 index 00000000..ccaa9918 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/breadcrumbs/index.js @@ -0,0 +1,76 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Mataerial Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Mataerial Kit 2 PRO 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/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsContained/code.js b/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsContained/code.js new file mode 100644 index 00000000..0f44110c --- /dev/null +++ b/components/react-todo-app/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 PRO 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/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsContained/index.js b/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsContained/index.js new file mode 100644 index 00000000..2803c269 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsContained/index.js @@ -0,0 +1,47 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsGradient/code.js b/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsGradient/code.js new file mode 100644 index 00000000..6d1fbb80 --- /dev/null +++ b/components/react-todo-app/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 PRO 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/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsGradient/index.js b/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsGradient/index.js new file mode 100644 index 00000000..af5f39bb --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsGradient/index.js @@ -0,0 +1,65 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsIconLeft/code.js b/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsIconLeft/code.js new file mode 100644 index 00000000..8e6ae8ef --- /dev/null +++ b/components/react-todo-app/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 PRO 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/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsIconLeft/index.js b/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsIconLeft/index.js new file mode 100644 index 00000000..b44a0d3d --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsIconLeft/index.js @@ -0,0 +1,51 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @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 PRO 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/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsIconRight/code.js b/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsIconRight/code.js new file mode 100644 index 00000000..808d02ec --- /dev/null +++ b/components/react-todo-app/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 PRO 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/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsIconRight/index.js b/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsIconRight/index.js new file mode 100644 index 00000000..446772df --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsIconRight/index.js @@ -0,0 +1,51 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @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 PRO 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/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsOutlined/code.js b/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsOutlined/code.js new file mode 100644 index 00000000..0b456b81 --- /dev/null +++ b/components/react-todo-app/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 PRO 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/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsOutlined/index.js b/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsOutlined/index.js new file mode 100644 index 00000000..045c5d68 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsOutlined/index.js @@ -0,0 +1,65 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsSizes/code.js b/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsSizes/code.js new file mode 100644 index 00000000..4b9434fb --- /dev/null +++ b/components/react-todo-app/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 PRO 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/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsSizes/index.js b/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsSizes/index.js new file mode 100644 index 00000000..4409a6c8 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/buttons/components/ButtonsSizes/index.js @@ -0,0 +1,45 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; + +function ButtonsSizes() { + return ( + + + + + + small + + default + + large + + + + + + ); +} + +export default ButtonsSizes; diff --git a/components/react-todo-app/src/layouts/sections/elements/buttons/index.js b/components/react-todo-app/src/layouts/sections/elements/buttons/index.js new file mode 100644 index 00000000..3671b850 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/buttons/index.js @@ -0,0 +1,67 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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/components/react-todo-app/src/layouts/sections/elements/dropdowns/components/DropdownAndDropup/code.js b/components/react-todo-app/src/layouts/sections/elements/dropdowns/components/DropdownAndDropup/code.js new file mode 100644 index 00000000..e77314db --- /dev/null +++ b/components/react-todo-app/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 PRO 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/components/react-todo-app/src/layouts/sections/elements/dropdowns/components/DropdownAndDropup/index.js b/components/react-todo-app/src/layouts/sections/elements/dropdowns/components/DropdownAndDropup/index.js new file mode 100644 index 00000000..687591fe --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/dropdowns/components/DropdownAndDropup/index.js @@ -0,0 +1,98 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { 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 PRO 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/components/react-todo-app/src/layouts/sections/elements/dropdowns/components/SelectPicker/code.js b/components/react-todo-app/src/layouts/sections/elements/dropdowns/components/SelectPicker/code.js new file mode 100644 index 00000000..f6846952 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/dropdowns/components/SelectPicker/code.js @@ -0,0 +1,29 @@ +const selectPickerCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Autocomplete from "@mui/material/Autocomplete"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function SelectPicker() { + return ( + + + + } + /> + + + + ); +} + +export default SelectPicker;`; + +export default selectPickerCode; diff --git a/components/react-todo-app/src/layouts/sections/elements/dropdowns/components/SelectPicker/index.js b/components/react-todo-app/src/layouts/sections/elements/dropdowns/components/SelectPicker/index.js new file mode 100644 index 00000000..bd34d549 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/dropdowns/components/SelectPicker/index.js @@ -0,0 +1,42 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Autocomplete from "@mui/material/Autocomplete"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function SelectPicker() { + return ( + + + + } + /> + + + + ); +} + +export default SelectPicker; diff --git a/components/react-todo-app/src/layouts/sections/elements/dropdowns/index.js b/components/react-todo-app/src/layouts/sections/elements/dropdowns/index.js new file mode 100644 index 00000000..44c72087 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/dropdowns/index.js @@ -0,0 +1,47 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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"; +import SelectPicker from "layouts/sections/elements/dropdowns/components/SelectPicker"; + +// Dropdowns page components code +import dropdownAndDropupCode from "layouts/sections/elements/dropdowns/components/DropdownAndDropup/code"; +import selectPickerCode from "layouts/sections/elements/dropdowns/components/SelectPicker/code"; + +function Dropdowns() { + return ( + + + + + + + + + ); +} + +export default Dropdowns; diff --git a/components/react-todo-app/src/layouts/sections/elements/progress-bars/components/ProgressGradient/code.js b/components/react-todo-app/src/layouts/sections/elements/progress-bars/components/ProgressGradient/code.js new file mode 100644 index 00000000..89319330 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/progress-bars/components/ProgressGradient/code.js @@ -0,0 +1,32 @@ +const progressGradientCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKProgress from "components/MKProgress"; + +function ProgressGradient() { + return ( + + + + + + + + + + + + + + + + ); +} + +export default ProgressGradient;`; + +export default progressGradientCode; diff --git a/components/react-todo-app/src/layouts/sections/elements/progress-bars/components/ProgressGradient/index.js b/components/react-todo-app/src/layouts/sections/elements/progress-bars/components/ProgressGradient/index.js new file mode 100644 index 00000000..ffa2cdcb --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/progress-bars/components/ProgressGradient/index.js @@ -0,0 +1,45 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKProgress from "components/MKProgress"; + +function ProgressGradient() { + return ( + + + + + + + + + + + + + + + + ); +} + +export default ProgressGradient; diff --git a/components/react-todo-app/src/layouts/sections/elements/progress-bars/components/ProgressSimple/code.js b/components/react-todo-app/src/layouts/sections/elements/progress-bars/components/ProgressSimple/code.js new file mode 100644 index 00000000..f7e22968 --- /dev/null +++ b/components/react-todo-app/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 PRO React components +import MKBox from "components/MKBox"; +import MKProgress from "components/MKProgress"; + +function ProgressSimple() { + return ( + + + + + + + + + + + + + + + + ); +} + +export default ProgressSimple;`; + +export default progressSimpleCode; diff --git a/components/react-todo-app/src/layouts/sections/elements/progress-bars/components/ProgressSimple/index.js b/components/react-todo-app/src/layouts/sections/elements/progress-bars/components/ProgressSimple/index.js new file mode 100644 index 00000000..f75c2893 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/progress-bars/components/ProgressSimple/index.js @@ -0,0 +1,45 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKProgress from "components/MKProgress"; + +function ProgressSimple() { + return ( + + + + + + + + + + + + + + + + ); +} + +export default ProgressSimple; diff --git a/components/react-todo-app/src/layouts/sections/elements/progress-bars/components/Sliders/code.js b/components/react-todo-app/src/layouts/sections/elements/progress-bars/components/Sliders/code.js new file mode 100644 index 00000000..302ea4aa --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/progress-bars/components/Sliders/code.js @@ -0,0 +1,27 @@ +const slidersCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; +import Slider from "@mui/material/Slider"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +function Sliders() { + return ( + + + + + + + + + + + ); +} + +export default Sliders;`; + +export default slidersCode; diff --git a/components/react-todo-app/src/layouts/sections/elements/progress-bars/components/Sliders/index.js b/components/react-todo-app/src/layouts/sections/elements/progress-bars/components/Sliders/index.js new file mode 100644 index 00000000..5a072e68 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/progress-bars/components/Sliders/index.js @@ -0,0 +1,40 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; +import Slider from "@mui/material/Slider"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +function Sliders() { + return ( + + + + + + + + + + + ); +} + +export default Sliders; diff --git a/components/react-todo-app/src/layouts/sections/elements/progress-bars/index.js b/components/react-todo-app/src/layouts/sections/elements/progress-bars/index.js new file mode 100644 index 00000000..9e8e8ca4 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/progress-bars/index.js @@ -0,0 +1,52 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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"; +import ProgressGradient from "layouts/sections/elements/progress-bars/components/ProgressGradient"; +import Sliders from "layouts/sections/elements/progress-bars/components/Sliders"; + +// ProgressBars page components code +import progressSimpleCode from "layouts/sections/elements/progress-bars/components/ProgressSimple/code"; +import progressGradientCode from "layouts/sections/elements/progress-bars/components/ProgressGradient/code"; +import slidersCode from "layouts/sections/elements/progress-bars/components/Sliders/code"; + +function ProgressBars() { + return ( + + + + + + + + + + + + ); +} + +export default ProgressBars; diff --git a/components/react-todo-app/src/layouts/sections/elements/social-buttons/components/SocialButtons/code.js b/components/react-todo-app/src/layouts/sections/elements/social-buttons/components/SocialButtons/code.js new file mode 100644 index 00000000..13adb1a6 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/social-buttons/components/SocialButtons/code.js @@ -0,0 +1,72 @@ +const socialButtonsCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKSocialButton from "components/MKSocialButton"; + +function SocialButtons() { + return ( + + + + + + + facebook + + + + twitter + + + + instagram + + + + github + + + + pinterest + + + + youtube + + + + vimeo + + + + slack + + + + dribbble + + + + reddit + + + + tumblr + + + + linkedin + + + + + + ); +} + +export default SocialButtons;`; + +export default socialButtonsCode; diff --git a/components/react-todo-app/src/layouts/sections/elements/social-buttons/components/SocialButtons/index.js b/components/react-todo-app/src/layouts/sections/elements/social-buttons/components/SocialButtons/index.js new file mode 100644 index 00000000..dfeb3fb6 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/social-buttons/components/SocialButtons/index.js @@ -0,0 +1,85 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKSocialButton from "components/MKSocialButton"; + +function SocialButtons() { + return ( + + + + + + + facebook + + + + twitter + + + + instagram + + + + github + + + + pinterest + + + + youtube + + + + vimeo + + + + slack + + + + dribbble + + + + reddit + + + + tumblr + + + + linkedin + + + + + + ); +} + +export default SocialButtons; diff --git a/components/react-todo-app/src/layouts/sections/elements/social-buttons/components/SocialButtonsIcon/code.js b/components/react-todo-app/src/layouts/sections/elements/social-buttons/components/SocialButtonsIcon/code.js new file mode 100644 index 00000000..af81c46d --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/social-buttons/components/SocialButtonsIcon/code.js @@ -0,0 +1,60 @@ +const socialButtonsIconCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKSocialButton from "components/MKSocialButton"; + +function SocialButtonsIcon() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default SocialButtonsIcon;`; + +export default socialButtonsIconCode; diff --git a/components/react-todo-app/src/layouts/sections/elements/social-buttons/components/SocialButtonsIcon/index.js b/components/react-todo-app/src/layouts/sections/elements/social-buttons/components/SocialButtonsIcon/index.js new file mode 100644 index 00000000..cdbbeaf4 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/social-buttons/components/SocialButtonsIcon/index.js @@ -0,0 +1,73 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKSocialButton from "components/MKSocialButton"; + +function SocialButtonsIcon() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default SocialButtonsIcon; diff --git a/components/react-todo-app/src/layouts/sections/elements/social-buttons/index.js b/components/react-todo-app/src/layouts/sections/elements/social-buttons/index.js new file mode 100644 index 00000000..34cc7a5b --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/social-buttons/index.js @@ -0,0 +1,47 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// SocialButtons page components +import SocialButtonsSection from "layouts/sections/elements/social-buttons/components/SocialButtons"; +import SocialButtonsIcon from "layouts/sections/elements/social-buttons/components/SocialButtonsIcon"; + +// SocialButtons page components code +import socialButtonsSectionCode from "layouts/sections/elements/social-buttons/components/SocialButtons/code"; +import socialButtonsIconCode from "layouts/sections/elements/social-buttons/components/SocialButtonsIcon/code"; + +function SocialButtons() { + return ( + + + + + + + + + ); +} + +export default SocialButtons; diff --git a/components/react-todo-app/src/layouts/sections/elements/tables/components/TableOne/code.js b/components/react-todo-app/src/layouts/sections/elements/tables/components/TableOne/code.js new file mode 100644 index 00000000..e46cdb15 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/tables/components/TableOne/code.js @@ -0,0 +1,250 @@ +const tableOneCode = `// 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 PRO React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; +import MKAvatar from "components/MKAvatar"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import Table from "examples/Tables/Table"; + +// Images +import team2 from "assets/images/team-2.jpg"; +import team3 from "assets/images/team-3.jpg"; +import team4 from "assets/images/team-4.jpg"; + +// Components +function Author({ image, name, email }) { + return ( + + + + + + + {name} + + + {email} + + + + ); +} + +// Typechecking props for the Author +Author.propTypes = { + image: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + email: PropTypes.string.isRequired, +}; + +function Role({ job, org }) { + return ( + + + {job} + + + {org} + + + ); +} + +// Typechecking props for the Role +Role.propTypes = { + job: PropTypes.string.isRequired, + org: PropTypes.string.isRequired, +}; + +function TableOne() { + const { columns, rows } = { + columns: [ + { name: "author", align: "left" }, + { name: "function", align: "left" }, + { name: "status", align: "center" }, + { name: "employed", align: "center" }, + { name: "action", align: "center" }, + ], + + rows: [ + { + author: , + function: , + status: ( + + ), + employed: ( + + 23/04/18 + + ), + action: ( + + Edit + + ), + }, + { + author: , + function: , + status: ( + + ), + employed: ( + + 11/01/19 + + ), + action: ( + + Edit + + ), + }, + { + author: , + function: , + status: ( + + ), + employed: ( + + 19/09/17 + + ), + action: ( + + Edit + + ), + }, + { + author: , + function: , + status: ( + + ), + employed: ( + + 24/12/08 + + ), + action: ( + + Edit + + ), + }, + { + author: , + function: , + status: ( + + ), + employed: ( + + 04/10/21 + + ), + action: ( + + Edit + + ), + }, + { + author: , + function: , + status: ( + + ), + employed: ( + + 14/09/20 + + ), + action: ( + + Edit + + ), + }, + ], + }; + + return ( + + + + + + + + ); +} + +export default TableOne;`; + +export default tableOneCode; diff --git a/components/react-todo-app/src/layouts/sections/elements/tables/components/TableOne/index.js b/components/react-todo-app/src/layouts/sections/elements/tables/components/TableOne/index.js new file mode 100644 index 00000000..9d835218 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/tables/components/TableOne/index.js @@ -0,0 +1,263 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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 PRO React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; +import MKAvatar from "components/MKAvatar"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import Table from "examples/Tables/Table"; + +// Images +import team2 from "assets/images/team-2.jpg"; +import team3 from "assets/images/team-3.jpg"; +import team4 from "assets/images/team-4.jpg"; + +// Components +function Author({ image, name, email }) { + return ( + + + + + + + {name} + + + {email} + + + + ); +} + +// Typechecking props for the Author +Author.propTypes = { + image: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + email: PropTypes.string.isRequired, +}; + +function Role({ job, org }) { + return ( + + + {job} + + + {org} + + + ); +} + +// Typechecking props for the Role +Role.propTypes = { + job: PropTypes.string.isRequired, + org: PropTypes.string.isRequired, +}; + +function TableOne() { + const { columns, rows } = { + columns: [ + { name: "author", align: "left" }, + { name: "function", align: "left" }, + { name: "status", align: "center" }, + { name: "employed", align: "center" }, + { name: "action", align: "center" }, + ], + + rows: [ + { + author: , + function: , + status: ( + + ), + employed: ( + + 23/04/18 + + ), + action: ( + + Edit + + ), + }, + { + author: , + function: , + status: ( + + ), + employed: ( + + 11/01/19 + + ), + action: ( + + Edit + + ), + }, + { + author: , + function: , + status: ( + + ), + employed: ( + + 19/09/17 + + ), + action: ( + + Edit + + ), + }, + { + author: , + function: , + status: ( + + ), + employed: ( + + 24/12/08 + + ), + action: ( + + Edit + + ), + }, + { + author: , + function: , + status: ( + + ), + employed: ( + + 04/10/21 + + ), + action: ( + + Edit + + ), + }, + { + author: , + function: , + status: ( + + ), + employed: ( + + 14/09/20 + + ), + action: ( + + Edit + + ), + }, + ], + }; + + return ( + + + +
+ + + + ); +} + +export default TableOne; diff --git a/components/react-todo-app/src/layouts/sections/elements/tables/index.js b/components/react-todo-app/src/layouts/sections/elements/tables/index.js new file mode 100644 index 00000000..e9bb729d --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/tables/index.js @@ -0,0 +1,42 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Tables page components +import TableOne from "layouts/sections/elements/tables/components/TableOne"; + +// Tables page components code +import tableOneCode from "layouts/sections/elements/tables/components/TableOne/code"; + +function Tables() { + return ( + + + + + + ); +} + +export default Tables; diff --git a/components/react-todo-app/src/layouts/sections/elements/toggles/components/Toggle/code.js b/components/react-todo-app/src/layouts/sections/elements/toggles/components/Toggle/code.js new file mode 100644 index 00000000..ecdd6e70 --- /dev/null +++ b/components/react-todo-app/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 PRO 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/components/react-todo-app/src/layouts/sections/elements/toggles/components/Toggle/index.js b/components/react-todo-app/src/layouts/sections/elements/toggles/components/Toggle/index.js new file mode 100644 index 00000000..bb0a5438 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/toggles/components/Toggle/index.js @@ -0,0 +1,55 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { 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 PRO 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/components/react-todo-app/src/layouts/sections/elements/toggles/components/ToggleContext/code.js b/components/react-todo-app/src/layouts/sections/elements/toggles/components/ToggleContext/code.js new file mode 100644 index 00000000..a2656426 --- /dev/null +++ b/components/react-todo-app/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 PRO 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/components/react-todo-app/src/layouts/sections/elements/toggles/components/ToggleContext/index.js b/components/react-todo-app/src/layouts/sections/elements/toggles/components/ToggleContext/index.js new file mode 100644 index 00000000..513487d9 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/toggles/components/ToggleContext/index.js @@ -0,0 +1,53 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { 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 PRO 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/components/react-todo-app/src/layouts/sections/elements/toggles/index.js b/components/react-todo-app/src/layouts/sections/elements/toggles/index.js new file mode 100644 index 00000000..0e92cb84 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/toggles/index.js @@ -0,0 +1,47 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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/components/react-todo-app/src/layouts/sections/elements/typography/components/TypographyRoboto/code.js b/components/react-todo-app/src/layouts/sections/elements/typography/components/TypographyRoboto/code.js new file mode 100644 index 00000000..a0b0383d --- /dev/null +++ b/components/react-todo-app/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 PRO 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/components/react-todo-app/src/layouts/sections/elements/typography/components/TypographyRoboto/index.js b/components/react-todo-app/src/layouts/sections/elements/typography/components/TypographyRoboto/index.js new file mode 100644 index 00000000..1ea678e7 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/typography/components/TypographyRoboto/index.js @@ -0,0 +1,166 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/layouts/sections/elements/typography/index.js b/components/react-todo-app/src/layouts/sections/elements/typography/index.js new file mode 100644 index 00000000..a763f110 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/elements/typography/index.js @@ -0,0 +1,42 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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/components/react-todo-app/src/layouts/sections/input-areas/contact-sections/components/ContactUsOne/code.js b/components/react-todo-app/src/layouts/sections/input-areas/contact-sections/components/ContactUsOne/code.js new file mode 100644 index 00000000..3b1c41ff --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/input-areas/contact-sections/components/ContactUsOne/code.js @@ -0,0 +1,62 @@ +const contactUsOneCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +function ContactUsOne() { + return ( + + + + + Contact Us + + + For further questions, including partnership opportunities, please email + hello@creative-tim.com or contact using our contact form. + + + + + + + + + + + + + + + + + + + Send Message + + + + + + + + ); +} + +export default ContactUsOne;`; + +export default contactUsOneCode; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/contact-sections/components/ContactUsOne/index.js b/components/react-todo-app/src/layouts/sections/input-areas/contact-sections/components/ContactUsOne/index.js new file mode 100644 index 00000000..414d533d --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/input-areas/contact-sections/components/ContactUsOne/index.js @@ -0,0 +1,75 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +function ContactUsOne() { + return ( + + + + + Contact Us + + + For further questions, including partnership opportunities, please email + hello@creative-tim.com or contact using our contact form. + + + + + + + + + + + + + + + + + + + Send Message + + + + + + + + ); +} + +export default ContactUsOne; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/contact-sections/components/ContactUsTwo/code.js b/components/react-todo-app/src/layouts/sections/input-areas/contact-sections/components/ContactUsTwo/code.js new file mode 100644 index 00000000..637b312b --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/input-areas/contact-sections/components/ContactUsTwo/code.js @@ -0,0 +1,190 @@ +/* eslint-disable no-template-curly-in-string */ +const bgImage = + "`${linearGradient(rgba(gradients.info.main, 0.8), rgba(gradients.info.state, 0.8))}, url(${bgImage})`"; + +const contactUsTwoCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +// Images +import bgImage from "assets/images/examples/blog2.jpg"; + +function ContactUsTwo() { + return ( + + + + + + + + + + Say Hi! + + + We'd like to talk with you. + + + + + + + + + + + + + + + + + Send Message + + + + + + ${bgImage}, + backgroundSize: "cover", + }} + > + + + + Contact Information + + + Fill up the form and our Team will get back to you within 24 hours. + + + + + + + (+40) 772 100 200 + + + + + + + + hello@creative-tim.com + + + + + + + + Dyonisie Wolf Bucharest, RO 010458 + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default ContactUsTwo;`; + +export default contactUsTwoCode; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/contact-sections/components/ContactUsTwo/index.js b/components/react-todo-app/src/layouts/sections/input-areas/contact-sections/components/ContactUsTwo/index.js new file mode 100644 index 00000000..ac7fc772 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/input-areas/contact-sections/components/ContactUsTwo/index.js @@ -0,0 +1,203 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +// Images +import bgImage from "assets/images/examples/blog2.jpg"; + +function ContactUsTwo() { + return ( + + + + + + + + + + Say Hi! + + + We'd like to talk with you. + + + + + + + + + + + + + + + + + Send Message + + + + + + + `${linearGradient( + rgba(gradients.info.main, 0.8), + rgba(gradients.info.state, 0.8) + )}, url(${bgImage})`, + backgroundSize: "cover", + }} + > + + + + Contact Information + + + Fill up the form and our Team will get back to you within 24 hours. + + + + + + + (+40) 772 100 200 + + + + + + + + hello@creative-tim.com + + + + + + + + Dyonisie Wolf Bucharest, RO 010458 + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default ContactUsTwo; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/contact-sections/index.js b/components/react-todo-app/src/layouts/sections/input-areas/contact-sections/index.js new file mode 100644 index 00000000..7a76bf73 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/input-areas/contact-sections/index.js @@ -0,0 +1,47 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// ContactSections page components +import ContactUsOne from "layouts/sections/input-areas/contact-sections/components/ContactUsOne"; +import ContactUsTwo from "layouts/sections/input-areas/contact-sections/components/ContactUsTwo"; + +// ContactSections page components code +import contactUsOneCode from "layouts/sections/input-areas/contact-sections/components/ContactUsOne/code"; +import conatctUsTwoCode from "layouts/sections/input-areas/contact-sections/components/ContactUsTwo/code"; + +function ContactSections() { + return ( + + + + + + + + + ); +} + +export default ContactSections; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/forms/components/FormContext/code.js b/components/react-todo-app/src/layouts/sections/input-areas/forms/components/FormContext/code.js new file mode 100644 index 00000000..1175a4ef --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/input-areas/forms/components/FormContext/code.js @@ -0,0 +1,140 @@ +const formContextCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Switch from "@mui/material/Switch"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; + +function FormContext() { + return ( + + ({ xs: 0, lg: borderRadius.lg }), + }} + /> + + + + + rgba(white.main, 0.8), + backdropFilter: "saturate(200%) blur(30px)", + px: { xs: 3, sm: 6 }, + py: { xs: 3, sm: 8 }, + mb: { xs: 0, lg: 8 }, + mt: { xs: 0, lg: -6 }, + }} + > + + Contact us + + + + + + + + + + + + + + + + + + + + + + I agree to the{" "} + + Terms and Conditions + + . + + + + + Send Message + + + + + + + + + + + ); +} + +export default FormContext;`; + +export default formContextCode; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/forms/components/FormContext/index.js b/components/react-todo-app/src/layouts/sections/input-areas/forms/components/FormContext/index.js new file mode 100644 index 00000000..c9cee71a --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/input-areas/forms/components/FormContext/index.js @@ -0,0 +1,153 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Switch from "@mui/material/Switch"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; + +function FormContext() { + return ( + + ({ xs: 0, lg: borderRadius.lg }), + }} + /> + + + + + rgba(white.main, 0.8), + backdropFilter: "saturate(200%) blur(30px)", + px: { xs: 3, sm: 6 }, + py: { xs: 3, sm: 8 }, + mb: { xs: 0, lg: 8 }, + mt: { xs: 0, lg: -6 }, + }} + > + + Contact us + + + + + + + + + + + + + + + + + + + + + + I agree to the{" "} + + Terms and Conditions + + . + + + + + Send Message + + + + + + + + + + + ); +} + +export default FormContext; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/forms/components/FormSimple/code.js b/components/react-todo-app/src/layouts/sections/input-areas/forms/components/FormSimple/code.js new file mode 100644 index 00000000..342d72af --- /dev/null +++ b/components/react-todo-app/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 PRO 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/components/react-todo-app/src/layouts/sections/input-areas/forms/components/FormSimple/index.js b/components/react-todo-app/src/layouts/sections/input-areas/forms/components/FormSimple/index.js new file mode 100644 index 00000000..b5c3c95e --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/input-areas/forms/components/FormSimple/index.js @@ -0,0 +1,94 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { 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 PRO 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/components/react-todo-app/src/layouts/sections/input-areas/forms/index.js b/components/react-todo-app/src/layouts/sections/input-areas/forms/index.js new file mode 100644 index 00000000..1a900e11 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/input-areas/forms/index.js @@ -0,0 +1,47 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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"; +import FormContext from "layouts/sections/input-areas/forms/components/FormContext"; + +// Forms page components code +import formSimpleCode from "layouts/sections/input-areas/forms/components/FormSimple/code"; +import formContextCode from "layouts/sections/input-areas/forms/components/FormContext/code"; + +function Forms() { + return ( + + + + + + + + + ); +} + +export default Forms; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputDisabled/code.js b/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputDisabled/code.js new file mode 100644 index 00000000..f8b1ca85 --- /dev/null +++ b/components/react-todo-app/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 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputDisabled() { + return ( + + + + + + + + ); +} + +export default InputDisabled;`; + +export default inputDisabledCode; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputDisabled/index.js b/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputDisabled/index.js new file mode 100644 index 00000000..0b2aa17f --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputDisabled/index.js @@ -0,0 +1,37 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputDisabled() { + return ( + + + + + + + + ); +} + +export default InputDisabled; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputDynamic/code.js b/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputDynamic/code.js new file mode 100644 index 00000000..5c909fda --- /dev/null +++ b/components/react-todo-app/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 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputDynamic() { + return ( + + + + + + + + ); +} + +export default InputDynamic;`; + +export default inputDynamicCode; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputDynamic/index.js b/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputDynamic/index.js new file mode 100644 index 00000000..0efcee9b --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputDynamic/index.js @@ -0,0 +1,37 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputDynamic() { + return ( + + + + + + + + ); +} + +export default InputDynamic; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputError/code.js b/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputError/code.js new file mode 100644 index 00000000..485832c5 --- /dev/null +++ b/components/react-todo-app/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 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputError() { + return ( + + + + + + + + ); +} + +export default InputError;`; + +export default inputErrorCode; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputError/index.js b/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputError/index.js new file mode 100644 index 00000000..01ea4ad4 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputError/index.js @@ -0,0 +1,37 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputError() { + return ( + + + + + + + + ); +} + +export default InputError; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputIcon/code.js b/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputIcon/code.js new file mode 100644 index 00000000..391d1252 --- /dev/null +++ b/components/react-todo-app/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 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputIcon() { + return ( + + + + + + + ), + }} + /> + + + + ); +} + +export default InputIcon;`; + +export default inputIconCode; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputIcon/index.js b/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputIcon/index.js new file mode 100644 index 00000000..8e535f1c --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputIcon/index.js @@ -0,0 +1,52 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @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 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputIcon() { + return ( + + + + + + + ), + }} + /> + + + + ); +} + +export default InputIcon; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputOutlined/code.js b/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputOutlined/code.js new file mode 100644 index 00000000..fed637cf --- /dev/null +++ b/components/react-todo-app/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 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputOutlined() { + return ( + + + + + + + + ); +} + +export default InputOutlined;`; + +export default inputOutlinedCode; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputOutlined/index.js b/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputOutlined/index.js new file mode 100644 index 00000000..7141950d --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputOutlined/index.js @@ -0,0 +1,37 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputOutlined() { + return ( + + + + + + + + ); +} + +export default InputOutlined; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputStatic/code.js b/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputStatic/code.js new file mode 100644 index 00000000..511f1c63 --- /dev/null +++ b/components/react-todo-app/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 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputStatic() { + return ( + + + + + + + + ); +} + +export default InputStatic;`; + +export default inputStaticCode; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputStatic/index.js b/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputStatic/index.js new file mode 100644 index 00000000..a60f0113 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputStatic/index.js @@ -0,0 +1,43 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputStatic() { + return ( + + + + + + + + ); +} + +export default InputStatic; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputSuccess/code.js b/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputSuccess/code.js new file mode 100644 index 00000000..a8d64924 --- /dev/null +++ b/components/react-todo-app/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 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputSuccess() { + return ( + + + + + + + + ); +} + +export default InputSuccess;`; + +export default inputSuccessCode; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputSuccess/index.js b/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputSuccess/index.js new file mode 100644 index 00000000..c1cb1b21 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/input-areas/inputs/components/InputSuccess/index.js @@ -0,0 +1,37 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; + +function InputSuccess() { + return ( + + + + + + + + ); +} + +export default InputSuccess; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/inputs/index.js b/components/react-todo-app/src/layouts/sections/input-areas/inputs/index.js new file mode 100644 index 00000000..4f880424 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/input-areas/inputs/index.js @@ -0,0 +1,72 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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/components/react-todo-app/src/layouts/sections/input-areas/newsletters/components/NewsletterOne/code.js b/components/react-todo-app/src/layouts/sections/input-areas/newsletters/components/NewsletterOne/code.js new file mode 100644 index 00000000..fe254d1e --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/input-areas/newsletters/components/NewsletterOne/code.js @@ -0,0 +1,46 @@ +const newsletterOneCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +function NewsletterOne() { + return ( + + + + + + Get Tips & Tricks every Week! + + + Join our newsletter and get news in your inbox every week! + + + + + + + + + + + Subscribe + + + + + + + + + ); +} + +export default NewsletterOne;`; + +export default newsletterOneCode; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/newsletters/components/NewsletterOne/index.js b/components/react-todo-app/src/layouts/sections/input-areas/newsletters/components/NewsletterOne/index.js new file mode 100644 index 00000000..ad245e8e --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/input-areas/newsletters/components/NewsletterOne/index.js @@ -0,0 +1,60 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +function NewsletterOne() { + return ( + + + + + + Get Tips & Tricks every Week! + + + Join our newsletter and get news in your inbox every week! + + + + + + + + + + + Subscribe + + + + + + + + + ); +} + +export default NewsletterOne; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/newsletters/components/NewsletterTwo/code.js b/components/react-todo-app/src/layouts/sections/input-areas/newsletters/components/NewsletterTwo/code.js new file mode 100644 index 00000000..ac5f01b8 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/input-areas/newsletters/components/NewsletterTwo/code.js @@ -0,0 +1,79 @@ +const newsletterTwoCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +function NewsletterTwo() { + return ( + + + + + person + + + Subscribe + + + This is the paragraph where you can write more details about your product. + + + + + + + + + + + Subscribe + + + + + + + + ); +} + +export default NewsletterTwo;`; + +export default newsletterTwoCode; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/newsletters/components/NewsletterTwo/index.js b/components/react-todo-app/src/layouts/sections/input-areas/newsletters/components/NewsletterTwo/index.js new file mode 100644 index 00000000..12c3df36 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/input-areas/newsletters/components/NewsletterTwo/index.js @@ -0,0 +1,93 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +function NewsletterTwo() { + return ( + + + + + person + + + Subscribe + + + This is the paragraph where you can write more details about your product. + + + + + + + + + + + Subscribe + + + + + + + + ); +} + +export default NewsletterTwo; diff --git a/components/react-todo-app/src/layouts/sections/input-areas/newsletters/index.js b/components/react-todo-app/src/layouts/sections/input-areas/newsletters/index.js new file mode 100644 index 00000000..13204cca --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/input-areas/newsletters/index.js @@ -0,0 +1,47 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Newsletters page components +import NewsletterOne from "layouts/sections/input-areas/newsletters/components/NewsletterOne"; +import NewsletterTwo from "layouts/sections/input-areas/newsletters/components/NewsletterTwo"; + +// Newsletters page components code +import newsletterOneCode from "layouts/sections/input-areas/newsletters/components/NewsletterOne/code"; +import newsletterTwoCode from "layouts/sections/input-areas/newsletters/components/NewsletterTwo/code"; + +function Newsletters() { + return ( + + + + + + + + + ); +} + +export default Newsletters; diff --git a/components/react-todo-app/src/layouts/sections/navigation/nav-tabs/components/TabsSimple/code.js b/components/react-todo-app/src/layouts/sections/navigation/nav-tabs/components/TabsSimple/code.js new file mode 100644 index 00000000..258c325b --- /dev/null +++ b/components/react-todo-app/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/components/react-todo-app/src/layouts/sections/navigation/nav-tabs/components/TabsSimple/index.js b/components/react-todo-app/src/layouts/sections/navigation/nav-tabs/components/TabsSimple/index.js new file mode 100644 index 00000000..25f7186b --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/navigation/nav-tabs/components/TabsSimple/index.js @@ -0,0 +1,45 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { 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/components/react-todo-app/src/layouts/sections/navigation/nav-tabs/components/TabsVertical/code.js b/components/react-todo-app/src/layouts/sections/navigation/nav-tabs/components/TabsVertical/code.js new file mode 100644 index 00000000..4c0fdb3d --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/navigation/nav-tabs/components/TabsVertical/code.js @@ -0,0 +1,32 @@ +const tabsVerticalCode = `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 TabsVertical() { + const [activeTab, setActiveTab] = useState(0); + + const handleTabType = (event, newValue) => setActiveTab(newValue); + + return ( + + + + + + + + + + + + ); +} + +export default TabsVertical;`; + +export default tabsVerticalCode; diff --git a/components/react-todo-app/src/layouts/sections/navigation/nav-tabs/components/TabsVertical/index.js b/components/react-todo-app/src/layouts/sections/navigation/nav-tabs/components/TabsVertical/index.js new file mode 100644 index 00000000..67b05fc2 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/navigation/nav-tabs/components/TabsVertical/index.js @@ -0,0 +1,46 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { 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 TabsVertical() { + const [activeTab, setActiveTab] = useState(0); + + const handleTabType = (event, newValue) => setActiveTab(newValue); + + return ( + + + + + + + + + + + + ); +} + +export default TabsVertical; diff --git a/components/react-todo-app/src/layouts/sections/navigation/nav-tabs/components/TabsWithIcons/code.js b/components/react-todo-app/src/layouts/sections/navigation/nav-tabs/components/TabsWithIcons/code.js new file mode 100644 index 00000000..e9fa0f75 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/navigation/nav-tabs/components/TabsWithIcons/code.js @@ -0,0 +1,32 @@ +const tabsWithIconCode = `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"; +import Icon from "@mui/material/Icon"; + +function TabsWithIcons() { + const [activeTab, setActiveTab] = useState(0); + + const handleTabType = (event, newValue) => setActiveTab(newValue); + + return ( + + + + + person} /> + dashboard} /> + + + + + ); +} + +export default TabsWithIcons;`; + +export default tabsWithIconCode; diff --git a/components/react-todo-app/src/layouts/sections/navigation/nav-tabs/components/TabsWithIcons/index.js b/components/react-todo-app/src/layouts/sections/navigation/nav-tabs/components/TabsWithIcons/index.js new file mode 100644 index 00000000..d6ad8b35 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/navigation/nav-tabs/components/TabsWithIcons/index.js @@ -0,0 +1,46 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { 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"; +import Icon from "@mui/material/Icon"; + +function TabsWithIcons() { + const [activeTab, setActiveTab] = useState(0); + + const handleTabType = (event, newValue) => setActiveTab(newValue); + + return ( + + + + + person} /> + dashboard} /> + + + + + ); +} + +export default TabsWithIcons; diff --git a/components/react-todo-app/src/layouts/sections/navigation/nav-tabs/index.js b/components/react-todo-app/src/layouts/sections/navigation/nav-tabs/index.js new file mode 100644 index 00000000..7178a709 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/navigation/nav-tabs/index.js @@ -0,0 +1,61 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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"; +import TabsWithIcons from "layouts/sections/navigation/nav-tabs/components/TabsWithIcons"; +import TabsVertical from "layouts/sections/navigation/nav-tabs/components/TabsVertical"; + +// Stats page components code +import tabsSimpleCode from "layouts/sections/navigation/nav-tabs/components/TabsSimple/code"; +import tabsWithIconsCode from "layouts/sections/navigation/nav-tabs/components/TabsWithIcons/code"; +import tabsVerticalCode from "layouts/sections/navigation/nav-tabs/components/TabsVertical/code"; + +function NavTabs() { + return ( + + + + + + + + + + + + + + + + + + ); +} + +export default NavTabs; diff --git a/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarBlur/code.js b/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarBlur/code.js new file mode 100644 index 00000000..e98d3aca --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarBlur/code.js @@ -0,0 +1,25 @@ +const navbarBlurCode = `// Material Kit 2 PRO React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; + +// Routes +import routes from "routes"; + +function NavbarBlur() { + return ( + + ); +} + +export default NavbarBlur;`; + +export default navbarBlurCode; diff --git a/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarBlur/index.js b/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarBlur/index.js new file mode 100644 index 00000000..55a808b9 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarBlur/index.js @@ -0,0 +1,39 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; + +// Routes +import routes from "routes"; + +function NavbarBlur() { + return ( + + ); +} + +export default NavbarBlur; diff --git a/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarDark/code.js b/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarDark/code.js new file mode 100644 index 00000000..31ab3465 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarDark/code.js @@ -0,0 +1,32 @@ +const navbarDarkCode = `// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarDark/index.js b/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarDark/index.js new file mode 100644 index 00000000..5b0a4d96 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarDark/index.js @@ -0,0 +1,46 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; + +// Routes +import routes from "routes"; + +function NavbarDark() { + return ( + + + + ); +} + +export default NavbarDark; diff --git a/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarLight/code.js b/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarLight/code.js new file mode 100644 index 00000000..21dc4866 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarLight/code.js @@ -0,0 +1,31 @@ +const navbarLightCode = `// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; + +// Routes +import routes from "routes"; + +function NavbarLight() { + return ( + + + + ); +} + +export default NavbarLight;`; + +export default navbarLightCode; diff --git a/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarLight/index.js b/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarLight/index.js new file mode 100644 index 00000000..b3efd499 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarLight/index.js @@ -0,0 +1,45 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; + +// Routes +import routes from "routes"; + +function NavbarLight() { + return ( + + + + ); +} + +export default NavbarLight; diff --git a/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarTransparent/code.js b/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarTransparent/code.js new file mode 100644 index 00000000..cc3fa376 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarTransparent/code.js @@ -0,0 +1,26 @@ +const navbarTransparentCode = `// Material Kit 2 PRO React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; + +// Routes +import routes from "routes"; + +function NavbarTransparent() { + return ( + + ); +} + +export default NavbarTransparent;`; + +export default navbarTransparentCode; diff --git a/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarTransparent/index.js b/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarTransparent/index.js new file mode 100644 index 00000000..99246db6 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/navigation/navbars/components/NavbarTransparent/index.js @@ -0,0 +1,40 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; + +// Routes +import routes from "routes"; + +function NavbarTransparent() { + return ( + + ); +} + +export default NavbarTransparent; diff --git a/components/react-todo-app/src/layouts/sections/navigation/navbars/index.js b/components/react-todo-app/src/layouts/sections/navigation/navbars/index.js new file mode 100644 index 00000000..2aad9723 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/navigation/navbars/index.js @@ -0,0 +1,68 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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"; +import NavbarLight from "layouts/sections/navigation/navbars/components/NavbarLight"; +import NavbarTransparent from "layouts/sections/navigation/navbars/components/NavbarTransparent"; +import NavbarBlur from "layouts/sections/navigation/navbars/components/NavbarBlur"; + +// Stats page components code +import navbarDarkCode from "layouts/sections/navigation/navbars/components/NavbarDark/code"; +import navbarLightCode from "layouts/sections/navigation/navbars/components/NavbarLight/code"; +import navbarTransparentCode from "layouts/sections/navigation/navbars/components/NavbarTransparent/code"; +import navbarBlurCode from "layouts/sections/navigation/navbars/components/NavbarBlur/code"; + +function Navbars() { + return ( + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default Navbars; diff --git a/components/react-todo-app/src/layouts/sections/navigation/pagination/components/PaginationSimple/code.js b/components/react-todo-app/src/layouts/sections/navigation/pagination/components/PaginationSimple/code.js new file mode 100644 index 00000000..943a865c --- /dev/null +++ b/components/react-todo-app/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 PRO 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/components/react-todo-app/src/layouts/sections/navigation/pagination/components/PaginationSimple/index.js b/components/react-todo-app/src/layouts/sections/navigation/pagination/components/PaginationSimple/index.js new file mode 100644 index 00000000..a8bfe7fc --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/navigation/pagination/components/PaginationSimple/index.js @@ -0,0 +1,49 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/layouts/sections/navigation/pagination/components/PaginationSizing/code.js b/components/react-todo-app/src/layouts/sections/navigation/pagination/components/PaginationSizing/code.js new file mode 100644 index 00000000..05c427b2 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/navigation/pagination/components/PaginationSizing/code.js @@ -0,0 +1,71 @@ +const paginationSizingCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKPagination from "components/MKPagination"; + +function PaginationSizing() { + return ( + + + + + + keyboard_arrow_left + + + 1 + + 2 + 3 + 4 + 5 + + keyboard_arrow_right + + + + + + + keyboard_arrow_left + + + 1 + + 2 + 3 + 4 + 5 + + keyboard_arrow_right + + + + + + + keyboard_arrow_left + + + 1 + + 2 + 3 + 4 + 5 + + keyboard_arrow_right + + + + + + ); +} + +export default PaginationSizing;`; + +export default paginationSizingCode; diff --git a/components/react-todo-app/src/layouts/sections/navigation/pagination/components/PaginationSizing/index.js b/components/react-todo-app/src/layouts/sections/navigation/pagination/components/PaginationSizing/index.js new file mode 100644 index 00000000..4acdc8d9 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/navigation/pagination/components/PaginationSizing/index.js @@ -0,0 +1,85 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKPagination from "components/MKPagination"; + +function PaginationSizing() { + return ( + + + + + + keyboard_arrow_left + + + 1 + + 2 + 3 + 4 + 5 + + keyboard_arrow_right + + + + + + + keyboard_arrow_left + + + 1 + + 2 + 3 + 4 + 5 + + keyboard_arrow_right + + + + + + + keyboard_arrow_left + + + 1 + + 2 + 3 + 4 + 5 + + keyboard_arrow_right + + + + + + ); +} + +export default PaginationSizing; diff --git a/components/react-todo-app/src/layouts/sections/navigation/pagination/components/PaginationVariants/code.js b/components/react-todo-app/src/layouts/sections/navigation/pagination/components/PaginationVariants/code.js new file mode 100644 index 00000000..a04cf233 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/navigation/pagination/components/PaginationVariants/code.js @@ -0,0 +1,105 @@ +const paginationVariantsCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKPagination from "components/MKPagination"; + +function PaginationVariants() { + return ( + + + + + + keyboard_arrow_left + + + 1 + + 2 + 3 + 4 + 5 + + keyboard_arrow_right + + + + + + + keyboard_arrow_left + + + 1 + + 2 + 3 + 4 + 5 + + keyboard_arrow_right + + + + + + + keyboard_arrow_left + + + 1 + + 2 + 3 + 4 + 5 + + keyboard_arrow_right + + + + + + + keyboard_arrow_left + + + 1 + + 2 + 3 + 4 + 5 + + keyboard_arrow_right + + + + + + + keyboard_arrow_left + + + 1 + + 2 + 3 + 4 + 5 + + keyboard_arrow_right + + + + + + ); +} + +export default PaginationVariants;`; + +export default paginationVariantsCode; diff --git a/components/react-todo-app/src/layouts/sections/navigation/pagination/components/PaginationVariants/index.js b/components/react-todo-app/src/layouts/sections/navigation/pagination/components/PaginationVariants/index.js new file mode 100644 index 00000000..4d48a112 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/navigation/pagination/components/PaginationVariants/index.js @@ -0,0 +1,119 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKPagination from "components/MKPagination"; + +function PaginationVariants() { + return ( + + + + + + keyboard_arrow_left + + + 1 + + 2 + 3 + 4 + 5 + + keyboard_arrow_right + + + + + + + keyboard_arrow_left + + + 1 + + 2 + 3 + 4 + 5 + + keyboard_arrow_right + + + + + + + keyboard_arrow_left + + + 1 + + 2 + 3 + 4 + 5 + + keyboard_arrow_right + + + + + + + keyboard_arrow_left + + + 1 + + 2 + 3 + 4 + 5 + + keyboard_arrow_right + + + + + + + keyboard_arrow_left + + + 1 + + 2 + 3 + 4 + 5 + + keyboard_arrow_right + + + + + + ); +} + +export default PaginationVariants; diff --git a/components/react-todo-app/src/layouts/sections/navigation/pagination/index.js b/components/react-todo-app/src/layouts/sections/navigation/pagination/index.js new file mode 100644 index 00000000..7c329d7e --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/navigation/pagination/index.js @@ -0,0 +1,61 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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"; +import PaginationSizing from "layouts/sections/navigation/pagination/components/PaginationSizing"; +import PaginationVariants from "layouts/sections/navigation/pagination/components/PaginationVariants"; + +// Stats page components code +import paginationSimpleCode from "layouts/sections/navigation/pagination/components/PaginationSimple/code"; +import paginationSizingCode from "layouts/sections/navigation/pagination/components/PaginationSizing/code"; +import paginationVariantsCode from "layouts/sections/navigation/pagination/components/PaginationVariants/code"; + +function Pagination() { + return ( + + + + + + + + + + + + + + + + + + ); +} + +export default Pagination; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/applications/components/ApplicationOne/code.js b/components/react-todo-app/src/layouts/sections/page-sections/applications/components/ApplicationOne/code.js new file mode 100644 index 00000000..f7a5001a --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/applications/components/ApplicationOne/code.js @@ -0,0 +1,91 @@ +const applicationOneCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import ColoredBackgroundCard from "examples/Cards/BackgroundCards/ColoredBackgroundCard"; + +function ApplicationOne() { + return ( + + + + + Our Work + + Some of our awesome projects - 3 + + + + + + + + + + + + + + + ); +} + +export default ApplicationOne;`; + +export default applicationOneCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/applications/components/ApplicationOne/index.js b/components/react-todo-app/src/layouts/sections/page-sections/applications/components/ApplicationOne/index.js new file mode 100644 index 00000000..e1e4271b --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/applications/components/ApplicationOne/index.js @@ -0,0 +1,104 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import ColoredBackgroundCard from "examples/Cards/BackgroundCards/ColoredBackgroundCard"; + +function ApplicationOne() { + return ( + + + + + Our Work + + Some of our awesome projects - 3 + + + + + + + + + + + + + + + ); +} + +export default ApplicationOne; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/applications/components/ApplicationTwo/code.js b/components/react-todo-app/src/layouts/sections/page-sections/applications/components/ApplicationTwo/code.js new file mode 100644 index 00000000..8ba51440 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/applications/components/ApplicationTwo/code.js @@ -0,0 +1,122 @@ +const applicationTwoCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; +import Divider from "@mui/material/Divider"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DefaultBackgroundCard from "examples/Cards/BackgroundCards/DefaultBackgroundCard"; + +// HelpCenter page components +import ListItem from "pages/Support/HelpCenter/components/ListItem"; + +// Images +import bgImage1 from "assets/images/examples/color1.jpg"; +import bgImage2 from "assets/images/examples/color3.jpg"; + +function ApplicationTwo() { + return ( + + + + + + settings + + + + How To Handle Them + + + We're constantly trying to express ourselves and actualize our dreams. Don't + stop. + + + + + + + + + Gain access to the demographics, psychographics, and location of unique people who are + interested and talk about your brand. + + + Unify data from Facebook, Instagram, Twitter, LinkedIn, and Youtube to gain rich + insights from easy-to-use reports. + + + Track actions taken on your website that originated from social, and understand the + impact on your bottom line. + + + + + + + + No matter where you are, Trello stays in sync across all of your devices. + + + Whether it's for work or even the next family vacation, Trello helps your team. + + + Integrate the apps your team already uses directly into your workflow. + + + + + + + + + ); +} + +export default ApplicationTwo;`; + +export default applicationTwoCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/applications/components/ApplicationTwo/index.js b/components/react-todo-app/src/layouts/sections/page-sections/applications/components/ApplicationTwo/index.js new file mode 100644 index 00000000..76ae65ca --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/applications/components/ApplicationTwo/index.js @@ -0,0 +1,135 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; +import Divider from "@mui/material/Divider"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DefaultBackgroundCard from "examples/Cards/BackgroundCards/DefaultBackgroundCard"; + +// HelpCenter page components +import ListItem from "pages/Support/HelpCenter/components/ListItem"; + +// Images +import bgImage1 from "assets/images/examples/color1.jpg"; +import bgImage2 from "assets/images/examples/color3.jpg"; + +function ApplicationTwo() { + return ( + + + + + + settings + + + + How To Handle Them + + + We're constantly trying to express ourselves and actualize our dreams. Don't + stop. + + + + + + + + + Gain access to the demographics, psychographics, and location of unique people who are + interested and talk about your brand. + + + Unify data from Facebook, Instagram, Twitter, LinkedIn, and Youtube to gain rich + insights from easy-to-use reports. + + + Track actions taken on your website that originated from social, and understand the + impact on your bottom line. + + + + + + + + No matter where you are, Trello stays in sync across all of your devices. + + + Whether it's for work or even the next family vacation, Trello helps your team. + + + Integrate the apps your team already uses directly into your workflow. + + + + + + + + + ); +} + +export default ApplicationTwo; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/applications/index.js b/components/react-todo-app/src/layouts/sections/page-sections/applications/index.js new file mode 100644 index 00000000..8442c7ed --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/applications/index.js @@ -0,0 +1,47 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Applications page components +import ApplicationOne from "layouts/sections/page-sections/applications/components/ApplicationOne"; +import ApplicationTwo from "layouts/sections/page-sections/applications/components/ApplicationTwo"; + +// Applications page components code +import applicationOneCode from "layouts/sections/page-sections/applications/components/ApplicationOne/code"; +import applicationTwoCode from "layouts/sections/page-sections/applications/components/ApplicationTwo/code"; + +function Applications() { + return ( + + + + + + + + + ); +} + +export default Applications; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostFour/code.js b/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostFour/code.js new file mode 100644 index 00000000..0f4b5cab --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostFour/code.js @@ -0,0 +1,72 @@ +const BlogPostFourCode = `// react-router-dom components +import { Link } from "react-router-dom"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import SimpleBackgroundCard from "examples/Cards/BackgroundCards/SimpleBackgroundCard"; + +// Images +import post1 from "assets/images/examples/blog1.jpg"; +import post2 from "assets/images/examples/blog2.jpg"; +import post3 from "assets/images/examples/blog3.jpg"; + +function BlogPostFour() { + return ( + + + + + Build something great + + + We're constantly trying to express ourselves and actualize our dreams. If you have + the opportunity to play this game of life you need to appreciate every moment. + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default BlogPostFour;`; + +export default BlogPostFourCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostFour/index.js b/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostFour/index.js new file mode 100644 index 00000000..9df131af --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostFour/index.js @@ -0,0 +1,85 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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-dom components +import { Link } from "react-router-dom"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import SimpleBackgroundCard from "examples/Cards/BackgroundCards/SimpleBackgroundCard"; + +// Images +import post1 from "assets/images/examples/blog1.jpg"; +import post2 from "assets/images/examples/blog2.jpg"; +import post3 from "assets/images/examples/blog3.jpg"; + +function BlogPostFour() { + return ( + + + + + Build something great + + + We're constantly trying to express ourselves and actualize our dreams. If you have + the opportunity to play this game of life you need to appreciate every moment. + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default BlogPostFour; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostOne/code.js b/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostOne/code.js new file mode 100644 index 00000000..d96c4642 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostOne/code.js @@ -0,0 +1,109 @@ +const BlogPostOneCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React components +import ColoredBackgroundCard from "examples/Cards/BackgroundCards/ColoredBackgroundCard"; +import InfoBackgroundCard from "examples/Cards/BackgroundCards/InfoBackgroundCard"; + +function BlogPostOne() { + return ( + + + + + + person + + + Check out what's new + + + We get insulted by others, lose trust for those others. We get back freezes every + winter + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default BlogPostOne;`; + +export default BlogPostOneCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostOne/index.js b/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostOne/index.js new file mode 100644 index 00000000..9f6afb98 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostOne/index.js @@ -0,0 +1,122 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React components +import ColoredBackgroundCard from "examples/Cards/BackgroundCards/ColoredBackgroundCard"; +import InfoBackgroundCard from "examples/Cards/BackgroundCards/InfoBackgroundCard"; + +function BlogPostOne() { + return ( + + + + + + person + + + Check out what's new + + + We get insulted by others, lose trust for those others. We get back freezes every + winter + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default BlogPostOne; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostThree/code.js b/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostThree/code.js new file mode 100644 index 00000000..941ebfaf --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostThree/code.js @@ -0,0 +1,78 @@ +const BlogPostThreeCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import DefaultBlogCard from "examples/Cards/BlogCards/DefaultBlogCard"; + +// Images +import author1 from "assets/images/team-2.jpg"; +import author2 from "assets/images/ivana-squares.jpg"; +import author3 from "assets/images/marie.jpg"; + +function BlogPostThree() { + const post1 = + "https://images.unsplash.com/photo-1592489637182-8c172d6d7826?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2300&q=80"; + const post2 = + "https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2300&q=80"; + const post3 = + "https://images.unsplash.com/photo-1444877466744-dc2f2af2b931?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2300&q=80"; + + return ( + + + + + + + + + + + + + + + + ); +} + +export default BlogPostThree;`; + +export default BlogPostThreeCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostThree/index.js b/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostThree/index.js new file mode 100644 index 00000000..b91e9a2c --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostThree/index.js @@ -0,0 +1,91 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import DefaultBlogCard from "examples/Cards/BlogCards/DefaultBlogCard"; + +// Images +import author1 from "assets/images/team-2.jpg"; +import author2 from "assets/images/ivana-squares.jpg"; +import author3 from "assets/images/marie.jpg"; + +function BlogPostThree() { + const post1 = + "https://images.unsplash.com/photo-1592489637182-8c172d6d7826?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2300&q=80"; + const post2 = + "https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2300&q=80"; + const post3 = + "https://images.unsplash.com/photo-1444877466744-dc2f2af2b931?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2300&q=80"; + + return ( + + + + + + + + + + + + + + + + ); +} + +export default BlogPostThree; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostTwo/code.js b/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostTwo/code.js new file mode 100644 index 00000000..d76abf9d --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostTwo/code.js @@ -0,0 +1,124 @@ +const BlogPostTwoCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKPagination from "components/MKPagination"; + +// Material Kit 2 PRO React components +import SimpleBookingCard from "examples/Cards/BookingCards/SimpleBookingCard"; + +// Images +import product1 from "assets/images/products/product-1-min.jpg"; +import product2 from "assets/images/products/product-2-min.jpg"; +import product3 from "assets/images/products/product-3-min.jpg"; +import product4 from "assets/images/products/product-5-min.jpg"; +import product5 from "assets/images/products/product-6-min.jpg"; +import product6 from "assets/images/products/product-7-min.jpg"; + +function BlogPostTwo() { + const actionProps = { + type: "internal", + route: "/pages/landing-pages/rental", + color: "info", + label: "from / night", + }; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + keyboard_arrow_left + + + 1 + + 2 + 3 + 4 + 5 + + keyboard_arrow_right + + + + + + ); +} + +export default BlogPostTwo;`; + +export default BlogPostTwoCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostTwo/index.js b/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostTwo/index.js new file mode 100644 index 00000000..bd7e4c33 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/components/BlogPostTwo/index.js @@ -0,0 +1,137 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKPagination from "components/MKPagination"; + +// Material Kit 2 PRO React components +import SimpleBookingCard from "examples/Cards/BookingCards/SimpleBookingCard"; + +// Images +import product1 from "assets/images/products/product-1-min.jpg"; +import product2 from "assets/images/products/product-2-min.jpg"; +import product3 from "assets/images/products/product-3-min.jpg"; +import product4 from "assets/images/products/product-5-min.jpg"; +import product5 from "assets/images/products/product-6-min.jpg"; +import product6 from "assets/images/products/product-7-min.jpg"; + +function BlogPostTwo() { + const actionProps = { + type: "internal", + route: "/pages/landing-pages/rental", + color: "info", + label: "from / night", + }; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + keyboard_arrow_left + + + 1 + + 2 + 3 + 4 + 5 + + keyboard_arrow_right + + + + + + ); +} + +export default BlogPostTwo; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/index.js b/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/index.js new file mode 100644 index 00000000..3a3007fe --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/blog-posts/index.js @@ -0,0 +1,57 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// BlogPosts page components +import BlogPostOne from "layouts/sections/page-sections/blog-posts/components/BlogPostOne"; +import BlogPostTwo from "layouts/sections/page-sections/blog-posts/components/BlogPostTwo"; +import BlogPostThree from "layouts/sections/page-sections/blog-posts/components/BlogPostThree"; +import BlogPostFour from "layouts/sections/page-sections/blog-posts/components/BlogPostFour"; + +// BlogPosts page components code +import blogPostOneCode from "layouts/sections/page-sections/blog-posts/components/BlogPostOne/code"; +import blogPostTwoCode from "layouts/sections/page-sections/blog-posts/components/BlogPostTwo/code"; +import blogPostThreeCode from "layouts/sections/page-sections/blog-posts/components/BlogPostThree/code"; +import blogPostFourCode from "layouts/sections/page-sections/blog-posts/components/BlogPostFour/code"; + +function BlogPosts() { + return ( + + + + + + + + + + + + + + + ); +} + +export default BlogPosts; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/content-sections/components/ContentOne/code.js b/components/react-todo-app/src/layouts/sections/page-sections/content-sections/components/ContentOne/code.js new file mode 100644 index 00000000..f0c4b3ca --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/content-sections/components/ContentOne/code.js @@ -0,0 +1,136 @@ +/* eslint-disable no-template-curly-in-string */ +const bg1 = "`url(${bg1})`"; +const bg2 = "`url(${bg2})`"; +const bg3 = "`url(${bg3})`"; +const bg4 = "`url(${bg4})`"; +const bg5 = "`url(${bg5})`"; +const bg6 = "`url(${bg6})`"; + +const contentOneCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; +import MKTypography from "components/MKTypography"; + +// Images +import bg1 from "assets/images/bg.jpg"; +import bg2 from "assets/images/examples/content-1.jpg"; +import bg3 from "assets/images/examples/content-2.jpg"; +import bg4 from "assets/images/examples/content-3.jpg"; +import bg5 from "assets/images/examples/content-4.jpg"; +import bg6 from "assets/images/examples/content-5.jpg"; + +function ContentOne() { + return ( + + + + + + Explore our places in London + + + If you can't decide, the answer is no. If two equally difficult paths, choose the + one more painful in the short term (pain avoidance is creating an illusion of equality). + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default ContentOne;`; + +export default contentOneCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/content-sections/components/ContentOne/index.js b/components/react-todo-app/src/layouts/sections/page-sections/content-sections/components/ContentOne/index.js new file mode 100644 index 00000000..79db38d6 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/content-sections/components/ContentOne/index.js @@ -0,0 +1,141 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; +import MKTypography from "components/MKTypography"; + +// Images +import bg1 from "assets/images/bg.jpg"; +import bg2 from "assets/images/examples/content-1.jpg"; +import bg3 from "assets/images/examples/content-2.jpg"; +import bg4 from "assets/images/examples/content-3.jpg"; +import bg5 from "assets/images/examples/content-4.jpg"; +import bg6 from "assets/images/examples/content-5.jpg"; + +function ContentOne() { + return ( + + + + + + Explore our places in London + + + If you can't decide, the answer is no. If two equally difficult paths, choose the + one more painful in the short term (pain avoidance is creating an illusion of equality). + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default ContentOne; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/content-sections/components/ContentTwo/code.js b/components/react-todo-app/src/layouts/sections/page-sections/content-sections/components/ContentTwo/code.js new file mode 100644 index 00000000..ab8194e6 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/content-sections/components/ContentTwo/code.js @@ -0,0 +1,80 @@ +const contentTwoCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; +import Divider from "@mui/material/Divider"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; +import MKButton from "components/MKButton"; +import MKAvatar from "components/MKAvatar"; +import MKTypography from "components/MKTypography"; +import MKSocialButton from "components/MKSocialButton"; + +// Images +import profilePicture from "assets/images/team-2.jpg"; + +function ContentTwo() { + return ( + + + + + + + + + + + + + + + + 872 + + + 910 + + + 232 + + + + + + + + + + Alec Thompson + + + I've been trying to figure out the bed design for the master bedroom at our + Hidden Hills compound...I like good music from Youtube. + + + + Follow + + + + Follow + + + + + + ); +} + +export default ContentTwo;`; + +export default contentTwoCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/content-sections/components/ContentTwo/index.js b/components/react-todo-app/src/layouts/sections/page-sections/content-sections/components/ContentTwo/index.js new file mode 100644 index 00000000..d156a4ba --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/content-sections/components/ContentTwo/index.js @@ -0,0 +1,93 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; +import Divider from "@mui/material/Divider"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; +import MKButton from "components/MKButton"; +import MKAvatar from "components/MKAvatar"; +import MKTypography from "components/MKTypography"; +import MKSocialButton from "components/MKSocialButton"; + +// Images +import profilePicture from "assets/images/team-2.jpg"; + +function ContentTwo() { + return ( + + + + + + + + + + + + + + + + 872 + + + 910 + + + 232 + + + + + + + + + + Alec Thompson + + + I've been trying to figure out the bed design for the master bedroom at our + Hidden Hills compound...I like good music from Youtube. + + + + Follow + + + + Follow + + + + + + ); +} + +export default ContentTwo; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/content-sections/index.js b/components/react-todo-app/src/layouts/sections/page-sections/content-sections/index.js new file mode 100644 index 00000000..44212caf --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/content-sections/index.js @@ -0,0 +1,47 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Pricing page components +import ContentOne from "layouts/sections/page-sections/content-sections/components/ContentOne"; +import ContentTwo from "layouts/sections/page-sections/content-sections/components/ContentTwo"; + +// Pricing page components code +import contentOneCode from "layouts/sections/page-sections/content-sections/components/ContentOne/code"; +import contentTwoCode from "layouts/sections/page-sections/content-sections/components/ContentTwo/code"; + +function ContentSections() { + return ( + + + + + + + + + ); +} + +export default ContentSections; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/cta/components/CtaOne/code.js b/components/react-todo-app/src/layouts/sections/page-sections/cta/components/CtaOne/code.js new file mode 100644 index 00000000..cd986a4a --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/cta/components/CtaOne/code.js @@ -0,0 +1,58 @@ +const ctaOneCode = `// @mui material components +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +// Images +import image from "assets/images/examples/blog2.jpg"; + +function StatsOne() { + 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 StatsOne;`; + +export default ctaOneCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/cta/components/CtaOne/index.js b/components/react-todo-app/src/layouts/sections/page-sections/cta/components/CtaOne/index.js new file mode 100644 index 00000000..640f87ec --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/cta/components/CtaOne/index.js @@ -0,0 +1,71 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +// Images +import image from "assets/images/examples/blog2.jpg"; + +function StatsOne() { + 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 StatsOne; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/cta/components/CtaThree/code.js b/components/react-todo-app/src/layouts/sections/page-sections/cta/components/CtaThree/code.js new file mode 100644 index 00000000..48e7f67b --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/cta/components/CtaThree/code.js @@ -0,0 +1,50 @@ +/* eslint-disable no-template-curly-in-string */ +const bgImage = + "`${linearGradient(rgba(gradients.dark.main, 0.8), rgba(gradients.dark.state, 0.8))}, url(${bgImage})`"; + +const statsTwoCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +// Images +import bgImage from "assets/images/bg3.jpg"; + +function CtaThree() { + return ( + ${bgImage}, + }} + > + + + + + For being a bright color. For standing out. But the time is now to be okay to be the + greatest you. + + + + + + start now + + + + + + + ); +} + +export default CtaThree;`; + +export default statsTwoCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/cta/components/CtaThree/index.js b/components/react-todo-app/src/layouts/sections/page-sections/cta/components/CtaThree/index.js new file mode 100644 index 00000000..3d43046e --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/cta/components/CtaThree/index.js @@ -0,0 +1,63 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +// Images +import bgImage from "assets/images/bg3.jpg"; + +function CtaThree() { + return ( + + `${linearGradient( + rgba(gradients.dark.main, 0.8), + rgba(gradients.dark.state, 0.8) + )}, url(${bgImage})`, + }} + > + + + + + For being a bright color. For standing out. But the time is now to be okay to be the + greatest you. + + + + + + start now + + + + + + + ); +} + +export default CtaThree; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/cta/components/CtaTwo/code.js b/components/react-todo-app/src/layouts/sections/page-sections/cta/components/CtaTwo/code.js new file mode 100644 index 00000000..6f1548cb --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/cta/components/CtaTwo/code.js @@ -0,0 +1,57 @@ +const ctaTwoCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKSocialButton from "components/MKSocialButton"; + +function CtaTwo() { + return ( + + + + + + Thank you for your support! + + + Delivering the best products + + + + + + +   twitter + + + +   facebook + + + +   tumblr + + + +   dribbble + + + + + + + ); +} + +export default CtaTwo;`; + +export default ctaTwoCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/cta/components/CtaTwo/index.js b/components/react-todo-app/src/layouts/sections/page-sections/cta/components/CtaTwo/index.js new file mode 100644 index 00000000..ad8eab07 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/cta/components/CtaTwo/index.js @@ -0,0 +1,70 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKSocialButton from "components/MKSocialButton"; + +function CtaTwo() { + return ( + + + + + + Thank you for your support! + + + Delivering the best products + + + + + + +   twitter + + + +   facebook + + + +   tumblr + + + +   dribbble + + + + + + + ); +} + +export default CtaTwo; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/cta/index.js b/components/react-todo-app/src/layouts/sections/page-sections/cta/index.js new file mode 100644 index 00000000..5f518066 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/cta/index.js @@ -0,0 +1,57 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// CTA page components +import CtaOne from "layouts/sections/page-sections/cta/components/CtaOne"; +import CtaTwo from "layouts/sections/page-sections/cta/components/CtaTwo"; +import CtaThree from "layouts/sections/page-sections/cta/components/CtaThree"; + +// CTA page components code +import ctaOneCode from "layouts/sections/page-sections/cta/components/CtaOne/code"; +import ctaTwoCode from "layouts/sections/page-sections/cta/components/CtaTwo/code"; +import ctaThreeCode from "layouts/sections/page-sections/cta/components/CtaThree/code"; + +function Cta() { + return ( + + + + + + + + + + + + + + ); +} + +export default Cta; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/faq/code.js b/components/react-todo-app/src/layouts/sections/page-sections/faq/code.js new file mode 100644 index 00000000..f3c8968b --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/faq/code.js @@ -0,0 +1,131 @@ +const faqCode = `import { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// HelpCenter page components +import FaqCollapse from "pages/Support/HelpCenter/components/FaqCollapse"; + +// Faq page code +import faqCode from "layouts/sections/page-sections/faq/code"; + +function Faq() { + const [collapse, setCollapse] = useState(false); + + return ( + + + + + + + + Frequently Asked Questions + + + + A lot of people don't appreciate the moment until it's passed. + I'm not trying my hardest, and I'm not trying to do + + + + + (collapse === 1 ? setCollapse(false) : setCollapse(1))} + > + We're not always in the position that we want to be at. We're constantly + growing. We're constantly making mistakes. We're constantly trying to + express ourselves and actualize our dreams. If you have the opportunity to play + this game of life you need to appreciate every moment. A lot of people don't + appreciate the moment until it's passed. + + (collapse === 2 ? setCollapse(false) : setCollapse(2))} + > + It really matters and then like it really doesn't matter. What matters is the + people who are sparked by it. And the people who are like offended by it, it + doesn't matter. Because it's about motivating the doers. Because + I'm here to follow my dreams and inspire other people to follow their dreams, + too. We're not always in the position that we want to be at. We're + constantly growing. We're constantly making mistakes. We're constantly + trying to express ourselves and actualize our dreams. If you have the opportunity + to play this game of life you need to appreciate every moment. A lot of people + don't appreciate the moment until it's passed. + + (collapse === 3 ? setCollapse(false) : setCollapse(3))} + > + The time is now for it to be okay to be great. People in this world shun people + for being great. For being a bright color. For standing out. But the time is now + to be okay to be the greatest you. Would you believe in what you believe in, if + you were the only one who believed it? If everything I did failed - which it + doesn't, it actually succeeds - just the fact that I'm willing to fail + is an inspiration. People are so scared to lose that they don't even try. + Like, one thing people can't say is that I'm not trying, and I'm + not trying my hardest, and I'm not trying to do the best way I know how. + + (collapse === 4 ? setCollapse(false) : setCollapse(4))} + > + I always felt like I could do anything. That's the main thing people are + controlled by! Thoughts- their perception of themselves! They're slowed down + by their perception of themselves. If you're taught you can't do + anything, you won't do anything. I was taught I could do everything. +
+
+ If everything I did failed - which it doesn't, it actually succeeds - just + the fact that I'm willing to fail is an inspiration. People are so scared to + lose that they don't even try. Like, one thing people can't say is that + I'm not trying, and I'm not trying my hardest, and I'm not trying + to do the best way I know how. + + (collapse === 5 ? setCollapse(false) : setCollapse(5))} + > + There's nothing I really wanted to do in life that I wasn't able to get + good at. That's my skill. I'm not really specifically talented at + anything except for the ability to learn. That's what I do. That's what + I'm here for. Don't be afraid to be wrong because you can't learn + anything from a compliment. I always felt like I could do anything. That's + the main thing people are controlled by! Thoughts- their perception of themselves! + They're slowed down by their perception of themselves. If you're taught + you can't do anything, you won't do anything. I was taught I could do + everything. + + + + + + + + ); +} + +export default Faq;`; + +export default faqCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/faq/index.js b/components/react-todo-app/src/layouts/sections/page-sections/faq/index.js new file mode 100644 index 00000000..ce9db043 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/faq/index.js @@ -0,0 +1,144 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// HelpCenter page components +import FaqCollapse from "pages/Support/HelpCenter/components/FaqCollapse"; + +// Faq page code +import faqCode from "layouts/sections/page-sections/faq/code"; + +function Faq() { + const [collapse, setCollapse] = useState(false); + + return ( + + + + + + + + Frequently Asked Questions + + + + A lot of people don't appreciate the moment until it's passed. + I'm not trying my hardest, and I'm not trying to do + + + + + (collapse === 1 ? setCollapse(false) : setCollapse(1))} + > + We're not always in the position that we want to be at. We're constantly + growing. We're constantly making mistakes. We're constantly trying to + express ourselves and actualize our dreams. If you have the opportunity to play + this game of life you need to appreciate every moment. A lot of people don't + appreciate the moment until it's passed. + + (collapse === 2 ? setCollapse(false) : setCollapse(2))} + > + It really matters and then like it really doesn't matter. What matters is the + people who are sparked by it. And the people who are like offended by it, it + doesn't matter. Because it's about motivating the doers. Because + I'm here to follow my dreams and inspire other people to follow their dreams, + too. We're not always in the position that we want to be at. We're + constantly growing. We're constantly making mistakes. We're constantly + trying to express ourselves and actualize our dreams. If you have the opportunity + to play this game of life you need to appreciate every moment. A lot of people + don't appreciate the moment until it's passed. + + (collapse === 3 ? setCollapse(false) : setCollapse(3))} + > + The time is now for it to be okay to be great. People in this world shun people + for being great. For being a bright color. For standing out. But the time is now + to be okay to be the greatest you. Would you believe in what you believe in, if + you were the only one who believed it? If everything I did failed - which it + doesn't, it actually succeeds - just the fact that I'm willing to fail + is an inspiration. People are so scared to lose that they don't even try. + Like, one thing people can't say is that I'm not trying, and I'm + not trying my hardest, and I'm not trying to do the best way I know how. + + (collapse === 4 ? setCollapse(false) : setCollapse(4))} + > + I always felt like I could do anything. That's the main thing people are + controlled by! Thoughts- their perception of themselves! They're slowed down + by their perception of themselves. If you're taught you can't do + anything, you won't do anything. I was taught I could do everything. +
+
+ If everything I did failed - which it doesn't, it actually succeeds - just + the fact that I'm willing to fail is an inspiration. People are so scared to + lose that they don't even try. Like, one thing people can't say is that + I'm not trying, and I'm not trying my hardest, and I'm not trying + to do the best way I know how. + + (collapse === 5 ? setCollapse(false) : setCollapse(5))} + > + There's nothing I really wanted to do in life that I wasn't able to get + good at. That's my skill. I'm not really specifically talented at + anything except for the ability to learn. That's what I do. That's what + I'm here for. Don't be afraid to be wrong because you can't learn + anything from a compliment. I always felt like I could do anything. That's + the main thing people are controlled by! Thoughts- their perception of themselves! + They're slowed down by their perception of themselves. If you're taught + you can't do anything, you won't do anything. I was taught I could do + everything. + + + + + + + + ); +} + +export default Faq; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/featuers/components/FeaturesOne/code.js b/components/react-todo-app/src/layouts/sections/page-sections/featuers/components/FeaturesOne/code.js new file mode 100644 index 00000000..8d7485a9 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/featuers/components/FeaturesOne/code.js @@ -0,0 +1,96 @@ +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 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Coworking page component +import AboutUsOption from "pages/LandingPages/Coworking/components/AboutUsOption"; + +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 + + + + + + It becomes harder for us to give others a hand. +
+ We get our heart broken by people we love. + + } + /> + + As we live, our hearts turn colder. +
+ Cause pain is what we go through as we become older. + + } + /> + + 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/components/react-todo-app/src/layouts/sections/page-sections/featuers/components/FeaturesOne/index.js b/components/react-todo-app/src/layouts/sections/page-sections/featuers/components/FeaturesOne/index.js new file mode 100644 index 00000000..000f8820 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/featuers/components/FeaturesOne/index.js @@ -0,0 +1,109 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @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 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Coworking page component +import AboutUsOption from "pages/LandingPages/Coworking/components/AboutUsOption"; + +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 + + + + + + It becomes harder for us to give others a hand. +
+ We get our heart broken by people we love. + + } + /> + + As we live, our hearts turn colder. +
+ Cause pain is what we go through as we become older. + + } + /> + + When we lose family over time. +
+ What else could rust the heart more over time? Blackgold. + + } + /> + + + + + + ); +} + +export default FeaturesOne; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/featuers/components/FeaturesThree/code.js b/components/react-todo-app/src/layouts/sections/page-sections/featuers/components/FeaturesThree/code.js new file mode 100644 index 00000000..c2abe51b --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/featuers/components/FeaturesThree/code.js @@ -0,0 +1,69 @@ +const featuresThreeCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import SimpleInfoCard from "examples/Cards/InfoCards/SimpleInfoCard"; + +function FeaturesThree() { + return ( + + + + + Turn your idea into a startup + + + We're constantly trying to express ourselves and actualize our dreams. If you have + the opportunity to play{" "} + + + + + + + + + + + + + + + + ); +} + +export default FeaturesThree;`; + +export default featuresThreeCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/featuers/components/FeaturesThree/index.js b/components/react-todo-app/src/layouts/sections/page-sections/featuers/components/FeaturesThree/index.js new file mode 100644 index 00000000..8b849496 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/featuers/components/FeaturesThree/index.js @@ -0,0 +1,82 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import SimpleInfoCard from "examples/Cards/InfoCards/SimpleInfoCard"; + +function FeaturesThree() { + return ( + + + + + Turn your idea into a startup + + + We're constantly trying to express ourselves and actualize our dreams. If you have + the opportunity to play{" "} + + + + + + + + + + + + + + + + ); +} + +export default FeaturesThree; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/featuers/components/FeaturesTwo/code.js b/components/react-todo-app/src/layouts/sections/page-sections/featuers/components/FeaturesTwo/code.js new file mode 100644 index 00000000..c3f0b9f8 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/featuers/components/FeaturesTwo/code.js @@ -0,0 +1,78 @@ +const featuresTwoCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import DefaultInfoCard from "examples/Cards/InfoCards/DefaultInfoCard"; +import CenteredBlogCard from "examples/Cards/BlogCards/CenteredBlogCard"; + +function FeaturesTwo() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default FeaturesTwo;`; + +export default featuresTwoCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/featuers/components/FeaturesTwo/index.js b/components/react-todo-app/src/layouts/sections/page-sections/featuers/components/FeaturesTwo/index.js new file mode 100644 index 00000000..167f93a1 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/featuers/components/FeaturesTwo/index.js @@ -0,0 +1,91 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import DefaultInfoCard from "examples/Cards/InfoCards/DefaultInfoCard"; +import CenteredBlogCard from "examples/Cards/BlogCards/CenteredBlogCard"; + +function FeaturesTwo() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default FeaturesTwo; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/featuers/index.js b/components/react-todo-app/src/layouts/sections/page-sections/featuers/index.js new file mode 100644 index 00000000..f13b5944 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/featuers/index.js @@ -0,0 +1,52 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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"; +import FeaturesTwo from "layouts/sections/page-sections/featuers/components/FeaturesTwo"; +import FeaturesThree from "layouts/sections/page-sections/featuers/components/FeaturesThree"; + +// Features page components code +import featuresOneCode from "layouts/sections/page-sections/featuers/components/FeaturesOne/code"; +import featuresTwoCode from "layouts/sections/page-sections/featuers/components/FeaturesTwo/code"; +import featuresThreeCode from "layouts/sections/page-sections/featuers/components/FeaturesThree/code"; + +function Features() { + return ( + + + + + + + + + + + + ); +} + +export default Features; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/footers/components/FooterOne/code.js b/components/react-todo-app/src/layouts/sections/page-sections/footers/components/FooterOne/code.js new file mode 100644 index 00000000..81e8f5f3 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/footers/components/FooterOne/code.js @@ -0,0 +1,98 @@ +const footerOneCode = `// Material Kit 2 PRO React components +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DetailedFooter from "examples/Footers/DetailedFooter"; + +function FooterOne() { + const date = new Date().getFullYear(); + + const footerContent = { + brand: { + name: "MATERIAL UI DESIGN", + description: "The next generation of design systems.", + }, + 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", + }, + ], + menus: [ + { + name: "company", + items: [ + { name: "about us", href: "https://www.creative-tim.com" }, + { name: "career", href: "https://www.creative-tim.com" }, + { name: "press", href: "https://www.creative-tim.com" }, + { name: "blog", href: "https://www.creative-tim.com" }, + ], + }, + { + name: "Pages", + items: [ + { name: "login", href: "https://www.creative-tim.com" }, + { name: "register", href: "https://www.creative-tim.com" }, + { name: "add list", href: "https://www.creative-tim.com" }, + { name: "contact", href: "https://www.creative-tim.com" }, + ], + }, + { + name: "legal", + items: [ + { name: "terms", href: "https://www.creative-tim.com" }, + { name: "about us", href: "https://www.creative-tim.com" }, + { name: "team", href: "https://services.creative-tim.com" }, + { name: "privacy", href: "https://www.creative-tim.com" }, + ], + }, + { + name: "resources", + items: [ + { name: "blog", href: "https://www.creative-tim.com" }, + { name: "services", href: "https://www.creative-tim.com" }, + { name: "product", href: "https://www.creative-tim.com" }, + { name: "pricing", href: "https://www.creative-tim.com" }, + ], + }, + ], + copyright: ( + + Copyright © {date} Material Design by{" "} + + Creative Tim + + . + + ), + }; + + return ; +} + +export default FooterOne;`; + +export default footerOneCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/footers/components/FooterOne/index.js b/components/react-todo-app/src/layouts/sections/page-sections/footers/components/FooterOne/index.js new file mode 100644 index 00000000..44582c80 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/footers/components/FooterOne/index.js @@ -0,0 +1,111 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React components +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DetailedFooter from "examples/Footers/DetailedFooter"; + +function FooterOne() { + const date = new Date().getFullYear(); + + const footerContent = { + brand: { + name: "MATERIAL UI DESIGN", + description: "The next generation of design systems.", + }, + 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", + }, + ], + menus: [ + { + name: "company", + items: [ + { name: "about us", href: "https://www.creative-tim.com" }, + { name: "career", href: "https://www.creative-tim.com" }, + { name: "press", href: "https://www.creative-tim.com" }, + { name: "blog", href: "https://www.creative-tim.com" }, + ], + }, + { + name: "Pages", + items: [ + { name: "login", href: "https://www.creative-tim.com" }, + { name: "register", href: "https://www.creative-tim.com" }, + { name: "add list", href: "https://www.creative-tim.com" }, + { name: "contact", href: "https://www.creative-tim.com" }, + ], + }, + { + name: "legal", + items: [ + { name: "terms", href: "https://www.creative-tim.com" }, + { name: "about us", href: "https://www.creative-tim.com" }, + { name: "team", href: "https://services.creative-tim.com" }, + { name: "privacy", href: "https://www.creative-tim.com" }, + ], + }, + { + name: "resources", + items: [ + { name: "blog", href: "https://www.creative-tim.com" }, + { name: "services", href: "https://www.creative-tim.com" }, + { name: "product", href: "https://www.creative-tim.com" }, + { name: "pricing", href: "https://www.creative-tim.com" }, + ], + }, + ], + copyright: ( + + Copyright © {date} Material Design by{" "} + + Creative Tim + + . + + ), + }; + + return ; +} + +export default FooterOne; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/footers/components/FooterThree/code.js b/components/react-todo-app/src/layouts/sections/page-sections/footers/components/FooterThree/code.js new file mode 100644 index 00000000..e59d08d2 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/footers/components/FooterThree/code.js @@ -0,0 +1,43 @@ +const footerThreeCode = `// @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 PRO React examples +import CenteredFooter from "examples/Footers/CenteredFooter"; + +function FooterThress() { + const company = { href: "https://www.creative-tim.com/", name: "Creative Tim" }; + const 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" }, + ]; + const 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" }, + ]; + + return ; +} + +export default FooterThress;`; + +export default footerThreeCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/footers/components/FooterThree/index.js b/components/react-todo-app/src/layouts/sections/page-sections/footers/components/FooterThree/index.js new file mode 100644 index 00000000..49a4e6d8 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/footers/components/FooterThree/index.js @@ -0,0 +1,56 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @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 PRO React examples +import CenteredFooter from "examples/Footers/CenteredFooter"; + +function FooterThress() { + const company = { href: "https://www.creative-tim.com/", name: "Creative Tim" }; + const 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" }, + ]; + const 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" }, + ]; + + return ; +} + +export default FooterThress; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/footers/components/FooterTwo/code.js b/components/react-todo-app/src/layouts/sections/page-sections/footers/components/FooterTwo/code.js new file mode 100644 index 00000000..08467184 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/footers/components/FooterTwo/code.js @@ -0,0 +1,13 @@ +const footerTwoCode = `// Material Kit 2 PRO React examples +import DefaultFooter from "examples/Footers/DefaultFooter"; + +// routes +import footerRoutes from "footer.routes"; + +function FooterTwo() { + return ; +} + +export default FooterTwo;`; + +export default footerTwoCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/footers/components/FooterTwo/index.js b/components/react-todo-app/src/layouts/sections/page-sections/footers/components/FooterTwo/index.js new file mode 100644 index 00000000..76434706 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/footers/components/FooterTwo/index.js @@ -0,0 +1,26 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React examples +import DefaultFooter from "examples/Footers/DefaultFooter"; + +// routes +import footerRoutes from "footer.routes"; + +function FooterTwo() { + return ; +} + +export default FooterTwo; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/footers/index.js b/components/react-todo-app/src/layouts/sections/page-sections/footers/index.js new file mode 100644 index 00000000..e83b33bd --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/footers/index.js @@ -0,0 +1,59 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO 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 FooterOne from "layouts/sections/page-sections/footers/components/FooterOne"; +import FooterTwo from "layouts/sections/page-sections/footers/components/FooterTwo"; +import FooterThree from "layouts/sections/page-sections/footers/components/FooterThree"; + +// Stats page components code +import footerOneCode from "layouts/sections/page-sections/footers/components/FooterOne/code"; +import footerTwoCode from "layouts/sections/page-sections/footers/components/FooterTwo/code"; +import footerThreeCode from "layouts/sections/page-sections/footers/components/FooterThree/code"; + +function Footers() { + return ( + + + + + + + + + + + + + + + + ); +} + +export default Footers; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardImageInside/code.js b/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardImageInside/code.js new file mode 100644 index 00000000..73b107b1 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardImageInside/code.js @@ -0,0 +1,41 @@ +const cardImageInsideCode = `// @mui material components +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import DefaultBlogCard from "examples/Cards/BlogCards/DefaultBlogCard"; + +// Images +import image from "assets/images/annie-spratt.jpg"; +import author from "assets/images/marie.jpg"; + +function CardImageInside() { + return ( + + + + + + ); +} + +export default CardImageInside;`; + +export default cardImageInsideCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardImageInside/index.js b/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardImageInside/index.js new file mode 100644 index 00000000..39af2be2 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardImageInside/index.js @@ -0,0 +1,54 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import DefaultBlogCard from "examples/Cards/BlogCards/DefaultBlogCard"; + +// Images +import image from "assets/images/annie-spratt.jpg"; +import author from "assets/images/marie.jpg"; + +function CardImageInside() { + return ( + + + + + + ); +} + +export default CardImageInside; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardPricing/code.js b/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardPricing/code.js new file mode 100644 index 00000000..2f717eda --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardPricing/code.js @@ -0,0 +1,35 @@ +const cardPricingCode = `// @mui material components +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import SimplePricingCard from "examples/Cards/PricingCards/SimplePricingCard"; + +function CardPricing() { + return ( + + + + + + ); +} + +export default CardPricing;`; + +export default cardPricingCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardPricing/index.js b/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardPricing/index.js new file mode 100644 index 00000000..9eb580e9 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardPricing/index.js @@ -0,0 +1,48 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import SimplePricingCard from "examples/Cards/PricingCards/SimplePricingCard"; + +function CardPricing() { + return ( + + + + + + ); +} + +export default CardPricing; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardRaised/code.js b/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardRaised/code.js new file mode 100644 index 00000000..052fa32f --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardRaised/code.js @@ -0,0 +1,35 @@ +const cardRaisedCode = `// @mui material components +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import RaisedBlogCard from "examples/Cards/BlogCards/RaisedBlogCard"; + +function CardRaised() { + const image = + "https://images.unsplash.com/photo-1540553016722-983e48a2cd10?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80"; + + return ( + + + + + + ); +} + +export default CardRaised;`; + +export default cardRaisedCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardRaised/index.js b/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardRaised/index.js new file mode 100644 index 00000000..020722e0 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardRaised/index.js @@ -0,0 +1,48 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import RaisedBlogCard from "examples/Cards/BlogCards/RaisedBlogCard"; + +function CardRaised() { + const image = + "https://images.unsplash.com/photo-1540553016722-983e48a2cd10?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80"; + + return ( + + + + + + ); +} + +export default CardRaised; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardRotate/code.js b/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardRotate/code.js new file mode 100644 index 00000000..90560401 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardRotate/code.js @@ -0,0 +1,47 @@ +const cardRotateCode = `// @mui material components +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import RotatingCard from "examples/Cards/RotatingCard"; +import RotatingCardFront from "examples/Cards/RotatingCard/RotatingCardFront"; +import RotatingCardBack from "examples/Cards/RotatingCard/RotatingCardBack"; + +// Images +import bgFront from "assets/images/rotating-card-bg-front.jpeg"; +import bgBack from "assets/images/rotating-card-bg-back.jpeg"; + +function CardRotate() { + return ( + + + + + Feel the +
+ Material Kit + + } + description="All the MUI components that you need in a development have been re-design with the new look." + /> + + + + + ); +} + +export default CardRotate;`; + +export default cardRotateCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardRotate/index.js b/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardRotate/index.js new file mode 100644 index 00000000..8843eea9 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardRotate/index.js @@ -0,0 +1,60 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import RotatingCard from "examples/Cards/RotatingCard"; +import RotatingCardFront from "examples/Cards/RotatingCard/RotatingCardFront"; +import RotatingCardBack from "examples/Cards/RotatingCard/RotatingCardBack"; + +// Images +import bgFront from "assets/images/rotating-card-bg-front.jpeg"; +import bgBack from "assets/images/rotating-card-bg-back.jpeg"; + +function CardRotate() { + return ( + + + + + Feel the +
+ Material Kit + + } + description="All the MUI components that you need in a development have been re-design with the new look." + /> + + + + + ); +} + +export default CardRotate; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardWithColoredShadow/code.js b/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardWithColoredShadow/code.js new file mode 100644 index 00000000..1f93fed3 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardWithColoredShadow/code.js @@ -0,0 +1,35 @@ +const cardWithColoredShadowCode = `// @mui material components +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import TransparentBlogCard from "examples/Cards/BlogCards/TransparentBlogCard"; + +// Images +import image from "assets/images/products/product-1-min.jpg"; + +function CardWithColoredShadow() { + return ( + + + + + + ); +} + +export default CardWithColoredShadow;`; + +export default cardWithColoredShadowCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardWithColoredShadow/index.js b/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardWithColoredShadow/index.js new file mode 100644 index 00000000..68a1d281 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/general-cards/components/CardWithColoredShadow/index.js @@ -0,0 +1,48 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import TransparentBlogCard from "examples/Cards/BlogCards/TransparentBlogCard"; + +// Images +import image from "assets/images/products/product-1-min.jpg"; + +function CardWithColoredShadow() { + return ( + + + + + + ); +} + +export default CardWithColoredShadow; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/general-cards/index.js b/components/react-todo-app/src/layouts/sections/page-sections/general-cards/index.js new file mode 100644 index 00000000..05b63ef7 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/general-cards/index.js @@ -0,0 +1,62 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// GeneralCards page components +import CardRaised from "layouts/sections/page-sections/general-cards/components/CardRaised"; +import CardImageInside from "layouts/sections/page-sections/general-cards/components/CardImageInside"; +import CardWithColoredShadow from "layouts/sections/page-sections/general-cards/components/CardWithColoredShadow"; +import CardRotate from "layouts/sections/page-sections/general-cards/components/CardRotate"; +import CardPricing from "layouts/sections/page-sections/general-cards/components/CardPricing"; + +// GeneralCards page components code +import cardRaisedCode from "layouts/sections/page-sections/general-cards/components/CardRaised/code"; +import cardImageInsideCode from "layouts/sections/page-sections/general-cards/components/CardImageInside/code"; +import cardWithColoredShadowCode from "layouts/sections/page-sections/general-cards/components/CardWithColoredShadow/code"; +import cardRotateCode from "layouts/sections/page-sections/general-cards/components/CardRotate/code"; +import cardPricingCode from "layouts/sections/page-sections/general-cards/components/CardPricing/code"; + +function GeneralCards() { + return ( + + + + + + + + + + + + + + + + + + ); +} + +export default GeneralCards; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/logo-areas/components/LogoAreaOne/code.js b/components/react-todo-app/src/layouts/sections/page-sections/logo-areas/components/LogoAreaOne/code.js new file mode 100644 index 00000000..7dbb94ee --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/logo-areas/components/LogoAreaOne/code.js @@ -0,0 +1,59 @@ +const logoAreaOneCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// 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 LogoAreaOne() { + return ( + + + + + More than 50+ brands trust Material + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default LogoAreaOne;`; + +export default logoAreaOneCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/logo-areas/components/LogoAreaOne/index.js b/components/react-todo-app/src/layouts/sections/page-sections/logo-areas/components/LogoAreaOne/index.js new file mode 100644 index 00000000..266959b6 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/logo-areas/components/LogoAreaOne/index.js @@ -0,0 +1,72 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// 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 LogoAreaOne() { + return ( + + + + + More than 50+ brands trust Material + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default LogoAreaOne; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/logo-areas/components/LogoAreaThree/code.js b/components/react-todo-app/src/layouts/sections/page-sections/logo-areas/components/LogoAreaThree/code.js new file mode 100644 index 00000000..5a025a4b --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/logo-areas/components/LogoAreaThree/code.js @@ -0,0 +1,59 @@ +const logoAreaThreeCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Images +import coinbase from "assets/images/logos/medium-logos/logo-coinbase.svg"; +import nasa from "assets/images/logos/medium-logos/logo-nasa.svg"; +import netflix from "assets/images/logos/medium-logos/logo-netflix.svg"; +import pinterest from "assets/images/logos/medium-logos/logo-pinterest.svg"; +import spotify from "assets/images/logos/medium-logos/logo-spotify.svg"; +import vodafone from "assets/images/logos/medium-logos/logo-vodafone.svg"; + +function LogoAreaThree() { + return ( + + + + + More than 50+ brands trust Material + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default LogoAreaThree;`; + +export default logoAreaThreeCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/logo-areas/components/LogoAreaThree/index.js b/components/react-todo-app/src/layouts/sections/page-sections/logo-areas/components/LogoAreaThree/index.js new file mode 100644 index 00000000..e5756a0a --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/logo-areas/components/LogoAreaThree/index.js @@ -0,0 +1,72 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Images +import coinbase from "assets/images/logos/medium-logos/logo-coinbase.svg"; +import nasa from "assets/images/logos/medium-logos/logo-nasa.svg"; +import netflix from "assets/images/logos/medium-logos/logo-netflix.svg"; +import pinterest from "assets/images/logos/medium-logos/logo-pinterest.svg"; +import spotify from "assets/images/logos/medium-logos/logo-spotify.svg"; +import vodafone from "assets/images/logos/medium-logos/logo-vodafone.svg"; + +function LogoAreaThree() { + return ( + + + + + More than 50+ brands trust Material + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default LogoAreaThree; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/logo-areas/components/LogoAreaTwo/code.js b/components/react-todo-app/src/layouts/sections/page-sections/logo-areas/components/LogoAreaTwo/code.js new file mode 100644 index 00000000..4d7992f2 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/logo-areas/components/LogoAreaTwo/code.js @@ -0,0 +1,95 @@ +const logoAreaTwoCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Divider from "@mui/material/Divider"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DefaultReviewCard from "examples/Cards/ReviewCards/DefaultReviewCard"; + +// Images +import team1 from "assets/images/team-3.jpg"; +import team2 from "assets/images/marie.jpg"; +import team3 from "assets/images/team-2.jpg"; +import appleLogo from "assets/images/logos/gray-logos/logo-apple.svg"; +import facebookLogo from "assets/images/logos/gray-logos/logo-facebook.svg"; +import behanceLogo from "assets/images/logos/gray-logos/logo-behance.svg"; +import spotifyLogo from "assets/images/logos/gray-logos/logo-spotify.svg"; +import coinbaseLogo from "assets/images/logos/gray-logos/logo-coinbase.svg"; +import pinterestLogo from "assets/images/logos/gray-logos/logo-pinterest.svg"; + +function LogoAreaTwo() { + return ( + + + + + Think about us + + + That's the main thing people are controlled by! Thoughts - their perception of + themselves!{" "} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default LogoAreaTwo;`; + +export default logoAreaTwoCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/logo-areas/components/LogoAreaTwo/index.js b/components/react-todo-app/src/layouts/sections/page-sections/logo-areas/components/LogoAreaTwo/index.js new file mode 100644 index 00000000..5fc6b5ee --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/logo-areas/components/LogoAreaTwo/index.js @@ -0,0 +1,108 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Divider from "@mui/material/Divider"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DefaultReviewCard from "examples/Cards/ReviewCards/DefaultReviewCard"; + +// Images +import team1 from "assets/images/team-3.jpg"; +import team2 from "assets/images/marie.jpg"; +import team3 from "assets/images/team-2.jpg"; +import appleLogo from "assets/images/logos/gray-logos/logo-apple.svg"; +import facebookLogo from "assets/images/logos/gray-logos/logo-facebook.svg"; +import behanceLogo from "assets/images/logos/gray-logos/logo-behance.svg"; +import spotifyLogo from "assets/images/logos/gray-logos/logo-spotify.svg"; +import coinbaseLogo from "assets/images/logos/gray-logos/logo-coinbase.svg"; +import pinterestLogo from "assets/images/logos/gray-logos/logo-pinterest.svg"; + +function LogoAreaTwo() { + return ( + + + + + Think about us + + + That's the main thing people are controlled by! Thoughts - their perception of + themselves!{" "} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default LogoAreaTwo; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/logo-areas/index.js b/components/react-todo-app/src/layouts/sections/page-sections/logo-areas/index.js new file mode 100644 index 00000000..4b3c86be --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/logo-areas/index.js @@ -0,0 +1,52 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Stats page components +import LogoAreaOne from "layouts/sections/page-sections/logo-areas/components/LogoAreaOne"; +import LogoAreaTwo from "layouts/sections/page-sections/logo-areas/components/LogoAreaTwo"; +import LogoAreaThree from "layouts/sections/page-sections/logo-areas/components/LogoAreaThree"; + +// Stats page components code +import logoAreaOneCode from "layouts/sections/page-sections/logo-areas/components/LogoAreaOne/code"; +import logoAreaTwoCode from "layouts/sections/page-sections/logo-areas/components/LogoAreaTwo/code"; +import logoAreaThreeCode from "layouts/sections/page-sections/logo-areas/components/LogoAreaThree/code"; + +function LogoAreas() { + return ( + + + + + + + + + + + + ); +} + +export default LogoAreas; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/page-headers/components/HeaderOne/code.js b/components/react-todo-app/src/layouts/sections/page-sections/page-headers/components/HeaderOne/code.js new file mode 100644 index 00000000..42ca0395 --- /dev/null +++ b/components/react-todo-app/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 PRO 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/components/react-todo-app/src/layouts/sections/page-sections/page-headers/components/HeaderOne/index.js b/components/react-todo-app/src/layouts/sections/page-sections/page-headers/components/HeaderOne/index.js new file mode 100644 index 00000000..9c79c175 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/page-headers/components/HeaderOne/index.js @@ -0,0 +1,191 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @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 PRO 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/components/react-todo-app/src/layouts/sections/page-sections/page-headers/components/HeaderThree/code.js b/components/react-todo-app/src/layouts/sections/page-sections/page-headers/components/HeaderThree/code.js new file mode 100644 index 00000000..4c3261ce --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/page-headers/components/HeaderThree/code.js @@ -0,0 +1,179 @@ +/* eslint-disable no-template-curly-in-string */ +const bgImage = + "`${linearGradient(rgba(gradients.dark.main, 0.4), rgba(gradients.dark.state, 0.4))}, url(${bgImage})`"; + +const headerThreeCode = `// @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 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +// Images +import bgImage from "assets/images/bg-presentation.jpg"; + +function HeaderThree() { + return ( + + + + + + Material Design + + + + + + + e.preventDefault()} + > + Home + + + + e.preventDefault()} + > + About Us + + + + e.preventDefault()} + > + Contact Us + + + + buy now + + + + ${bgImage}, + backgroundSize: "cover", + backgroundPosition: "center", + }} + > + + + ({ + [breakpoints.down("md")]: { + fontSize: size["3xl"], + }, + })} + mb={3} + > + Work with an amazing + + + We're constantly trying to express ourselves and actualize our dreams. If you + have the opportunity to play this game. If you have the opportunity to play this game. + + + connect with us on: + + + e.preventDefault()} + > + + + e.preventDefault()} + > + + + e.preventDefault()} + > + + + e.preventDefault()} + > + + + + + + + + ); +} + +export default HeaderThree;`; + +export default headerThreeCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/page-headers/components/HeaderThree/index.js b/components/react-todo-app/src/layouts/sections/page-sections/page-headers/components/HeaderThree/index.js new file mode 100644 index 00000000..f677cce0 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/page-headers/components/HeaderThree/index.js @@ -0,0 +1,193 @@ +/* eslint-disable no-unused-vars */ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @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 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +// Images +import bgImage from "assets/images/bg-presentation.jpg"; + +function HeaderThree() { + return ( + + + + + + Material Design + + + + + + + e.preventDefault()} + > + Home + + + + e.preventDefault()} + > + About Us + + + + e.preventDefault()} + > + Contact Us + + + + buy now + + + + + `${linearGradient( + rgba(gradients.dark.main, 0.4), + rgba(gradients.dark.state, 0.4) + )}, url(${bgImage})`, + backgroundSize: "cover", + backgroundPosition: "center", + }} + > + + + ({ + [breakpoints.down("md")]: { + fontSize: size["3xl"], + }, + })} + mb={3} + > + Work with an amazing + + + We're constantly trying to express ourselves and actualize our dreams. If you + have the opportunity to play this game. If you have the opportunity to play this game. + + + connect with us on: + + + e.preventDefault()} + > + + + e.preventDefault()} + > + + + e.preventDefault()} + > + + + e.preventDefault()} + > + + + + + + + + ); +} + +export default HeaderThree; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/page-headers/components/HeaderTwo/code.js b/components/react-todo-app/src/layouts/sections/page-sections/page-headers/components/HeaderTwo/code.js new file mode 100644 index 00000000..2f67ae91 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/page-headers/components/HeaderTwo/code.js @@ -0,0 +1,202 @@ +/* eslint-disable no-template-curly-in-string */ +const bgImage = + "`${linearGradient(rgba(gradients.info.main, 0.5), rgba(gradients.info.state, 0.5))}, url(${bgImage})`"; + +const headerTwoCode = `import { useEffect, useRef } from "react"; + +// typed-js +import Typed from "typed.js"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Link from "@mui/material/Link"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +// Images +import bgImage from "assets/images/bg-about-us.jpg"; + +function HeaderTwo() { + const typedJSRef = useRef(null); + + // Setting up typedJS + useEffect(() => { + const typedJS = new Typed(typedJSRef.current, { + strings: ["web design", "web development", "mobile development"], + typeSpeed: 70, + backSpeed: 70, + backDelay: 200, + startDelay: 500, + loop: true, + }); + + return () => typedJS.destroy(); + }, []); + + 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"], + }, + })} + > + Our company mission is to lead the + + + The time is now for it to be okay to be great. People in this world shun people for + being great. For being a bright color. + + contact us + + + + + ); +} + +export default HeaderTwo;`; + +export default headerTwoCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/page-headers/components/HeaderTwo/index.js b/components/react-todo-app/src/layouts/sections/page-sections/page-headers/components/HeaderTwo/index.js new file mode 100644 index 00000000..1bd2d796 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/page-headers/components/HeaderTwo/index.js @@ -0,0 +1,216 @@ +/* eslint-disable no-unused-vars */ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { useEffect, useRef } from "react"; + +// typed-js +import Typed from "typed.js"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Link from "@mui/material/Link"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +// Images +import bgImage from "assets/images/bg-about-us.jpg"; + +function HeaderTwo() { + const typedJSRef = useRef(null); + + // Setting up typedJS + useEffect(() => { + const typedJS = new Typed(typedJSRef.current, { + strings: ["web design", "web development", "mobile development"], + typeSpeed: 70, + backSpeed: 70, + backDelay: 200, + startDelay: 500, + loop: true, + }); + + return () => typedJS.destroy(); + }, []); + + return ( + + + + + + Material Design + + + + + + + e.preventDefault()} + > + Home + + + + e.preventDefault()} + > + About Us + + + + e.preventDefault()} + > + Contact Us + + + + + + e.preventDefault()} + > + + + + + e.preventDefault()} + > + + + + + e.preventDefault()} + > + + + + + + + + + `${linearGradient( + rgba(gradients.info.main, 0.4), + rgba(gradients.info.state, 0.4) + )}, url(${bgImage})`, + backgroundSize: "cover", + backgroundPosition: "center", + }} + > + + + ({ + [breakpoints.down("md")]: { + fontSize: size["3xl"], + }, + })} + > + Our company mission is to lead the + + + The time is now for it to be okay to be great. People in this world shun people for + being great. For being a bright color. + + contact us + + + + + ); +} + +export default HeaderTwo; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/page-headers/index.js b/components/react-todo-app/src/layouts/sections/page-sections/page-headers/index.js new file mode 100644 index 00000000..1b6c727f --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/page-headers/index.js @@ -0,0 +1,52 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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"; +import HeaderTwo from "layouts/sections/page-sections/page-headers/components/HeaderTwo"; +import HeaderThree from "layouts/sections/page-sections/page-headers/components/HeaderThree"; + +// PageHeaders page components code +import headerOneCode from "layouts/sections/page-sections/page-headers/components/HeaderOne/code"; +import headerTwoCode from "layouts/sections/page-sections/page-headers/components/HeaderTwo/code"; +import headerThreeCode from "layouts/sections/page-sections/page-headers/components/HeaderThree/code"; + +function PageHeaders() { + return ( + + + + + + + + + + + + ); +} + +export default PageHeaders; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/pricing/components/PricingOne/code.js b/components/react-todo-app/src/layouts/sections/page-sections/pricing/components/PricingOne/code.js new file mode 100644 index 00000000..c6d7016e --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/pricing/components/PricingOne/code.js @@ -0,0 +1,145 @@ +const featuresOneCode = `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"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DefaultPricingCard from "examples/Cards/PricingCards/DefaultPricingCard"; + +function PricingOne() { + const [activeTab, setActiveTab] = useState(0); + const [tabType, setTabType] = useState("monthly"); + + const handleTabType = ({ currentTarget }, newValue) => { + setActiveTab(newValue); + setTabType(currentTarget.id); + }; + + return ( + + + + + See our pricing + + + You have Free Unlimited Updates and Premium Support on each package. + + + + + + + + + + + Monthly + + } + /> + + Annual + + } + /> + + + + + + + + + + + + + + + + + + + + + ); +} + +export default PricingOne;`; + +export default featuresOneCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/pricing/components/PricingOne/index.js b/components/react-todo-app/src/layouts/sections/page-sections/pricing/components/PricingOne/index.js new file mode 100644 index 00000000..dbbe3b44 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/pricing/components/PricingOne/index.js @@ -0,0 +1,160 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { 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"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DefaultPricingCard from "examples/Cards/PricingCards/DefaultPricingCard"; + +function PricingOne() { + const [activeTab, setActiveTab] = useState(0); + const [tabType, setTabType] = useState("monthly"); + + const handleTabType = ({ currentTarget }, newValue) => { + setActiveTab(newValue); + setTabType(currentTarget.id); + }; + + return ( + + + + + + See our pricing + + + You have Free Unlimited Updates and Premium Support on each package. + + + + + + + + + + + + Monthly + + } + /> + + Annual + + } + /> + + + + + + + + + + + + + + + + + + + + + ); +} + +export default PricingOne; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/pricing/components/PricingThree/code.js b/components/react-todo-app/src/layouts/sections/page-sections/pricing/components/PricingThree/code.js new file mode 100644 index 00000000..45d89f61 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/pricing/components/PricingThree/code.js @@ -0,0 +1,113 @@ +const featuresThreeCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +function PricingThree() { + return ( + + + + + Best no-tricks pricing + + + If you're not satisfied, contact us within the first 30 days and we'll send + you a full refund. + + + + + + + + + Lifetime Membership + + + You have Free Unlimited Updates and Premium Support on each package. You also + have 30 days to request a refund. + + + What's included + + + + + + done + + + Private code access + + + + + done + + + Free entry to all repositories + + + + + + + done + + + Pro member accounts + + + + + done + + + Support team full assist + + + + + + + + + + Pay once, own it forever + + + $399 + + + Get Access + + + Get a free sample (20MB) + + + + + + + + + ); +} + +export default PricingThree;`; + +export default featuresThreeCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/pricing/components/PricingThree/index.js b/components/react-todo-app/src/layouts/sections/page-sections/pricing/components/PricingThree/index.js new file mode 100644 index 00000000..eb75ffca --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/pricing/components/PricingThree/index.js @@ -0,0 +1,126 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +function PricingThree() { + return ( + + + + + Best no-tricks pricing + + + If you're not satisfied, contact us within the first 30 days and we'll send + you a full refund. + + + + + + + + + Lifetime Membership + + + You have Free Unlimited Updates and Premium Support on each package. You also + have 30 days to request a refund. + + + What's included + + + + + + done + + + Private code access + + + + + done + + + Free entry to all repositories + + + + + + + done + + + Pro member accounts + + + + + done + + + Support team full assist + + + + + + + + + + Pay once, own it forever + + + $399 + + + Get Access + + + Get a free sample (20MB) + + + + + + + + + ); +} + +export default PricingThree; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/pricing/components/PricingTwo/code.js b/components/react-todo-app/src/layouts/sections/page-sections/pricing/components/PricingTwo/code.js new file mode 100644 index 00000000..75100ff0 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/pricing/components/PricingTwo/code.js @@ -0,0 +1,144 @@ +const featuresTwoCode = `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"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import SimplePricingCard from "examples/Cards/PricingCards/SimplePricingCard"; + +function PricingTwo() { + const [activeTab, setActiveTab] = useState(0); + + const handleTabType = (event, newValue) => setActiveTab(newValue); + + return ( + + + + Pick the best plan for you + + You have Free Unlimited Updates and Premium Support on each package. + + + + + + + Monthly + + } + /> + + Quarterly + + } + /> + + Annual + + } + /> + + Lifetime access + + } + /> + + + + + + + + + + + + + + + + + + + + ); +} + +export default PricingTwo;`; + +export default featuresTwoCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/pricing/components/PricingTwo/index.js b/components/react-todo-app/src/layouts/sections/page-sections/pricing/components/PricingTwo/index.js new file mode 100644 index 00000000..905bf05f --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/pricing/components/PricingTwo/index.js @@ -0,0 +1,156 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { 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"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import SimplePricingCard from "examples/Cards/PricingCards/SimplePricingCard"; + +function PricingTwo() { + const [activeTab, setActiveTab] = useState(0); + + const handleTabType = (event, newValue) => setActiveTab(newValue); + + return ( + + + + Pick the best plan for you + + You have Free Unlimited Updates and Premium Support on each package. + + + + + + + Monthly + + } + /> + + Quarterly + + } + /> + + Annual + + } + /> + + Lifetime access + + } + /> + + + + + + + + + + + + + + + + + + + + ); +} + +export default PricingTwo; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/pricing/index.js b/components/react-todo-app/src/layouts/sections/page-sections/pricing/index.js new file mode 100644 index 00000000..f5055967 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/pricing/index.js @@ -0,0 +1,59 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Pricing page components +import PricingOne from "layouts/sections/page-sections/pricing/components/PricingOne"; +import PricingTwo from "layouts/sections/page-sections/pricing/components/PricingTwo"; +import PricingThree from "layouts/sections/page-sections/pricing/components/PricingThree"; + +// Pricing page components code +import pricingOneCode from "layouts/sections/page-sections/pricing/components/PricingOne/code"; +import pricingTwoCode from "layouts/sections/page-sections/pricing/components/PricingTwo/code"; +import pricingThreeCode from "layouts/sections/page-sections/pricing/components/PricingThree/code"; + +function Pricing() { + return ( + + + + + + + + + + + + + + + + ); +} + +export default Pricing; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/stats/components/StatsOne/code.js b/components/react-todo-app/src/layouts/sections/page-sections/stats/components/StatsOne/code.js new file mode 100644 index 00000000..98f0e964 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/stats/components/StatsOne/code.js @@ -0,0 +1,45 @@ +const statsOneCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import DefaultCounterCard from "examples/Cards/CounterCards/DefaultCounterCard"; + +function StatsOne() { + return ( + + + + + + + + + + + + + + + + ); +} + +export default StatsOne;`; + +export default statsOneCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/stats/components/StatsOne/index.js b/components/react-todo-app/src/layouts/sections/page-sections/stats/components/StatsOne/index.js new file mode 100644 index 00000000..d43f0216 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/stats/components/StatsOne/index.js @@ -0,0 +1,58 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import DefaultCounterCard from "examples/Cards/CounterCards/DefaultCounterCard"; + +function StatsOne() { + return ( + + + + + + + + + + + + + + + + ); +} + +export default StatsOne; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/stats/components/StatsThree/code.js b/components/react-todo-app/src/layouts/sections/page-sections/stats/components/StatsThree/code.js new file mode 100644 index 00000000..f5b5ad23 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/stats/components/StatsThree/code.js @@ -0,0 +1,46 @@ +const stateTwoCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import DefaultCounterCard from "examples/Cards/CounterCards/DefaultCounterCard"; + +function StatsTwo() { + return ( + + + + + + + + + + + + + + + + ); +} + +export default StatsTwo;`; + +export default stateTwoCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/stats/components/StatsThree/index.js b/components/react-todo-app/src/layouts/sections/page-sections/stats/components/StatsThree/index.js new file mode 100644 index 00000000..b0272ffa --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/stats/components/StatsThree/index.js @@ -0,0 +1,60 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import DefaultCounterCard from "examples/Cards/CounterCards/DefaultCounterCard"; + +function StatsThree() { + return ( + + + + + + + + + + + + + + + + ); +} + +export default StatsThree; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/stats/components/StatsTwo/code.js b/components/react-todo-app/src/layouts/sections/page-sections/stats/components/StatsTwo/code.js new file mode 100644 index 00000000..a954c3d5 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/stats/components/StatsTwo/code.js @@ -0,0 +1,50 @@ +const statsTwoCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import DefaultCounterCard from "examples/Cards/CounterCards/DefaultCounterCard"; + +function StatsTwo() { + return ( + + + + + + + + + + + + + + + + ); +} + +export default StatsTwo;`; + +export default statsTwoCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/stats/components/StatsTwo/index.js b/components/react-todo-app/src/layouts/sections/page-sections/stats/components/StatsTwo/index.js new file mode 100644 index 00000000..8fea3642 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/stats/components/StatsTwo/index.js @@ -0,0 +1,63 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import DefaultCounterCard from "examples/Cards/CounterCards/DefaultCounterCard"; + +function StatsTwo() { + return ( + + + + + + + + + + + + + + + + ); +} + +export default StatsTwo; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/stats/index.js b/components/react-todo-app/src/layouts/sections/page-sections/stats/index.js new file mode 100644 index 00000000..702ba839 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/stats/index.js @@ -0,0 +1,52 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Stats page components +import StatsOne from "layouts/sections/page-sections/stats/components/StatsOne"; +import StatsTwo from "layouts/sections/page-sections/stats/components/StatsTwo"; +import StatsThree from "layouts/sections/page-sections/stats/components/StatsThree"; + +// Stats page components code +import statsOneCode from "layouts/sections/page-sections/stats/components/StatsOne/code"; +import statsTwoCode from "layouts/sections/page-sections/stats/components/StatsTwo/code"; +import statsThreeCode from "layouts/sections/page-sections/stats/components/StatsThree/code"; + +function Stats() { + return ( + + + + + + + + + + + + ); +} + +export default Stats; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/teams/components/TeamOne/code.js b/components/react-todo-app/src/layouts/sections/page-sections/teams/components/TeamOne/code.js new file mode 100644 index 00000000..e9ce9988 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/teams/components/TeamOne/code.js @@ -0,0 +1,121 @@ +const teamOneCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; +import Tooltip from "@mui/material/Tooltip"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import TransparentTeamCard from "examples/Cards/TeamCards/TransparentTeamCard"; + +// Images +import team1 from "assets/images/bruce-mars.jpg"; +import team2 from "assets/images/team-3.jpg"; +import team3 from "assets/images/team-4.jpg"; + +function Team1() { + const socialIcons = ( + <> + + socialMediaColors.twitter.main, + cursor: "pointer", + }} + /> + + + socialMediaColors.dribbble.main, + cursor: "pointer", + }} + /> + + + socialMediaColors.linkedin.main, + cursor: "pointer", + }} + /> + + + ); + + return ( + + + + + supervisor_account + + + Our Awesome Team + + + This is the paragraph where you can write more details about your team. Keep you user + engaged by providing meaningful information. + + + + + + + + + + + + + + + + ); +} + +export default Team1;`; + +export default teamOneCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/teams/components/TeamOne/index.js b/components/react-todo-app/src/layouts/sections/page-sections/teams/components/TeamOne/index.js new file mode 100644 index 00000000..f43f884f --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/teams/components/TeamOne/index.js @@ -0,0 +1,134 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; +import Tooltip from "@mui/material/Tooltip"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import TransparentTeamCard from "examples/Cards/TeamCards/TransparentTeamCard"; + +// Images +import team1 from "assets/images/bruce-mars.jpg"; +import team2 from "assets/images/team-3.jpg"; +import team3 from "assets/images/team-4.jpg"; + +function Team1() { + const socialIcons = ( + <> + + socialMediaColors.twitter.main, + cursor: "pointer", + }} + /> + + + socialMediaColors.dribbble.main, + cursor: "pointer", + }} + /> + + + socialMediaColors.linkedin.main, + cursor: "pointer", + }} + /> + + + ); + + return ( + + + + + supervisor_account + + + Our Awesome Team + + + This is the paragraph where you can write more details about your team. Keep you user + engaged by providing meaningful information. + + + + + + + + + + + + + + + + ); +} + +export default Team1; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/teams/components/TeamTwo/code.js b/components/react-todo-app/src/layouts/sections/page-sections/teams/components/TeamTwo/code.js new file mode 100644 index 00000000..4e9fe29e --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/teams/components/TeamTwo/code.js @@ -0,0 +1,110 @@ +/* eslint-disable no-template-curly-in-string */ +const bgImage = + "`${linearGradient(rgba(gradients.dark.main, 0.8), rgba(gradients.dark.state, 0.8) )}, url(${bgImage})`"; + +const teamTwoCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import HorizontalTeamCard from "examples/Cards/TeamCards/HorizontalTeamCard"; + +// Images +import bgImage from "assets/images/examples/city.jpg"; +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 TeamTwo() { + return ( + ${bgImage}, + }} + > + + + + + supervisor_account + + + 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 TeamTwo;`; + +export default teamTwoCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/teams/components/TeamTwo/index.js b/components/react-todo-app/src/layouts/sections/page-sections/teams/components/TeamTwo/index.js new file mode 100644 index 00000000..348cf7e0 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/teams/components/TeamTwo/index.js @@ -0,0 +1,123 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import HorizontalTeamCard from "examples/Cards/TeamCards/HorizontalTeamCard"; + +// Images +import bgImage from "assets/images/examples/city.jpg"; +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 TeamTwo() { + return ( + + `${linearGradient( + rgba(gradients.dark.main, 0.8), + rgba(gradients.dark.state, 0.8) + )}, url(${bgImage})`, + }} + > + + + + + supervisor_account + + + 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 TeamTwo; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/teams/index.js b/components/react-todo-app/src/layouts/sections/page-sections/teams/index.js new file mode 100644 index 00000000..35b85232 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/teams/index.js @@ -0,0 +1,52 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Pricing page components +import TeamOne from "layouts/sections/page-sections/teams/components/TeamOne"; +import TeamTwo from "layouts/sections/page-sections/teams/components/TeamTwo"; + +// Pricing page components code +import teamOneCode from "layouts/sections/page-sections/teams/components/TeamOne/code"; +import teamTwoCode from "layouts/sections/page-sections/teams/components/TeamTwo/code"; + +function Teams() { + return ( + + + + + + + + + + + ); +} + +export default Teams; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/testimonials/components/TestimonialsOne/code.js b/components/react-todo-app/src/layouts/sections/page-sections/testimonials/components/TestimonialsOne/code.js new file mode 100644 index 00000000..2f5af94d --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/testimonials/components/TestimonialsOne/code.js @@ -0,0 +1,95 @@ +const testimonialOneCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Divider from "@mui/material/Divider"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DefaultReviewCard from "examples/Cards/ReviewCards/DefaultReviewCard"; + +// Images +import team1 from "assets/images/team-3.jpg"; +import team2 from "assets/images/marie.jpg"; +import team3 from "assets/images/team-2.jpg"; +import appleLogo from "assets/images/logos/gray-logos/logo-apple.svg"; +import facebookLogo from "assets/images/logos/gray-logos/logo-facebook.svg"; +import behanceLogo from "assets/images/logos/gray-logos/logo-behance.svg"; +import spotifyLogo from "assets/images/logos/gray-logos/logo-spotify.svg"; +import coinbaseLogo from "assets/images/logos/gray-logos/logo-coinbase.svg"; +import pinterestLogo from "assets/images/logos/gray-logos/logo-pinterest.svg"; + +function TestimonialsOne() { + return ( + + + + + Think about us + + + That's the main thing people are controlled by! Thoughts - their perception of + themselves!{" "} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default TestimonialsOne;`; + +export default testimonialOneCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/testimonials/components/TestimonialsOne/index.js b/components/react-todo-app/src/layouts/sections/page-sections/testimonials/components/TestimonialsOne/index.js new file mode 100644 index 00000000..c86d7813 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/testimonials/components/TestimonialsOne/index.js @@ -0,0 +1,108 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Divider from "@mui/material/Divider"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DefaultReviewCard from "examples/Cards/ReviewCards/DefaultReviewCard"; + +// Images +import team1 from "assets/images/team-3.jpg"; +import team2 from "assets/images/marie.jpg"; +import team3 from "assets/images/team-2.jpg"; +import appleLogo from "assets/images/logos/gray-logos/logo-apple.svg"; +import facebookLogo from "assets/images/logos/gray-logos/logo-facebook.svg"; +import behanceLogo from "assets/images/logos/gray-logos/logo-behance.svg"; +import spotifyLogo from "assets/images/logos/gray-logos/logo-spotify.svg"; +import coinbaseLogo from "assets/images/logos/gray-logos/logo-coinbase.svg"; +import pinterestLogo from "assets/images/logos/gray-logos/logo-pinterest.svg"; + +function TestimonialsOne() { + return ( + + + + + Think about us + + + That's the main thing people are controlled by! Thoughts - their perception of + themselves!{" "} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default TestimonialsOne; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/testimonials/components/TestimonialsThree/code.js b/components/react-todo-app/src/layouts/sections/page-sections/testimonials/components/TestimonialsThree/code.js new file mode 100644 index 00000000..05202293 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/testimonials/components/TestimonialsThree/code.js @@ -0,0 +1,90 @@ +const testimonialsThreeCode = `// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKBadge from "components/MKBadge"; + +// Material Kit 2 PRO React components +import SimpleReviewCard from "examples/Cards/ReviewCards/SimpleReviewCard"; + +// Images +import bgPattern from "assets/images/shapes/pattern-lines.svg"; +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 TestimonialsThree() { + return ( + + + + + + + + Some thoughts from our clients + + + If you're selected for them you'll also get three tickets, opportunity to + access Investor Office Hours and Mentor Hours and much more all for free. + + + + + + + + + + + + + + + + + ); +} + +export default TestimonialsThree;`; + +export default testimonialsThreeCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/testimonials/components/TestimonialsThree/index.js b/components/react-todo-app/src/layouts/sections/page-sections/testimonials/components/TestimonialsThree/index.js new file mode 100644 index 00000000..41cc0bce --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/testimonials/components/TestimonialsThree/index.js @@ -0,0 +1,103 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKBadge from "components/MKBadge"; + +// Material Kit 2 PRO React components +import SimpleReviewCard from "examples/Cards/ReviewCards/SimpleReviewCard"; + +// Images +import bgPattern from "assets/images/shapes/pattern-lines.svg"; +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 TestimonialsThree() { + return ( + + + + + + + + Some thoughts from our clients + + + If you're selected for them you'll also get three tickets, opportunity to + access Investor Office Hours and Mentor Hours and much more all for free. + + + + + + + + + + + + + + + + + ); +} + +export default TestimonialsThree; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/testimonials/components/TestimonialsTwo/code.js b/components/react-todo-app/src/layouts/sections/page-sections/testimonials/components/TestimonialsTwo/code.js new file mode 100644 index 00000000..ac104e8b --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/testimonials/components/TestimonialsTwo/code.js @@ -0,0 +1,132 @@ +const testimonialsTwoCode = `import { useRef } from "react"; + +// SwiperJS +import SwiperCore, { Autoplay, Navigation } from "swiper"; + +// SwiperJS react components +import { Swiper, SwiperSlide } from "swiper/react/swiper-react"; + +// SwiperJS styles +import "swiper/swiper.min.css"; +import "swiper/modules/navigation/navigation.min.css"; + +// @mui material components +import Container from "@mui/material/Container"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import ComplexReviewCard from "examples/Cards/ReviewCards/ComplexReviewCard"; + +// Images +import review1 from "assets/images/examples/clem-onojegaw.jpg"; +import review2 from "assets/images/examples/studio-3.jpg"; +import logoSpotify from "assets/images/logos/small-logos/logo-spotify.svg"; +import logoSlack from "assets/images/logos/small-logos/logo-slack.svg"; + +function TestimonialsTwo() { + // install SwiperJS modules + SwiperCore.use([Autoplay, Navigation]); + + // Swiper navigation buttons styles + const navigationStyles = { + position: "absolute", + top: 0, + zIndex: 1, + display: "flex", + alignItems: "center", + justifyContent: "center", + width: "15%", + height: "100%", + textAlign: "center", + opacity: 0.5, + cursor: "pointer", + transition: "opacity 0.15s ease", + + "&:hover, &:focus": { + opacity: 1, + }, + }; + + // SwiperJS navigation buttons ref + const navigationPrevRef = useRef(null); + const navigationNextRef = useRef(null); + + return ( + + { + const { navigation: nav } = params; + + nav.prevEl = navigationPrevRef.current; + nav.nextEl = navigationNextRef.current; + navigation.init(); + navigation.update(); + }} + autoplay={{ delay: 5000 }} + speed={800} + spaceBetween={0} + slidesPerView={1} + loop + > + + + + + + + + + + + + chevron_left + + + chevron_right + + + + ); +} + +export default TestimonialsTwo;`; + +export default testimonialsTwoCode; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/testimonials/components/TestimonialsTwo/index.js b/components/react-todo-app/src/layouts/sections/page-sections/testimonials/components/TestimonialsTwo/index.js new file mode 100644 index 00000000..515c77d6 --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/testimonials/components/TestimonialsTwo/index.js @@ -0,0 +1,145 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { useRef } from "react"; + +// SwiperJS +import SwiperCore, { Autoplay, Navigation } from "swiper"; + +// SwiperJS react components +import { Swiper, SwiperSlide } from "swiper/react"; + +// SwiperJS styles +import "swiper/swiper.min.css"; +import "swiper/css/navigation"; + +// @mui material components +import Container from "@mui/material/Container"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import ComplexReviewCard from "examples/Cards/ReviewCards/ComplexReviewCard"; + +// Images +import review1 from "assets/images/examples/clem-onojegaw.jpg"; +import review2 from "assets/images/examples/studio-3.jpg"; +import logoSpotify from "assets/images/logos/small-logos/logo-spotify.svg"; +import logoSlack from "assets/images/logos/small-logos/logo-slack.svg"; + +function TestimonialsTwo() { + // install SwiperJS modules + SwiperCore.use([Autoplay, Navigation]); + + // Swiper navigation buttons styles + const navigationStyles = { + position: "absolute", + top: 0, + zIndex: 1, + display: "flex", + alignItems: "center", + justifyContent: "center", + width: "15%", + height: "100%", + textAlign: "center", + opacity: 0.5, + cursor: "pointer", + transition: "opacity 0.15s ease", + + "&:hover, &:focus": { + opacity: 1, + }, + }; + + // SwiperJS navigation buttons ref + const navigationPrevRef = useRef(null); + const navigationNextRef = useRef(null); + + return ( + + { + const { navigation: nav } = params; + + nav.prevEl = navigationPrevRef.current; + nav.nextEl = navigationNextRef.current; + navigation.init(); + navigation.update(); + }} + autoplay={{ delay: 5000 }} + speed={800} + spaceBetween={0} + slidesPerView={1} + loop + > + + + + + + + + + + + + chevron_left + + + chevron_right + + + + ); +} + +export default TestimonialsTwo; diff --git a/components/react-todo-app/src/layouts/sections/page-sections/testimonials/index.js b/components/react-todo-app/src/layouts/sections/page-sections/testimonials/index.js new file mode 100644 index 00000000..b48f373c --- /dev/null +++ b/components/react-todo-app/src/layouts/sections/page-sections/testimonials/index.js @@ -0,0 +1,59 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Sections components +import BaseLayout from "layouts/sections/components/BaseLayout"; +import View from "layouts/sections/components/View"; + +// Pricing page components +import TestimonialsOne from "layouts/sections/page-sections/testimonials/components/TestimonialsOne"; +import TestimonialsTwo from "layouts/sections/page-sections/testimonials/components/TestimonialsTwo"; +import TestimonialsThree from "layouts/sections/page-sections/testimonials/components/TestimonialsThree"; + +// Pricing page components code +import testimonialOneCode from "layouts/sections/page-sections/testimonials/components/TestimonialsOne/code"; +import testimonialTwoCode from "layouts/sections/page-sections/testimonials/components/TestimonialsTwo/code"; +import testimonialThreeCode from "layouts/sections/page-sections/testimonials/components/TestimonialsThree/code"; + +function Testimonials() { + return ( + + + + + + + + + + + + + + + + ); +} + +export default Testimonials; diff --git a/components/react-todo-app/src/pages/Apps/DesktopApp/index.js b/components/react-todo-app/src/pages/Apps/DesktopApp/index.js new file mode 100644 index 00000000..eabfb548 --- /dev/null +++ b/components/react-todo-app/src/pages/Apps/DesktopApp/index.js @@ -0,0 +1,76 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +// import Container from "@mui/material/Container"; +// import Grid from "@mui/material/Grid"; +// import Card from "@mui/material/Card"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +// import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; +import DefaultFooter from "examples/Footers/DefaultFooter"; + +// DesktopApp page sections +import Banner from "pages/Apps/DesktopApp/sections/Banner"; +import Information from "pages/Apps/DesktopApp/sections/Information"; +import Features from "pages/Apps/DesktopApp/sections/Features"; +import Testimonials from "pages/Apps/DesktopApp/sections/Testimonials"; +import Pricing from "pages/Apps/DesktopApp/sections/Pricing"; + +// Routes +import routes from "routes"; +import footerRoutes from "footer.routes"; + +function DesktopApp() { + return ( + <> + + + + linearGradient(gradients.dark.main, gradients.dark.state), + }} + /> + + + + + + + + + + + ); +} + +export default DesktopApp; diff --git a/components/react-todo-app/src/pages/Apps/DesktopApp/sections/Banner.js b/components/react-todo-app/src/pages/Apps/DesktopApp/sections/Banner.js new file mode 100644 index 00000000..006cb2d2 --- /dev/null +++ b/components/react-todo-app/src/pages/Apps/DesktopApp/sections/Banner.js @@ -0,0 +1,85 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +// Images +import bgPattern from "assets/images/shapes/pattern-lines.svg"; +import laptop from "assets/images/macbook-2.png"; + +function Banner() { + return ( + + + + + + + Start building your awesome application + + + Elegance is the end result of hard work, not the starting point. Strive to make your + work so invisible that the reader thinks they could have written what you published. + Trusted by 5.000+ clients from all around the world. + + + Start now + + + Read more + + + + + + + + + ); +} + +export default Banner; diff --git a/components/react-todo-app/src/pages/Apps/DesktopApp/sections/Features.js b/components/react-todo-app/src/pages/Apps/DesktopApp/sections/Features.js new file mode 100644 index 00000000..300173f0 --- /dev/null +++ b/components/react-todo-app/src/pages/Apps/DesktopApp/sections/Features.js @@ -0,0 +1,111 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DefaultInfoCard from "examples/Cards/InfoCards/DefaultInfoCard"; + +// Images +import atlassian from "assets/images/logos/small-logos/logo-atlassian.svg"; +import asana from "assets/images/logos/small-logos/logo-asana.svg"; +import shopify from "assets/images/logos/small-logos/logo-shopify.svg"; +import invision from "assets/images/logos/small-logos/logo-invision.svg"; +import slack from "assets/images/logos/small-logos/logo-slack.svg"; +import webdev from "assets/images/logos/small-logos/logo-webdev.svg"; + +function Features() { + return ( + + + + + + Get your own app + + + The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, + and that process will continue whatever. + + + + + Contact Us + + + + + + } + title="Payment vendor" + description="Check out our proven methods, guides, and exercises that help make work better, and people happier." + small + /> + + + } + title="Organize your team" + description="Check out our proven methods, guides, and exercises that help make work better, and people happier." + small + /> + + + } + title="E-commerce" + description="Check out our proven methods, guides, and exercises that help make work better, and people happier." + small + /> + + + } + title="Digital Product Design" + description="Check out our proven methods, guides, and exercises that help make work better, and people happier." + small + /> + + + } + title="Better Communication" + description="Check out our proven methods, guides, and exercises that help make work better, and people happier." + small + /> + + + } + title="Logo design" + description="Check out our proven methods, guides, and exercises that help make work better, and people happier." + small + /> + + + + + ); +} + +export default Features; diff --git a/components/react-todo-app/src/pages/Apps/DesktopApp/sections/Information.js b/components/react-todo-app/src/pages/Apps/DesktopApp/sections/Information.js new file mode 100644 index 00000000..f9d3c8e0 --- /dev/null +++ b/components/react-todo-app/src/pages/Apps/DesktopApp/sections/Information.js @@ -0,0 +1,73 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import DefaultInfoCard from "examples/Cards/InfoCards/DefaultInfoCard"; + +function Information() { + return ( + + + + + + + + + + + + + + + + + + + ); +} + +export default Information; diff --git a/components/react-todo-app/src/pages/Apps/DesktopApp/sections/Pricing.js b/components/react-todo-app/src/pages/Apps/DesktopApp/sections/Pricing.js new file mode 100644 index 00000000..38d5fc49 --- /dev/null +++ b/components/react-todo-app/src/pages/Apps/DesktopApp/sections/Pricing.js @@ -0,0 +1,140 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { 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"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import SimplePricingCard from "examples/Cards/PricingCards/SimplePricingCard"; + +function Pricing() { + const [activeTab, setActiveTab] = useState(0); + + const handleTabType = (event, newValue) => setActiveTab(newValue); + + return ( + + + + Pick the best plan for you + + You have Free Unlimited Updates and Premium Support on each package. + + + + + + + Monthly + + } + /> + + Annual + + } + /> + + + + + + + + + + + + + + + + + + + + ); +} + +export default Pricing; diff --git a/components/react-todo-app/src/pages/Apps/DesktopApp/sections/Testimonials.js b/components/react-todo-app/src/pages/Apps/DesktopApp/sections/Testimonials.js new file mode 100644 index 00000000..003b4990 --- /dev/null +++ b/components/react-todo-app/src/pages/Apps/DesktopApp/sections/Testimonials.js @@ -0,0 +1,111 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Divider from "@mui/material/Divider"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React components +import MiniReviewCard from "examples/Cards/ReviewCards/MiniReviewCard"; + +// Images +import review1 from "assets/images/team-3.jpg"; +import review2 from "assets/images/marie.jpg"; +import review3 from "assets/images/team-2.jpg"; +import apple from "assets/images/logos/gray-logos/logo-apple.svg"; +import facebook from "assets/images/logos/gray-logos/logo-facebook.svg"; +import behance from "assets/images/logos/gray-logos/logo-behance.svg"; +import spotify from "assets/images/logos/gray-logos/logo-spotify.svg"; +import coinbase from "assets/images/logos/gray-logos/logo-coinbase.svg"; +import pinterest from "assets/images/logos/gray-logos/logo-pinterest.svg"; + +function Testimonials() { + return ( + + + + + What random people + + + Think about us + + + That's the main thing people are controlled by! Thoughts- their perception of + themselves!{" "} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default Testimonials; diff --git a/components/react-todo-app/src/pages/Authentication/ResetPassword/Cover/index.js b/components/react-todo-app/src/pages/Authentication/ResetPassword/Cover/index.js new file mode 100644 index 00000000..a2f3553c --- /dev/null +++ b/components/react-todo-app/src/pages/Authentication/ResetPassword/Cover/index.js @@ -0,0 +1,77 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Card from "@mui/material/Card"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; + +// Authentication layout components +import CoverLayout from "pages/Authentication/components/CoverLayout"; + +// Images +import bgImage from "assets/images/bg-reset-cover.jpeg"; + +function Cover() { + return ( + + + + + Reset Password + + + You will receive an e-mail in maximum 60 seconds + + + + + + + + + + reset + + + + + + + ); +} + +export default Cover; diff --git a/components/react-todo-app/src/pages/Authentication/SignIn/Basic/index.js b/components/react-todo-app/src/pages/Authentication/SignIn/Basic/index.js new file mode 100644 index 00000000..072cf0b7 --- /dev/null +++ b/components/react-todo-app/src/pages/Authentication/SignIn/Basic/index.js @@ -0,0 +1,131 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { useState } from "react"; + +// react-router-dom components +import { Link } from "react-router-dom"; + +// @mui material components +import Card from "@mui/material/Card"; +import Switch from "@mui/material/Switch"; +import Grid from "@mui/material/Grid"; +import MuiLink from "@mui/material/Link"; + +// @mui icons +import FacebookIcon from "@mui/icons-material/Facebook"; +import GitHubIcon from "@mui/icons-material/GitHub"; +import GoogleIcon from "@mui/icons-material/Google"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; + +// Authentication pages components +import BasicLayout from "pages/Authentication/components/BasicLayout"; + +// Images +import bgImage from "assets/images/bg-sign-in-basic.jpeg"; + +function SignInBasic() { + const [rememberMe, setRememberMe] = useState(false); + + const handleSetRememberMe = () => setRememberMe(!rememberMe); + + return ( + + + + + Sign in + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +   Remember me + + + + + sign in + + + + + Don't have an account?{" "} + + Sign up + + + + + + + + ); +} + +export default SignInBasic; diff --git a/components/react-todo-app/src/pages/Authentication/SignIn/Cover/index.js b/components/react-todo-app/src/pages/Authentication/SignIn/Cover/index.js new file mode 100644 index 00000000..aa45ba0d --- /dev/null +++ b/components/react-todo-app/src/pages/Authentication/SignIn/Cover/index.js @@ -0,0 +1,124 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { useState } from "react"; + +// react-router-dom components +import { Link } from "react-router-dom"; + +// @mui material components +import Card from "@mui/material/Card"; +import Switch from "@mui/material/Switch"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; + +// Authentication layout components +import CoverLayout from "pages/Authentication/components/CoverLayout"; + +// Images +import bgImage from "assets/images/bg-sign-in-cover.jpeg"; + +function SignInCover() { + const [rememberMe, setRememberMe] = useState(true); + + const handleSetRememberMe = () => setRememberMe(!rememberMe); + + return ( + + + + + Sign in + + + Enter your email and password to Sign In + + + + + + + + + + + + + +   Remember me + + + + + sign in + + + + + Don't have an account?{" "} + + Sign up + + + + + + + + ); +} + +export default SignInCover; diff --git a/components/react-todo-app/src/pages/Authentication/SignIn/Illustration/index.js b/components/react-todo-app/src/pages/Authentication/SignIn/Illustration/index.js new file mode 100644 index 00000000..2f733b21 --- /dev/null +++ b/components/react-todo-app/src/pages/Authentication/SignIn/Illustration/index.js @@ -0,0 +1,91 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { useState } from "react"; + +// react-router-dom components +import { Link } from "react-router-dom"; + +// @mui material components +import Switch from "@mui/material/Switch"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; + +// Authentication layout components +import IllustrationLayout from "pages/Authentication/components/IllustrationLayout"; + +// Image +import bgImage from "assets/images/illustrations/illustration-reset.jpg"; + +function Illustration() { + const [rememberMe, setRememberMe] = useState(false); + + const handleSetRememberMe = () => setRememberMe(!rememberMe); + + return ( + + + + + + + + + + + +   Remember me + + + + + sign in + + + + + Don't have an account?{" "} + + Sign up + + + + + + ); +} + +export default Illustration; diff --git a/components/react-todo-app/src/pages/Authentication/SignIn/Simple/index.js b/components/react-todo-app/src/pages/Authentication/SignIn/Simple/index.js new file mode 100644 index 00000000..7a7e440a --- /dev/null +++ b/components/react-todo-app/src/pages/Authentication/SignIn/Simple/index.js @@ -0,0 +1,113 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { useState } from "react"; + +// react-router-dom components +import { Link } from "react-router-dom"; + +// @mui material components +import Card from "@mui/material/Card"; +import Switch from "@mui/material/Switch"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; + +// Authentication layout components +import SimpleLayout from "pages/Authentication/components/SimpleLayout"; +import Separator from "pages/Authentication/components/Separator"; +import Socials from "pages/Authentication/components/Socials"; + +function SignInSimple() { + const [rememberMe, setRememberMe] = useState(true); + + const handleSetRememberMe = () => setRememberMe(!rememberMe); + + return ( + + + + + Sign in + + + Welcome back + + + + + + + + + + + + + +   Remember me + + + + + sign in + + + + + + + Don't have an account?{" "} + + Sign up + + + + + + + + ); +} + +export default SignInSimple; diff --git a/components/react-todo-app/src/pages/Authentication/SignUp/Cover/index.js b/components/react-todo-app/src/pages/Authentication/SignUp/Cover/index.js new file mode 100644 index 00000000..95331b2c --- /dev/null +++ b/components/react-todo-app/src/pages/Authentication/SignUp/Cover/index.js @@ -0,0 +1,116 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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-dom components +import { Link } from "react-router-dom"; + +// @mui material components +import Card from "@mui/material/Card"; +import Checkbox from "@mui/material/Checkbox"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; + +// Authentication layout components +import CoverLayout from "pages/Authentication/components/CoverLayout"; + +// Images +import bgImage from "assets/images/bg-sign-up-cover.jpeg"; + +function Cover() { + return ( + + + + + Join us today + + + Enter your email and password to register + + + + + + + + + + + + + + + + +   I agree the  + + + Terms and Conditions + + + + + sign in + + + + + Already have an account?{" "} + + Sign In + + + + + + + + ); +} + +export default Cover; diff --git a/components/react-todo-app/src/pages/Authentication/components/BasicLayout/index.js b/components/react-todo-app/src/pages/Authentication/components/BasicLayout/index.js new file mode 100644 index 00000000..6302c1b3 --- /dev/null +++ b/components/react-todo-app/src/pages/Authentication/components/BasicLayout/index.js @@ -0,0 +1,85 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React example components +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; +import SimpleFooter from "examples/Footers/SimpleFooter"; + +// Material kit 2 PRO React page layout routes +import routes from "routes"; + +function BasicLayout({ image, children }) { + return ( + <> + + + image && + `${linearGradient( + rgba(gradients.dark.main, 0.6), + rgba(gradients.dark.state, 0.6) + )}, url(${image})`, + backgroundSize: "cover", + backgroundPosition: "center", + backgroundRepeat: "no-repeat", + }} + /> + + + + {children} + + + + + + + + ); +} + +// Typechecking props for the BasicLayout +BasicLayout.propTypes = { + image: PropTypes.string.isRequired, + children: PropTypes.node.isRequired, +}; + +export default BasicLayout; diff --git a/components/react-todo-app/src/pages/Authentication/components/CoverLayout/index.js b/components/react-todo-app/src/pages/Authentication/components/CoverLayout/index.js new file mode 100644 index 00000000..4ec2c085 --- /dev/null +++ b/components/react-todo-app/src/pages/Authentication/components/CoverLayout/index.js @@ -0,0 +1,94 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +// import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React example components +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; +import SimpleFooter from "examples/Footers/SimpleFooter"; + +// Material kit 2 PRO React page layout routes +import routes from "routes"; + +function CoverLayout({ coverHeight, image, children }) { + return ( + + + + + + image && + `${linearGradient( + rgba(gradients.dark.main, 0.6), + rgba(gradients.dark.state, 0.6) + )}, url(${image})`, + backgroundSize: "cover", + backgroundPosition: "center", + backgroundRepeat: "no-repeat", + }} + /> + + + + {children} + + + + + + + + ); +} + +// Setting default props for the CoverLayout +CoverLayout.defaultProps = { + coverHeight: "35vh", +}; + +// Typechecking props for the CoverLayout +CoverLayout.propTypes = { + coverHeight: PropTypes.string, + image: PropTypes.string.isRequired, + children: PropTypes.node.isRequired, +}; + +export default CoverLayout; diff --git a/components/react-todo-app/src/pages/Authentication/components/IllustrationLayout/index.js b/components/react-todo-app/src/pages/Authentication/components/IllustrationLayout/index.js new file mode 100644 index 00000000..009d5c4f --- /dev/null +++ b/components/react-todo-app/src/pages/Authentication/components/IllustrationLayout/index.js @@ -0,0 +1,101 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React example components +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; + +// Material Kit 2 PRO React page layout routes +import routes from "routes"; + +function IllustrationLayout({ header, title, description, illustration, children }) { + return ( + + + + + + + + + + + + {!header ? ( + <> + + + {title} + + + + {description} + + + ) : ( + header + )} + + {children} + + + + + ); +} + +// Setting default values for the props of IllustrationLayout +IllustrationLayout.defaultProps = { + header: "", + title: "", + description: "", + illustration: "", +}; + +// Typechecking props for the IllustrationLayout +IllustrationLayout.propTypes = { + header: PropTypes.node, + title: PropTypes.string, + description: PropTypes.string, + children: PropTypes.node.isRequired, + illustration: PropTypes.string, +}; + +export default IllustrationLayout; diff --git a/components/react-todo-app/src/pages/Authentication/components/Separator/index.js b/components/react-todo-app/src/pages/Authentication/components/Separator/index.js new file mode 100644 index 00000000..2c57937d --- /dev/null +++ b/components/react-todo-app/src/pages/Authentication/components/Separator/index.js @@ -0,0 +1,66 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-2-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. +*/ + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function Separator() { + const separatorStyles = { + content: '""', + display: "inline-block", + width: "30%", + height: "1px", + position: "relative", + verticalAlign: "middle", + }; + + return ( + + + `linear-gradient(90deg, transparent, ${rgba(secondary.main, 0.4)}, ${rgba( + secondary.main, + 0.4 + )})`, + }, + "&::after": { + ...separatorStyles, + left: "0.5em", + marginRight: "-50%", + background: ({ functions: { rgba }, palette: { secondary } }) => + `linear-gradient(90deg, ${rgba(secondary.main, 0.4)}, ${rgba( + secondary.main, + 0.4 + )}, transparent)`, + }, + }} + > + or continue with + + + ); +} + +export default Separator; diff --git a/components/react-todo-app/src/pages/Authentication/components/SimpleLayout/index.js b/components/react-todo-app/src/pages/Authentication/components/SimpleLayout/index.js new file mode 100644 index 00000000..fb188282 --- /dev/null +++ b/components/react-todo-app/src/pages/Authentication/components/SimpleLayout/index.js @@ -0,0 +1,63 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +// import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React example components +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; +import CenteredFooter from "examples/Footers/CenteredFooter"; + +// Material kit 2 PRO React page layout routes +import routes from "routes"; + +function SimpleLayout({ children }) { + return ( + + + + + + {children} + + + + + + ); +} + +// Typechecking props for the SimpleLayout +SimpleLayout.propTypes = { + children: PropTypes.node.isRequired, +}; + +export default SimpleLayout; diff --git a/components/react-todo-app/src/pages/Authentication/components/Socials/index.js b/components/react-todo-app/src/pages/Authentication/components/Socials/index.js new file mode 100644 index 00000000..70b2eec7 --- /dev/null +++ b/components/react-todo-app/src/pages/Authentication/components/Socials/index.js @@ -0,0 +1,76 @@ +/** +========================================================= +* Material Kit 2 PRO React - v3.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-2-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. +*/ + +// Material Kit 2 PRO React components +import MKButton from "components/MKButton"; +import MKBox from "components/MKBox"; + +function Socials() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + {" "} + + + + + + + + + + + + ); +} + +export default Socials; diff --git a/components/react-todo-app/src/pages/Blogs/Author/index.js b/components/react-todo-app/src/pages/Blogs/Author/index.js new file mode 100644 index 00000000..702eaf60 --- /dev/null +++ b/components/react-todo-app/src/pages/Blogs/Author/index.js @@ -0,0 +1,88 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Card from "@mui/material/Card"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; + +// Author page sections +import Profile from "pages/Blogs/Author/sections/Profile"; +import Posts from "pages/Blogs/Author/sections/Posts"; +import Contact from "pages/Blogs/Author/sections/Contact"; +import Footer from "pages/Blogs/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, + }} + > + + + + +
+ + + ); +} + +export default Author; diff --git a/components/react-todo-app/src/pages/Blogs/Author/sections/Contact.js b/components/react-todo-app/src/pages/Blogs/Author/sections/Contact.js new file mode 100644 index 00000000..28293c2a --- /dev/null +++ b/components/react-todo-app/src/pages/Blogs/Author/sections/Contact.js @@ -0,0 +1,203 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +// Images +import bgImage from "assets/images/examples/blog2.jpg"; + +function Contact() { + return ( + + + + + + + `${linearGradient( + rgba(gradients.dark.main, 0.8), + rgba(gradients.dark.state, 0.8) + )}, url(${bgImage})`, + backgroundSize: "cover", + }} + > + + + + Contact Information + + + Fill up the form and our Team will get back to you within 24 hours. + + + + + + + (+40) 772 100 200 + + + + + + + + hello@creative-tim.com + + + + + + + + Dyonisie Wolf Bucharest, RO 010458 + + + + + + + + + + + + + + + + + + + + + + + + Say Hi! + + + We'd like to talk with you. + + + + + + + + + + + + + + + + + Send Message + + + + + + + + + + + ); +} + +export default Contact; diff --git a/components/react-todo-app/src/pages/Blogs/Author/sections/Footer.js b/components/react-todo-app/src/pages/Blogs/Author/sections/Footer.js new file mode 100644 index 00000000..9210a1f6 --- /dev/null +++ b/components/react-todo-app/src/pages/Blogs/Author/sections/Footer.js @@ -0,0 +1,169 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @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 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function Footer() { + return ( + + + + + + Material Design + + + + + Home + + + + + About + + + + + Blog + + + + + Services + + + + + Copyright © 2021 Material + Design by Creative Tim. + + + + + The reward for getting on the stage is fame. The price of fame is you can't get + off the stage. + + + + + + + + + + + + + + + + + + ); +} + +export default Footer; diff --git a/components/react-todo-app/src/pages/Blogs/Author/sections/Posts.js b/components/react-todo-app/src/pages/Blogs/Author/sections/Posts.js new file mode 100644 index 00000000..c111bfdc --- /dev/null +++ b/components/react-todo-app/src/pages/Blogs/Author/sections/Posts.js @@ -0,0 +1,101 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React components +import TransparentBlogCard from "examples/Cards/BlogCards/TransparentBlogCard"; +import BackgroundBlogCard from "examples/Cards/BlogCards/BackgroundBlogCard"; + +// Images +import post1 from "assets/images/examples/testimonial-6-2.jpg"; +import post2 from "assets/images/examples/testimonial-6-3.jpg"; +import post3 from "assets/images/examples/blog-9-4.jpg"; +import post4 from "assets/images/examples/blog2.jpg"; + +function Places() { + return ( + + + + + Check my latest blogposts + + + + + + + + + + + + + + + + + + + ); +} + +export default Places; diff --git a/components/react-todo-app/src/pages/Blogs/Author/sections/Profile.js b/components/react-todo-app/src/pages/Blogs/Author/sections/Profile.js new file mode 100644 index 00000000..742298d4 --- /dev/null +++ b/components/react-todo-app/src/pages/Blogs/Author/sections/Profile.js @@ -0,0 +1,109 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKAvatar from "components/MKAvatar"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +// Images +import profilePicture from "assets/images/bruce-mars.jpg"; + +function Profile() { + return ( + + + + + + + + + + Michael Roven + + Follow + + + + + + 323  + + + Posts + + + + + 3.5k  + + + Followers + + + + + 260  + + + Following + + + + + Decisions: If you can't decide, the answer is no. If two equally difficult + paths, choose the one more painful in the short term (pain avoidance is creating an + illusion of equality). Choose the path that leaves you more equanimous.
+ + More about me arrow_forward + + + + + + + + ); +} + +export default Profile; diff --git a/components/react-todo-app/src/pages/Blogs/SingleArticle/index.js b/components/react-todo-app/src/pages/Blogs/SingleArticle/index.js new file mode 100644 index 00000000..79ff9217 --- /dev/null +++ b/components/react-todo-app/src/pages/Blogs/SingleArticle/index.js @@ -0,0 +1,159 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { useEffect, useRef } from "react"; + +// rellax +import Rellax from "rellax"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Card from "@mui/material/Card"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; +import DefaultFooter from "examples/Footers/DefaultFooter"; + +// About Us page sections +import Information from "pages/Blogs/SingleArticle/sections/Information"; +import Steps from "pages/Blogs/SingleArticle/sections/Steps"; +import OurEfforts from "pages/Blogs/SingleArticle/sections/OurEfforts"; +import Features from "pages/Blogs/SingleArticle/sections/Features"; +import Posts from "pages/Blogs/SingleArticle/sections/Posts"; +import Support from "pages/Blogs/SingleArticle/sections/Support"; + +// Routes +import routes from "routes"; +import footerRoutes from "footer.routes"; + +// Images +import bgImage from "assets/images/bg5.jpg"; + +function SingleArticle() { + const headerRef = useRef(null); + + // Setting up rellax + useEffect(() => { + const parallax = new Rellax(headerRef.current, { + speed: -6, + }); + + return () => parallax.destroy(); + }, []); + + return ( + <> + + + + + `${linearGradient( + rgba(gradients.dark.main, 0.8), + rgba(gradients.dark.state, 0.8) + )}, url(${bgImage})`, + backgroundSize: "cover", + backgroundPosition: "center", + display: "grid", + placeItems: "center", + }} + > + + + ({ + [breakpoints.down("md")]: { + fontSize: size["3xl"], + }, + })} + > + Material Design - News + + + The time is now for it be okay to be great. People in this world shun people for being + nice. + + + Connect with us on + + + + + + + + + + + + + + + + + + + xxl, + }} + > + + + + + + + + + + + + ); +} + +export default SingleArticle; diff --git a/components/react-todo-app/src/pages/Blogs/SingleArticle/sections/Features.js b/components/react-todo-app/src/pages/Blogs/SingleArticle/sections/Features.js new file mode 100644 index 00000000..f3fb1a6c --- /dev/null +++ b/components/react-todo-app/src/pages/Blogs/SingleArticle/sections/Features.js @@ -0,0 +1,73 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function Features() { + const data = [ + { + icon: "credit_card", + name: "Modular Components", + }, + { + icon: "history_edu", + name: "Great Features", + }, + { + icon: "developer_mode", + name: "Modern Frameworks", + }, + { + icon: "history", + name: "24/7 Support", + }, + { + icon: "support", + name: "Awesome Support", + }, + { + icon: "contacts", + name: "Modern Interface", + }, + ]; + + return ( + + + + {data.map(({ icon, name }) => ( + + + + {icon} + + {name} + + + ))} + + + + ); +} + +export default Features; diff --git a/components/react-todo-app/src/pages/Blogs/SingleArticle/sections/Information.js b/components/react-todo-app/src/pages/Blogs/SingleArticle/sections/Information.js new file mode 100644 index 00000000..408607f9 --- /dev/null +++ b/components/react-todo-app/src/pages/Blogs/SingleArticle/sections/Information.js @@ -0,0 +1,60 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function Information() { + return ( + + + + + The Idea + + + Create a design system that can be used in any product available + + + This is the paragraph where you can write more details about your product. Keep you user + engaged by providing meaningful information. Remember that by this time, the user is + curious, otherwise he wouldn't scroll to get here. Add a button if you want the + user to see more. We are here to make life better. +

+ And now I look and look around and there&aposl;s so many Kanyes I've been trying to + figure out the bed design for the master bedroom at our Hidden Hills compound... and + thank you for turning my personal jean jacket into a couture piece. +

+ The way to survive in modern society is to be an ascetic. It is to retreat from society. + There&aposl;s too much society everywhere you go…The only solution is turn it off. + + + + + ); +} + +export default Information; diff --git a/components/react-todo-app/src/pages/Blogs/SingleArticle/sections/OurEfforts.js b/components/react-todo-app/src/pages/Blogs/SingleArticle/sections/OurEfforts.js new file mode 100644 index 00000000..3dc92c42 --- /dev/null +++ b/components/react-todo-app/src/pages/Blogs/SingleArticle/sections/OurEfforts.js @@ -0,0 +1,67 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function OurEfforts() { + const bgImage = + "https://images.unsplash.com/photo-1585975438803-350463f9c9b6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"; + + return ( + + + `${linearGradient( + rgba(gradients.dark.main, 0.6), + rgba(gradients.dark.state, 0.6) + )}, url(${bgImage})`, + backgroundSize: "cover", + }} + /> + + + + Our effort + + + The powerfull design system + + + The way to survive in modern society is to be an ascetic. It is to retreat from society. + There's too much society everywhere you go…The only solution is turn it off. + + + + + ); +} + +export default OurEfforts; diff --git a/components/react-todo-app/src/pages/Blogs/SingleArticle/sections/Posts.js b/components/react-todo-app/src/pages/Blogs/SingleArticle/sections/Posts.js new file mode 100644 index 00000000..ba40ec65 --- /dev/null +++ b/components/react-todo-app/src/pages/Blogs/SingleArticle/sections/Posts.js @@ -0,0 +1,97 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DefaultBlogCard from "examples/Cards/BlogCards/DefaultBlogCard"; + +// Images +import post1 from "assets/images/examples/color2.jpg"; +import post2 from "assets/images/examples/color3.jpg"; +import post3 from "assets/images/examples/color1.jpg"; +import author1 from "assets/images/team-2.jpg"; +import author2 from "assets/images/ivana-squares.jpg"; +import author3 from "assets/images/marie.jpg"; + +function Posts() { + return ( + + + + + + See other articles + + + Create a unique and beautiful blog posts. You can also connect your blog directly to + Google Analytics to have a more detailed look. + + + + + + + + + + + + + + + ); +} + +export default Posts; diff --git a/components/react-todo-app/src/pages/Blogs/SingleArticle/sections/Steps.js b/components/react-todo-app/src/pages/Blogs/SingleArticle/sections/Steps.js new file mode 100644 index 00000000..b4f53bf5 --- /dev/null +++ b/components/react-todo-app/src/pages/Blogs/SingleArticle/sections/Steps.js @@ -0,0 +1,221 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { useRef, useState } from "react"; + +// SwiperJS +import SwiperCore, { Autoplay, Navigation } from "swiper"; + +// SwiperJS react components +import { Swiper, SwiperSlide } from "swiper/react"; + +// SwiperJS styles +import "swiper/swiper.min.css"; +import "swiper/css/navigation"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function Steps() { + // install SwiperJS modules + SwiperCore.use([Autoplay, Navigation]); + + // SwiperJS navigation buttons ref + const navigationPrevRef = useRef(null); + const navigationNextRef = useRef(null); + + const [swiperEl, setSwiperEl] = useState(null); + + const slideTo = (index) => swiperEl && swiperEl.slideTo(index); + + const slides = [ + { + image: + "https://images.unsplash.com/photo-1609365635346-524d0024684f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80", + label: "First Step", + title: "Give your best", + description: "Give your best to create something unique with high impact.", + }, + { + image: + "https://images.unsplash.com/photo-1602781975725-cab34bd38d94?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80", + label: "Second Step", + title: "Plan your work", + description: "As we live, our hearts turn colder. Cause pain is what we go through.", + }, + { + image: + "https://images.unsplash.com/photo-1506477331477-33d5d8b3dc85?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=974&q=80", + label: "Third Step", + title: "Follow your dreams", + description: "As we live, our hearts turn colder. Cause pain is what we go through.", + }, + { + image: + "https://images.unsplash.com/photo-1579523616974-c2b09289c27e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=966&q=80", + label: "Fourth Step", + title: "Never give up", + description: "Everyone’s born confident, and everything’s taken away from you.", + }, + ]; + + const steps = [ + { + number: "01", + label: "Give your best", + }, + { + number: "02", + label: "Plan your", + }, + { + number: "03", + label: "Follow your dreams", + }, + { + number: "04", + label: "Never give up", + }, + ]; + + // Swiper navigation buttons styles + const navigationStyles = { + opacity: 0.5, + cursor: "pointer", + transition: "opacity 0.15s ease", + + "&:hover, &:focus": { + opacity: 1, + }, + }; + + return ( + + + { + setSwiperEl(swiper); + + const { navigation: nav } = swiper.params; + const { navigation } = swiper; + + nav.prevEl = navigationPrevRef.current; + nav.nextEl = navigationNextRef.current; + navigation.init(); + navigation.update(); + }} + autoplay={{ delay: 5000 }} + speed={800} + spaceBetween={0} + slidesPerView={1} + allowTouchMove={false} + loop + > + {slides.map(({ image, label, title, description }) => ( + + + + + + + + + + {label} + + ({ + xs: d4.fontSize, + lg: d3.fontSize, + }), + }} + > + {title} + + + {description} + + + + + ))} + + + + + + + + + + + {steps.map(({ number, label }, index) => ( + + h1.fontFamily, cursor: "pointer" }} + onClick={() => slideTo(index + 1)} + > + {number} + + {label} + + + + ))} + + + + ); +} + +export default Steps; diff --git a/components/react-todo-app/src/pages/Blogs/SingleArticle/sections/Support.js b/components/react-todo-app/src/pages/Blogs/SingleArticle/sections/Support.js new file mode 100644 index 00000000..f9b44c8a --- /dev/null +++ b/components/react-todo-app/src/pages/Blogs/SingleArticle/sections/Support.js @@ -0,0 +1,70 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKSocialButton from "components/MKSocialButton"; + +function Support() { + return ( + + + + + + Thank you for your support! + + + Delivering the best products + + + + + + +   twitter + + + +   facebook + + + +   tumblr + + + +   dribbble + + + + + + + ); +} + +export default Support; diff --git a/components/react-todo-app/src/pages/Company/AboutUs/index.js b/components/react-todo-app/src/pages/Company/AboutUs/index.js new file mode 100644 index 00000000..e7b599e2 --- /dev/null +++ b/components/react-todo-app/src/pages/Company/AboutUs/index.js @@ -0,0 +1,177 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { useEffect, useRef } from "react"; + +// rellax +import Rellax from "rellax"; + +// typed-js +import Typed from "typed.js"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Card from "@mui/material/Card"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKButton from "components/MKButton"; + +// Material Kit 2 PRO React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; +import DefaultFooter from "examples/Footers/DefaultFooter"; + +// About Us page sections +import Information from "pages/Company/AboutUs/sections/Information"; +import Team from "pages/Company/AboutUs/sections/Team"; +import Featuring from "pages/Company/AboutUs/sections/Featuring"; +import Newsletter from "pages/Company/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() { + const headerRef = useRef(null); + const typedJSRef = useRef(null); + + // Setting up rellax + useEffect(() => { + const parallax = new Rellax(headerRef.current, { + speed: -6, + }); + + return () => parallax.destroy(); + }, []); + + // Setting up typedJS + useEffect(() => { + const typedJS = new Typed(typedJSRef.current, { + strings: ["team", "design", "tool"], + typeSpeed: 90, + backSpeed: 90, + backDelay: 200, + startDelay: 500, + loop: true, + }); + + return () => typedJS.destroy(); + }, []); + + 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 + + + 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/components/react-todo-app/src/pages/Company/AboutUs/sections/Featuring.js b/components/react-todo-app/src/pages/Company/AboutUs/sections/Featuring.js new file mode 100644 index 00000000..f87d3fc9 --- /dev/null +++ b/components/react-todo-app/src/pages/Company/AboutUs/sections/Featuring.js @@ -0,0 +1,90 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/pages/Company/AboutUs/sections/Information.js b/components/react-todo-app/src/pages/Company/AboutUs/sections/Information.js new file mode 100644 index 00000000..78c63a1a --- /dev/null +++ b/components/react-todo-app/src/pages/Company/AboutUs/sections/Information.js @@ -0,0 +1,91 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/pages/Company/AboutUs/sections/Newsletter.js b/components/react-todo-app/src/pages/Company/AboutUs/sections/Newsletter.js new file mode 100644 index 00000000..f44bf9f6 --- /dev/null +++ b/components/react-todo-app/src/pages/Company/AboutUs/sections/Newsletter.js @@ -0,0 +1,63 @@ +/* eslint-disable react/jsx-no-duplicate-props */ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/pages/Company/AboutUs/sections/Team.js b/components/react-todo-app/src/pages/Company/AboutUs/sections/Team.js new file mode 100644 index 00000000..9615c40d --- /dev/null +++ b/components/react-todo-app/src/pages/Company/AboutUs/sections/Team.js @@ -0,0 +1,103 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO 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/components/react-todo-app/src/pages/Company/Pricing/components/FaqCollapse/index.js b/components/react-todo-app/src/pages/Company/Pricing/components/FaqCollapse/index.js new file mode 100644 index 00000000..dc87c794 --- /dev/null +++ b/components/react-todo-app/src/pages/Company/Pricing/components/FaqCollapse/index.js @@ -0,0 +1,69 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Icon from "@mui/material/Icon"; +import Collapse from "@mui/material/Collapse"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function FaqCollapse({ title, open, children, ...rest }) { + return ( + + + `${borderWidth[1]} solid ${borderColor}`, + }} + > + + {title} + + + + {open ? "remove" : "add"} + + + + + + + {children} + + + + + ); +} + +// Typechecking props for the FaqCollapse +FaqCollapse.propTypes = { + title: PropTypes.string.isRequired, + open: PropTypes.bool.isRequired, + children: PropTypes.node.isRequired, +}; + +export default FaqCollapse; diff --git a/components/react-todo-app/src/pages/Company/Pricing/components/Header/index.js b/components/react-todo-app/src/pages/Company/Pricing/components/Header/index.js new file mode 100644 index 00000000..80f17b70 --- /dev/null +++ b/components/react-todo-app/src/pages/Company/Pricing/components/Header/index.js @@ -0,0 +1,121 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// 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"; +import Card from "@mui/material/Card"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import FilledInfoCard from "examples/Cards/InfoCards/FilledInfoCard"; + +function Header({ image, label, title, description, cards }) { + return ( + <> + + `${linearGradient( + rgba(gradients.dark.main, 0.8), + rgba(gradients.dark.state, 0.8) + )}, url(${image})`, + backgroundSize: "cover", + backgroundPosition: "center", + display: "grid", + placeItems: "center", + }} + > + + + + {label} + + ({ + [breakpoints.down("md")]: { + fontSize: size["3xl"], + }, + })} + > + {title} + + + {description} + + + + + xxl, + }} + > + + {cards.map(({ variant, color, icon, title: cardTitle, description: cardDescription }) => ( + + + + ))} + + + + ); +} + +// Typechecking props for the Header +Header.propTypes = { + image: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + cards: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object])).isRequired, +}; + +export default Header; diff --git a/components/react-todo-app/src/pages/Company/Pricing/index.js b/components/react-todo-app/src/pages/Company/Pricing/index.js new file mode 100644 index 00000000..c5f53c4c --- /dev/null +++ b/components/react-todo-app/src/pages/Company/Pricing/index.js @@ -0,0 +1,68 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +// import Card from "@mui/material/Card"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; +import DefaultFooter from "examples/Footers/DefaultFooter"; + +// Pricing page sections +import Header from "pages/Company/Pricing/sections/Header"; +import AboutUs from "pages/Company/Pricing/sections/AboutUs"; +import PricingSection from "pages/Company/Pricing/sections/Pricing"; +import LifetimeMembership from "pages/Company/Pricing/sections/LifetimeMembership"; +import Testimonials from "pages/Company/Pricing/sections/Testimonials"; +import Trust from "pages/Company/Pricing/sections/Trust"; +import Faq from "pages/Company/Pricing/sections/Faq"; + +// Routes +import routes from "routes"; +import footerRoutes from "footer.routes"; + +function Pricing() { + return ( + <> + +
+ + + + + + + + + + + + + ); +} + +export default Pricing; diff --git a/components/react-todo-app/src/pages/Company/Pricing/sections/AboutUs.js b/components/react-todo-app/src/pages/Company/Pricing/sections/AboutUs.js new file mode 100644 index 00000000..6e5e45fd --- /dev/null +++ b/components/react-todo-app/src/pages/Company/Pricing/sections/AboutUs.js @@ -0,0 +1,101 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function AboutUs() { + const data = [ + { + icon: "credit_card", + title: "Global payments in a single integration", + items: ["120+ global currenices", "Global payment"], + }, + { + icon: "support_agent", + title: "24/7 email, phone and chat support", + items: ["24/7 support", "Fast responses"], + }, + { + icon: "biotech", + title: "Working with the latest technologies", + items: ["Custom apps", "Best technologies"], + }, + { + icon: "bolt", + title: "Fast and secure payments over the world", + items: ["Full time access", "Transparent transactions"], + }, + { + icon: "receipt_long", + title: "Financial reconciliation and reporting", + items: ["5.000+ archives", "Real-time reporting"], + }, + { + icon: "group", + title: "Developer platform and third-party integrations", + items: ["Over 100 extensions", "Developer Dashboard"], + }, + ]; + + 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. + + + + {data.map(({ icon, title, items }) => ( + + + + {icon} + + + {title} + + {items.map((item) => ( + + + done + + + + {item} + + + + ))} + + + ))} + + + + ); +} + +export default AboutUs; diff --git a/components/react-todo-app/src/pages/Company/Pricing/sections/Faq.js b/components/react-todo-app/src/pages/Company/Pricing/sections/Faq.js new file mode 100644 index 00000000..04e488f7 --- /dev/null +++ b/components/react-todo-app/src/pages/Company/Pricing/sections/Faq.js @@ -0,0 +1,137 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Card from "@mui/material/Card"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Pricing page components +import FaqCollapse from "pages/Company/Pricing/components/FaqCollapse"; + +function Faq() { + const [collapse, setCollapse] = useState(false); + + return ( + + + + + + + + Frequently Asked Questions + + + Last modified: Sept 07 2021 + + + + (collapse === 1 ? setCollapse(false) : setCollapse(1))} + > + We're not always in the position that we want to be at. We're constantly + growing. We're constantly making mistakes. We're constantly trying to + express ourselves and actualize our dreams. If you have the opportunity to play + this game of life you need to appreciate every moment. A lot of people don't + appreciate the moment until it's passed. + + (collapse === 2 ? setCollapse(false) : setCollapse(2))} + > + It really matters and then like it really doesn't matter. What matters is the + people who are sparked by it. And the people who are like offended by it, it + doesn't matter. Because it's about motivating the doers. Because + I'm here to follow my dreams and inspire other people to follow their dreams, + too. We're not always in the position that we want to be at. We're + constantly growing. We're constantly making mistakes. We're constantly + trying to express ourselves and actualize our dreams. If you have the opportunity + to play this game of life you need to appreciate every moment. A lot of people + don't appreciate the moment until it's passed. + + (collapse === 3 ? setCollapse(false) : setCollapse(3))} + > + The time is now for it to be okay to be great. People in this world shun people + for being great. For being a bright color. For standing out. But the time is now + to be okay to be the greatest you. Would you believe in what you believe in, if + you were the only one who believed it? If everything I did failed - which it + doesn't, it actually succeeds - just the fact that I'm willing to fail + is an inspiration. People are so scared to lose that they don't even try. + Like, one thing people can't say is that I'm not trying, and I'm + not trying my hardest, and I'm not trying to do the best way I know how. + + (collapse === 4 ? setCollapse(false) : setCollapse(4))} + > + I always felt like I could do anything. That's the main thing people are + controlled by! Thoughts- their perception of themselves! They're slowed down + by their perception of themselves. If you're taught you can't do + anything, you won't do anything. I was taught I could do everything. +
+
+ If everything I did failed - which it doesn't, it actually succeeds - just + the fact that I'm willing to fail is an inspiration. People are so scared to + lose that they don't even try. Like, one thing people can't say is that + I'm not trying, and I'm not trying my hardest, and I'm not trying + to do the best way I know how. + + (collapse === 5 ? setCollapse(false) : setCollapse(5))} + > + There's nothing I really wanted to do in life that I wasn't able to get + good at. That's my skill. I'm not really specifically talented at + anything except for the ability to learn. That's what I do. That's what + I'm here for. Don't be afraid to be wrong because you can't learn + anything from a compliment. I always felt like I could do anything. That's + the main thing people are controlled by! Thoughts- their perception of themselves! + They're slowed down by their perception of themselves. If you're taught + you can't do anything, you won't do anything. I was taught I could do + everything. + + + + + + + + ); +} + +export default Faq; diff --git a/components/react-todo-app/src/pages/Company/Pricing/sections/Header.js b/components/react-todo-app/src/pages/Company/Pricing/sections/Header.js new file mode 100644 index 00000000..323609b7 --- /dev/null +++ b/components/react-todo-app/src/pages/Company/Pricing/sections/Header.js @@ -0,0 +1,153 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// SwiperJS +import SwiperCore, { Autoplay, Navigation } from "swiper"; + +// SwiperJS react components +import { Swiper, SwiperSlide } from "swiper/react"; + +// SwiperJS styles +import "swiper/swiper.min.css"; +import "swiper/css/navigation"; + +// Pricing page components +import SliderHeader from "pages/Company/Pricing/components/Header"; + +// Images +import bg1 from "assets/images/bg2.jpg"; +import bg2 from "assets/images/bg.jpg"; +import bg3 from "assets/images/dg1.jpg"; + +function Header() { + // install SwiperJS modules + SwiperCore.use([Autoplay, Navigation]); + + return ( + + + + + + + + + + + + ); +} + +export default Header; diff --git a/components/react-todo-app/src/pages/Company/Pricing/sections/LifetimeMembership.js b/components/react-todo-app/src/pages/Company/Pricing/sections/LifetimeMembership.js new file mode 100644 index 00000000..45c8a400 --- /dev/null +++ b/components/react-todo-app/src/pages/Company/Pricing/sections/LifetimeMembership.js @@ -0,0 +1,126 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +function LifetimeMembership() { + return ( + + + + + Best no-tricks pricing + + + If you're not satisfied, contact us within the first 30 days and we'll send + you a full refund. + + + + + + + + + Lifetime Membership + + + You have Free Unlimited Updates and Premium Support on each package. You also + have 30 days to request a refund. + + + What's included + + + + + + done + + + Private code access + + + + + done + + + Free entry to all repositories + + + + + + + done + + + Pro member accounts + + + + + done + + + Support team full assist + + + + + + + + + + Pay once, own it forever + + + $399 + + + Get Access + + + Get a free sample (20MB) + + + + + + + + + ); +} + +export default LifetimeMembership; diff --git a/components/react-todo-app/src/pages/Company/Pricing/sections/Pricing.js b/components/react-todo-app/src/pages/Company/Pricing/sections/Pricing.js new file mode 100644 index 00000000..43701a03 --- /dev/null +++ b/components/react-todo-app/src/pages/Company/Pricing/sections/Pricing.js @@ -0,0 +1,183 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { 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"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DefaultPricingCard from "examples/Cards/PricingCards/DefaultPricingCard"; + +// Imags +const bgImage = + "https://images.unsplash.com/photo-1467541473380-93479a5a3ffa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2246&q=80"; + +function Pricing() { + const [activeTab, setActiveTab] = useState(0); + const [tabType, setTabType] = useState("monthly"); + + const handleTabType = ({ currentTarget }, newValue) => { + setActiveTab(newValue); + setTabType(currentTarget.id); + }; + + return ( + + + `${linearGradient( + rgba(gradients.dark.main, 0.6), + rgba(gradients.dark.state, 0.6) + )}, url(${bgImage})`, + backgroundSize: "cover", + }} + > + + + + + See our pricing + + + You have Free Unlimited Updates and Premium Support on each package. + + + + + + + + + + + + Monthly + + } + /> + + Annual + + } + /> + + + + + + + + + + + + + + + + + + + + + ); +} + +export default Pricing; diff --git a/components/react-todo-app/src/pages/Company/Pricing/sections/Testimonials.js b/components/react-todo-app/src/pages/Company/Pricing/sections/Testimonials.js new file mode 100644 index 00000000..7eb42268 --- /dev/null +++ b/components/react-todo-app/src/pages/Company/Pricing/sections/Testimonials.js @@ -0,0 +1,145 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { useRef } from "react"; + +// SwiperJS +import SwiperCore, { Autoplay, Navigation } from "swiper"; + +// SwiperJS react components +import { Swiper, SwiperSlide } from "swiper/react"; + +// SwiperJS styles +import "swiper/swiper.min.css"; +import "swiper/css/navigation"; + +// @mui material components +import Container from "@mui/material/Container"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import ComplexReviewCard from "examples/Cards/ReviewCards/ComplexReviewCard"; + +// Images +import review1 from "assets/images/examples/clem-onojegaw.jpg"; +import review2 from "assets/images/examples/studio-3.jpg"; +import logoSpotify from "assets/images/logos/small-logos/logo-spotify.svg"; +import logoSlack from "assets/images/logos/small-logos/logo-slack.svg"; + +function Testimonials() { + // install SwiperJS modules + SwiperCore.use([Autoplay, Navigation]); + + // Swiper navigation buttons styles + const navigationStyles = { + position: "absolute", + top: 0, + zIndex: 1, + display: "flex", + alignItems: "center", + justifyContent: "center", + width: "15%", + height: "100%", + textAlign: "center", + opacity: 0.5, + cursor: "pointer", + transition: "opacity 0.15s ease", + + "&:hover, &:focus": { + opacity: 1, + }, + }; + + // SwiperJS navigation buttons ref + const navigationPrevRef = useRef(null); + const navigationNextRef = useRef(null); + + return ( + + { + const { navigation: nav } = params; + + nav.prevEl = navigationPrevRef.current; + nav.nextEl = navigationNextRef.current; + navigation.init(); + navigation.update(); + }} + autoplay={{ delay: 5000 }} + speed={800} + spaceBetween={0} + slidesPerView={1} + loop + > + + + + + + + + + + + + chevron_left + + + chevron_right + + + + ); +} + +export default Testimonials; diff --git a/components/react-todo-app/src/pages/Company/Pricing/sections/Trust.js b/components/react-todo-app/src/pages/Company/Pricing/sections/Trust.js new file mode 100644 index 00000000..99e0e1a6 --- /dev/null +++ b/components/react-todo-app/src/pages/Company/Pricing/sections/Trust.js @@ -0,0 +1,72 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// 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 Trust() { + return ( + + + + + More than 50+ brands trust Material + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default Trust; diff --git a/components/react-todo-app/src/pages/Extra/VirtualReality/components/Emails/index.js b/components/react-todo-app/src/pages/Extra/VirtualReality/components/Emails/index.js new file mode 100644 index 00000000..8b321681 --- /dev/null +++ b/components/react-todo-app/src/pages/Extra/VirtualReality/components/Emails/index.js @@ -0,0 +1,43 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Card from "@mui/material/Card"; +import Tooltip from "@mui/material/Tooltip"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function Emails() { + return ( + + + + Emails (21) + + + + + Check + + + + + + ); +} + +export default Emails; diff --git a/components/react-todo-app/src/pages/Extra/VirtualReality/components/MediaPlayer/index.js b/components/react-todo-app/src/pages/Extra/VirtualReality/components/MediaPlayer/index.js new file mode 100644 index 00000000..d2ffe65a --- /dev/null +++ b/components/react-todo-app/src/pages/Extra/VirtualReality/components/MediaPlayer/index.js @@ -0,0 +1,98 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; +import Tooltip from "@mui/material/Tooltip"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKButton from "components/MKButton"; + +function MediaPlayer() { + const bgImage = + "https://images.unsplash.com/photo-1470813740244-df37b8c1edcb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=80"; + + const mediaPlayerButtonStyles = ({ functions: { pxToRem } }) => ({ + width: pxToRem(46), + height: pxToRem(46), + minWidth: pxToRem(46), + minHeight: pxToRem(46), + mr: 1, + }); + + return ( + ({ + backgroundImage: `${linearGradient( + rgba(gradients.dark.main, 0.85), + rgba(gradients.dark.state, 0.85) + )}, url(${bgImage})`, + backgroundSize: "cover", + backgroundPosition: "center", + })} + > + + + Some Kind Of Blues + + + Deftones + + + + + + skip_previous + + + + + play_arrow + + + + + skip_next + + + + + + + ); +} + +export default MediaPlayer; diff --git a/components/react-todo-app/src/pages/Extra/VirtualReality/components/Messages/index.js b/components/react-todo-app/src/pages/Extra/VirtualReality/components/Messages/index.js new file mode 100644 index 00000000..ea24177e --- /dev/null +++ b/components/react-todo-app/src/pages/Extra/VirtualReality/components/Messages/index.js @@ -0,0 +1,69 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Card from "@mui/material/Card"; +import Tooltip from "@mui/material/Tooltip"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +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 Messages() { + const messagesAvatarStyles = { + border: ({ borders: { borderWidth }, palette: { white } }) => + `${borderWidth[2]} solid ${white.main}`, + cursor: "pointer", + position: "relative", + ml: -1.5, + + "&:hover, &:focus": { + zIndex: "10", + }, + }; + + return ( + + + + Messages + + + + + + + + + + + + + + + + + + ); +} + +export default Messages; diff --git a/components/react-todo-app/src/pages/Extra/VirtualReality/components/TodoCard/index.js b/components/react-todo-app/src/pages/Extra/VirtualReality/components/TodoCard/index.js new file mode 100644 index 00000000..9b96d01d --- /dev/null +++ b/components/react-todo-app/src/pages/Extra/VirtualReality/components/TodoCard/index.js @@ -0,0 +1,59 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Icon from "@mui/material/Icon"; +import Tooltip from "@mui/material/Tooltip"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function TodoCard() { + return ( + + + + + To Do + + + + 7 + + + items + + + + + Shopping + + + Meeting + + + + + + keyboard_arrow_down + + + + + ); +} + +export default TodoCard; diff --git a/components/react-todo-app/src/pages/Extra/VirtualReality/components/TodoList/index.js b/components/react-todo-app/src/pages/Extra/VirtualReality/components/TodoList/index.js new file mode 100644 index 00000000..d610666c --- /dev/null +++ b/components/react-todo-app/src/pages/Extra/VirtualReality/components/TodoList/index.js @@ -0,0 +1,91 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Card from "@mui/material/Card"; +import Divider from "@mui/material/Divider"; +import Icon from "@mui/material/Icon"; +import Tooltip from "@mui/material/Tooltip"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function TodoList() { + return ( + + + + + + 08:00 + + + + + Synk up with Mark + + + Hangouts + + + + + + + + 09:30 + + + + + Gym + + + World Class + + + + + + + + 11:00 + + + + + Design Review + + + Zoom + + + + + + + + + keyboard_arrow_down + + + + + + ); +} + +export default TodoList; diff --git a/components/react-todo-app/src/pages/Extra/VirtualReality/index.js b/components/react-todo-app/src/pages/Extra/VirtualReality/index.js new file mode 100644 index 00000000..cfad60eb --- /dev/null +++ b/components/react-todo-app/src/pages/Extra/VirtualReality/index.js @@ -0,0 +1,202 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Tooltip from "@mui/material/Tooltip"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKAvatar from "components/MKAvatar"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; +import DefaultFooter from "examples/Footers/DefaultFooter"; + +// VirtualReality page components +import TodoList from "pages/Extra/VirtualReality/components/TodoList"; +import TodoCard from "pages/Extra/VirtualReality/components/TodoCard"; +import Emails from "pages/Extra/VirtualReality/components/Emails"; +import MediaPlayer from "pages/Extra/VirtualReality/components/MediaPlayer"; +import Messages from "pages/Extra/VirtualReality/components/Messages"; + +// Routes +import routes from "routes"; +import footerRoutes from "footer.routes"; + +// Images +import bgImage from "assets/images/vr-bg.jpg"; +import team1 from "assets/images/team-1.jpg"; +import sunCloud from "assets/images/small-logos/icon-sun-cloud.png"; + +function VirtualReality() { + return ( + <> + + + `${linearGradient( + rgba(gradients.dark.main, 0.6), + rgba(gradients.dark.state, 0.6) + )}, url(${bgImage})`, + backgroundSize: "cover", + backgroundPosition: "center", + display: "grid", + placeItems: "center", + }} + > + + + + + + + + + + + ({ + color: black.main, + borderRadius: borderRadius.lg, + })} + > + home + + + + + + ({ + color: black.main, + borderRadius: borderRadius.lg, + })} + > + search + + + + + ({ + color: black.main, + borderRadius: borderRadius.lg, + })} + > + more_horiz + + + + + + + + ({ + xs: h2.fontSize, + lg: d1.fontSize, + }), + }} + color="white" + lineHeight={1} + > + 28°C + + + cloudy + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default VirtualReality; diff --git a/components/react-todo-app/src/pages/LandingPages/Coworking/components/AboutUsOption/index.js b/components/react-todo-app/src/pages/LandingPages/Coworking/components/AboutUsOption/index.js new file mode 100644 index 00000000..44d7be6a --- /dev/null +++ b/components/react-todo-app/src/pages/LandingPages/Coworking/components/AboutUsOption/index.js @@ -0,0 +1,56 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// prop-types is a library for type checking of props +import PropTypes from "prop-types"; + +// @mui material components +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function AboutUsOption({ icon, content }) { + return ( + + + {icon} + + + {content} + + + ); +} + +// Typechecking props for the AboutUsOption +AboutUsOption.propTypes = { + icon: PropTypes.string.isRequired, + content: PropTypes.node.isRequired, +}; + +export default AboutUsOption; diff --git a/components/react-todo-app/src/pages/LandingPages/Coworking/index.js b/components/react-todo-app/src/pages/LandingPages/Coworking/index.js new file mode 100644 index 00000000..2bd46448 --- /dev/null +++ b/components/react-todo-app/src/pages/LandingPages/Coworking/index.js @@ -0,0 +1,166 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Card from "@mui/material/Card"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKButton from "components/MKButton"; + +// Material Kit 2 PRO React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; +import DefaultFooter from "examples/Footers/DefaultFooter"; + +// Coworking page sections +import Information from "pages/LandingPages/Coworking/sections/Information"; +import Testimonials from "pages/LandingPages/Coworking/sections/Testimonials"; +import AboutUs from "pages/LandingPages/Coworking/sections/AboutUs"; +import Places from "pages/LandingPages/Coworking/sections/Places"; + +// Routes +import routes from "routes"; +import footerRoutes from "footer.routes"; + +// Images +import bgImage from "assets/images/bg-coworking.jpeg"; + +function Coworking() { + return ( + <> + + + `${linearGradient( + rgba(gradients.dark.main, 0.5), + rgba(gradients.dark.state, 0.5) + )}, url(${bgImage})`, + backgroundSize: "cover", + backgroundPosition: "center", + display: "grid", + placeItems: "center", + }} + > + + + ({ + [breakpoints.down("md")]: { + fontSize: size["3xl"], + }, + })} + > + Your Perfect Place for Work + + + The time is now for it be okay to be great. People in this world shun people for being + nice. + + + + get started + + + read more + + + + + + rgba(white.main, 0.8), + backdropFilter: "saturate(200%) blur(30px)", + boxShadow: ({ boxShadows: { xxl } }) => xxl, + }} + > + + + + + + + + + + For being a bright color. For standing out. But the time is now to be okay to be + the greatest you. + + + + + + start now + + + + + + + + + + + + ); +} + +export default Coworking; diff --git a/components/react-todo-app/src/pages/LandingPages/Coworking/sections/AboutUs.js b/components/react-todo-app/src/pages/LandingPages/Coworking/sections/AboutUs.js new file mode 100644 index 00000000..ceb0629b --- /dev/null +++ b/components/react-todo-app/src/pages/LandingPages/Coworking/sections/AboutUs.js @@ -0,0 +1,109 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @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 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Coworking page component +import AboutUsOption from "pages/LandingPages/Coworking/components/AboutUsOption"; + +function AboutUs() { + 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 + + + + + + It becomes harder for us to give others a hand. +
+ We get our heart broken by people we love. + + } + /> + + As we live, our hearts turn colder. +
+ Cause pain is what we go through as we become older. + + } + /> + + When we lose family over time. +
+ What else could rust the heart more over time? Blackgold. + + } + /> + + + + + + ); +} + +export default AboutUs; diff --git a/components/react-todo-app/src/pages/LandingPages/Coworking/sections/Information.js b/components/react-todo-app/src/pages/LandingPages/Coworking/sections/Information.js new file mode 100644 index 00000000..9c4f7224 --- /dev/null +++ b/components/react-todo-app/src/pages/LandingPages/Coworking/sections/Information.js @@ -0,0 +1,76 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Stack from "@mui/material/Stack"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import SimpleInfoCard from "examples/Cards/InfoCards/SimpleInfoCard"; + +function Information() { + return ( + + + + + + + + + + + + + + + + + + + ); +} + +export default Information; diff --git a/components/react-todo-app/src/pages/LandingPages/Coworking/sections/Places.js b/components/react-todo-app/src/pages/LandingPages/Coworking/sections/Places.js new file mode 100644 index 00000000..f57f6da6 --- /dev/null +++ b/components/react-todo-app/src/pages/LandingPages/Coworking/sections/Places.js @@ -0,0 +1,131 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React components +import SimpleBlogCard from "examples/Cards/BlogCards/SimpleBlogCard"; + +function Places() { + const actionProps = { + type: "internal", + route: "/pages/landing-pages/coworking", + color: "dark", + label: "find more", + }; + + return ( + + + + + + Explore our places in London{" "} + + + If you can't decide, the answer is no. If two equally difficult paths, choose the + one more painful in the short term (pain avoidance is creating an illusion of equality). + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default Places; diff --git a/components/react-todo-app/src/pages/LandingPages/Coworking/sections/Testimonials.js b/components/react-todo-app/src/pages/LandingPages/Coworking/sections/Testimonials.js new file mode 100644 index 00000000..cdb57fd0 --- /dev/null +++ b/components/react-todo-app/src/pages/LandingPages/Coworking/sections/Testimonials.js @@ -0,0 +1,128 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @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 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function Testimonials() { + const image = + "https://images.unsplash.com/photo-1521668576204-57ae3afee860?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80"; + + return ( + + + + + + + + + white.main, + }} + > + format_quote + + Decisions: If you can't decide, the answer is no. If two equally difficult + paths, choose the one more painful in the short term (pain avoidance is creating + an illusion of equality). Choose the path that leaves you more equanimous in the + long term. + + + Michael -{" "} + + Writter + + + + + + + 1,679,700 + + + + Developers and Companies around the world using our products. + + + See all products + arrow_forward + + + + + + + + ); +} + +export default Testimonials; diff --git a/components/react-todo-app/src/pages/LandingPages/Rental/components/AboutUsOption/index.js b/components/react-todo-app/src/pages/LandingPages/Rental/components/AboutUsOption/index.js new file mode 100644 index 00000000..44d7be6a --- /dev/null +++ b/components/react-todo-app/src/pages/LandingPages/Rental/components/AboutUsOption/index.js @@ -0,0 +1,56 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// prop-types is a library for type checking of props +import PropTypes from "prop-types"; + +// @mui material components +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function AboutUsOption({ icon, content }) { + return ( + + + {icon} + + + {content} + + + ); +} + +// Typechecking props for the AboutUsOption +AboutUsOption.propTypes = { + icon: PropTypes.string.isRequired, + content: PropTypes.node.isRequired, +}; + +export default AboutUsOption; diff --git a/components/react-todo-app/src/pages/LandingPages/Rental/components/FaqCollapse/index.js b/components/react-todo-app/src/pages/LandingPages/Rental/components/FaqCollapse/index.js new file mode 100644 index 00000000..3e1f5683 --- /dev/null +++ b/components/react-todo-app/src/pages/LandingPages/Rental/components/FaqCollapse/index.js @@ -0,0 +1,69 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Icon from "@mui/material/Icon"; +import Collapse from "@mui/material/Collapse"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function FaqCollapse({ title, open, children, ...rest }) { + return ( + + + `${borderWidth[1]} solid ${borderColor}`, + }} + > + + {title} + + + + {open ? "remove" : "add"} + + + + + + + {children} + + + + + ); +} + +// Typechecking props for the FaqCollapse +FaqCollapse.propTypes = { + title: PropTypes.string.isRequired, + open: PropTypes.bool.isRequired, + children: PropTypes.node.isRequired, +}; + +export default FaqCollapse; diff --git a/components/react-todo-app/src/pages/LandingPages/Rental/index.js b/components/react-todo-app/src/pages/LandingPages/Rental/index.js new file mode 100644 index 00000000..6dede100 --- /dev/null +++ b/components/react-todo-app/src/pages/LandingPages/Rental/index.js @@ -0,0 +1,124 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Card from "@mui/material/Card"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; +import DefaultFooter from "examples/Footers/DefaultFooter"; + +// Rental page sections +import Search from "pages/LandingPages/Rental/sections/Search"; +import Places from "pages/LandingPages/Rental/sections/Places"; +import Testimonials from "pages/LandingPages/Rental/sections/Testimonials"; +import Faq from "pages/LandingPages/Rental/sections/Faq"; +import Contact from "pages/LandingPages/Rental/sections/Contact"; + +// Routes +import routes from "routes"; +import footerRoutes from "footer.routes"; + +// Images +import bgImage from "assets/images/bg-rental.jpeg"; + +function Rental() { + return ( + <> + + + `${linearGradient( + rgba(gradients.dark.main, 0.5), + rgba(gradients.dark.state, 0.5) + )}, url(${bgImage})`, + backgroundSize: "cover", + backgroundPosition: "center", + display: "grid", + placeItems: "center", + }} + > + + + ({ + [breakpoints.down("md")]: { + fontSize: size["3xl"], + }, + })} + > + Book your next trip + + + The time is now for it be okay to be great. People in this world shun people for being + nice. + + + + + rgba(white.main, 0.8), + backdropFilter: "saturate(200%) blur(30px)", + boxShadow: ({ boxShadows: { xxl } }) => xxl, + overflow: "hidden", + }} + > + + + + + + + + + + + ); +} + +export default Rental; diff --git a/components/react-todo-app/src/pages/LandingPages/Rental/sections/Contact.js b/components/react-todo-app/src/pages/LandingPages/Rental/sections/Contact.js new file mode 100644 index 00000000..e24711ca --- /dev/null +++ b/components/react-todo-app/src/pages/LandingPages/Rental/sections/Contact.js @@ -0,0 +1,153 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Switch from "@mui/material/Switch"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; + +function Contact() { + return ( + + ({ xs: 0, lg: borderRadius.lg }), + }} + /> + + + + + rgba(white.main, 0.8), + backdropFilter: "saturate(200%) blur(30px)", + px: { xs: 3, sm: 6 }, + py: { xs: 3, sm: 8 }, + mb: { xs: 0, lg: 8 }, + mt: { xs: 0, lg: -6 }, + }} + > + + Contact us + + + + + + + + + + + + + + + + + + + + + + I agree to the{" "} + + Terms and Conditions + + . + + + + + Send Message + + + + + + + + + + + ); +} + +export default Contact; diff --git a/components/react-todo-app/src/pages/LandingPages/Rental/sections/Faq.js b/components/react-todo-app/src/pages/LandingPages/Rental/sections/Faq.js new file mode 100644 index 00000000..66c1451b --- /dev/null +++ b/components/react-todo-app/src/pages/LandingPages/Rental/sections/Faq.js @@ -0,0 +1,126 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Rental page components +import FaqCollapse from "pages/LandingPages/Rental/components/FaqCollapse"; + +function Faq() { + const [collapse, setCollapse] = useState(false); + + return ( + + + + + + Frequently Asked Questions + + + + A lot of people don't appreciate the moment until it's passed. I'm + not trying my hardest, and I'm not trying to do + + + + + (collapse === 1 ? setCollapse(false) : setCollapse(1))} + > + We're not always in the position that we want to be at. We're constantly + growing. We're constantly making mistakes. We're constantly trying to + express ourselves and actualize our dreams. If you have the opportunity to play this + game of life you need to appreciate every moment. A lot of people don't + appreciate the moment until it's passed. + + (collapse === 2 ? setCollapse(false) : setCollapse(2))} + > + It really matters and then like it really doesn't matter. What matters is the + people who are sparked by it. And the people who are like offended by it, it + doesn't matter. Because it's about motivating the doers. Because I'm + here to follow my dreams and inspire other people to follow their dreams, too. + We're not always in the position that we want to be at. We're constantly + growing. We're constantly making mistakes. We're constantly trying to + express ourselves and actualize our dreams. If you have the opportunity to play this + game of life you need to appreciate every moment. A lot of people don't + appreciate the moment until it's passed. + + (collapse === 3 ? setCollapse(false) : setCollapse(3))} + > + The time is now for it to be okay to be great. People in this world shun people for + being great. For being a bright color. For standing out. But the time is now to be + okay to be the greatest you. Would you believe in what you believe in, if you were the + only one who believed it? If everything I did failed - which it doesn't, it + actually succeeds - just the fact that I'm willing to fail is an inspiration. + People are so scared to lose that they don't even try. Like, one thing people + can't say is that I'm not trying, and I'm not trying my hardest, and + I'm not trying to do the best way I know how. + + (collapse === 4 ? setCollapse(false) : setCollapse(4))} + > + I always felt like I could do anything. That's the main thing people are + controlled by! Thoughts- their perception of themselves! They're slowed down by + their perception of themselves. If you're taught you can't do anything, you + won't do anything. I was taught I could do everything. +
+
+ If everything I did failed - which it doesn't, it actually succeeds - just the + fact that I'm willing to fail is an inspiration. People are so scared to lose + that they don't even try. Like, one thing people can't say is that I'm + not trying, and I'm not trying my hardest, and I'm not trying to do the best + way I know how. + + (collapse === 5 ? setCollapse(false) : setCollapse(5))} + > + There's nothing I really wanted to do in life that I wasn't able to get good + at. That's my skill. I'm not really specifically talented at anything except + for the ability to learn. That's what I do. That's what I'm here for. + Don't be afraid to be wrong because you can't learn anything from a + compliment. I always felt like I could do anything. That's the main thing people + are controlled by! Thoughts- their perception of themselves! They're slowed down + by their perception of themselves. If you're taught you can't do anything, + you won't do anything. I was taught I could do everything. + + + + + + ); +} + +export default Faq; diff --git a/components/react-todo-app/src/pages/LandingPages/Rental/sections/Places.js b/components/react-todo-app/src/pages/LandingPages/Rental/sections/Places.js new file mode 100644 index 00000000..e9dac1bb --- /dev/null +++ b/components/react-todo-app/src/pages/LandingPages/Rental/sections/Places.js @@ -0,0 +1,137 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKPagination from "components/MKPagination"; + +// Material Kit 2 PRO React components +import SimpleBookingCard from "examples/Cards/BookingCards/SimpleBookingCard"; + +// Images +import product1 from "assets/images/products/product-1-min.jpg"; +import product2 from "assets/images/products/product-2-min.jpg"; +import product3 from "assets/images/products/product-3-min.jpg"; +import product4 from "assets/images/products/product-5-min.jpg"; +import product5 from "assets/images/products/product-6-min.jpg"; +import product6 from "assets/images/products/product-7-min.jpg"; + +function Places() { + const actionProps = { + type: "internal", + route: "/pages/landing-pages/rental", + color: "info", + label: "from / night", + }; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + keyboard_arrow_left + + + 1 + + 2 + 3 + 4 + 5 + + keyboard_arrow_right + + + + + + ); +} + +export default Places; diff --git a/components/react-todo-app/src/pages/LandingPages/Rental/sections/Search.js b/components/react-todo-app/src/pages/LandingPages/Rental/sections/Search.js new file mode 100644 index 00000000..5e70f6c9 --- /dev/null +++ b/components/react-todo-app/src/pages/LandingPages/Rental/sections/Search.js @@ -0,0 +1,70 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Autocomplete from "@mui/material/Autocomplete"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKInput from "components/MKInput"; +// import MKDatePicker from "components/MKDatePicker"; +import MKButton from "components/MKButton"; + +function Search() { + return ( + + + + + + Leave From + + } + /> + + + + To + + } + /> + + + + Depart + + + + + + search + + + + + + ); +} + +export default Search; diff --git a/components/react-todo-app/src/pages/LandingPages/Rental/sections/Testimonials.js b/components/react-todo-app/src/pages/LandingPages/Rental/sections/Testimonials.js new file mode 100644 index 00000000..8f798c5d --- /dev/null +++ b/components/react-todo-app/src/pages/LandingPages/Rental/sections/Testimonials.js @@ -0,0 +1,103 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKBadge from "components/MKBadge"; + +// Material Kit 2 PRO React components +import SimpleReviewCard from "examples/Cards/ReviewCards/SimpleReviewCard"; + +// Images +import bgPattern from "assets/images/shapes/pattern-lines.svg"; +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 Testimonials() { + return ( + + + + + + + + Some thoughts from our clients + + + If you're selected for them you'll also get three tickets, opportunity to + access Investor Office Hours and Mentor Hours and much more all for free. + + + + + + + + + + + + + + + + + ); +} + +export default Testimonials; diff --git a/components/react-todo-app/src/pages/Support/ContactUs/index.js b/components/react-todo-app/src/pages/Support/ContactUs/index.js new file mode 100644 index 00000000..dbf926c5 --- /dev/null +++ b/components/react-todo-app/src/pages/Support/ContactUs/index.js @@ -0,0 +1,149 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; +import DefaultFooter from "examples/Footers/DefaultFooter"; + +// Routes +import routes from "routes"; +import footerRoutes from "footer.routes"; + +// Image +import bgImage from "assets/images/illustrations/illustration-reset.jpg"; + +function ContactUs() { + return ( + <> + + + + + + + + + + + + Contact us + + + + + For further questions, including partnership opportunities, please email + hello@creative-tim.com or contact using our contact form. + + + + + + + + + + + + + + + + Send Message + + + + + + + + + + + + ); +} + +export default ContactUs; diff --git a/components/react-todo-app/src/pages/Support/Faq/components/FaqCollapse/index.js b/components/react-todo-app/src/pages/Support/Faq/components/FaqCollapse/index.js new file mode 100644 index 00000000..dc87c794 --- /dev/null +++ b/components/react-todo-app/src/pages/Support/Faq/components/FaqCollapse/index.js @@ -0,0 +1,69 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Icon from "@mui/material/Icon"; +import Collapse from "@mui/material/Collapse"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function FaqCollapse({ title, open, children, ...rest }) { + return ( + + + `${borderWidth[1]} solid ${borderColor}`, + }} + > + + {title} + + + + {open ? "remove" : "add"} + + + + + + + {children} + + + + + ); +} + +// Typechecking props for the FaqCollapse +FaqCollapse.propTypes = { + title: PropTypes.string.isRequired, + open: PropTypes.bool.isRequired, + children: PropTypes.node.isRequired, +}; + +export default FaqCollapse; diff --git a/components/react-todo-app/src/pages/Support/Faq/index.js b/components/react-todo-app/src/pages/Support/Faq/index.js new file mode 100644 index 00000000..066a23a2 --- /dev/null +++ b/components/react-todo-app/src/pages/Support/Faq/index.js @@ -0,0 +1,282 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Card from "@mui/material/Card"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; +import SimpleFooter from "examples/Footers/SimpleFooter"; +import SimpleInfoCard from "examples/Cards/InfoCards/SimpleInfoCard"; + +// HelpCenter page components +import FaqCollapse from "pages/Support/Faq/components/FaqCollapse"; + +// Routes +import routes from "routes"; + +function Faq() { + const [collapse, setCollapse] = useState(false); + + return ( + <> + + + + + + + + + + + + + + + + + + + + + + FAQ + + + Last modified: Sept 07 2021 + + + + + Basics + + (collapse === 1 ? setCollapse(false) : setCollapse(1))} + > + We're not always in the position that we want to be at. We're + constantly growing. We're constantly making mistakes. We're constantly + trying to express ourselves and actualize our dreams. If you have the + opportunity to play this game of life you need to appreciate every moment. A lot + of people don't appreciate the moment until it's passed. + + (collapse === 2 ? setCollapse(false) : setCollapse(2))} + > + It really matters and then like it really doesn't matter. What matters is + the people who are sparked by it. And the people who are like offended by it, it + doesn't matter. Because it's about motivating the doers. Because + I'm here to follow my dreams and inspire other people to follow their + dreams, too. We're not always in the position that we want to be at. + We're constantly growing. We're constantly making mistakes. We're + constantly trying to express ourselves and actualize our dreams. If you have the + opportunity to play this game of life you need to appreciate every moment. A lot + of people don't appreciate the moment until it's passed. + + (collapse === 3 ? setCollapse(false) : setCollapse(3))} + > + The time is now for it to be okay to be great. People in this world shun people + for being great. For being a bright color. For standing out. But the time is now + to be okay to be the greatest you. Would you believe in what you believe in, if + you were the only one who believed it? If everything I did failed - which it + doesn't, it actually succeeds - just the fact that I'm willing to fail + is an inspiration. People are so scared to lose that they don't even try. + Like, one thing people can't say is that I'm not trying, and I'm + not trying my hardest, and I'm not trying to do the best way I know how. + + (collapse === 4 ? setCollapse(false) : setCollapse(4))} + > + I always felt like I could do anything. That's the main thing people are + controlled by! Thoughts- their perception of themselves! They're slowed + down by their perception of themselves. If you're taught you can't do + anything, you won't do anything. I was taught I could do everything. +
+
+ If everything I did failed - which it doesn't, it actually succeeds - just + the fact that I'm willing to fail is an inspiration. People are so scared + to lose that they don't even try. Like, one thing people can't say is + that I'm not trying, and I'm not trying my hardest, and I'm not + trying to do the best way I know how. + + (collapse === 5 ? setCollapse(false) : setCollapse(5))} + > + There's nothing I really wanted to do in life that I wasn't able to + get good at. That's my skill. I'm not really specifically talented at + anything except for the ability to learn. That's what I do. That's + what I'm here for. Don't be afraid to be wrong because you can't + learn anything from a compliment. I always felt like I could do anything. + That's the main thing people are controlled by! Thoughts- their perception + of themselves! They're slowed down by their perception of themselves. If + you're taught you can't do anything, you won't do anything. I was + taught I could do everything. + + + Account & Settings + + (collapse === 6 ? setCollapse(false) : setCollapse(6))} + > + 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. + + (collapse === 7 ? setCollapse(false) : setCollapse(7))} + > + Why would anyone pick blue over pink? Pink is obviously a better color. + Everyone's born confident, and everything's taken away from you +
+
+ We're not always in the position that we want to be at. We're + constantly growing. We're constantly making mistakes. + + (collapse === 8 ? setCollapse(false) : setCollapse(8))} + > + People in this world shun people for being great. For being a bright color. + We're constantly trying to express ourselves and actualize our dreams. If + you have the opportunity to play this game of life you need to appreciate every + moment. A lot of people don't appreciate the moment until it's passed. + + (collapse === 9 ? setCollapse(false) : setCollapse(9))} + > + What matters is the people who are sparked by it. And the people who are like + offended by it, it doesn't matter. Because it's about motivating the + doers. Because I'm here to follow my dreams and inspire other people to + follow their dreams, too. + + + Licenses + + (collapse === 10 ? setCollapse(false) : setCollapse(10))} + > + We're constantly trying to express ourselves and actualize our dreams. If + you have the opportunity to play this game of life you need to appreciate every + moment. A lot of people don't appreciate the moment until it's passed. + The time is now for it to be okay to be great. + + (collapse === 11 ? setCollapse(false) : setCollapse(11))} + > + People in this world shun people for being great. For being a bright color. For + standing out. But the time is now to be okay to be the greatest you. Would you + believe in what you believe in, if you were the only one who believed it? As we + live, our hearts turn colder. + + (collapse === 12 ? setCollapse(false) : setCollapse(12))} + > + Cause 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. We get our heart broken by people we love, even + that we give them all we have. Then we lose family over time. What else could + rust the heart more over time? Blackgold. + + (collapse === 13 ? setCollapse(false) : setCollapse(13))} + > + Cause 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. We get our heart broken by people we love, even + that we give them all we have. Then we lose family over time. What else could + rust the heart more over time? Blackgold. + + + + + + + + + + + + ); +} + +export default Faq; diff --git a/components/react-todo-app/src/pages/Support/HelpCenter/components/FaqCollapse/index.js b/components/react-todo-app/src/pages/Support/HelpCenter/components/FaqCollapse/index.js new file mode 100644 index 00000000..d1deb25f --- /dev/null +++ b/components/react-todo-app/src/pages/Support/HelpCenter/components/FaqCollapse/index.js @@ -0,0 +1,71 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Icon from "@mui/material/Icon"; +import Collapse from "@mui/material/Collapse"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React components +import borders from "assets/theme/base/borders"; + +function FaqCollapse({ title, open, children, ...rest }) { + const { borderWidth, borderColor } = borders; + + return ( + + + + {title} + + + + {open ? "remove" : "add"} + + + + + + + {children} + + + + + ); +} + +// Typechecking props for the FaqCollapse +FaqCollapse.propTypes = { + title: PropTypes.string.isRequired, + open: PropTypes.bool.isRequired, + children: PropTypes.node.isRequired, +}; + +export default FaqCollapse; diff --git a/components/react-todo-app/src/pages/Support/HelpCenter/components/ListItem/index.js b/components/react-todo-app/src/pages/Support/HelpCenter/components/ListItem/index.js new file mode 100644 index 00000000..e19d2409 --- /dev/null +++ b/components/react-todo-app/src/pages/Support/HelpCenter/components/ListItem/index.js @@ -0,0 +1,42 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function ListItem({ title, children }) { + return ( + + + {title} + + + {children} + + + ); +} + +// Typechecking props for the ListItem +ListItem.propTypes = { + title: PropTypes.string.isRequired, + children: PropTypes.node.isRequired, +}; + +export default ListItem; diff --git a/components/react-todo-app/src/pages/Support/HelpCenter/index.js b/components/react-todo-app/src/pages/Support/HelpCenter/index.js new file mode 100644 index 00000000..63048888 --- /dev/null +++ b/components/react-todo-app/src/pages/Support/HelpCenter/index.js @@ -0,0 +1,125 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Card from "@mui/material/Card"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; +import DefaultFooter from "examples/Footers/DefaultFooter"; + +// HelpCenter page sections +import SocialAnalytics from "pages/Support/HelpCenter/sections/SocialAnalytics"; +import Faq from "pages/Support/HelpCenter/sections/Faq"; +import Features from "pages/Support/HelpCenter/sections/Features"; +import Contact from "pages/Support/HelpCenter/sections/Contact"; + +// Routes +import routes from "routes"; +import footerRoutes from "footer.routes"; + +// Images +import bgImage from "assets/images/bg3.jpg"; + +function HelpCenter() { + 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"], + }, + })} + > + How can we help you? + + + search issue + + + + + rgba(white.main, 0.8), + backdropFilter: "saturate(200%) blur(30px)", + boxShadow: ({ boxShadows: { xxl } }) => xxl, + overflow: "hidden", + }} + > + + + + + + + + + + ); +} + +export default HelpCenter; diff --git a/components/react-todo-app/src/pages/Support/HelpCenter/sections/Contact.js b/components/react-todo-app/src/pages/Support/HelpCenter/sections/Contact.js new file mode 100644 index 00000000..edb3858b --- /dev/null +++ b/components/react-todo-app/src/pages/Support/HelpCenter/sections/Contact.js @@ -0,0 +1,91 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKInput from "components/MKInput"; +import MKButton from "components/MKButton"; +import MKTypography from "components/MKTypography"; + +function ContactUs() { + return ( + + + + + We are here for you + + + For further questions, including partnership opportunities + + + + + + + + + + + + + + + + + + + Send Message + + + + + + + + ); +} + +export default ContactUs; diff --git a/components/react-todo-app/src/pages/Support/HelpCenter/sections/Faq.js b/components/react-todo-app/src/pages/Support/HelpCenter/sections/Faq.js new file mode 100644 index 00000000..0edc7db6 --- /dev/null +++ b/components/react-todo-app/src/pages/Support/HelpCenter/sections/Faq.js @@ -0,0 +1,126 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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 { useState } from "react"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// HelpCenter page components +import FaqCollapse from "pages/Support/HelpCenter/components/FaqCollapse"; + +function Faq() { + const [collapse, setCollapse] = useState(false); + + return ( + + + + + + Frequently Asked Questions + + + + A lot of people don't appreciate the moment until it's passed. I'm + not trying my hardest, and I'm not trying to do + + + + + (collapse === 1 ? setCollapse(false) : setCollapse(1))} + > + We're not always in the position that we want to be at. We're constantly + growing. We're constantly making mistakes. We're constantly trying to + express ourselves and actualize our dreams. If you have the opportunity to play this + game of life you need to appreciate every moment. A lot of people don't + appreciate the moment until it's passed. + + (collapse === 2 ? setCollapse(false) : setCollapse(2))} + > + It really matters and then like it really doesn't matter. What matters is the + people who are sparked by it. And the people who are like offended by it, it + doesn't matter. Because it's about motivating the doers. Because I'm + here to follow my dreams and inspire other people to follow their dreams, too. + We're not always in the position that we want to be at. We're constantly + growing. We're constantly making mistakes. We're constantly trying to + express ourselves and actualize our dreams. If you have the opportunity to play this + game of life you need to appreciate every moment. A lot of people don't + appreciate the moment until it's passed. + + (collapse === 3 ? setCollapse(false) : setCollapse(3))} + > + The time is now for it to be okay to be great. People in this world shun people for + being great. For being a bright color. For standing out. But the time is now to be + okay to be the greatest you. Would you believe in what you believe in, if you were the + only one who believed it? If everything I did failed - which it doesn't, it + actually succeeds - just the fact that I'm willing to fail is an inspiration. + People are so scared to lose that they don't even try. Like, one thing people + can't say is that I'm not trying, and I'm not trying my hardest, and + I'm not trying to do the best way I know how. + + (collapse === 4 ? setCollapse(false) : setCollapse(4))} + > + I always felt like I could do anything. That's the main thing people are + controlled by! Thoughts- their perception of themselves! They're slowed down by + their perception of themselves. If you're taught you can't do anything, you + won't do anything. I was taught I could do everything. +
+
+ If everything I did failed - which it doesn't, it actually succeeds - just the + fact that I'm willing to fail is an inspiration. People are so scared to lose + that they don't even try. Like, one thing people can't say is that I'm + not trying, and I'm not trying my hardest, and I'm not trying to do the best + way I know how. + + (collapse === 5 ? setCollapse(false) : setCollapse(5))} + > + There's nothing I really wanted to do in life that I wasn't able to get good + at. That's my skill. I'm not really specifically talented at anything except + for the ability to learn. That's what I do. That's what I'm here for. + Don't be afraid to be wrong because you can't learn anything from a + compliment. I always felt like I could do anything. That's the main thing people + are controlled by! Thoughts- their perception of themselves! They're slowed down + by their perception of themselves. If you're taught you can't do anything, + you won't do anything. I was taught I could do everything. + + + + + + ); +} + +export default Faq; diff --git a/components/react-todo-app/src/pages/Support/HelpCenter/sections/Features.js b/components/react-todo-app/src/pages/Support/HelpCenter/sections/Features.js new file mode 100644 index 00000000..ccdae67d --- /dev/null +++ b/components/react-todo-app/src/pages/Support/HelpCenter/sections/Features.js @@ -0,0 +1,135 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; +import Divider from "@mui/material/Divider"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DefaultBackgroundCard from "examples/Cards/BackgroundCards/DefaultBackgroundCard"; + +// HelpCenter page components +import ListItem from "pages/Support/HelpCenter/components/ListItem"; + +// Images +import bgImage1 from "assets/images/examples/color1.jpg"; +import bgImage2 from "assets/images/examples/color3.jpg"; + +function Features() { + return ( + + + + + + settings + + + + How To Handle Them + + + We're constantly trying to express ourselves and actualize our dreams. Don't + stop. + + + + + + + + + Gain access to the demographics, psychographics, and location of unique people who are + interested and talk about your brand. + + + Unify data from Facebook, Instagram, Twitter, LinkedIn, and Youtube to gain rich + insights from easy-to-use reports. + + + Track actions taken on your website that originated from social, and understand the + impact on your bottom line. + + + + + + + + No matter where you are, Trello stays in sync across all of your devices. + + + Whether it's for work or even the next family vacation, Trello helps your team. + + + Integrate the apps your team already uses directly into your workflow. + + + + + + + + + ); +} + +export default Features; diff --git a/components/react-todo-app/src/pages/Support/HelpCenter/sections/SocialAnalytics.js b/components/react-todo-app/src/pages/Support/HelpCenter/sections/SocialAnalytics.js new file mode 100644 index 00000000..6c2ddb70 --- /dev/null +++ b/components/react-todo-app/src/pages/Support/HelpCenter/sections/SocialAnalytics.js @@ -0,0 +1,84 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DefaultInfoCard from "examples/Cards/InfoCards/DefaultInfoCard"; + +function SocialAnalytics() { + return ( + + + + + Social Analytics + + + Turn your idea into a startup + + + We're constantly trying to express ourselves and actualize our dreams. If you have + the opportunity to play + + + + + + + + + + + + + + + + ); +} + +export default SocialAnalytics; diff --git a/components/react-todo-app/src/pages/Support/Privacy/index.js b/components/react-todo-app/src/pages/Support/Privacy/index.js new file mode 100644 index 00000000..4c7e502a --- /dev/null +++ b/components/react-todo-app/src/pages/Support/Privacy/index.js @@ -0,0 +1,210 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Card from "@mui/material/Card"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; +import DefaultFooter from "examples/Footers/DefaultFooter"; + +// Routes +import routes from "routes"; +import footerRoutes from "footer.routes"; + +function Privacy() { + return ( + <> + + + + + + + + + Privacy & Policy + + + Last modified: Sept 07 2021 + + + + + Introduction + + + At Creative Tim, accessible{" "} + info.main } }} + > + here + + , one of our main priorities is the privacy of our visitors. This Privacy Policy + document contains types of information that is collected and recorded by Website + Name and how we use it. +
+
+ If you have additional questions or require more information about our Privacy + Policy, do not hesitate to contact us through email at hello@creative-tim.com +
+
+ This privacy policy applies only to our online activities and is valid for + visitors to our website with regards to the information that they shared and/or + collect in{" "} + info.main } }} + > + Creative Tim + + . This policy is not applicable to any information collected offline or via + channels other than this website. + + + Managing Your Information + + + Unless otherwise stated, Creative Tim and/or its licensors own the intellectual + property rights for all material on Creative Tim. All intellectual property + rights are reserved. You may access this from Creative Tim for your own personal + use subjected to restrictions set in these terms and conditions. + + + You must not: + + + + + Republish material from Creative Tim + + + + + Sell, rent or sub-license material from Creative Tim + + + + + Reproduce, duplicate or copy material from Creative Tim + + + + + Redistribute content from Creative Tim + + + + + This Agreement shall begin on the date hereof. Our Terms and Conditions were + created with the help of the{" "} + + Terms And Conditions Generator + {" "} + and the{" "} + info.main } }} + > + Privacy Policy Generator + + . + + + Parts of this website offer an opportunity for users to post and exchange + opinions and information in certain areas of the website. Creative Tim does not + filter, edit, publish or review Comments prior to their presence on the website. + Comments do not reflect the views and opinions of Creative Tim,its agents and/or + affiliates. Comments reflect the views and opinions of the person who post their + views and opinions. To the extent permitted by applicable laws, Creative Tim + shall not be liable for the Comments or for any liability, damages or expenses + caused and/or suffered as a result of any use of and/or posting of and/or + appearance of the Comments on this website. + + + Creative Tim reserves the right to monitor all Comments and to remove any + Comments which can be considered inappropriate, offensive or causes breach of + these Terms and Conditions. + + + Security + + + We shall not be hold responsible for any content that appears on your Website. + You agree to protect and defend us against all claims that is rising on your + Website. No link(s) should appear on any Website that may be interpreted as + libelous, obscene or criminal, or which infringes, otherwise violates, or + advocates the infringement or other violation of, any third party rights. + + + + + + + + + + + + ); +} + +export default Privacy; diff --git a/components/react-todo-app/src/pages/presentation/components/BuiltByDevelopers/index.js b/components/react-todo-app/src/pages/presentation/components/BuiltByDevelopers/index.js new file mode 100644 index 00000000..023797d2 --- /dev/null +++ b/components/react-todo-app/src/pages/presentation/components/BuiltByDevelopers/index.js @@ -0,0 +1,90 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function BuiltByDevelopers() { + const bgImage = + "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/desktop.jpg"; + + return ( + + `${linearGradient( + rgba(gradients.dark.main, 0.8), + rgba(gradients.dark.state, 0.8) + )}, url(${bgImage})`, + backgroundSize: "cover", + backgroundPosition: "center", + }} + > + + + + Built by developers + + + Complex Documentation + + + From colors, cards, typography to complex elements, you will find the full + documentation. Play with the utility classes and you will create unlimited combinations + for our components. + + + Read docs arrow_forward + + + + + ); +} + +export default BuiltByDevelopers; diff --git a/components/react-todo-app/src/pages/presentation/components/ExampleCard/index.js b/components/react-todo-app/src/pages/presentation/components/ExampleCard/index.js new file mode 100644 index 00000000..090a5179 --- /dev/null +++ b/components/react-todo-app/src/pages/presentation/components/ExampleCard/index.js @@ -0,0 +1,78 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +function ExampleCard({ image, name, count, ...rest }) { + return ( + + + + + {name || count > 0 ? ( + + {name && ( + + {name} + + )} + {count > 0 && ( + + {count} {count === 1 ? "Example" : "Examples"} + + )} + + ) : null} + + ); +} + +// Setting default props for the ExampleCard +ExampleCard.defaultProps = { + name: "", + count: 0, +}; + +// Typechecking props for the ExampleCard +ExampleCard.propTypes = { + image: PropTypes.string.isRequired, + name: PropTypes.string, + count: PropTypes.number, +}; + +export default ExampleCard; diff --git a/components/react-todo-app/src/pages/presentation/index.js b/components/react-todo-app/src/pages/presentation/index.js new file mode 100644 index 00000000..eff555b5 --- /dev/null +++ b/components/react-todo-app/src/pages/presentation/index.js @@ -0,0 +1,229 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Card from "@mui/material/Card"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; +import MKTypography from "components/MKTypography"; +import MKSocialButton from "components/MKSocialButton"; + +// Material Kit 2 PRO React examples +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; +import DefaultFooter from "examples/Footers/DefaultFooter"; +import FilledInfoCard from "examples/Cards/InfoCards/FilledInfoCard"; + +// Presentation page sections +import Counters from "pages/presentation/sections/Counters"; +import Information from "pages/presentation/sections/Information"; +import DesignBlocks from "pages/presentation/sections/DesignBlocks"; +import AuthPages from "pages/presentation/sections/AuthPages"; +import Pages from "pages/presentation/sections/Pages"; +import Testimonials from "pages/presentation/sections/Testimonials"; +import Pricing from "pages/presentation/sections/Pricing"; + +// Presentation page components +import BuiltByDevelopers from "pages/presentation/components/BuiltByDevelopers"; + +// Routes +import routes from "routes"; +import footerRoutes from "footer.routes"; + +// Images +import bgImage from "assets/images/bg-presentation.jpg"; + +function Presentation() { + return ( + <> + + + + + ({ + [breakpoints.down("md")]: { + fontSize: size["3xl"], + }, + })} + > + Material Kit 2 React{" "} + + + + Start the Development with a ReactJS & MUI Design System inspired by Material Design. + + + + + rgba(white.main, 0.8), + backdropFilter: "saturate(200%) blur(30px)", + boxShadow: ({ boxShadows: { xxl } }) => xxl, + }} + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Thank you for your support! + + + We deliver the best web products + + + + + +  Tweet + + + +  Share + + + +  Pin it + + + + + + + + + + + ); +} + +export default Presentation; diff --git a/components/react-todo-app/src/pages/presentation/sections/AuthPages.js b/components/react-todo-app/src/pages/presentation/sections/AuthPages.js new file mode 100644 index 00000000..688d686f --- /dev/null +++ b/components/react-todo-app/src/pages/presentation/sections/AuthPages.js @@ -0,0 +1,106 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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-dom components +import { Link } from "react-router-dom"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; +import MKButton from "components/MKButton"; + +// Presentation page components +import ExampleCard from "pages/presentation/components/ExampleCard"; + +// Images +import bgPattern from "assets/images/shapes/pattern-lines.svg"; + +function AuthPages() { + // pages images + const img1 = + "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/presentation/account/sign-up-cover.jpg"; + const img2 = + "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/presentation/account/reset-cover.jpg"; + const img3 = + "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/presentation/account/signin-basic.jpg"; + + return ( + + + + + + + Account Pages for beautiful webapps + + + We created many examples for pages like Signup, Signin, Forgot Password, 2FA + Authentification and so on. Just choose between a Basic Design, an illustration or a + cover and you are good to go! + + + + view pages + + + view signup pages + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default AuthPages; diff --git a/components/react-todo-app/src/pages/presentation/sections/Counters.js b/components/react-todo-app/src/pages/presentation/sections/Counters.js new file mode 100644 index 00000000..0b608147 --- /dev/null +++ b/components/react-todo-app/src/pages/presentation/sections/Counters.js @@ -0,0 +1,63 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Divider from "@mui/material/Divider"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import DefaultCounterCard from "examples/Cards/CounterCards/DefaultCounterCard"; + +function Counters() { + return ( + + + + + + + + + + + + + + + + + + ); +} + +export default Counters; diff --git a/components/react-todo-app/src/pages/presentation/sections/DesignBlocks.js b/components/react-todo-app/src/pages/presentation/sections/DesignBlocks.js new file mode 100644 index 00000000..5d6ac0ea --- /dev/null +++ b/components/react-todo-app/src/pages/presentation/sections/DesignBlocks.js @@ -0,0 +1,94 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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-dom components +import { Link } from "react-router-dom"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; +import MKTypography from "components/MKTypography"; + +// Presentation page components +import ExampleCard from "pages/presentation/components/ExampleCard"; + +// Data +import data from "pages/presentation/sections/data/designBlocksData"; + +function DesignBlocks() { + const renderData = data.map(({ title, description, items }) => ( + + + + + {title} + + + {description} + + + + + + {items.map(({ image, name, count, route }) => ( + + + + + + ))} + + + + )); + + return ( + + + + + + Huge collection of sections + + + We have created multiple options for you to put together and customise into pixel + perfect pages. + + + + {renderData} + + ); +} + +export default DesignBlocks; diff --git a/components/react-todo-app/src/pages/presentation/sections/Information.js b/components/react-todo-app/src/pages/presentation/sections/Information.js new file mode 100644 index 00000000..5b95b8e8 --- /dev/null +++ b/components/react-todo-app/src/pages/presentation/sections/Information.js @@ -0,0 +1,105 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; + +// Material Kit 2 PRO React examples +import RotatingCard from "examples/Cards/RotatingCard"; +import RotatingCardFront from "examples/Cards/RotatingCard/RotatingCardFront"; +import RotatingCardBack from "examples/Cards/RotatingCard/RotatingCardBack"; +import DefaultInfoCard from "examples/Cards/InfoCards/DefaultInfoCard"; + +// Images +import bgFront from "assets/images/rotating-card-bg-front.jpeg"; +import bgBack from "assets/images/rotating-card-bg-back.jpeg"; + +function Information() { + return ( + + + + + + + Feel the +
+ Material Kit + + } + description="All the MUI components that you need in a development have been re-design with the new look." + /> + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default Information; diff --git a/components/react-todo-app/src/pages/presentation/sections/Pages.js b/components/react-todo-app/src/pages/presentation/sections/Pages.js new file mode 100644 index 00000000..0ce9d26f --- /dev/null +++ b/components/react-todo-app/src/pages/presentation/sections/Pages.js @@ -0,0 +1,95 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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-dom components +import { Link } from "react-router-dom"; + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; +import MKTypography from "components/MKTypography"; + +// Presentation page components +import ExampleCard from "pages/presentation/components/ExampleCard"; + +// Data +import data from "pages/presentation/sections/data/pagesData"; + +function Pages() { + const renderData = data.map(({ image, name, route }) => ( + + + + + + )); + + return ( + + + + + + With our coded pages + + + The easiest way to get started is to use one of our +
pre-built example pages. + + + + + + + + {renderData} + + + + + + Presentation Pages for Company, Landing Pages, Blogs and Support + + + These is just a small selection of the multiple possibitilies you have. Focus on the + business, not on the design. + + + + + + + ); +} + +export default Pages; diff --git a/components/react-todo-app/src/pages/presentation/sections/Pricing.js b/components/react-todo-app/src/pages/presentation/sections/Pricing.js new file mode 100644 index 00000000..be35102f --- /dev/null +++ b/components/react-todo-app/src/pages/presentation/sections/Pricing.js @@ -0,0 +1,161 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKBadge from "components/MKBadge"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import SimplePricingCard from "examples/Cards/PricingCards/SimplePricingCard"; + +// Images +import bgPattern from "assets/images/shapes/pattern-lines.svg"; + +function Pricing() { + return ( + <> + + + + + + + + Ready to get Material Kit? + + + Based on the license you get, you will have direct access to our team
of + developers who built the product. + + + + + + + + + + + + + + + + + + + + + + + + lock Secured Payment by 2Checkout with: + + + +   + +   + +   + + + + Info: If you are a Registered Company inside the European Union you will be + able to add your VAT ID after your Press "Buy Now" + + + + + + ); +} + +export default Pricing; diff --git a/components/react-todo-app/src/pages/presentation/sections/Testimonials.js b/components/react-todo-app/src/pages/presentation/sections/Testimonials.js new file mode 100644 index 00000000..753b0d1b --- /dev/null +++ b/components/react-todo-app/src/pages/presentation/sections/Testimonials.js @@ -0,0 +1,112 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +// @mui material components +import Container from "@mui/material/Container"; +import Grid from "@mui/material/Grid"; +import Divider from "@mui/material/Divider"; + +// Material Kit 2 PRO React components +import MKBox from "components/MKBox"; +import MKTypography from "components/MKTypography"; + +// Material Kit 2 PRO React examples +import DefaultReviewCard from "examples/Cards/ReviewCards/DefaultReviewCard"; + +// Images +import appleLogo from "assets/images/logos/gray-logos/logo-apple.svg"; +import facebookLogo from "assets/images/logos/gray-logos/logo-facebook.svg"; +import nasaLogo from "assets/images/logos/gray-logos/logo-nasa.svg"; +import vodafoneLogo from "assets/images/logos/gray-logos/logo-vodafone.svg"; +import digitalOceanLogo from "assets/images/logos/gray-logos/logo-digitalocean.svg"; + +function Information() { + return ( + + + + Trusted by over + + 1,679,477+ web developers + + + Many Fortune 500 companies, startups, universities and governmental institutions love + Creative Tim's products. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default Information; diff --git a/components/react-todo-app/src/pages/presentation/sections/data/designBlocksData.js b/components/react-todo-app/src/pages/presentation/sections/data/designBlocksData.js new file mode 100644 index 00000000..c6886735 --- /dev/null +++ b/components/react-todo-app/src/pages/presentation/sections/data/designBlocksData.js @@ -0,0 +1,260 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +const imagesPrefix = + "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/presentation/sections"; + +export default [ + { + title: "Design Blocks", + description: "A selection of 45 page sections that fit perfectly in any combination", + items: [ + { + image: `${imagesPrefix}/headers.jpg`, + name: "Page Headers", + count: 10, + route: "/sections/page-sections/page-headers", + }, + { + image: `${imagesPrefix}/features.jpg`, + name: "Features", + count: 14, + route: "/sections/page-sections/features", + }, + { + image: `${imagesPrefix}/pricing.jpg`, + name: "Pricing", + count: 8, + route: "/sections/page-sections/pricing", + }, + { + image: `${imagesPrefix}/faq.jpg`, + name: "FAQ", + count: 1, + route: "/sections/page-sections/faq", + }, + { + image: `${imagesPrefix}/blogs.jpg`, + name: "Blog Posts", + count: 11, + route: "/sections/page-sections/blog-posts", + }, + { + image: `${imagesPrefix}/testimonials.jpg`, + name: "Testimonials", + count: 11, + route: "/sections/page-sections/testimonials", + }, + { + image: `${imagesPrefix}/teams.jpg`, + name: "Teams", + count: 6, + route: "/sections/page-sections/teams", + }, + { + image: `${imagesPrefix}/stats.jpg`, + name: "Stats", + count: 3, + route: "/sections/page-sections/stats", + }, + { + image: `${imagesPrefix}/call-to-action.jpg`, + name: "Call to Actions", + count: 8, + route: "/sections/page-sections/cta", + }, + { + image: `${imagesPrefix}/projects.jpg`, + name: "Applications", + count: 6, + route: "/sections/page-sections/applications", + }, + { + image: `${imagesPrefix}/logo-area.jpg`, + name: "Logo Areas", + count: 4, + route: "/sections/page-sections/logo-areas", + }, + { + image: `${imagesPrefix}/footers.jpg`, + name: "Footers", + count: 10, + route: "/sections/page-sections/footers", + }, + { + image: `${imagesPrefix}/general-cards.jpg`, + name: "General Cards", + count: 9, + route: "/sections/page-sections/general-cards", + }, + { + image: `${imagesPrefix}/content-sections.jpg`, + name: "Content Sections", + count: 8, + route: "/sections/page-sections/content-sections", + }, + ], + }, + { + title: "Navigation", + description: "30+ components that will help go through the pages", + items: [ + { + image: `${imagesPrefix}/navbars.jpg`, + name: "Navbars", + count: 4, + route: "/sections/navigation/navbars", + }, + { + image: `${imagesPrefix}/nav-tabs.jpg`, + name: "Nav Tabs", + count: 2, + route: "/sections/navigation/nav-tabs", + }, + { + image: `${imagesPrefix}/pagination.jpg`, + name: "Pagination", + count: 3, + route: "/sections/navigation/pagination", + }, + ], + }, + { + title: "Input Areas", + description: "50+ elements that you need for text manipulation and insertion", + items: [ + { + image: `${imagesPrefix}/newsletters.jpg`, + name: "Newsletters", + count: 6, + route: "/sections/input-areas/newsletter", + }, + { + image: `${imagesPrefix}/contact-sections.jpg`, + name: "Contact Sections", + count: 8, + route: "/sections/input-areas/contact-sections", + }, + { + image: `${imagesPrefix}/forms.jpg`, + name: "Forms", + count: 3, + route: "/sections/input-areas/forms", + }, + { + image: `${imagesPrefix}/inputs.jpg`, + name: "Inputs", + count: 6, + route: "/sections/input-areas/inputs", + }, + ], + }, + { + title: "Attention Catchers", + description: "20+ Fully coded components that popup from different places of the screen", + items: [ + { + image: `${imagesPrefix}/alerts.jpg`, + name: "Alerts", + count: 4, + route: "/sections/attention-catchers/alerts", + }, + { + image: `${imagesPrefix}/toasts.jpg`, + name: "Notifications", + count: 3, + route: "/sections/attention-catchers/notifications", + }, + { + image: `${imagesPrefix}/popovers.jpg`, + name: "Tooltips & Popovers", + count: 2, + route: "/sections/attention-catchers/tooltips-popovers", + }, + { + image: `${imagesPrefix}/modals.jpg`, + name: "Modals", + count: 5, + route: "/sections/attention-catchers/modals", + }, + ], + }, + { + title: "Elements", + description: "80+ carefully crafted small elements that come with multiple colors and shapes", + items: [ + { + image: `${imagesPrefix}/buttons.jpg`, + name: "Buttons", + count: 6, + route: "/sections/elements/buttons", + }, + { + image: `${imagesPrefix}/avatars.jpg`, + name: "Avatars", + count: 2, + route: "/sections/elements/avatars", + }, + { + image: `${imagesPrefix}/dropdowns.jpg`, + name: "Dropdowns", + count: 2, + route: "/sections/elements/dropdowns", + }, + { + image: `${imagesPrefix}/switch.jpg`, + name: "Toggles", + count: 2, + route: "/sections/elements/toggles", + }, + { + image: `${imagesPrefix}/social-buttons.jpg`, + name: "Social Buttons", + count: 2, + route: "/sections/elements/social-buttons", + }, + { + image: `${imagesPrefix}/breadcrumbs.jpg`, + name: "Breadcrumbs", + count: 1, + route: "/sections/elements/breadcrumbs", + }, + { + image: `${imagesPrefix}/badges.jpg`, + name: "Badges", + count: 3, + route: "/sections/elements/badges", + }, + { + image: `${imagesPrefix}/progress.jpg`, + name: "Progress Bars", + count: 4, + route: "/sections/elements/progress-bars", + }, + { + image: `${imagesPrefix}/tables.jpg`, + name: "Tables", + count: 3, + route: "/sections/elements/tables", + }, + { + image: `${imagesPrefix}/typography.jpg`, + name: "Typography", + count: 2, + route: "/sections/elements/typography", + }, + ], + }, +]; diff --git a/components/react-todo-app/src/pages/presentation/sections/data/pagesData.js b/components/react-todo-app/src/pages/presentation/sections/data/pagesData.js new file mode 100644 index 00000000..90df975e --- /dev/null +++ b/components/react-todo-app/src/pages/presentation/sections/data/pagesData.js @@ -0,0 +1,80 @@ +/* +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +const imagesPrefix = + "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/presentation/pages"; + +export default [ + { + image: `${imagesPrefix}/coworking.jpg`, + name: "Coworking Page", + route: "/pages/landing-pages/coworking", + }, + { + image: `${imagesPrefix}/rental.jpg`, + name: "Rental Page", + route: "/pages/landing-pages/rental", + }, + { + image: `${imagesPrefix}/about-us.jpg`, + name: "About Us Page", + route: "/pages/company/about-us", + }, + { + image: `${imagesPrefix}/pricing.jpg`, + name: "Pricing Page", + route: "/pages/company/pricing", + }, + { + image: `${imagesPrefix}/help-center.jpg`, + name: "Help Center", + route: "/pages/support/help-center", + }, + { + image: `${imagesPrefix}/contact.jpg`, + name: "Contact Us Page", + route: "/pages/support/contact-us", + }, + { + image: `${imagesPrefix}/faq.jpg`, + name: "FAQ Page", + route: "/pages/support/faq", + }, + { + image: `${imagesPrefix}/privacy.jpg`, + name: "Privacy Page", + route: "/pages/support/privacy", + }, + { + image: `${imagesPrefix}/desktop.jpg`, + name: "Desktop App Page", + route: "/pages/apps/desktop-app", + }, + { + image: `${imagesPrefix}/single-article.jpg`, + name: "Single Article Blog", + route: "/pages/blogs/single-article", + }, + { + image: `${imagesPrefix}/author.jpg`, + name: "Author Blog Page", + route: "/pages/blogs/author", + }, + { + image: `${imagesPrefix}/virtual-reality.jpg`, + name: "Virtual Reality", + route: "/pages/extra/virtual-reality", + }, +]; diff --git a/components/react-todo-app/src/routes.js b/components/react-todo-app/src/routes.js new file mode 100644 index 00000000..21881f73 --- /dev/null +++ b/components/react-todo-app/src/routes.js @@ -0,0 +1,64 @@ +/** +========================================================= +* Material Kit 2 PRO React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-kit-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. +*/ + +/** + All of the routes for the Material Kit 2 PRO React React are added here, + You can add a new route, customize the routes and delete the routes here. + + Once you add a new route on this file it will be visible automatically on + the Navbar. + + For adding a new route you can follow the existing routes in the routes array. + 1. The `name` key is used for the name of the route on the Navbar. + 2. The `icon` key is used for the icon of the route on the Navbar. + 3. The `collapse` key is used for making a collapsible item on the Navbar that contains other routes + inside (nested routes), you need to pass the nested routes inside an array as a value for the `collapse` key. + 4. The `route` key is used to store the route location which is used for the react router. + 5. The `href` key is used to store the external links location. + 6. The `component` key is used to store the component of its route. + 7. The `dropdown` key is used to define that the item should open a dropdown for its collapse items . + 8. The `description` key is used to define the description of + a route under its name. + 9. The `columns` key is used to define that how the content should look inside the dropdown menu as columns, + you can set the columns amount based on this key. + 10. The `rowsPerColumn` key is used to define that how many rows should be in a column. +*/ + +// @mui material components +import Icon from "@mui/material/Icon"; + +// Pages + +// Account + +// Sections +import Todo from "layouts/pages/todo"; + +const routes = [ + { + name: "Todo", + icon: Todo, + route: "/todo", + collapse: [ + { + name: "todo", + route: "/todo", + component: , + }, + ], + }, +]; + +export default routes;