Showing preview only (297K chars total). Download the full file or copy to clipboard to get everything.
Repository: creativetimofficial/vision-ui-dashboard-chakra
Branch: main
Commit: 1a8f8ae5f5ae
Files: 76
Total size: 275.3 KB
Directory structure:
gitextract_95eyr4c7/
├── .gitattributes
├── .gitignore
├── CHANGELOG.md
├── ISSUE_TEMPLATE.md
├── LICENSE
├── README.md
├── commit.sh
├── genezio.yaml
├── gulpfile.js
├── jsconfig.json
├── package.json
├── public/
│ ├── index.html
│ ├── manifest.json
│ └── robots.txt
└── src/
├── components/
│ ├── Card/
│ │ ├── Card.js
│ │ ├── CardBody.js
│ │ └── CardHeader.js
│ ├── Charts/
│ │ ├── BarChart.js
│ │ └── LineChart.js
│ ├── Configurator/
│ │ └── Configurator.js
│ ├── FixedPlugin/
│ │ └── FixedPlugin.js
│ ├── Footer/
│ │ ├── AuthFooter.js
│ │ └── Footer.js
│ ├── GradientBorder/
│ │ └── GradientBorder.js
│ ├── Icons/
│ │ ├── IconBox.js
│ │ └── Icons.js
│ ├── Layout/
│ │ ├── MainPanel.js
│ │ ├── PanelContainer.js
│ │ └── PanelContent.js
│ ├── Menu/
│ │ └── ItemContent.js
│ ├── Navbars/
│ │ ├── AdminNavbar.js
│ │ ├── AdminNavbarLinks.js
│ │ ├── AuthNavbar.js
│ │ └── SearchBar/
│ │ └── SearchBar.js
│ ├── RTLProvider/
│ │ └── RTLProvider.js
│ ├── Separator/
│ │ └── Separator.js
│ ├── Sidebar/
│ │ ├── Sidebar.js
│ │ └── SidebarHelp.js
│ └── Tables/
│ ├── BillingRow.js
│ ├── DashboardTableRow.js
│ ├── InvoicesRow.js
│ ├── TablesProjectRow.js
│ ├── TablesTableRow.js
│ ├── TimelineRow.js
│ └── TransactionRow.js
├── index.js
├── layouts/
│ ├── Admin.js
│ ├── Auth.js
│ └── RTL.js
├── routes.js
├── theme/
│ ├── additions/
│ │ ├── card/
│ │ │ ├── Card.js
│ │ │ ├── CardBody.js
│ │ │ └── CardHeader.js
│ │ └── layout/
│ │ ├── MainPanel.js
│ │ ├── PanelContainer.js
│ │ └── PanelContent.js
│ ├── bgAdmin.js
│ ├── bgAuth.js
│ ├── components/
│ │ ├── badge.js
│ │ ├── button.js
│ │ ├── drawer.js
│ │ ├── link.js
│ │ └── switch.js
│ ├── foundations/
│ │ └── breakpoints.js
│ ├── styles.js
│ ├── themeAdmin.js
│ └── themeAuth.js
├── variables/
│ ├── charts.js
│ └── general.js
└── views/
├── Dashboard/
│ ├── Billing.js
│ ├── Dashboard.js
│ ├── Profile.js
│ └── Tables.js
├── Pages/
│ ├── SignIn.js
│ └── SignUp.js
└── RTL/
└── RTLPage.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitattributes
================================================
# Auto detect text files and perform LF normalization
* text=auto
================================================
FILE: .gitignore
================================================
node_modules
package-lock.json
build
================================================
FILE: CHANGELOG.md
================================================
# Changelog
## [1.0.2] 2022-07-24
### Update v1.0.2
- We used the Chakra UI Circular Progress instead of the plugins since they were deprecated. The plugins are still used in previous versions!
## [1.0.1] 2022-05-16
### Update v1.0.1
- The problem with npm install/ building the project was fixed.
### Added dependencies
```
chakra-ui/system 1.12.1
```
### Updated dependencies
```
chakra-ui/icons 1.0.14 → 1.1.5
chakra-ui/react 1.6.5 → 1.8.8
chakra-ui/theme-tools 1.1.9 → 1.3.6
```
## [1.0.0] 2022-01-10
### Original Release
- Added Chakra UI as base framework
================================================
FILE: ISSUE_TEMPLATE.md
================================================
<!--
IMPORTANT: Please use the following link to create a new issue:
https://www.creative-tim.com/new-issue/vision-ui-dashboard-react
**If your issue was not created using the app above, it will be closed immediately.**
-->
<!--
Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:
👉 https://www.creative-tim.com/bundles
👉 https://www.creative-tim.com
-->
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2022 Creative Tim
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# [Vision UI Free Chakra](https://demos.creative-tim.com/vision-ui-dashboard-chakra) [](https://twitter.com/intent/tweet?url=https://www.creative-tim.com/product/vision-ui-dashboard-chakra&text=Check%20Vision%20UI%20Dashboard%20made%20by%20@simmmple_web%20and%20@CreativeTim%20#webdesign%20#dashboard%20#react)
 [](https://github.com/creativetimofficial/vision-ui-dashboard-chakra/issues?q=is%3Aopen+is%3Aissue) [](https://github.com/creativetimofficial/vision-ui-dashboard-chakra/issues?q=is%3Aissue+is%3Aclosed)
Most trendiest, complex and innovative Free Chakra UI Dashboard Made by [Simmmple](https://simmmple.com?ref=readme-vudchakra) & [Creative Tim](https://creative-tim.com/?ref=readme-vudchakra). Check our latest Free Chakra UI Dashboard.
Start your Development with an Innovative Admin Template for Chakra UI and React. If you like the look & feel of the hottest design trend right now, Vision UI, you will fall in love with this dashboard! It features a huge number of components built to fit together and look amazing.
**Fully Coded Elements**
Vision UI Dashboard Free Chakra UI is built with over 70+ frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining. All components can take variations in color, which you can easily modify using JSS files and classes. You will save a lot of time going from prototyping to full-functional code because all elements are implemented. This Premium Chakra UI Dashboard is coming with prebuilt design blocks, so the development process is seamless, switching from our pages to the real website is very easy to be done.
Check all components <a href="https://demos.creative-tim.com/docs-vision-ui-dashboard-chakra?ref=readme-vudchakra" target="_blank">here</a>.
**Documentation built by Developers**
Each element is well presented in a very complex documentation.
You can read more about the <a href="https://demos.creative-tim.com/docs-vision-ui-dashboard-chakra?ref=readme-vudchakra" target="_blank">documentation here</a>.
**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. Every page is spaced well, with attractive layouts and pleasing shapes. From specially designed dashboards for smart homes, virtual reality, and automotives to CRM admins, Vision UI Dashboard Free Chakra UI has everything you need to quickly set up an amazing project.
View <a href="https://demos.creative-tim.com/vision-ui-dashboard-chakra?ref=readme-vudchakra" target="_blank">example pages here</a>.
**HELPFUL LINKS**
- View <a href="https://github.com/creativetimofficial/vision-ui-dashboard-chakra" target="_blank">Github Repository</a>
- Check <a href="https://www.creative-tim.com/knowledge-center?ref=readme-vudchakra" target="_blank">FAQ Page</a>
#### 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:
- [Chakra UI](https://chakra-ui.com/?ref=creative-tim) - Modern Open source framework
- [ApexCharts.js](https://apexcharts.com?ref=creative-tim) - Modern & Interactive Open-source charts
- [Quill Editor](https://www.npmjs.com/package/react-quill?ref=creative-tim) - ReactJS Text Editor provided by Quill
- [React Table](https://react-table.tanstack.com/docs/overview?ref=creative-tim) - Collection of hooks for building powerful ReactJD tables
- [ReactJS](https://reactjs.org?ref=creative-tim) - A popular JavaScript library for building user interfaces
Let us know your thoughts below. And good luck with development!
## Table of Contents
- [Vision UI Dashboard Free Chakra] (https://demos.creative-tim.com/vision-ui-dashboard-chakra/?ref=readme-vudchakra)
- [Table of Contents](#table-of-contents)
- [Versions](#versions)
- [Demo](#demo)
- [Quick start](#quick-start)
- [Deploy](#deploy)
- [Documentation](#documentation)
- [File Structure](#file-structure)
- [Browser Support](#browser-support)
- [Resources](#resources)
- [Reporting Issues](#reporting-issues)
- [Licensing](#licensing)
- [Useful Links](#useful-links)
- [Social Media](#social-media)
## Versions
[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/react-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/vision-ui-dashboard-react?ref=readme-vudchakra)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/chakra-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/vision-ui-dashboard-chakra?ref=readme-vudchakra)
| React | Chakra |
| ]------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [![Vision UI Dashboard Free React] (https://i.ibb.co/RYKtQ4M/vision-ui-free-react-ct.png)](https://www.creative-tim.com/product/vision-ui-dashboard-react?ref=readme-vudchakra) | [![Vision UI Dashboard Free Chakra] (https://i.ibb.co/kg5mNxm/vision-ui-free-chakra-ct.png)](https://www.creative-tim.com/product/vision-ui-dashboard-chakra?ref=readme-vudchakra) |
## Demo
[View all Pages](https://demos.creative-tim.com/vision-ui-dashboard-chakra?ref=readme-vudchakra).
# Quick start
Quick start options:
- Buy from [Creative Tim](https://www.creative-tim.com/product/vision-ui-dashboard-chakra?ref=readme-vudchakra).
## Deploy
:rocket: You can deploy your own version of the template to Genezio with one click:
[](https://app.genez.io/start/deploy?repository=https://github.com/creativetimofficial/vision-ui-dashboard-chakra&utm_source=github&utm_medium=referral&utm_campaign=github-creativetim&utm_term=deploy-project&utm_content=button-head)
## Terminal Commands
1. Download and Install NodeJs LTS version from [NodeJs Official Page](https://nodejs.org/en/download/).
2. Navigate to the root / directory and run yarn install/npm install to install our local dependencies.
## Documentation
The documentation for the Vision UI Dashboard Free is hosted at our [website](https://demos.creative-tim.com/docs-vision-ui-dashboard-chakra?ref=readme-vudchakra).
## File Structure
Within the download you'll find the following directories and files:
```
vision-dashboard-chakra-free/
├── .gitattributes
├── .gitigonore
├── CHANGELOG.md
├── commit.sh
├── gulpfile.js
├── ISSUE_TEMPLATE.md
├── jsconfig.json
├── package.json
├── README.md
├── public
│ ├── favicon.png
│ ├── index.html
│ ├── apple-icon.png
│ ├── robots.txt
│ └── manifest.json
└── src
├── assets
│ ├── img
│ └── svg
├── components
│ ├── Card
│ │ ├── Card.js
│ │ ├── CardBody.js
│ │ └── CardHeader.js
│ ├── Charts
│ │ ├── BarChart.js
│ │ └── LineChart.js
│ ├── Configurator
│ │ └── Configurator.js
│ ├── FixedPlugin
│ │ └── FixedPlugin.js
│ ├── Footer
│ │ └── Footer.js
│ ├── GradientBorder
│ │ └── GradientBorder.js
│ ├── Icons
│ │ ├── IconBox.js
│ │ └── Icons.js
│ ├── Layout
│ │ ├── MainPanel.js
│ │ ├── PanelContainer.js
│ │ └── PanelContent.js
│ ├── Menu
│ │ └── ItemContent.js
│ ├── Navbars
│ │ ├── Searchbar
│ │ │ └── SearchBar.js
│ │ ├── AdminNavbar.js
│ │ ├── AdminNavbarLinks.js
│ │ └── AuthNavbar.js
│ ├── Other
│ │ ├── BillingRow.js
│ │ ├── InvoicesRow.js
│ │ └── TransactionRow.js
│ ├── Separator
│ │ └── Separator.js
│ ├── Sidebar
│ │ ├── Sidebar.js
│ │ └── SidebarHelp.js
│ └── Tables
│ ├── BillingRow.js
│ ├── DashboardTableRow.js
│ ├── InvoicesRow.js
│ ├── TablesProjectRow.js
│ ├── TablesTableRow.js
│ ├── TimelineRow.js
│ └── TransactionRow.js
├── layouts
│ ├── Admin.js
│ ├── Auth.js
│ └── RTL.js
├── theme
│ ├── additions
│ │ ├── card
│ │ │ ├── Card.js
│ │ │ ├── CardBody.js
│ │ │ └── CardHeader.js
│ │ ├── layout
│ │ │ ├── MainPanel.js
│ │ │ ├── PanelContainer.js
│ │ │ └── PanelContent.js
│ ├── components
│ │ ├── badge.js
│ │ ├── button.js
│ │ ├── link.js
│ │ └── drawer.js
│ ├── foundations
│ │ └── breakpoints.js
│ ├── bgAdmin.js
│ ├── bgAuth.js
│ ├── styles.js
│ ├── themeAdmin.js
│ └── themeAuth.js
├── variables
│ ├── charts.js
│ └── general.js
├── views
│ ├── Dashboard
│ │ ├── Billing.js
│ │ ├── Dashboard.js
│ │ ├── Profile.js
│ │ └── Tables.js
│ ├── Pages
│ ├── SignIn.js
│ └── SignUp.js
│ └── RTL
│ └── RTLPage.js
├── index.js
└── routes.js
```
## Browser Support
At present, we officially aim to support the last two versions of the following browsers:
<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/chrome-logo.png?raw=true" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/firefox-logo.png" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/edge-logo.png" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/safari-logo.png" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/opera-logo.png" width="64" height="64">
## Resources
- [Live Preview](https://demos.creative-tim.com/vision-ui-dashboard-chakra?ref=readme-vudchakra)
- [Buy Page](https://www.creative-tim.com/product/vision-ui-dashboard-chakra?ref=readme-vudchakra)
- License Agreement: <https://www.creative-tim.com/license?ref=readme-vudchakra>
- Documentation is [here](https://demos.creative-tim.com/docs-vision-ui-dashboard-chakra?ref=readme-vudchakra)
- [Support](https://www.creative-tim.com/contact-us?ref=readme-vudchakra)
- Issues: [Github Issues Page](https://github.com/creativetimofficial/vision-ui-dashboard-chakra/issues)
## Reporting Issues
We use GitHub Issues as the official bug tracker for the Vision UI Dashboard. 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 Vision UI Dashboard. Check the CHANGELOG from your dashboard on our [CHANGE LOG File](https://github.com/creativetimofficial/vision-ui-dashboard-chakra/blob/main/CHANGELOG.md?ref=readme-vudchakra).
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-vudchakra) instead of opening an issue.
## Licensing
- Copyright 2022 [Creative Tim](https://www.creative-tim.com?ref=readme-vudchakra)
- Creative Tim [License](https://www.creative-tim.com/license?ref=readme-vudchakra)
## Useful Links
- [More products](https://www.creative-tim.com/templates?ref=readme-vudchakra) from Creative Tim
- [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w)
- [Freebies](https://www.creative-tim.com/bootstrap-themes/free?ref=readme-vudchakra) from Creative Tim
- [Affiliate Program](https://www.creative-tim.com/affiliates/new?ref=readme-vudchakra) (earn money)
- [More products](https://simmmple.com/?ref=readme-vudchakra) from Simmmple
### Social Media - Creative Tim
Twitter: <https://twitter.com/CreativeTim>
Facebook: <https://www.facebook.com/CreativeTim>
Dribbble: <https://dribbble.com/creativetim>
Instagram: <https://www.instagram.com/CreativeTimOfficial>
### Social Media - Simmmple
Twitter: <https://twitter.com/simmmple_web>
Facebook: <https://www.facebook.com/simmmple.web>
Dribbble: <https://dribbble.com/simmmple>
Instagram: <https://www.instagram.com/simmmple.web>
================================================
FILE: commit.sh
================================================
================================================
FILE: genezio.yaml
================================================
name: vision-ui-dashboard-chakra
region: us-east-1
yamlVersion: 2
frontend:
path: .
publish: build
scripts:
deploy:
- npm install --legacy-peer-deps
- npm run build
================================================
FILE: gulpfile.js
================================================
const gulp = require("gulp");
const gap = require("gulp-append-prepend");
gulp.task("licenses", async function () {
// this is to add Creative Tim licenses in the production mode for the minified js
gulp
.src("build/static/js/*chunk.js", { base: "./" })
.pipe(
gap.prependText(`/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/`)
)
.pipe(gulp.dest("./", { overwrite: true }));
// this is to add Creative Tim licenses in the production mode for the minified html
gulp
.src("build/index.html", { base: "./" })
.pipe(
gap.prependText(`<!--
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
-->`)
)
.pipe(gulp.dest("./", { overwrite: true }));
// this is to add Creative Tim licenses in the production mode for the minified css
gulp
.src("build/static/css/*chunk.css", { base: "./" })
.pipe(
gap.prependText(`/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/`)
)
.pipe(gulp.dest("./", { overwrite: true }));
return;
});
================================================
FILE: jsconfig.json
================================================
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"*": ["src/*"]
}
}
}
================================================
FILE: package.json
================================================
{
"name": "vision-dashboard-chakra",
"version": "1.0.1",
"private": true,
"homepage": "https://demos.creative-tim.com/vision-ui-dashboard-chakra/#/",
"dependencies": {
"@chakra-ui/icons": "^1.1.5",
"@chakra-ui/react": "1.8.8",
"@chakra-ui/system": "^1.12.1",
"@chakra-ui/theme-tools": "^1.3.6",
"@emotion/cache": "^11.4.0",
"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0",
"@fontsource/open-sans": "^4.5.0",
"@fontsource/raleway": "^4.5.0",
"@fontsource/roboto": "^4.5.0",
"ajv": "^8.17.1",
"apexcharts": "^3.27.3",
"classnames": "2.3.1",
"framer-motion": "^4.1.17",
"match-sorter": "6.3.0",
"moment": "2.29.1",
"nouislider": "15.0.0",
"react": "17.0.2",
"react-apexcharts": "^1.3.9",
"react-big-calendar": "0.33.2",
"react-bootstrap-sweetalert": "5.2.0",
"react-dom": "17.0.2",
"react-github-btn": "^1.2.1",
"react-icons": "^4.2.0",
"react-jvectormap": "0.0.16",
"react-leaflet-semicircle": "^3.0.3",
"react-router-dom": "5.2.0",
"react-scripts": "5.0.0",
"react-swipeable-views": "0.14.0",
"react-table": "7.7.0",
"stylis": "^4.0.10",
"stylis-plugin-rtl": "^2.1.0"
},
"resolutions": {
"react-error-overlay": "6.0.9"
},
"target": "web",
"scripts": {
"start": "react-scripts start",
"build": "cross-env PUBLIC_URL=/ cross-env CI=false react-scripts build && gulp licenses",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"deploy": "npm run build",
"lint:check": "eslint . --ext=js,jsx; exit 0",
"lint:fix": "eslint . --ext=js,jsx --fix; exit 0",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
},
"optionalDependencies": {
"@babel/core": "7.16.12",
"typescript": "4.2.4"
},
"devDependencies": {
"@babel/plugin-transform-react-jsx-source": "^7.14.5",
"cross-env": "^7.0.3",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-prettier": "3.4.0",
"gulp": "4.0.2",
"gulp-append-prepend": "1.0.9",
"prettier": "2.2.1"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
================================================
FILE: public/index.html
================================================
<!--/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master/LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
-->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
<link
rel="apple-touch-icon"
sizes="76x76"
href="%PUBLIC_URL%/apple-icon.png"
/>
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"
/>
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jvectormap/2.0.4/jquery-jvectormap.css"
type="text/css"
media="screen"
/>
<link
rel="stylesheet"
href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"
type="text/css"
media="screen"
/>
<!-- Fonts and icons -->
<link
href="https://use.fontawesome.com/releases/v5.0.7/css/all.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"
/>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<link rel="shortcut icon" type="image/x-icon" href="./favicon.png" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Vision UI Dashboard Chakra by Creative Tim & Simmmple</title>
<style>
@import url(https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/plus-jakarta-display.min.css);
body {
font-family: "Plus Jakarta Display", sans-serif;
}
</style>
</head>
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
================================================
FILE: public/manifest.json
================================================
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
================================================
FILE: public/robots.txt
================================================
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
================================================
FILE: src/components/Card/Card.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import { Box, useStyleConfig } from "@chakra-ui/react";
function Card(props) {
const { variant, children, ...rest } = props;
const styles = useStyleConfig("Card", { variant });
// Pass the computed styles into the `__css` prop
return (
<Box __css={styles} {...rest}>
{children}
</Box>
);
}
export default Card;
================================================
FILE: src/components/Card/CardBody.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import { Box, useStyleConfig } from "@chakra-ui/react";
function CardBody(props) {
const { variant, children, ...rest } = props;
const styles = useStyleConfig("CardBody", { variant });
// Pass the computed styles into the `__css` prop
return (
<Box __css={styles} {...rest}>
{children}
</Box>
);
}
export default CardBody;
================================================
FILE: src/components/Card/CardHeader.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import { Box, useStyleConfig } from "@chakra-ui/react";
function CardHeader(props) {
const { variant, children, ...rest } = props;
const styles = useStyleConfig("CardHeader", { variant });
// Pass the computed styles into the `__css` prop
return (
<Box __css={styles} {...rest}>
{children}
</Box>
);
}
export default CardHeader;
================================================
FILE: src/components/Charts/BarChart.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import React, { Component } from "react";
import Chart from "react-apexcharts";
class BarChart extends Component {
constructor(props) {
super(props);
this.state = {
chartData: [],
chartOptions: {},
};
}
componentDidMount() {
const { barChartData, barChartOptions } = this.props;
this.setState({
chartData: barChartData,
chartOptions: barChartOptions,
});
}
render() {
return (
<Chart
options={this.state.chartOptions}
series={this.state.chartData}
type='bar'
width='100%'
height='100%'
/>
);
}
}
export default BarChart;
================================================
FILE: src/components/Charts/LineChart.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* 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 ReactApexChart from "react-apexcharts";
class LineChart extends React.Component {
constructor(props) {
super(props);
this.state = {
chartData: [],
chartOptions: {},
};
}
componentDidMount() {
const { lineChartData, lineChartOptions } = this.props;
this.setState({
chartData: lineChartData,
chartOptions: lineChartOptions,
});
}
render() {
return (
<ReactApexChart
options={this.state.chartOptions}
series={this.state.chartData}
type='area'
width='100%'
height='100%'
/>
);
}
}
export default LineChart;
================================================
FILE: src/components/Configurator/Configurator.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Chakra Imports
import {
Box,
Button,
Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent,
DrawerHeader,
Flex,
Link,
Switch,
Text,
DarkMode,
LightMode,
} from "@chakra-ui/react";
import GitHubButton from "react-github-btn";
import { Separator } from "components/Separator/Separator";
import PropTypes from "prop-types";
import React, { useState } from "react";
import { FaTwitter, FaFacebook } from "react-icons/fa";
export default function Configurator(props) {
const { secondary, isOpen, onClose, fixed, ...rest } = props;
const [switched, setSwitched] = useState(props.isChecked);
// Chakra Color Mode
let fixedDisplay = "flex";
if (props.secondary) {
fixedDisplay = "none";
}
let colorButton = "white";
const secondaryButtonColor = "white";
const settingsRef = React.useRef();
return (
<>
<Drawer
isOpen={props.isOpen}
onClose={props.onClose}
placement={document.documentElement.dir === "rtl" ? "left" : "right"}
finalFocusRef={settingsRef}
blockScrollOnMount={false}>
<DrawerContent
bg='linear-gradient(111.84deg, rgba(6, 11, 38, 0.94) 59.3%, rgba(26, 31, 55, 0) 100%)'
backdropFilter='blur(42px)'>
<DrawerHeader pt='24px' px='24px'>
<DrawerCloseButton color='white' />
<Text color='white' fontSize='xl' fontWeight='bold' mt='16px'>
Vision UI Configurator
</Text>
<Text color='white' fontSize='md' mb='16px'>
See your dashboard options.
</Text>
<Separator />
</DrawerHeader>
<DrawerBody w='340px' ps='24px' pe='40px'>
<Flex flexDirection='column'>
<Box
display={fixedDisplay}
justifyContent='space-between '
mb='20px'>
<DarkMode>
<Text color='white' fontSize='md' fontWeight='600' mb='4px'>
Navbar Fixed
</Text>
<Switch
colorScheme='brand'
isChecked={switched}
onChange={(event) => {
if (switched === true) {
props.onSwitch(false);
setSwitched(false);
} else {
props.onSwitch(true);
setSwitched(true);
}
}}
/>
</DarkMode>
</Box>
<Box>
<Box>
<Link
href='https://www.creative-tim.com/product/vision-ui-dashboard-chakra'
w='100%'
mb='16px'>
<Button
w='100%'
mb='16px'
bg='brand.200'
color={colorButton}
fontSize='xs'
variant='brand'
px='30px'>
Free Download
</Button>
</Link>
<Link
href='https://demos.creative-tim.com/docs-vision-ui-dashboard-chakra/'
w='100%'>
<Button
w='100%'
color={secondaryButtonColor}
fontSize='xs'
variant='outlineWhite'
px='20px'
mb='16px'>
<Text textDecorationColor='none'>Documentation</Text>
</Button>
</Link>
</Box>
<Flex
justifyContent='center'
alignItems='center'
w='100%'
mb='16px'>
<GitHubButton
href='https://github.com/creativetimofficial/vision-ui-dashboard-chakra'
data-icon='octicon-star'
data-show-count='true'
aria-label='Star creativetimofficial/vision-ui-dashboard-chakra on GitHub'>
Star
</GitHubButton>
</Flex>
<Box w='100%'>
<Text color='white' mb='6px' textAlign='center'>
Thank you for sharing!
</Text>
<LightMode>
<Flex justifyContent='center' alignContent='center'>
<Link
isExternal='true'
href='https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fvision-ui-dashboard-chakra&text=Check%20vision%20UI%20Dashboard%20made%20by%20%40CreativeTim%20and%20%40simmmple_web%20%23webdesign%20%23dashboard%20%23chakra'>
<Button
colorScheme='twitter'
leftIcon={<FaTwitter />}
me='10px'>
<Text>Tweet</Text>
</Button>
</Link>
<Link
isExternal='true'
href='https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fvision-ui-dashboard-chakra'>
<Button
colorScheme='facebook'
leftIcon={<FaFacebook />}>
<Text>Share</Text>
</Button>
</Link>
</Flex>
</LightMode>
</Box>
</Box>
</Flex>
</DrawerBody>
</DrawerContent>
</Drawer>
</>
);
}
Configurator.propTypes = {
secondary: PropTypes.bool,
isOpen: PropTypes.func,
onClose: PropTypes.func,
fixed: PropTypes.bool,
};
================================================
FILE: src/components/FixedPlugin/FixedPlugin.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Chakra Imports
import { Button, useColorModeValue } from "@chakra-ui/react";
// Custom Icons
import { SettingsIcon } from "components/Icons/Icons";
import PropTypes from "prop-types";
import React from "react";
export default function FixedPlugin(props) {
const { secondary, onChange, onSwitch, fixed, ...rest } = props;
// Chakra Color Mode
let navbarIcon = "white";
let bgButton = "brand.200";
// if (props.secondary) {
// fixedDisplay = "none";
// }
const settingsRef = React.useRef();
return (
<>
<Button
h='52px'
w='52px'
onClick={props.onOpen}
bg={bgButton}
position='fixed'
variant='no-hover'
left={document.documentElement.dir === "rtl" ? "35px" : ""}
right={document.documentElement.dir === "rtl" ? "" : "35px"}
bottom='30px'
borderRadius='50px'
boxShadow='0 2px 12px 0 rgb(0 0 0 / 16%)'>
<SettingsIcon
cursor='pointer'
ref={settingsRef}
color={navbarIcon}
w='20px'
h='20px'
/>
</Button>
</>
);
}
FixedPlugin.propTypes = {
fixed: PropTypes.bool,
onChange: PropTypes.func,
onSwitch: PropTypes.func,
};
================================================
FILE: src/components/Footer/AuthFooter.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
/*eslint-disable*/
import React from "react";
import { Flex, Link, List, ListItem, Text } from "@chakra-ui/react";
export default function AuthFooter(props) {
return (
<Flex
flexDirection={{
base: "column",
}}
alignItems={{
base: "center",
}}
justifyContent='space-between'
pb='20px'
fontSize='sm'>
<Text
color='white'
textAlign={{
base: "center",
}}
mb={{ base: "20px" }}>
© {1900 + new Date().getYear()},{" "}
<Text as='span' mx='2px'>
{document.documentElement.dir === "rtl"
? " مصنوع من ❤️ بواسطة"
: "Made with ❤️ by "}
</Text>
<Link href='https://www.simmmple.com' target='_blank'>
{document.documentElement.dir === "rtl"
? " توقيت الإبداعية"
: "Simmmple "}
</Link>
&
<Link href='https://www.creative-tim.com' target='_blank'>
{document.documentElement.dir === "rtl" ? "سيممبل " : " Creative Tim"}
</Link>
{document.documentElement.dir === "rtl"
? "للحصول على ويب أفضل"
: " for a better web"}
</Text>
<List display='flex'>
<ListItem
me={{
base: "20px",
}}>
<Link color='white' fontSize='sm' href='https://www.simmmple.com'>
{document.documentElement.dir === "rtl"
? "توقيت الإبداعية"
: "Simmmple"}
</Link>
</ListItem>
<ListItem
me={{
base: "20px",
}}>
<Link color='white' fontSize='sm' href='https://www.creative-tim.com'>
{document.documentElement.dir === "rtl" ? "سيممبل" : "Creative Tim"}
</Link>
</ListItem>
<ListItem
me={{
base: "20px",
}}>
<Link
color='white'
fontSize='sm'
href='#blog'
href='https://creative-tim.com/blog'>
{document.documentElement.dir === "rtl" ? "مدونة" : "Blog"}
</Link>
</ListItem>
<ListItem>
<Link
color='white'
href='#license'
href='https://www.creative-tim.com/license'>
{document.documentElement.dir === "rtl" ? "رخصة" : "License"}
</Link>
</ListItem>
</List>
</Flex>
);
}
================================================
FILE: src/components/Footer/Footer.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
/*eslint-disable*/
import React from "react";
import { Flex, Link, List, ListItem, Text } from "@chakra-ui/react";
export default function Footer(props) {
return (
<Flex
flexDirection={{
base: "column",
xl: "row",
}}
alignItems={{
base: "center",
xl: "start",
}}
justifyContent='space-between'
px='30px'
pb='20px'>
<Text
fontSize='sm'
color='white'
textAlign={{
base: "center",
xl: "start",
}}
mb={{ base: "20px", xl: "0px" }}>
© {1900 + new Date().getYear()},{" "}
<Text as='span'>
{document.documentElement.dir === "rtl"
? " مصنوع من ❤️ بواسطة"
: "Made with ❤️ by "}
</Text>
<Link href='https://www.simmmple.com' target='_blank'>
{document.documentElement.dir === "rtl"
? " توقيت الإبداعية"
: "Simmmple "}
</Link>
&
<Link href='https://www.creative-tim.com' target='_blank'>
{document.documentElement.dir === "rtl" ? "سيممبل " : " Creative Tim"}
</Link>
{document.documentElement.dir === "rtl"
? "للحصول على ويب أفضل"
: " for a better web"}
</Text>
<List display='flex'>
<ListItem
me={{
base: "20px",
md: "44px",
}}>
<Link color='white' fontSize='sm' href='https://www.simmmple.com'>
{document.documentElement.dir === "rtl"
? "توقيت الإبداعية"
: "Simmmple"}
</Link>
</ListItem>
<ListItem
me={{
base: "20px",
md: "44px",
}}>
<Link color='white' fontSize='sm' href='https://www.creative-tim.com'>
{document.documentElement.dir === "rtl" ? "سيممبل" : "Creative Tim"}
</Link>
</ListItem>
<ListItem
me={{
base: "20px",
md: "44px",
}}>
<Link
color='white'
fontSize='sm'
href='https://creative-tim.com/blog'>
{document.documentElement.dir === "rtl" ? "مدونة" : "Blog"}
</Link>
</ListItem>
<ListItem>
<Link
color='white'
fontSize='sm'
href='https://www.creative-tim.com/license'>
{document.documentElement.dir === "rtl" ? "رخصة" : "License"}
</Link>
</ListItem>
</List>
</Flex>
);
}
================================================
FILE: src/components/GradientBorder/GradientBorder.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* 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 { Flex } from "@chakra-ui/react";
export default function GradientBorder(props) {
const { variant, children, ...rest } = props;
return (
<Flex
p='2px'
justify='center'
align='center'
bg='radial-gradient(69.43% 69.43% at 50% 50%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%),
radial-gradient(60% 51.57% at 50% 50%, #582CFF 0%, rgba(88, 44, 255, 0) 100%),
radial-gradient(54.8% 53% at 50% 50%, #151515 0%, rgba(21, 21, 21, 0) 100%)'
{...rest}>
{children}
</Flex>
);
}
================================================
FILE: src/components/Icons/IconBox.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* 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 { Flex } from "@chakra-ui/react";
export default function IconBox(props) {
const { children, ...rest } = props;
return (
<Flex
alignItems={"center"}
justifyContent={"center"}
borderRadius={"12px"}
{...rest}>
{children}
</Flex>
);
}
================================================
FILE: src/components/Icons/Icons.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import { createIcon } from "@chakra-ui/icons";
export const AdobexdLogo = createIcon({
displayName: "AdobexdLogo",
viewBox: "0 0 24 24",
path: (
<g clip-path='url(#clip0)'>
<path
d='M4.042 0h12.916A3.539 3.539 0 0120.5 3.542v12.416a3.539 3.539 0 01-3.542 3.542H4.042A3.539 3.539 0 01.5 15.958V3.542A3.539 3.539 0 014.042 0z'
fill='#470137'
/>
<path
d='M11.017 5.124l-2.5 4.125 2.666 4.375a.143.143 0 01.017.1c-.008.034-.042.009-.092.017H9.2c-.133 0-.225-.008-.283-.092-.175-.35-.359-.691-.534-1.041a33.608 33.608 0 00-.566-1.05c-.2-.359-.4-.717-.6-1.084H7.2c-.175.359-.367.717-.558 1.075-.192.359-.384.717-.567 1.067-.192.35-.383.708-.575 1.05-.033.083-.1.092-.192.092H3.475c-.033 0-.058.016-.058-.025a.116.116 0 01.016-.092l2.592-4.25L3.5 5.116c-.025-.033-.033-.067-.017-.083.017-.025.05-.034.084-.034h1.891c.042 0 .084.009.117.017a.236.236 0 01.083.075c.159.358.342.717.534 1.075.2.358.391.708.6 1.058.2.35.383.7.558 1.059h.017c.175-.367.358-.725.541-1.075.184-.35.375-.7.567-1.05.192-.35.375-.709.558-1.05.009-.034.025-.067.05-.084a.159.159 0 01.109-.016h1.758a.077.077 0 01.091.058c.009.008-.008.042-.024.058zM14.866 13.917a4.144 4.144 0 01-1.791-.375 2.906 2.906 0 01-1.259-1.134c-.308-.508-.458-1.141-.458-1.9a3.423 3.423 0 011.783-3.05c.584-.325 1.284-.483 2.109-.483.041 0 .1 0 .175.008.075.009.158.009.258.017V4.367c0-.059.025-.092.083-.092h1.692c.042-.008.075.025.083.058v7.95c0 .15.009.317.017.5.017.175.025.342.033.484 0 .058-.025.108-.083.133a6.365 6.365 0 01-1.358.4 7.35 7.35 0 01-1.284.117zm.817-1.667V8.583c-.075-.016-.15-.033-.225-.041-.092-.009-.183-.017-.275-.017-.325 0-.65.067-.942.217-.283.141-.525.35-.708.616-.183.267-.275.625-.275 1.059-.008.291.042.583.142.858.083.225.208.425.375.592.158.15.35.266.566.333.225.075.459.108.692.108.125 0 .242-.008.35-.016a.73.73 0 00.3-.042z'
fill='#FF61F6'
/>
</g>
),
});
export const AtlassianLogo = createIcon({
displayName: "AtlassianLogo",
viewBox: "0 0 24 24",
path: (
<g>
<path
d='M6.427 9.239a.57.57 0 00-.798-.108.591.591 0 00-.167.209l-4.9 9.803a.586.586 0 00.524.847h6.827a.562.562 0 00.523-.324c1.474-3.043.58-7.67-2.01-10.427z'
fill='#2684FF'
/>
<path
d='M10.028.318a12.932 12.932 0 00-.755 12.765l3.292 6.583a.586.586 0 00.523.324h6.826a.583.583 0 00.586-.585c0-.091-.02-.18-.06-.262L11.024.315a.552.552 0 00-.997 0v.003z'
fill='#2684FF'
/>
</g>
),
});
export const CartIcon = createIcon({
displayName: "CartIcon",
viewBox: "0 0 24 24",
path: (
<path
fill='currentColor'
d='M7.984 19.937a1.406 1.406 0 100-2.812 1.406 1.406 0 000 2.812zM17.828 19.937a1.406 1.406 0 100-2.812 1.406 1.406 0 000 2.812zM20.324 5.558a1.051 1.051 0 00-.815-.386H6.134l-.27-1.528a.703.703 0 00-.692-.581H2.359a.703.703 0 000 1.406h2.223L6.59 15.841a.703.703 0 00.692.581h11.25a.703.703 0 100-1.406H7.871l-.248-1.406h10.62a1.057 1.057 0 001.035-.848l1.266-6.328a1.055 1.055 0 00-.22-.876z'
/>
),
});
export const ClockIcon = createIcon({
displayName: "ClockIcon",
viewBox: "0 0 24 24",
path: (
<g>
<g>
<rect fill='none' height='24' width='24' />
</g>
<g>
<g>
<g>
<path
fill='currentColor'
d='M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M16.2,16.2L11,13V7h1.5v5.2l4.5,2.7L16.2,16.2z'
/>
</g>
</g>
</g>
</g>
),
});
export const CreativeTimLogo = createIcon({
displayName: "CreativeTimLogo",
viewBox: "0 0 100 100",
path: (
<g
xmlns='http://www.w3.org/2000/svg'
width='50px'
height='50px'
version='1.1'>
<g
id='logo-creative-tim-black'
stroke='none'
stroke-width='1'
fill='none'
fill-rule='evenodd'>
<g
id='icon'
transform='translate(15.000000, 19.000000)'
fill='currentColor'
fill-rule='nonzero'>
<path
d='M66.4346744,1.49018376e-13 L3.56968951,1.49018376e-13 C1.59820443,1.49018376e-13 -2.98036753e-13,1.59820443 -2.98036753e-13,3.56968951 L-2.98036753e-13,33.5035241 C-2.98036753e-13,35.4750091 1.59820443,37.0732136 3.56968951,37.0732136 L16.4677598,37.0732136 L16.4677598,66.4346744 C16.4666001,67.3810129 16.8417189,68.288989 17.5104719,68.9585615 C18.1792249,69.628134 19.0867408,70.0043639 20.03308,70.0043639 L49.9669146,70.0043639 C51.9383997,70.0043639 53.5366041,68.4061595 53.5366041,66.4346744 L53.5366041,37.0863214 L66.4346744,37.0863214 C67.3810136,37.0863221 68.2885296,36.7100915 68.9572826,36.0405189 C69.6260355,35.3709464 70.0011544,34.4629704 70,33.5166319 L70,3.56968951 C70.0011544,2.62335099 69.6260355,1.71537495 68.9572826,1.04580242 C68.2885296,0.37622988 67.3810136,1.49018376e-13 66.4346744,1.49018376e-13 Z M4.13769396,4.14206323 L32.9311503,4.14206323 L32.9311503,32.9355196 L4.13769396,32.9355196 L4.13769396,4.14206323 Z M49.3989102,65.86667 L20.6054538,65.86667 L20.6054538,37.0863214 L49.3989102,37.0863214 L49.3989102,65.86667 Z M65.8623007,32.9355196 L37.0688443,32.9355196 L37.0688443,4.14206323 L65.8623007,4.14206323 L65.8623007,32.9355196 Z'
id='Shape'
/>
<path
d='M23.6988934,23.3056595 C24.5142794,24.0708897 25.7898859,24.0506562 26.5805917,23.2599503 C27.3712976,22.4692445 27.3915311,21.193638 26.6263009,20.378252 L20.015603,13.767554 C19.2050095,12.9645312 17.8987889,12.9645312 17.0881954,13.767554 L10.4600204,20.378252 C9.90907005,20.8953125 9.68342943,21.6713831 9.87125954,22.4032422 C10.0590897,23.1351013 10.6305787,23.7065903 11.3624377,23.8944204 C12.0942968,24.0822505 12.8703675,23.8566099 13.387428,23.3056595 L18.5344222,18.1586654 L23.6988934,23.3056595 Z'
id='Path'
/>
<path
d='M46.3185783,23.3056595 L51.4655725,18.1586654 L56.6125667,23.3056595 C57.4279526,24.0708897 58.7035592,24.0506562 59.494265,23.2599503 C60.2849709,22.4692445 60.3052044,21.193638 59.5399742,20.378252 L52.9292763,13.767554 C52.1186828,12.9645312 50.8124622,12.9645312 50.0018687,13.767554 L43.3911708,20.378252 C42.6259406,21.193638 42.6461741,22.4692445 43.43688,23.2599503 C44.2275858,24.0506562 45.5031924,24.0708897 46.3185783,23.3056595 L46.3185783,23.3056595 Z'
id='Path'
/>
<path
d='M29.8508185,46.6987044 C29.0342976,45.9346441 27.7586832,45.9567597 26.9691385,46.7486649 C26.1795937,47.54057 26.1612859,48.8162446 26.9277802,49.6304812 L33.5384782,56.2368099 C33.9262423,56.6258256 34.452915,56.8444779 35.002182,56.8444779 C35.5514489,56.8444779 36.0781217,56.6258256 36.4658857,56.2368099 L43.0765837,49.6304812 C43.6002952,49.1075502 43.8052442,48.3449453 43.6142284,47.6299323 C43.4232126,46.9149194 42.8652519,46.3561259 42.1505246,46.1640439 C41.4357974,45.971962 40.6728876,46.1757734 40.1491761,46.6987044 L35.002182,51.8500678 L29.8508185,46.6987044 Z'
id='Path'
/>
</g>
</g>
</g>
),
// <chakra.svg
// height="50px"
// width="50px"
// viewBox="0 0 100 100"
// fill="none"
// xmlns="http://www.w3.org/2000/svg"
// color={fill}
// {...props}
// >
// </chakra.svg>
});
export const CreditIcon = createIcon({
displayName: "CreditIcon",
viewBox: "0 0 24 24",
path: (
<path
fill='currentColor'
d='M1.406 17.023a2.461 2.461 0 002.461 2.46h14.766a2.461 2.461 0 002.46-2.46v-6.768H1.407v6.768zm2.9-3.34a1.318 1.318 0 011.319-1.318h2.11a1.318 1.318 0 011.318 1.318v.879a1.318 1.318 0 01-1.319 1.318H5.625a1.318 1.318 0 01-1.318-1.318v-.879zM18.633 4.014H3.867a2.46 2.46 0 00-2.46 2.461v1.143h19.687V6.475a2.46 2.46 0 00-2.461-2.46z'
/>
),
});
export const DashboardLogo = createIcon({
displayName: "DashboardLogo",
viewBox: "0 0 1000 257",
path: (
<g width='998' height='257' viewBox='0 0 998 257' fill='none'>
<g clip-path='url(#clip0)'>
<path
d='M388.5 115.302C406.112 115.302 413.966 126.726 416.584 136.96L441.336 127.916C436.576 109.352 419.44 89.836 388.262 89.836C354.942 89.836 329 115.54 329 151.24C329 186.464 354.942 212.882 388.976 212.882C419.44 212.882 436.814 193.128 442.288 175.04L418.012 166.234C415.394 175.04 407.064 187.654 388.976 187.654C371.602 187.654 356.608 174.564 356.608 151.24C356.608 127.916 371.602 115.302 388.5 115.302Z'
fill='currentColor'
/>
<path
d='M484.894 141.244C485.37 126.488 493.7 115.064 508.932 115.064C526.306 115.064 532.732 126.488 532.732 140.768V209.312H560.34V136.008C560.34 110.542 546.536 90.074 517.976 90.074C505.838 90.074 492.748 94.358 484.894 104.592V37H457.286V209.312H484.894V141.244Z'
fill='currentColor'
/>
<path
d='M577.29 177.896C577.29 196.222 592.284 212.882 616.56 212.882C635.362 212.882 646.786 203.362 652.26 194.556C652.26 203.838 653.212 208.598 653.45 209.312H679.154C678.916 208.122 677.726 201.22 677.726 190.748V133.152C677.726 110.066 664.16 89.836 628.46 89.836C599.9 89.836 581.812 107.686 579.67 127.678L604.898 133.39C606.088 121.728 614.18 112.446 628.698 112.446C643.93 112.446 650.594 120.3 650.594 130.058C650.594 134.104 648.69 137.436 642.026 138.388L612.276 142.91C592.522 145.766 577.29 157.19 577.29 177.896ZM621.796 191.224C610.848 191.224 604.898 184.084 604.898 176.23C604.898 166.71 611.8 161.95 620.368 160.522L650.594 156V161.236C650.594 183.846 637.266 191.224 621.796 191.224Z'
fill='currentColor'
/>
<path
d='M810.108 93.406H773.456L728.95 140.292V37H701.58V209.312H728.95V176.944L743.23 161.95L777.264 209.312H811.06L762.508 142.434L810.108 93.406Z'
fill='currentColor'
/>
<path
d='M889.349 92.692C888.159 92.454 885.303 91.978 881.971 91.978C866.739 91.978 853.887 99.356 848.413 111.97V93.406H821.519V209.312H849.127V154.096C849.127 132.438 858.885 120.062 880.305 120.062C883.161 120.062 886.255 120.3 889.349 120.776V92.692Z'
fill='currentColor'
/>
<path
d='M895.968 177.896C895.968 196.222 910.962 212.882 935.238 212.882C954.04 212.882 965.464 203.362 970.938 194.556C970.938 203.838 971.89 208.598 972.128 209.312H997.832C997.594 208.122 996.404 201.22 996.404 190.748V133.152C996.404 110.066 982.838 89.836 947.138 89.836C918.578 89.836 900.49 107.686 898.348 127.678L923.576 133.39C924.766 121.728 932.858 112.446 947.376 112.446C962.608 112.446 969.272 120.3 969.272 130.058C969.272 134.104 967.368 137.436 960.704 138.388L930.954 142.91C911.2 145.766 895.968 157.19 895.968 177.896ZM940.474 191.224C929.526 191.224 923.576 184.084 923.576 176.23C923.576 166.71 930.478 161.95 939.046 160.522L969.272 156V161.236C969.272 183.846 955.944 191.224 940.474 191.224Z'
fill='currentColor'
/>
<rect width='257' height='257' rx='128.5' fill='#4FD1C5' />
<path
d='M69.5584 133.985L157.15 46.9959C158.787 45.3708 161.42 47.3484 160.315 49.3729L127.714 109.125C126.987 110.457 127.951 112.083 129.47 112.083H185.809C187.624 112.083 188.501 114.306 187.174 115.545L88.4456 207.687C86.6753 209.339 84.0405 207.011 85.4617 205.051L132.197 140.578C133.156 139.256 132.211 137.404 130.578 137.404H70.9677C69.1826 137.404 68.2917 135.243 69.5584 133.985Z'
fill='white'
/>
</g>
<defs>
<linearGradient
id='paint0_linear'
x1='128.5'
y1='0'
x2='128.5'
y2='257'
gradientUnits='userSpaceOnUse'>
<stop stop-color='#7BCBD4' />
<stop offset='1' stop-color='#29C6B7' />
</linearGradient>
<clipPath id='clip0'>
<rect width='997.832' height='257' fill='white' />
</clipPath>
</defs>
</g>
),
});
export const DashboardLogoWhite = createIcon({
displayName: "DashboardLogo",
viewBox: "0 0 163.5 42",
path: (
<g fill='none'>
<path
d='M63.452 19.292c2.877 0 4.16 1.911 4.587 3.623l4.043-1.513c-.777-3.106-3.576-6.371-8.668-6.371-5.443 0-9.68 4.3-9.68 10.274 0 5.893 4.237 10.313 9.796 10.313 4.976 0 7.813-3.305 8.707-6.331l-3.965-1.473c-.427 1.473-1.788 3.583-4.742 3.583-2.837 0-5.286-2.19-5.286-6.092 0-3.903 2.449-6.013 5.208-6.013zM79.196 23.632c.078-2.469 1.438-4.38 3.926-4.38 2.838 0 3.887 1.911 3.887 4.3v11.47h4.51V22.755c0-4.26-2.255-7.685-6.92-7.685-1.982 0-4.12.716-5.403 2.429V6.19h-4.509v28.831h4.51V23.632zM94.287 29.765c0 3.066 2.449 5.853 6.414 5.853 3.071 0 4.936-1.592 5.83-3.066 0 1.553.156 2.35.195 2.47h4.198c-.039-.2-.233-1.355-.233-3.107v-9.637c0-3.862-2.216-7.247-8.047-7.247-4.664 0-7.619 2.986-7.968 6.332l4.12.955c.194-1.951 1.516-3.504 3.887-3.504 2.488 0 3.576 1.314 3.576 2.947 0 .677-.311 1.234-1.399 1.393l-4.859.757c-3.226.478-5.714 2.39-5.714 5.854zm7.269 2.23c-1.788 0-2.76-1.195-2.76-2.509 0-1.593 1.127-2.39 2.527-2.628l4.936-.757v.876c0 3.783-2.176 5.018-4.703 5.018zM132.312 15.628h-5.986l-7.269 7.845V6.191h-4.47v28.83h4.47v-5.416l2.332-2.508 5.559 7.924h5.52l-7.93-11.19 7.774-8.203zM145.254 15.509a6.3 6.3 0 00-1.205-.12c-2.487 0-4.587 1.235-5.481 3.345v-3.106h-4.392v19.393h4.509v-9.238c0-3.624 1.594-5.695 5.092-5.695.467 0 .972.04 1.477.12v-4.7zM146.335 29.765c0 3.066 2.449 5.853 6.414 5.853 3.071 0 4.937-1.592 5.831-3.066 0 1.553.156 2.35.194 2.47h4.199c-.039-.2-.234-1.355-.234-3.107v-9.637c0-3.862-2.215-7.247-8.046-7.247-4.665 0-7.619 2.986-7.969 6.332l4.121.955c.194-1.951 1.516-3.504 3.887-3.504 2.488 0 3.576 1.314 3.576 2.947 0 .677-.311 1.234-1.399 1.393l-4.859.757c-3.227.478-5.715 2.39-5.715 5.854zm7.269 2.23c-1.788 0-2.759-1.195-2.759-2.509 0-1.593 1.127-2.39 2.526-2.628l4.937-.757v.876c0 3.783-2.177 5.018-4.704 5.018zM41.975 21.5C41.975 9.626 32.578 0 20.987 0 9.398 0 0 9.626 0 21.5S9.396 43 20.988 43c11.59 0 20.987-9.626 20.987-21.5z'
fill='#fff'
/>
<path
d='M11.36 22.418L25.668 7.863c.267-.272.697.06.517.398l-5.325 9.997c-.119.223.039.495.287.495h9.202c.296 0 .44.372.223.58L14.446 34.748c-.29.277-.72-.113-.488-.44l7.633-10.788c.157-.221.003-.531-.264-.531H11.59c-.292 0-.437-.362-.23-.572z'
fill='#3BCBBE'
/>
</g>
),
});
export const DocumentIcon = createIcon({
displayName: "DocumentIcon",
viewBox: "0 0 24 24",
path: (
<g>
<path
fill='currentColor'
d='M18.809 10.344h-6.153a2.11 2.11 0 01-2.11-2.11V2.083a.176.176 0 00-.175-.176H6.328A2.812 2.812 0 003.516 4.72v14.063a2.812 2.812 0 002.812 2.812h9.844a2.812 2.812 0 002.812-2.813V10.52a.176.176 0 00-.175-.176z'
/>
<path
fill='currentColor'
d='M18.423 8.789l-6.32-6.32a.088.088 0 00-.15.062v5.705a.703.703 0 00.703.703h5.705a.088.088 0 00.062-.15z'
/>
</g>
),
});
export const GlobeIcon = createIcon({
displayName: "GlobeIcon",
viewBox: "0 0 24 24",
path: (
<g>
<path
stroke='currentColor'
fill='transparent'
d='M11.25 2.109a9.14 9.14 0 100 18.281 9.14 9.14 0 000-18.281z'
stroke-width='.75'
stroke-miterlimit='10'
/>
<path
stroke='currentColor'
fill='transparent'
d='M11.25 2.109C8.698 2.109 6.3 6.2 6.3 11.249c0 5.048 2.4 9.14 4.951 9.14 2.552 0 4.951-4.092 4.951-9.14 0-5.048-2.399-9.14-4.95-9.14z'
stroke-width='.75'
stroke-miterlimit='10'
/>
<path
stroke='currentColor'
fill='transparent'
d='M5.156 5.156C6.836 6.349 8.952 7.06 11.25 7.06c2.298 0 4.414-.711 6.094-1.904'
/>
<path
stroke='currentColor'
fill='transparent'
d='M5.156 5.156C6.836 6.349 8.952 7.06 11.25 7.06c2.298 0 4.414-.711 6.094-1.904M17.344 17.344c-1.68-1.193-3.796-1.904-6.094-1.904-2.298 0-4.413.711-6.094 1.904'
stroke-width='.75'
stroke-linecap='round'
stroke-linejoin='round'
/>
<path
stroke='currentColor'
fill='transparent'
d='M11.25 2.109v18.28M20.39 11.249H2.11'
stroke-width='.75'
stroke-miterlimit='10'
/>
</g>
),
});
export const HelpIcon = createIcon({
displayName: "HelpIcon",
viewBox: "0 0 24 24",
path: (
<path
fill='currentColor'
d='M11.25 0C5.04 0 0 5.04 0 11.25S5.04 22.5 11.25 22.5 22.5 17.46 22.5 11.25 17.46 0 11.25 0zm-.352 17.813a1.172 1.172 0 110-2.344 1.172 1.172 0 010 2.344zm1.96-5.977c-.95.637-1.08 1.222-1.08 1.758a.82.82 0 11-1.641 0c0-1.284.59-2.305 1.806-3.121 1.13-.758 1.768-1.239 1.768-2.295 0-.718-.41-1.264-1.26-1.668-.199-.095-.644-.187-1.191-.18-.687.008-1.22.172-1.63.503-.775.623-.84 1.302-.84 1.312a.821.821 0 11-1.642-.08c.007-.142.106-1.425 1.452-2.507.698-.562 1.585-.854 2.636-.866.745-.01 1.444.117 1.918.34 1.418.672 2.198 1.79 2.198 3.146 0 1.982-1.325 2.872-2.494 3.658z'
/>
),
});
export const HomeIcon = createIcon({
displayName: "HomeIcon",
viewBox: "0 0 24 24",
path: (
<g>
<path
fill='currentColor'
d='M11.494 4.951a.351.351 0 00-.486 0l-8.09 7.729a.352.352 0 00-.109.254v7.254a1.406 1.406 0 001.405 1.406h4.223a.703.703 0 00.704-.703v-5.976a.351.351 0 01.351-.352h3.516a.351.351 0 01.351.352v5.976a.703.703 0 00.704.703h4.22a1.407 1.407 0 001.407-1.406v-7.254a.35.35 0 00-.108-.254L11.494 4.95z'
/>
<path
fill='currentColor'
d='M21.574 11.23l-3.287-3.144V3.314a.703.703 0 00-.703-.703h-2.11a.703.703 0 00-.703.703V4.72l-2.545-2.434c-.239-.24-.593-.378-.976-.378-.38 0-.734.138-.972.379L.93 11.23a.717.717 0 00-.058.983.703.703 0 001.018.046l9.119-8.713a.352.352 0 01.486 0l9.12 8.713a.703.703 0 00.992-.019c.27-.28.248-.74-.033-1.01z'
/>
</g>
),
});
export const InvisionLogo = createIcon({
displayName: "InvisionLogo",
viewBox: "0 0 24 24",
path: (
<g clip-path='url(#clip0)'>
<path
d='M18.687 0H2.313A1.813 1.813 0 00.5 1.811v16.374C.5 19.188 1.312 20 2.313 20h16.374a1.813 1.813 0 001.813-1.813V1.812A1.813 1.813 0 0018.687 0z'
fill='#DC395F'
/>
<path
d='M7.184 6.293c.665 0 1.222-.522 1.222-1.204 0-.683-.557-1.204-1.222-1.204-.665 0-1.222.521-1.222 1.204 0 .682.557 1.204 1.222 1.204zM4.65 12.739a4.134 4.134 0 00-.108.905c0 1.06.575 1.764 1.797 1.764 1.013 0 1.834-.602 2.426-1.573l-.361 1.449h2.012l1.15-4.612c.287-1.168.844-1.774 1.689-1.774.665 0 1.078.413 1.078 1.096 0 .197-.018.413-.09.646l-.593 2.12c-.09.306-.126.611-.126.899 0 1.006.593 1.742 1.833 1.742 1.06 0 1.904-.682 2.371-2.317l-.79-.305c-.395 1.095-.737 1.293-1.006 1.293-.27 0-.414-.18-.414-.538 0-.162.037-.342.09-.558l.575-2.065c.144-.485.198-.915.198-1.31 0-1.546-.934-2.352-2.066-2.352-1.06 0-2.138.956-2.677 1.962l.395-1.806H8.962L8.53 8.996h1.438l-.885 3.544c-.695 1.545-1.972 1.57-2.132 1.534-.264-.06-.432-.159-.432-.5 0-.198.036-.482.126-.823l1.348-5.346H4.579l-.431 1.591h1.419L4.65 12.74'
fill='#fff'
/>
</g>
),
});
export const JiraLogo = createIcon({
displayName: "JiraLogo",
viewBox: "0 0 24 24",
path: (
<g clip-path='url(#clip0)'>
<path
d='M20.26 10.42l-8.863-8.93-.86-.865-6.67 6.722L.814 10.42a.827.827 0 000 1.162l6.096 6.14 3.627 3.654 6.67-6.722.105-.104 2.947-2.964a.824.824 0 000-1.166zm-9.722 3.649L7.493 11l3.045-3.068L13.582 11l-3.044 3.068z'
fill='#2684FF'
/>
<path
d='M10.537 7.932a5.184 5.184 0 01-1.502-3.637A5.185 5.185 0 0110.515.65L3.852 7.36l3.626 3.654 3.06-3.082z'
fill='url(#paint0_linear)'
/>
<path
d='M13.59 10.992l-3.053 3.076a5.186 5.186 0 011.502 3.653c0 1.37-.54 2.683-1.502 3.652l6.682-6.728-3.63-3.653z'
fill='url(#paint1_linear)'
/>
</g>
),
});
export const MastercardIcon = createIcon({
displayName: "MastercardIcon",
viewBox: "0 0 24 24",
path: (
<svg
width='24'
height='20'
viewBox='0 0 21 15'
fill='none'
xmlns='http://www.w3.org/2000/svg'>
<circle cx='6.63158' cy='7.49999' r='6.63158' fill='#EB001B' />
<circle cx='14.3686' cy='7.49999' r='6.63158' fill='#F79E1B' />
</svg>
),
});
export const PayPalIcon = createIcon({
displayName: "PayPalIcon",
viewBox: "0 0 24 24",
path: (
<g>
<path
fill='currentColor'
d='M16.179 2.532C15.142 1.357 13.265.854 10.863.854H3.895a.997.997 0 00-.986.834L.007 19.945a.595.595 0 00.591.686H4.9l1.08-6.8-.033.215a.993.993 0 01.983-.834h2.044c4.017 0 7.16-1.619 8.08-6.3.027-.14.07-.406.07-.406.262-1.732-.001-2.907-.945-3.974z'
/>
<path
fill='currentColor'
d='M18.213 7.393c-.998 4.61-4.184 7.048-9.24 7.048H7.142L5.773 23.1h2.973a.87.87 0 00.862-.731l.035-.184.684-4.297.044-.237a.87.87 0 01.86-.731h.544c3.514 0 6.264-1.416 7.068-5.51.322-1.644.166-3.021-.63-4.017z'
/>
</g>
),
});
export const PersonIcon = createIcon({
displayName: "PersonIcon",
viewBox: "0 0 24 24",
path: (
<path
fill='currentColor'
d='M14.618 3.338c-.855-.924-2.05-1.432-3.368-1.432-1.325 0-2.524.505-3.375 1.423-.86.928-1.28 2.188-1.181 3.55.195 2.686 2.239 4.87 4.556 4.87s4.358-2.184 4.556-4.87c.1-1.349-.322-2.607-1.188-3.541zM18.984 21.592H3.515a1.363 1.363 0 01-1.063-.489 1.552 1.552 0 01-.316-1.279c.371-2.058 1.529-3.786 3.348-5 1.616-1.076 3.664-1.67 5.766-1.67s4.15.594 5.765 1.67c1.82 1.214 2.977 2.942 3.348 5 .085.471-.03.937-.315 1.279a1.362 1.362 0 01-1.064.49z'
/>
),
});
export const ProfileIcon = createIcon({
displayName: "ProfileIcon",
viewBox: "0 0 24 24",
path: (
<g>
<path d='M0 0h24v24H0V0z' fill='transparent' />
<path
fill='currentColor'
d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v1c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-1c0-2.66-5.33-4-8-4z'
/>
</g>
),
});
export const RocketIcon = createIcon({
displayName: "RocketIcon",
viewBox: "0 0 24 24",
path: (
<g>
<path
fill='currentColor'
d='M20.99 2.182a.209.209 0 00-.156-.16c-2.574-.63-8.521 1.613-11.743 4.833a13.93 13.93 0 00-1.566 1.85c-.994-.087-1.987-.014-2.834.355-2.39 1.052-3.085 3.796-3.279 4.976a.424.424 0 00.464.492l3.837-.423c.002.29.02.578.052.866.02.2.108.386.25.527l1.486 1.482a.86.86 0 00.528.25c.286.033.573.05.86.053l-.42 3.832a.424.424 0 00.492.464c1.178-.19 3.927-.885 4.972-3.274.37-.847.445-1.836.36-2.824a13.96 13.96 0 001.855-1.567c3.232-3.216 5.462-9.03 4.842-11.732zm-8.067 7.896a2.11 2.11 0 112.983-2.984 2.11 2.11 0 01-2.983 2.984z'
/>
<path
fill='currentColor'
d='M7.4 18.054c-.24.241-.627.335-1.092.416-1.044.178-1.967-.725-1.779-1.78.072-.401.283-.962.415-1.094a.192.192 0 00-.16-.328 2.636 2.636 0 00-1.544.753c-1.033 1.034-1.13 4.87-1.13 4.87s3.838-.097 4.872-1.13c.417-.417.682-.961.752-1.546.017-.184-.207-.293-.334-.16z'
/>
</g>
),
});
export const SettingsIcon = createIcon({
displayName: "SettingsIcon",
viewBox: "0 0 24 24",
// path can also be an array of elements, if you have multiple paths, lines, shapes, etc.
path: (
<g>
<path d='M0,0h24v24H0V0z' fill='none' />
<path
fill='currentColor'
d='M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z'
/>
</g>
),
});
export const SlackLogo = createIcon({
displayName: "SlackLogo",
viewBox: "0 0 24 24",
path: (
<g clip-path='url(#clip0)' fill-rule='evenodd' clip-rule='evenodd'>
<path
d='M7.832.5c-1.105 0-2 .919-1.999 2.05 0 1.13.895 2.048 2 2.05h2V2.55c.001-1.13-.894-2.048-2-2.05zm0 5.467H2.5c-1.106 0-2.001.918-2 2.05-.002 1.13.894 2.048 2 2.05h5.332c1.106-.001 2.002-.919 2-2.05.002-1.132-.894-2.05-2-2.05z'
fill='#36C5F0'
/>
<path
d='M20.5 8.016c0-1.13-.895-2.048-2-2.05-1.106.002-2.002.92-2 2.05v2.05h2c1.105 0 2-.918 2-2.05zm-5.334 0V2.55c.001-1.13-.893-2.048-2-2.05-1.105 0-2 .919-2 2.05v5.466c-.001 1.131.894 2.049 2 2.05 1.106 0 2.001-.918 2-2.05z'
fill='#2EB67D'
/>
<path
d='M13.166 21c1.106 0 2.001-.919 2-2.05.001-1.13-.894-2.048-2-2.05h-2v2.05c-.001 1.13.894 2.048 2 2.05zm0-5.467h5.333c1.106-.001 2.002-.92 2-2.05.002-1.131-.893-2.049-1.999-2.05h-5.333c-1.106 0-2.001.918-2 2.05-.001 1.13.893 2.049 1.999 2.05z'
fill='#ECB22E'
/>
<path
d='M.5 13.483c-.001 1.13.895 2.049 2 2.05 1.106-.001 2.001-.92 2-2.05v-2.05h-2c-1.105.001-2.001.919-2 2.05zm5.333 0v5.467c-.001 1.13.894 2.048 2 2.05 1.105 0 2-.919 2-2.05v-5.465c.002-1.131-.894-2.05-2-2.05-1.106 0-2 .917-2 2.048z'
fill='#E01E5A'
/>
</g>
),
});
export const SpotifyLogo = createIcon({
displayName: "SpotifyLogo",
viewBox: "0 0 24 24",
path: (
<g clip-path='url(#clip0)'>
<path
d='M10.5 0C4.977 0 .5 4.477.5 10s4.477 10 10 10 10-4.477 10-10c0-5.522-4.477-10-10-10zm4.586 14.422a.623.623 0 01-.857.208c-2.348-1.435-5.304-1.76-8.785-.964a.623.623 0 11-.277-1.216c3.808-.87 7.076-.495 9.712 1.115.294.181.387.564.207.857zm1.223-2.722a.78.78 0 01-1.072.257c-2.687-1.652-6.786-2.13-9.965-1.166a.78.78 0 01-.973-.519.781.781 0 01.52-.972c3.632-1.102 8.147-.569 11.233 1.329a.78.78 0 01.258 1.072zm.106-2.835C13.19 6.95 7.875 6.775 4.797 7.708a.935.935 0 11-.543-1.79c3.533-1.072 9.404-.865 13.115 1.338a.935.935 0 01-.954 1.609z'
fill='#2EBD59'
/>
</g>
),
});
export const SupportIcon = createIcon({
// Doesn't display the full icon without w and h being specified
displayName: "BuildIcon",
viewBox: "0 0 24 24",
path: (
<path
fill='currentColor'
d='M20.885 5.547a.703.703 0 00-1.122-.176l-2.7 2.702a.708.708 0 01-.995 0l-1.167-1.169a.702.702 0 010-.994l2.689-2.69a.704.704 0 00-.21-1.138c-2.031-.908-4.566-.435-6.164 1.152-1.358 1.348-1.763 3.455-1.11 5.78a.698.698 0 01-.197.703L2.593 16.4a2.82 2.82 0 103.981 3.983l6.754-7.332a.699.699 0 01.693-.2 7.885 7.885 0 002.03.279c1.469 0 2.757-.475 3.686-1.39 1.72-1.695 1.983-4.57 1.148-6.192zM4.623 19.901a1.407 1.407 0 11-.305-2.797 1.407 1.407 0 01.305 2.797z'
/>
),
});
export const StatsIcon = createIcon({
displayName: "StatsIcon",
viewBox: "0 0 24 24",
path: (
<path
fill='currentColor'
d='M4.57 22.297H3.164a1.055 1.055 0 01-1.055-1.054v-6.328a1.055 1.055 0 011.055-1.055H4.57a1.055 1.055 0 011.055 1.055v6.328a1.055 1.055 0 01-1.055 1.054zM14.414 22.296h-1.406a1.055 1.055 0 01-1.055-1.055V10.695a1.055 1.055 0 011.055-1.055h1.406a1.055 1.055 0 011.055 1.055V21.24a1.055 1.055 0 01-1.055 1.055zM19.336 22.297H17.93a1.055 1.055 0 01-1.055-1.055V5.773A1.055 1.055 0 0117.93 4.72h1.406a1.055 1.055 0 011.055 1.054v15.47a1.055 1.055 0 01-1.055 1.054zM9.492 22.297H8.086a1.055 1.055 0 01-1.055-1.055V2.257a1.055 1.055 0 011.055-1.054h1.406a1.055 1.055 0 011.055 1.054v18.985a1.055 1.055 0 01-1.055 1.055z'
/>
),
});
export const WalletIcon = createIcon({
displayName: "WalletIcon",
viewBox: "0 0 24 24",
path: (
<g>
<path
fill='currentColor'
d='M4.447 4.818h14.062c.164 0 .328.01.491.031a2.9 2.9 0 00-3.406-2.441L4.03 4.382h-.013a2.9 2.9 0 00-1.805 1.149 3.848 3.848 0 012.236-.713zM18.51 5.875H4.446a2.816 2.816 0 00-2.813 2.812v8.438a2.816 2.816 0 002.813 2.812h14.062a2.815 2.815 0 002.813-2.812V8.687a2.815 2.815 0 00-2.813-2.812zm-2.088 8.437a1.406 1.406 0 110-2.811 1.406 1.406 0 010 2.811z'
/>
<path
fill='currentColor'
d='M1.656 11.651V7.28c0-.952.528-2.549 2.358-2.895 1.553-.291 3.091-.291 3.091-.291s1.011.703.176.703-.813 1.077 0 1.077 0 1.032 0 1.032L4.007 10.62l-2.35 1.032z'
/>
</g>
),
});
export const VisaIcon = createIcon({
displayName: "VisaIcon",
viewBox: "0 0 25 9",
color: "#fff",
path: (
<svg
width='25'
height='9'
viewBox='0 0 25 9'
fill='none'
xmlns='http://www.w3.org/2000/svg'>
<path
fill-rule='evenodd'
clip-rule='evenodd'
d='M12.6708 2.96349C12.6568 4.15055 13.653 4.81298 14.4034 5.20684C15.1744 5.61099 15.4333 5.87013 15.4304 6.23147C15.4245 6.78459 14.8153 7.02862 14.2452 7.03812C13.2505 7.05475 12.6723 6.74889 12.2125 6.51753L11.8542 8.32341C12.3155 8.55247 13.1696 8.75217 14.0554 8.76087C16.1345 8.76087 17.4947 7.65543 17.5021 5.94145C17.5102 3.76625 14.7087 3.64579 14.7278 2.67348C14.7344 2.37871 14.9956 2.06408 15.568 1.98406C15.8512 1.94368 16.6332 1.91274 17.5198 2.35252L17.8677 0.605286C17.391 0.418253 16.7782 0.239136 16.0153 0.239136C14.0583 0.239136 12.6819 1.35962 12.6708 2.96349ZM21.2115 0.389687C20.8319 0.389687 20.5118 0.628245 20.3691 0.99433L17.3991 8.63249H19.4767L19.8901 7.40183H22.429L22.6689 8.63249H24.5L22.9021 0.389687H21.2115ZM21.5021 2.61641L22.1016 5.7116H20.4596L21.5021 2.61641ZM10.1518 0.389687L8.51418 8.63249H10.4939L12.1308 0.389687H10.1518ZM7.22303 0.389687L5.16233 6.00003L4.32878 1.22966C4.23097 0.697187 3.84472 0.389687 3.41579 0.389687H0.0471011L0 0.629037C0.691574 0.790671 1.47729 1.0514 1.95326 1.33033C2.24457 1.50067 2.32775 1.64964 2.42336 2.05458L4.00214 8.63249H6.0945L9.3021 0.389687H7.22303Z'
fill='white'
/>
</svg>
),
});
export const BillIcon = createIcon({
displayName: "BillIcon",
viewBox: "0 0 20 18",
path: (
<svg
width='20'
height='18'
viewBox='0 0 20 18'
fill='none'
xmlns='http://www.w3.org/2000/svg'>
<path
d='M10 4V0H0V18H20V4H10ZM4 16H2V14H4V16ZM4 12H2V10H4V12ZM4 8H2V6H4V8ZM4 4H2V2H4V4ZM8 16H6V14H8V16ZM8 12H6V10H8V12ZM8 8H6V6H8V8ZM8 4H6V2H8V4ZM18 16H10V14H12V12H10V10H12V8H10V6H18V16ZM16 8H14V10H16V8ZM16 12H14V14H16V12Z'
fill='#01B574'
/>
</svg>
),
});
export const GraphIcon = createIcon({
displayName: "GraphIcon",
viewBox: "0 0 61 20",
path: (
<svg
width='61'
height='20'
viewBox='0 0 61 20'
fill='none'
xmlns='http://www.w3.org/2000/svg'>
<path
d='M1 8.2C1.70238 11.8 4.5 18.5 11 18C17.5 17.5 18.2786 1 29.6571 1C41.0357 1 41.0357 20.0286 60 3.57143'
stroke='white'
stroke-width='2'
stroke-linecap='round'
stroke-linejoin='round'
/>
</svg>
),
});
export const FulgerIcon = createIcon({
displayName: "FulgerIcon",
viewBox: "0 0 14 24",
path: (
<svg
width='14'
height='24'
viewBox='0 0 14 24'
fill='none'
xmlns='http://www.w3.org/2000/svg'>
<path
d='M5.74999 23.25H4.49999L5.74999 14.5H0.424988C0.424988 14.5 5.02499 6.425 8.24999 0.75H9.49999L8.24999 9.5H13.6L5.74999 23.25Z'
fill='#09AD8F'
/>
</svg>
),
});
export const CarIcon = createIcon({
displayName: "CarIcon",
viewBox: "0 0 22 19",
path: (
<svg
width='22'
height='19'
viewBox='0 0 22 19'
fill='none'
xmlns='http://www.w3.org/2000/svg'>
<path
d='M19.0733 1.34502C18.84 0.656687 18.1867 0.166687 17.4167 0.166687H4.58333C3.81333 0.166687 3.17167 0.656687 2.92667 1.34502L0.5 8.33335V17.6667C0.5 18.3084 1.025 18.8334 1.66667 18.8334H2.83333C3.475 18.8334 4 18.3084 4 17.6667V16.5H18V17.6667C18 18.3084 18.525 18.8334 19.1667 18.8334H20.3333C20.975 18.8334 21.5 18.3084 21.5 17.6667V8.33335L19.0733 1.34502ZM4.99167 2.50002H16.9967L18.2567 6.12835H3.73167L4.99167 2.50002ZM19.1667 14.1667H2.83333V8.33335H19.1667V14.1667Z'
fill='white'
/>
<path
d='M5.75 13C6.7165 13 7.5 12.2165 7.5 11.25C7.5 10.2835 6.7165 9.50003 5.75 9.50003C4.7835 9.50003 4 10.2835 4 11.25C4 12.2165 4.7835 13 5.75 13Z'
fill='white'
/>
<path
d='M16.25 13C17.2165 13 18 12.2165 18 11.25C18 10.2835 17.2165 9.50003 16.25 9.50003C15.2835 9.50003 14.5 10.2835 14.5 11.25C14.5 12.2165 15.2835 13 16.25 13Z'
fill='white'
/>
</svg>
),
});
export const FulgerWhiteIcon = createIcon({
displayName: "FulgerWhiteIcon",
viewBox: "0 0 18 24",
path: (
<svg
width='18'
height='24'
viewBox='0 0 18 24'
fill='none'
xmlns='http://www.w3.org/2000/svg'>
<path
d='M10.8 -3.14722e-07L10.8 9.6L18 9.6L7.2 24L7.2 14.4L1.2779e-06 14.4L10.8 -3.14722e-07Z'
fill='white'
/>
</svg>
),
});
export const SimmmpleLogoWhite = createIcon({
displayName: "SimmmpleLogoWhite",
viewBox: "0 0 22 22",
path: (
<svg
width="22px"
height="22px"
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.7509 0.0229001L16.0242 0.0507784L16.2945 0.089609L16.5617 0.139392L16.8248 0.199131L17.0839 0.268827L17.3399 0.348479L17.5908 0.438088L17.8366 0.537654L18.0783 0.645185L18.315 0.762672L18.5465 0.88912L18.7729 1.02353L18.9932 1.16691L19.2074 1.31825L19.4155 1.47755L19.6174 1.64383L19.8122 1.81807L20.0009 1.99928L20.1825 2.18845L20.3569 2.3836L20.5231 2.58572L20.6822 2.79381L20.8342 3.00787L20.977 3.22891L21.1116 3.45492L21.2381 3.68592L21.3554 3.92288L21.4635 4.16483L21.5624 4.41075L21.6522 4.66166L21.7318 4.91754L21.8011 5.17641L21.8613 5.44026L21.9113 5.7071L21.95 5.97791L21.9776 6.25172L21.9949 6.52851L22 6.8073V15.1987L21.9949 15.4775L21.9776 15.7533L21.95 16.0271L21.9113 16.2969L21.8613 16.5637L21.8011 16.8266L21.7318 17.0864L21.6522 17.3413L21.5624 17.5922L21.4635 17.8382L21.3554 18.0801L21.2381 18.3161L21.1116 18.5471L20.977 18.7731L20.8342 18.9931L20.6822 19.2072L20.5231 19.4163L20.3569 19.6174L20.1825 19.8125L20.0009 20.0017L19.8122 20.1829L19.6174 20.3572L19.4155 20.5234L19.2074 20.6827L18.9932 20.8341L18.7729 20.9765L18.5465 21.1119L18.315 21.2373L18.0783 21.3548L17.8366 21.4633L17.5908 21.5619L17.3399 21.6515L17.0839 21.7322L16.8248 21.8019L16.5617 21.8616L16.2945 21.9104L16.0242 21.9492L15.7509 21.9781L15.4734 21.995L15.194 22H6.80603L6.52657 21.995L6.25016 21.9781L5.9758 21.9492L5.70552 21.9104L5.43829 21.8616L5.17515 21.8019L4.91609 21.7312L4.6611 21.6515L4.4102 21.5619L4.16337 21.4633L3.92165 21.3548L3.68503 21.2373L3.4535 21.1119L3.22809 20.9765L3.00779 20.8341L2.7936 20.6827L2.58452 20.5234L2.38257 20.3562L2.18776 20.1819L1.99907 20.0007L1.81752 19.8115L1.64312 19.6164L1.47687 19.4143L1.31776 19.2062L1.16681 18.9921L1.02299 18.7721L0.888363 18.5461L0.762911 18.3141L0.645619 18.0781L0.537506 17.8362L0.437552 17.5892L0.348818 17.3383L0.268243 17.0835L0.198887 16.8236L0.138711 16.5597L0.0897543 16.2929L0.0509968 16.0221L0.0224386 15.7493L0.00611961 15.4725L0 15.1927V6.8073L0.00611961 6.52851L0.0224386 6.25172L0.0509968 5.97791L0.0897543 5.7071L0.138711 5.44026L0.198887 5.17641L0.268243 4.91754L0.348818 4.66166L0.437552 4.41075L0.537506 4.16483L0.645619 3.92288L0.762911 3.68592L0.888363 3.45492L1.02299 3.22891L1.16681 3.00787L1.31776 2.79381L1.47687 2.58572L1.64312 2.3836L1.81752 2.18845L1.99907 1.99928L2.18776 1.81807L2.38257 1.64383L2.58452 1.47755L2.7936 1.31825L3.00779 1.16691L3.22809 1.02353L3.4535 0.88912L3.68503 0.762672L3.92165 0.645185L4.16337 0.537654L4.4102 0.438088L4.6611 0.348479L4.91609 0.268827L5.17515 0.199131L5.43829 0.139392L5.70552 0.089609L5.9758 0.0507784L6.25016 0.0229001L6.52657 0.00597393L6.80603 0H15.194L15.4734 0.00597393L15.7509 0.0229001ZM10.0198 13.2522L9.88827 13.2611L9.75874 13.2751L9.63023 13.295L9.50375 13.3199L9.37932 13.3497L9.25693 13.3856L9.13658 13.4254L9.01827 13.4702L8.90199 13.52L8.78878 13.5748L8.67863 13.6335L8.57051 13.6962L8.46648 13.7639L8.36449 13.8356L8.26555 13.9113L8.1707 13.9909L8.07891 14.0736L7.99017 14.1612L7.90552 14.2508L7.82494 14.3444L7.74743 14.442L7.67501 14.5425L7.60566 14.6451L7.5414 14.7516L7.48122 14.8602L7.42615 14.9717L7.37515 15.0862L7.32925 15.2027L7.28846 15.3221L7.25276 15.4426L7.22216 15.5661L7.19666 15.6915L7.17626 15.818L7.16198 15.9474L7.1528 16.0768L7.14974 16.2093V16.2202H11.8476L11.9802 16.2172L12.1117 16.2083L12.2423 16.1943L12.3698 16.1744L12.4962 16.1495L12.6217 16.1197L12.7441 16.0838L12.8644 16.044L12.9817 15.9992L13.098 15.9494L13.2112 15.8946L13.3214 15.8359L13.4295 15.7732L13.5345 15.7055L13.6355 15.6338L13.7344 15.5581L13.8293 15.4785L13.9221 15.3958L14.0098 15.3092L14.0945 15.2186L14.1751 15.125L14.2526 15.0274L14.325 14.9269L14.3943 14.8243L14.4586 14.7178L14.5188 14.6092L14.5739 14.4977L14.6248 14.3832L14.6707 14.2667L14.7115 14.1473L14.7472 14.0268L14.7789 13.9033L14.8044 13.7779L14.8237 13.6514L14.838 13.523L14.8472 13.3926L14.8503 13.2601V13.2502H10.1524L10.0198 13.2522ZM7.14974 9.52643L7.1528 9.66084L7.16198 9.79327L7.17626 9.92469L7.19666 10.0541L7.22216 10.1816L7.25276 10.308L7.28948 10.4315L7.33027 10.553L7.37719 10.6714L7.42819 10.7879L7.48326 10.9024L7.54344 11.0129L7.60872 11.1215L7.67807 11.227L7.75151 11.3296L7.82902 11.4281L7.9096 11.5237L7.99527 11.6163L8.08401 11.7049L8.17682 11.7896L8.27269 11.8712L8.37163 11.9479L8.47362 12.0205L8.57867 12.0892L8.68781 12.154L8.79898 12.2147L8.91219 12.2695L9.02846 12.3202L9.1478 12.366L9.26815 12.4079L9.39156 12.4437L9.51701 12.4746L9.64451 12.4995L9.77302 12.5194L9.90357 12.5343L10.0362 12.5423L10.1698 12.5453H14.8941V12.5343L14.8911 12.3999L14.8829 12.2675L14.8676 12.136L14.8482 12.0066L14.8217 11.8792L14.7911 11.7527L14.7554 11.6293L14.7136 11.5078L14.6677 11.3893L14.6167 11.2728L14.5606 11.1583L14.5004 11.0478L14.4351 10.9393L14.3668 10.8337L14.2934 10.7322L14.2159 10.6326L14.1343 10.537L14.0496 10.4444L13.9609 10.3558L13.8681 10.2712L13.7722 10.1905L13.6733 10.1129L13.5702 10.0402L13.4652 9.97149L13.3571 9.90677L13.2459 9.84703L13.1317 9.79127L13.0154 9.7405L12.8971 9.6947L12.7757 9.65387L12.6523 9.61703L12.5268 9.58717L12.4004 9.56128L12.2708 9.54136L12.1403 9.52643L12.0087 9.51846L11.8751 9.51548H7.14974V9.52643ZM10.0198 5.83255L9.88827 5.84151L9.75874 5.85545L9.63023 5.87536L9.50375 5.90025L9.37932 5.93012L9.25693 5.96597L9.13658 6.00579L9.01827 6.0506L8.90199 6.10038L8.78878 6.15514L8.67863 6.21388L8.57051 6.27661L8.46648 6.34432L8.36449 6.416L8.26555 6.49167L8.1707 6.57133L8.07891 6.65396L7.99017 6.74158L7.90552 6.83119L7.82494 6.92578L7.74743 7.02236L7.67501 7.12292L7.60566 7.22547L7.5414 7.33201L7.48122 7.44053L7.42615 7.55205L7.37515 7.66655L7.32925 7.78304L7.28846 7.90252L7.25276 8.02299L7.22216 8.14645L7.19666 8.2719L7.17626 8.39835L7.16198 8.52779L7.1528 8.65722L7.14974 8.78964V8.8006H11.8476L11.9802 8.79761L12.1117 8.78865L12.2423 8.77471L12.3698 8.7548L12.4962 8.72991L12.6217 8.70004L12.7441 8.66419L12.8644 8.62437L12.9817 8.57956L13.098 8.52978L13.2112 8.47502L13.3214 8.41627L13.4295 8.35355L13.5345 8.28584L13.6355 8.21416L13.7344 8.13849L13.8293 8.05883L13.9221 7.97619L14.0098 7.88957L14.0945 7.79897L14.1751 7.70538L14.2526 7.6078L14.325 7.50724L14.3943 7.40469L14.4586 7.29815L14.5188 7.18963L14.5739 7.07811L14.6248 6.96361L14.6707 6.84712L14.7115 6.72764L14.7472 6.60717L14.7789 6.48371L14.8044 6.35825L14.8237 6.23181L14.838 6.10337L14.8472 5.97294L14.8503 5.84051V5.83056H10.1524L10.0198 5.83255Z"
fill="white"
/>
</svg>
),
});
================================================
FILE: src/components/Layout/MainPanel.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import { Box, useStyleConfig } from "@chakra-ui/react";
function MainPanel(props) {
const { variant, children, ...rest } = props;
const styles = useStyleConfig("MainPanel", { variant });
// Pass the computed styles into the `__css` prop
return (
<Box __css={styles} {...rest}>
{children}
</Box>
);
}
export default MainPanel;
================================================
FILE: src/components/Layout/PanelContainer.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import { Box, useStyleConfig } from "@chakra-ui/react";
function PanelContainer(props) {
const { variant, children, ...rest } = props;
const styles = useStyleConfig("PanelContainer", { variant });
// Pass the computed styles into the `__css` prop
return (
<Box __css={styles} {...rest}>
{children}
</Box>
);
}
export default PanelContainer;
================================================
FILE: src/components/Layout/PanelContent.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import { Box, useStyleConfig } from "@chakra-ui/react";
function PanelContent(props) {
const { variant, children, ...rest } = props;
const styles = useStyleConfig("PanelContent", { variant });
// Pass the computed styles into the `__css` prop
return (
<Box __css={styles} {...rest}>
{children}
</Box>
);
}
export default PanelContent;
================================================
FILE: src/components/Menu/ItemContent.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// chakra imports
import { Avatar, Flex, Text } from "@chakra-ui/react";
import { ClockIcon } from "components/Icons/Icons";
import React from "react";
export function ItemContent(props) {
const navbarIcon = "gray.400";
const notificationColor = "white";
const spacing = " ";
return (
<>
<Avatar
name={props.aName}
src={props.aSrc}
borderRadius='12px'
me='16px'
/>
<Flex flexDirection='column'>
<Text fontSize='14px' mb='5px' color={notificationColor}>
<Text fontWeight='bold' fontSize='14px' as='span'>
{props.boldInfo}
{spacing}
</Text>
{props.info}
</Text>
<Flex alignItems='center'>
<ClockIcon color={navbarIcon} w='13px' h='13px' me='3px' />
<Text fontSize='xs' lineHeight='100%' color={navbarIcon}>
{props.time}
</Text>
</Flex>
</Flex>
</>
);
}
================================================
FILE: src/components/Navbars/AdminNavbar.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Chakra Imports
import {
Box,
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
Flex,
Link,
useColorModeValue,
} from "@chakra-ui/react";
import PropTypes from "prop-types";
import React, { useState } from "react";
import AdminNavbarLinks from "./AdminNavbarLinks";
export default function AdminNavbar(props) {
const [scrolled, setScrolled] = useState(false);
const {
variant,
children,
fixed,
secondary,
brandText,
onOpen,
...rest
} = props;
// Here are all the props that may change depending on navbar's type or state.(secondary, variant, scrolled)
let mainText = "white";
let navbarPosition = "absolute";
let navbarFilter = "none";
let navbarBackdrop = "none";
let navbarShadow = "none";
let navbarBg = "none";
let navbarBorder = "transparent";
let secondaryMargin = "0px";
let paddingX = "15px";
if (props.fixed === true)
if (scrolled === true) {
navbarPosition = "fixed";
navbarShadow = "0px 7px 23px rgba(0, 0, 0, 0.05)";
navbarBg =
"linear-gradient(rgba(255, 255, 255, 0) 0% rgba(255, 255, 255, 0.39) @ 100%)";
navbarBorder = "rgba(226, 232, 240, 0.3)";
navbarFilter = "drop-shadow(0px 7px 23px rgba(0, 0, 0, 0.05))";
navbarBackdrop = "blur(42px)";
}
if (props.secondary) {
navbarBackdrop = "blur(42px)";
// navbarPosition = "absolute";
// mainText = "white";
// secondaryText = "white";
// secondaryMargin = "22px";
// paddingX = "30px";
}
const changeNavbar = () => {
if (window.scrollY > 1) {
setScrolled(true);
} else {
setScrolled(false);
}
};
window.addEventListener("scroll", changeNavbar);
return (
<Flex
position={navbarPosition}
boxShadow={navbarShadow}
bg={navbarBg}
borderColor={navbarBorder}
filter={navbarFilter}
backdropFilter={navbarBackdrop}
borderWidth='1.5px'
borderStyle='solid'
transitionDelay='0s, 0s, 0s, 0s'
transitionDuration=' 0.25s, 0.25s, 0.25s, 0s'
transition-property='box-shadow, background-color, filter, border'
transitionTimingFunction='linear, linear, linear, linear'
alignItems={{ xl: "center" }}
borderRadius='16px'
display='flex'
minH='75px'
justifyContent={{ xl: "center" }}
lineHeight='25.6px'
mx='auto'
mt={secondaryMargin}
pb='8px'
left={document.documentElement.dir === "rtl" ? "30px" : ""}
right={document.documentElement.dir === "rtl" ? "" : "30px"}
px={{
sm: paddingX,
md: "30px",
}}
ps={{
xl: "12px",
}}
pt='8px'
top='18px'
w={{ sm: "calc(100vw - 60px)", xl: "calc(100vw - 75px - 275px)" }}>
<Flex
w='100%'
flexDirection={{
sm: "column",
md: "row",
}}
alignItems={{ xl: "center" }}>
<Box mb={{ sm: "8px", md: "0px" }}>
<Breadcrumb>
<BreadcrumbItem color='#A0AEC0'>
<BreadcrumbLink href='#' color='#A0AEC0'>
Pages
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbItem color={mainText}>
<BreadcrumbLink href='#' color={mainText}>
{brandText}
</BreadcrumbLink>
</BreadcrumbItem>
</Breadcrumb>
{/* Here we create navbar brand, based on route name */}
<Link
color={mainText}
href='#'
bg='inherit'
borderRadius='inherit'
fontWeight='bold'
_hover={{ color: { mainText } }}
_active={{
bg: "inherit",
transform: "none",
borderColor: "transparent",
}}
_focus={{
boxShadow: "none",
}}>
{brandText}
</Link>
</Box>
<Box ms='auto' w={{ sm: "100%", md: "unset" }}>
<AdminNavbarLinks
onOpen={props.onOpen}
logoText={props.logoText}
secondary={props.secondary}
fixed={props.fixed}
/>
</Box>
</Flex>
</Flex>
);
}
AdminNavbar.propTypes = {
brandText: PropTypes.string,
variant: PropTypes.string,
secondary: PropTypes.bool,
fixed: PropTypes.bool,
onOpen: PropTypes.func,
};
================================================
FILE: src/components/Navbars/AdminNavbarLinks.js
================================================
// Chakra Icons
import { BellIcon, SearchIcon } from "@chakra-ui/icons";
// Chakra Imports
import {
Button,
Flex,
IconButton,
Input,
InputGroup,
InputLeftElement,
Menu,
MenuButton,
MenuItem,
MenuList,
Text,
} from "@chakra-ui/react";
// Assets
import avatar1 from "assets/img/avatars/avatar1.png";
import avatar2 from "assets/img/avatars/avatar2.png";
import avatar3 from "assets/img/avatars/avatar3.png";
// Custom Icons
import { ProfileIcon, SettingsIcon } from "components/Icons/Icons";
// Custom Components
import { ItemContent } from "components/Menu/ItemContent";
import { SidebarResponsive } from "components/Sidebar/Sidebar";
import PropTypes from "prop-types";
import React from "react";
import { NavLink } from "react-router-dom";
import routes from "routes.js";
export default function HeaderLinks(props) {
const { variant, children, fixed, secondary, onOpen, ...rest } = props;
// Chakra Color Mode
let inputBg = "#0F1535";
let mainText = "gray.400";
let navbarIcon = "white";
let searchIcon = "white";
if (secondary) {
navbarIcon = "white";
mainText = "white";
}
const settingsRef = React.useRef();
return (
<Flex
pe={{ sm: "0px", md: "16px" }}
w={{ sm: "100%", md: "auto" }}
alignItems='center'
flexDirection='row'>
<InputGroup
cursor='pointer'
bg={inputBg}
borderRadius='15px'
borderColor='rgba(226, 232, 240, 0.3)'
w={{
sm: "128px",
md: "200px",
}}
me={{ sm: "auto", md: "20px" }}>
<InputLeftElement
children={
<IconButton
bg='inherit'
borderRadius='inherit'
_hover='none'
_active={{
bg: "inherit",
transform: "none",
borderColor: "transparent",
}}
_focus={{
boxShadow: "none",
}}
icon={
<SearchIcon color={searchIcon} w='15px' h='15px' />
}></IconButton>
}
/>
<Input
fontSize='xs'
py='11px'
color={mainText}
placeholder='Type here...'
borderRadius='inherit'
/>
</InputGroup>
<NavLink to='/auth/signin'>
<Button
ms='0px'
px='0px'
me={{ sm: "2px", md: "16px" }}
color={navbarIcon}
variant='transparent-with-icon'
rightIcon={
document.documentElement.dir ? (
""
) : (
<ProfileIcon color={navbarIcon} w='22px' h='22px' me='0px' />
)
}
leftIcon={
document.documentElement.dir ? (
<ProfileIcon color={navbarIcon} w='22px' h='22px' me='0px' />
) : (
""
)
}>
<Text display={{ sm: "none", md: "flex" }}>Sign In</Text>
</Button>
</NavLink>
<SidebarResponsive
iconColor='gray.500'
logoText={props.logoText}
secondary={props.secondary}
routes={routes}
// logo={logo}
{...rest}
/>
<SettingsIcon
cursor='pointer'
ms={{ base: "16px", xl: "0px" }}
me='16px'
ref={settingsRef}
onClick={props.onOpen}
color={navbarIcon}
w='18px'
h='18px'
/>
<Menu>
<MenuButton align='center'>
<BellIcon color={navbarIcon} mt='-4px' w='18px' h='18px' />
</MenuButton>
<MenuList
border='transparent'
backdropFilter='blur(63px)'
bg='linear-gradient(127.09deg, rgba(6, 11, 40, 0.94) 19.41%, rgba(10, 14, 35, 0.69) 76.65%)'
borderRadius='20px'>
<Flex flexDirection='column'>
<MenuItem
borderRadius='8px'
_hover={{
bg: "transparent",
}}
_active={{
bg: "transparent",
}}
_focus={{
bg: "transparent",
}}
mb='10px'>
<ItemContent
time='13 minutes ago'
info='from Alicia'
boldInfo='New Message'
aName='Alicia'
aSrc={avatar1}
/>
</MenuItem>
<MenuItem
borderRadius='8px'
_hover={{
bg: "transparent",
}}
_active={{
bg: "transparent",
}}
_focus={{
bg: "transparent",
}}
_hover={{ bg: "transparent" }}
mb='10px'>
<ItemContent
time='2 days ago'
info='by Josh Henry'
boldInfo='New Album'
aName='Josh Henry'
aSrc={avatar2}
/>
</MenuItem>
<MenuItem
borderRadius='8px'
_hover={{
bg: "transparent",
}}
_active={{
bg: "transparent",
}}
_focus={{
bg: "transparent",
}}>
<ItemContent
time='3 days ago'
info='Payment succesfully completed!'
boldInfo=''
aName='Kara'
aSrc={avatar3}
/>
</MenuItem>
</Flex>
</MenuList>
</Menu>
</Flex>
);
}
HeaderLinks.propTypes = {
variant: PropTypes.string,
fixed: PropTypes.bool,
secondary: PropTypes.bool,
onOpen: PropTypes.func,
};
================================================
FILE: src/components/Navbars/AuthNavbar.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Chakra imports
import {
Box,
Button,
Flex,
HStack,
Link,
Text,
useColorModeValue,
} from "@chakra-ui/react";
import {
CreativeTimLogo,
DocumentIcon,
HomeIcon,
PersonIcon,
RocketIcon,
} from "components/Icons/Icons";
import { SidebarResponsive } from "components/Sidebar/Sidebar";
import PropTypes from "prop-types";
import React from "react";
import { NavLink } from "react-router-dom";
import routes from "routes.js";
export default function AuthNavbar(props) {
const [open, setOpen] = React.useState(false);
const handleDrawerToggle = () => {
setOpen(!open);
};
const { logo, logoText, secondary, ...rest } = props;
// verifies if routeName is the one active (in browser input)
const activeRoute = (routeName) => {
return window.location.href.indexOf(routeName) > -1 ? true : false;
};
// Chakra color mode
let navbarIcon = "white";
let mainText = "white";
let navbarBg =
"linear-gradient(123.64deg, rgba(255, 255, 255, 0) -22.38%, rgba(255, 255, 255, 0.039) 70.38%)";
let navbarBorder = "rgba(226, 232, 240, 0.3)";
let navbarShadow = useColorModeValue(
"0px 7px 23px rgba(0, 0, 0, 0.05)",
"none"
);
let navbarFilter = useColorModeValue(
"none",
"drop-shadow(0px 7px 23px rgba(0, 0, 0, 0.05))"
);
let navbarBackdrop = "blur(42px)";
let navbarPosition = "fixed";
var brand = (
<Link
href={`${process.env.PUBLIC_URL}/#/`}
target='_blank'
display='flex'
lineHeight='100%'
fontWeight='bold'
justifyContent='center'
alignItems='center'
color={mainText}>
<Box
bg='linear-gradient(97.89deg, #FFFFFF 70.67%, rgba(117, 122, 140, 0) 108.55%)'
bgClip='text'>
<Text fontSize='sm' letterSpacing='3px' mt='3px' color='transparent'>
{logoText}
</Text>
</Box>
</Link>
);
var linksAuth = (
<HStack display={{ sm: "none", lg: "flex" }}>
<NavLink to='/admin/dashboard'>
<Button
fontSize='sm'
ms='0px'
me='0px'
px='0px'
me={{ sm: "2px", md: "16px" }}
color={navbarIcon}
variant='transparent-with-icon'
leftIcon={<HomeIcon color={navbarIcon} w='12px' h='12px' me='0px' />}>
<Text>Dashboard</Text>
</Button>
</NavLink>
<NavLink to='/admin/profile'>
<Button
fontSize='sm'
ms='0px'
me='0px'
px='0px'
me={{ sm: "2px", md: "16px" }}
color={navbarIcon}
variant='transparent-with-icon'
leftIcon={
<PersonIcon color={navbarIcon} w='12px' h='12px' me='0px' />
}>
<Text>Profile</Text>
</Button>
</NavLink>
<NavLink to='/auth/signup'>
<Button
fontSize='sm'
ms='0px'
me='0px'
px='0px'
me={{ sm: "2px", md: "16px" }}
color={navbarIcon}
variant='transparent-with-icon'
leftIcon={
<RocketIcon color={navbarIcon} w='12px' h='12px' me='0px' />
}>
<Text>Sign Up</Text>
</Button>
</NavLink>
<NavLink to='/auth/signin'>
<Button
fontSize='sm'
ms='0px'
px='0px'
me={{ sm: "2px", md: "16px" }}
color={navbarIcon}
variant='transparent-with-icon'
leftIcon={
<DocumentIcon color={navbarIcon} w='12px' h='12px' me='0px' />
}>
<Text>Sign In</Text>
</Button>
</NavLink>
</HStack>
);
return (
<Flex
position={navbarPosition}
top='16px'
left='50%'
transform='translate(-50%, 0px)'
background={navbarBg}
border='2px solid'
borderColor={navbarBorder}
boxShadow={navbarShadow}
filter={navbarFilter}
backdropFilter={navbarBackdrop}
borderRadius='20px'
px='16px'
py='22px'
mx='auto'
width='1044px'
maxW='90%'
alignItems='center'>
<Flex w='100%' justifyContent={{ sm: "start", lg: "space-between" }}>
{brand}
<Box
ms={{ base: "auto", lg: "0px" }}
display={{ base: "flex", lg: "none" }}>
<SidebarResponsive
iconColor='white'
logoText={props.logoText}
secondary={props.secondary}
routes={routes}
{...rest}
/>
</Box>
{linksAuth}
<Link href='https://creative-tim.com/product/vision-ui-dashboard-chakra'>
<Button
fontSize='xs'
variant='brand'
borderRadius='12px'
px='30px'
display={{
sm: "none",
lg: "flex",
}}>
Free Download
</Button>
</Link>
</Flex>
</Flex>
);
}
AuthNavbar.propTypes = {
color: PropTypes.oneOf(["primary", "info", "success", "warning", "danger"]),
brandText: PropTypes.string,
};
================================================
FILE: src/components/Navbars/SearchBar/SearchBar.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* 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 {
IconButton,
Input,
InputGroup,
InputLeftElement,
useColorModeValue,
} from "@chakra-ui/react";
import { SearchIcon } from "@chakra-ui/icons";
export function SearchBar(props) {
// Pass the computed styles into the `__css` prop
const { variant, children, ...rest } = props;
// Chakra Color Mode
const searchIconColor = "gray.700";
const inputBg = "gray.800";
return (
<InputGroup bg={inputBg} borderRadius='15px' w='200px'>
<InputLeftElement
children={
<IconButton
bg='inherit'
borderRadius='inherit'
_hover='none'
_active={{
bg: "inherit",
transform: "none",
borderColor: "transparent",
}}
_focus={{
boxShadow: "none",
}}
icon={
<SearchIcon color={searchIconColor} w='15px' h='15px' />
}></IconButton>
}
/>
<Input
fontSize='xs'
py='11px'
placeholder='Type here...'
borderRadius='inherit'
/>
</InputGroup>
);
}
================================================
FILE: src/components/RTLProvider/RTLProvider.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";
import rtl from "stylis-plugin-rtl";
// NB: A unique `key` is important for it to work!
const options = {
rtl: { key: "css-ar", stylisPlugins: [rtl] },
ltr: { key: "css-en" },
};
export function RtlProvider({ children }) {
const dir = document.documentElement.dir == "ar" ? "rtl" : "ltr";
const cache = createCache(options[dir]);
return <CacheProvider value={cache} children={children} />;
}
================================================
FILE: src/components/Separator/Separator.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* 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 { Flex } from "@chakra-ui/react";
export function Separator(props) {
const { variant, children, ...rest } = props;
return (
<Flex
h='1px'
w='100%'
bg='linear-gradient(90deg, rgba(224, 225, 226, 0) 0%, #E0E1E2 47.22%, rgba(224, 225, 226, 0.15625) 94.44%)'
{...rest}>
{children}
</Flex>
);
}
================================================
FILE: src/components/Sidebar/Sidebar.js
================================================
/*eslint-disable*/
import { HamburgerIcon } from "@chakra-ui/icons";
// chakra imports
import {
Box,
Button,
Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent,
DrawerOverlay,
Flex,
Link,
Stack,
Text,
useDisclosure,
} from "@chakra-ui/react";
import IconBox from "components/Icons/IconBox";
import { SimmmpleLogoWhite } from "components/Icons/Icons";
import { Separator } from "components/Separator/Separator";
import { SidebarHelp } from "components/Sidebar/SidebarHelp";
import PropTypes from "prop-types";
import React from "react";
import { NavLink, useLocation } from "react-router-dom";
// FUNCTIONS
function Sidebar(props) {
// to check for active links and opened collapses
let location = useLocation();
// this is for the rest of the collapses
const [state, setState] = React.useState({});
const mainPanel = React.useRef();
let variantChange = "0.2s linear";
// verifies if routeName is the one active (in browser input)
const activeRoute = (routeName) => {
return location.pathname === routeName ? "active" : "";
};
// this function creates the links and collapses that appear in the sidebar (left menu)
const createLinks = (routes) => {
const { sidebarVariant } = props;
// Chakra Color Mode
let activeBg = "#1A1F37";
let inactiveBg = "#1A1F37";
let activeColor = "white";
let inactiveColor = "white";
let sidebarActiveShadow = "none";
return routes.map((prop, key) => {
if (prop.redirect) {
return null;
}
if (prop.category) {
var st = {};
st[prop["state"]] = !state[prop.state];
return (
<>
<Text
color={activeColor}
fontWeight='bold'
mb={{
xl: "12px",
}}
mx='auto'
ps={{
sm: "10px",
xl: "16px",
}}
py='12px'>
{document.documentElement.dir === "rtl"
? prop.rtlName
: prop.name}
</Text>
{createLinks(prop.views)}
</>
);
}
return (
<NavLink to={prop.layout + prop.path}>
{activeRoute(prop.layout + prop.path) === "active" ? (
<Button
boxSize='initial'
justifyContent='flex-start'
alignItems='center'
boxShadow={sidebarActiveShadow}
bg={activeBg}
transition={variantChange}
backdropFilter='blur(42px)'
mb={{
xl: "12px",
}}
mx={{
xl: "auto",
}}
ps={{
sm: "10px",
xl: "16px",
}}
py='12px'
borderRadius='15px'
_hover='none'
w='100%'
_active={{
bg: "inherit",
transform: "none",
borderColor: "transparent",
}}
_focus={{
boxShadow: "0px 7px 11px rgba(0, 0, 0, 0.04)",
}}>
<Flex>
{typeof prop.icon === "string" ? (
<Icon>{prop.icon}</Icon>
) : (
<IconBox
bg='brand.200'
color='white'
h='30px'
w='30px'
me='12px'
transition={variantChange}>
{prop.icon}
</IconBox>
)}
<Text color={activeColor} my='auto' fontSize='sm'>
{document.documentElement.dir === "rtl"
? prop.rtlName
: prop.name}
</Text>
</Flex>
</Button>
) : (
<Button
boxSize='initial'
justifyContent='flex-start'
alignItems='center'
bg='transparent'
mb={{
xl: "12px",
}}
mx={{
xl: "auto",
}}
py='12px'
ps={{
sm: "10px",
xl: "16px",
}}
borderRadius='15px'
_hover='none'
w='100%'
_active={{
bg: "inherit",
transform: "none",
borderColor: "transparent",
}}
_focus={{
boxShadow: "none",
}}>
<Flex>
{typeof prop.icon === "string" ? (
<Icon>{prop.icon}</Icon>
) : (
<IconBox
bg={inactiveBg}
color='brand.200'
h='30px'
w='30px'
me='12px'
transition={variantChange}>
{prop.icon}
</IconBox>
)}
<Text color={inactiveColor} my='auto' fontSize='sm'>
{document.documentElement.dir === "rtl"
? prop.rtlName
: prop.name}
</Text>
</Flex>
</Button>
)}
</NavLink>
);
});
};
const { logoText, routes, sidebarVariant } = props;
var links = <>{createLinks(routes)}</>;
// BRAND
// Chakra Color Mode
let sidebarBg =
"linear-gradient(111.84deg, rgba(6, 11, 38, 0.94) 59.3%, rgba(26, 31, 55, 0) 100%)";
let sidebarRadius = "16px";
let sidebarMargins = "16px 0px 16px 16px";
var brand = (
<Box pt={"25px"} mb='12px'>
<Link
href={`${process.env.PUBLIC_URL}/#/`}
target='_blank'
display='flex'
lineHeight='100%'
mb='30px'
fontWeight='bold'
justifyContent='center'
alignItems='center'
fontSize='11px'>
<SimmmpleLogoWhite w='22px' h='22px' me='10px' mt='2px' />
<Box
bg='linear-gradient(97.89deg, #FFFFFF 70.67%, rgba(117, 122, 140, 0) 108.55%)'
bgClip='text'>
<Text fontSize='sm' letterSpacing='3px' mt='3px' color='transparent'>
{logoText}
</Text>
</Box>
</Link>
<Separator></Separator>
</Box>
);
// SIDEBAR
return (
<Box ref={mainPanel}>
<Box display={{ sm: "none", xl: "block" }} position='fixed'>
<Box
bg={sidebarBg}
backdropFilter='blur(10px)'
transition={variantChange}
w='260px'
maxW='260px'
ms={{
sm: "16px",
}}
my={{
sm: "16px",
}}
h='calc(100vh - 32px)'
ps='20px'
pe='20px'
m={sidebarMargins}
borderRadius={sidebarRadius}>
<Box>{brand}</Box>
<Stack direction='column' mb='40px'>
<Box>{links}</Box>
</Stack>
<SidebarHelp></SidebarHelp>
</Box>
</Box>
</Box>
);
}
// FUNCTIONS
export function SidebarResponsive(props) {
// to check for active links and opened collapses
let location = useLocation();
// this is for the rest of the collapses
const [state, setState] = React.useState({});
const mainPanel = React.useRef();
// verifies if routeName is the one active (in browser input)
const activeRoute = (routeName) => {
return location.pathname === routeName ? "active" : "";
};
// this function creates the links and collapses that appear in the sidebar (left menu)
const createLinks = (routes) => {
// Chakra Color Mode
const activeBg = "#1A1F37";
const inactiveBg = "#1A1F37";
const activeColor = "white";
const inactiveColor = "white";
return routes.map((prop, key) => {
if (prop.redirect) {
return null;
}
if (prop.category) {
var st = {};
st[prop["state"]] = !state[prop.state];
return (
<>
<Text
color={activeColor}
fontWeight='bold'
mb={{
xl: "12px",
}}
mx='auto'
ps={{
sm: "10px",
xl: "16px",
}}
py='12px'>
{document.documentElement.dir === "rtl"
? prop.rtlName
: prop.name}
</Text>
{createLinks(prop.views)}
</>
);
}
return (
<NavLink to={prop.layout + prop.path}>
{activeRoute(prop.layout + prop.path) === "active" ? (
<Button
boxSize='initial'
justifyContent='flex-start'
alignItems='center'
bg={activeBg}
mb={{
xl: "12px",
}}
mx={{
xl: "auto",
}}
ps={{
sm: "10px",
xl: "16px",
}}
py='12px'
borderRadius='15px'
_hover='none'
w='100%'
_active={{
bg: "inherit",
transform: "none",
borderColor: "transparent",
}}
_focus={{
boxShadow: "none",
}}>
<Flex>
{typeof prop.icon === "string" ? (
<Icon>{prop.icon}</Icon>
) : (
<IconBox
bg='brand.200'
color='white'
h='30px'
w='30px'
me='12px'>
{prop.icon}
</IconBox>
)}
<Text color={activeColor} my='auto' fontSize='sm'>
{document.documentElement.dir === "rtl"
? prop.rtlName
: prop.name}
</Text>
</Flex>
</Button>
) : (
<Button
boxSize='initial'
justifyContent='flex-start'
alignItems='center'
bg='transparent'
mb={{
xl: "12px",
}}
mx={{
xl: "auto",
}}
py='12px'
ps={{
sm: "10px",
xl: "16px",
}}
borderRadius='15px'
_hover='none'
w='100%'
_active={{
bg: "inherit",
transform: "none",
borderColor: "transparent",
}}
_focus={{
boxShadow: "none",
}}>
<Flex>
{typeof prop.icon === "string" ? (
<Icon>{prop.icon}</Icon>
) : (
<IconBox
bg={inactiveBg}
color='brand.200'
h='30px'
w='30px'
me='12px'>
{prop.icon}
</IconBox>
)}
<Text color={inactiveColor} my='auto' fontSize='sm'>
{document.documentElement.dir === "rtl"
? prop.rtlName
: prop.name}
</Text>
</Flex>
</Button>
)}
</NavLink>
);
});
};
const { logoText, routes, iconColor, ...rest } = props;
var links = <>{createLinks(routes)}</>;
// BRAND
// Chakra Color Mode
var brand = (
<Box pt={"35px"} mb='8px'>
<Link
href={`${process.env.PUBLIC_URL}/#/`}
target='_blank'
display='flex'
lineHeight='100%'
mb='30px'
fontWeight='bold'
justifyContent='center'
alignItems='center'
fontSize='11px'>
<SimmmpleLogoWhite w='22px' h='22px' me='10px' mt='2px' />
<Box
bg='linear-gradient(97.89deg, #FFFFFF 70.67%, rgba(117, 122, 140, 0) 108.55%)'
bgClip='text'>
<Text fontSize='sm' letterSpacing='3px' mt='3px' color='transparent'>
{logoText}
</Text>
</Box>
</Link>
<Separator></Separator>
</Box>
);
// SIDEBAR
const { isOpen, onOpen, onClose } = useDisclosure();
const btnRef = React.useRef();
// Color variables
return (
<Flex
display={{ sm: "flex", xl: "none" }}
ref={mainPanel}
alignItems='center'>
<HamburgerIcon
color={iconColor}
w='18px'
h='18px'
ref={btnRef}
colorScheme='teal'
onClick={onOpen}
/>
<Drawer
isOpen={isOpen}
onClose={onClose}
placement={document.documentElement.dir === "rtl" ? "right" : "left"}
finalFocusRef={btnRef}>
<DrawerOverlay />
<DrawerContent
backdropFilter='blur(10px)'
bg='linear-gradient(111.84deg, rgba(6, 11, 38, 0.94) 59.3%, rgba(26, 31, 55, 0) 100%); '
w='250px'
maxW='250px'
ms={{
sm: "16px",
}}
my={{
sm: "16px",
}}
borderRadius='16px'>
<DrawerCloseButton
color='white'
_focus={{ boxShadow: "none" }}
_hover={{ boxShadow: "none" }}
/>
<DrawerBody maxW='250px' px='1rem'>
<Box maxW='100%' h='100vh'>
<Box>{brand}</Box>
<Stack direction='column' mb='40px'>
<Box>{links}</Box>
</Stack>
<SidebarHelp></SidebarHelp>
</Box>
</DrawerBody>
</DrawerContent>
</Drawer>
</Flex>
);
}
// PROPS
Sidebar.propTypes = {
logoText: PropTypes.string,
routes: PropTypes.arrayOf(PropTypes.object),
variant: PropTypes.string,
};
SidebarResponsive.propTypes = {
logoText: PropTypes.string,
routes: PropTypes.arrayOf(PropTypes.object),
};
export default Sidebar;
================================================
FILE: src/components/Sidebar/SidebarHelp.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import { QuestionIcon } from "@chakra-ui/icons";
import { Button, Flex, Link, Text } from "@chakra-ui/react";
import SidebarHelpImage from "assets/img/SidebarHelpImage.png";
import IconBox from "components/Icons/IconBox";
import React from "react";
export function SidebarHelp(props) {
// Pass the computed styles into the `__css` prop
const { children, ...rest } = props;
return (
<Flex
borderRadius='15px'
flexDirection='column'
bgImage={SidebarHelpImage}
bgSize='cover'
bgPosition='center'
justifyContent='flex-start'
alignItems='start'
p='16px'
minH='170px'
minW='218px'>
<IconBox width='35px' h='35px' bg='white' mb='auto'>
<QuestionIcon color='brand.200' h='18px' w='18px' />
</IconBox>
<Text fontSize='sm' color='white' fontWeight='bold'>
Need help?
</Text>
<Text fontSize='xs' color='white' mb='10px'>
Please check our docs
</Text>
<Link
w='100%'
href='https://demos.creative-tim.com/docs-vision-ui-dashboard-chakra/'>
<Button
fontSize='10px'
fontWeight='bold'
w='100%'
bg='linear-gradient(126.97deg, rgba(6, 11, 40, 0.74) 28.26%, rgba(10, 14, 35, 0.71) 91.2%)'
_hover='none'
_active={{
bg: "white",
transform: "none",
borderColor: "transparent",
}}
_active='none'
_focus={{
boxShadow: "none",
}}
color='white'>
DOCUMENTATION
</Button>
</Link>
</Flex>
);
}
================================================
FILE: src/components/Tables/BillingRow.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import { Box, Button, Flex, Icon, Text } from "@chakra-ui/react";
import React from "react";
import { FaPencilAlt, FaTrashAlt } from "react-icons/fa";
function BillingRow(props) {
const { name, company, email, number } = props;
return (
<Box
p='24px'
bg='linear-gradient(127.09deg, rgba(24, 29, 60, 0.94) 19.41%, rgba(10, 14, 35, 0.49) 76.65%)'
my='22px'
borderRadius='20px'>
<Flex justify='space-between' w='100%' align='flex-start'>
<Flex direction='column' maxW='70%'>
<Text color='#fff' fontSize='sm' mb='10px'>
{name}
</Text>
<Text color='gray.400' fontSize='xs'>
Company Name: {window.innerWidth < 768 ? <br /> : null}
<Text as='span' color='gray.500'>
{company}
</Text>
</Text>
<Text color='gray.400' fontSize='xs'>
Email Address:{" "}
<Text as='span' color='gray.500'>
{email}
</Text>
</Text>
<Text color='gray.400' fontSize='xs'>
VAT Number:{" "}
<Text as='span' color='gray.500'>
{number}
</Text>
</Text>
</Flex>
<Flex direction={{ sm: "column", md: "row" }} align='flex-start'>
<Button
p='0px'
variant='no-hover'
mb={{ sm: "10px", md: "0px" }}
me={{ md: "12px" }}>
<Flex color='red.500' cursor='pointer' align='center' p='12px'>
<Icon as={FaTrashAlt} me='4px' w='16px' h='16px' />
<Text fontSize='xs'>DELETE</Text>
</Flex>
</Button>
<Button p='0px' variant='no-hover'>
<Flex color='#fff' cursor='pointer' align='center' p='12px'>
<Icon as={FaPencilAlt} me='4px' w='14px' h='14px' />
<Text fontSize='xs' color='gray.400'>
EDIT
</Text>
</Flex>
</Button>
</Flex>
</Flex>
</Box>
);
}
export default BillingRow;
================================================
FILE: src/components/Tables/DashboardTableRow.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import {
Avatar,
AvatarGroup,
Flex,
Icon,
Progress,
Td,
Text,
Tr,
useColorModeValue,
} from "@chakra-ui/react";
import React from "react";
function DashboardTableRow(props) {
const { logo, name, members, budget, progression, lastItem } = props;
const textColor = useColorModeValue("gray.700", "white");
return (
<Tr>
<Td
minWidth={{ sm: "250px" }}
ps='0px'
borderBottomColor='#56577A'
border={lastItem ? "none" : null}>
<Flex align='center' py='.8rem' minWidth='100%' flexWrap='nowrap'>
<Icon as={logo} h={"24px"} w={"24px"} me='18px' />
<Text fontSize='sm' color='#fff' fontWeight='normal' minWidth='100%'>
{name}
</Text>
</Flex>
</Td>
<Td borderBottomColor='#56577A' border={lastItem ? "none" : null}>
<AvatarGroup size='xs' showBorder={false}>
{members.map((member) => {
return (
<Avatar
name='Ryan Florence'
src={member}
showBorder={false}
border='none'
_hover={{ zIndex: "3", cursor: "pointer" }}
/>
);
})}
</AvatarGroup>
</Td>
<Td borderBottomColor='#56577A' border={lastItem ? "none" : null}>
<Text fontSize='sm' color='#fff' fontWeight='bold' pb='.5rem'>
{budget}
</Text>
</Td>
<Td borderBottomColor='#56577A' border={lastItem ? "none" : null}>
<Flex direction='column'>
<Text
fontSize='sm'
color='#fff'
fontWeight='bold'
pb='.2rem'>{`${progression}%`}</Text>
<Progress
colorScheme='brand'
h='3px'
bg='#2D2E5F'
value={progression}
borderRadius='30px'
/>
</Flex>
</Td>
</Tr>
);
}
export default DashboardTableRow;
================================================
FILE: src/components/Tables/InvoicesRow.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import { Box, Button, Flex, Icon, Spacer, Text } from "@chakra-ui/react";
function InvoicesRow(props) {
const { date, code, price, format, logo } = props;
return (
<Flex mb='24px' alignItems='center'>
<Flex direction='column'>
<Text fontSize='sm' color='#fff' mb='4px'>
{date}
</Text>
<Text fontSize='xs' color='gray.400'>
{code}
</Text>
</Flex>
<Spacer />
<Box me='14px'>
<Text fontSize='xs' color='gray.400'>
{price}
</Text>
</Box>
<Button p='0px' bg='transparent' variant='no-hover'>
<Flex alignItems='center' p='12px'>
<Icon as={logo} w='16px' h='16px' h='auto' me='5px' color='#fff' />
<Text fontSize='xs' color='gray.400'>
{format}
</Text>
</Flex>
</Button>
</Flex>
);
}
export default InvoicesRow;
================================================
FILE: src/components/Tables/TablesProjectRow.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* 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 {
Tr,
Td,
Flex,
Text,
Progress,
Icon,
Button,
useColorModeValue,
} from "@chakra-ui/react";
import { FaEllipsisV } from "react-icons/fa";
function DashboardTableRow(props) {
const { logo, name, status, budget, progression, lastItem } = props;
const textColor = useColorModeValue("gray.700", "white");
return (
<Tr>
<Td
minWidth={{ sm: "250px" }}
ps='0px'
borderBottomColor='#56577A'
border={lastItem ? "none" : null}>
<Flex alignItems='center' py='.8rem' minWidth='100%' flexWrap='nowrap'>
<Icon as={logo} h={"20px"} w={"20px"} me='18px' />
<Text fontSize='sm' color='#fff' minWidth='100%'>
{name}
</Text>
</Flex>
</Td>
<Td borderBottomColor='#56577A' border={lastItem ? "none" : null}>
<Text fontSize='sm' color='#fff' fontWeight='bold' pb='.5rem'>
{budget}
</Text>
</Td>
<Td borderBottomColor='#56577A' border={lastItem ? "none" : null}>
<Text fontSize='sm' color='#fff' fontWeight='bold' pb='.5rem'>
{status}
</Text>
</Td>
<Td borderBottomColor='#56577A' border={lastItem ? "none" : null}>
<Flex direction='column'>
<Text
fontSize='sm'
color='#fff'
fontWeight='bold'
pb='.2rem'>{`${progression}%`}</Text>
<Progress
colorScheme='brand'
maxW='125px'
h='3px'
bg='#2D2E5F'
value={progression}
borderRadius='15px'
/>
</Flex>
</Td>
<Td borderBottomColor='#56577A' border={lastItem ? "none" : null}>
<Button p='0px' bg='transparent' _hover='none' _active='none'>
<Icon as={FaEllipsisV} color='gray.400' cursor='pointer' />
</Button>
</Td>
</Tr>
);
}
export default DashboardTableRow;
================================================
FILE: src/components/Tables/TablesTableRow.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import {
Avatar,
Badge,
Button,
Flex,
Td,
Text,
Tr,
useColorModeValue,
} from "@chakra-ui/react";
import React from "react";
function TablesTableRow(props) {
const {
logo,
name,
email,
subdomain,
domain,
status,
date,
lastItem,
} = props;
const textColor = useColorModeValue("gray.700", "white");
const bgStatus = useColorModeValue("gray.400", "#1a202c");
const colorStatus = useColorModeValue("white", "gray.400");
return (
<Tr>
<Td
minWidth={{ sm: "250px" }}
ps='0px'
border={lastItem ? "none" : null}
borderBottomColor='#56577A'>
<Flex align='center' py='.8rem' minWidth='100%' flexWrap='nowrap'>
<Avatar
src={logo}
w='50px'
borderRadius='12px'
me='18px'
border='none'
/>
<Flex direction='column'>
<Text
fontSize='sm'
color='#fff'
fontWeight='normal'
minWidth='100%'>
{name}
</Text>
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
{email}
</Text>
</Flex>
</Flex>
</Td>
<Td
border={lastItem ? "none" : null}
borderBottomColor='#56577A'
minW='150px'>
<Flex direction='column'>
<Text fontSize='sm' color='#fff' fontWeight='normal'>
{domain}
</Text>
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
{subdomain}
</Text>
</Flex>
</Td>
<Td border={lastItem ? "none" : null} borderBottomColor='#56577A'>
<Badge
bg={status === "Online" ? "green.400" : "transparent"}
color={status === "Online" ? "white" : colorStatus}
fontSize='sm'
p='3px 10px'
borderRadius='8px'
border={status === "Online" ? "none" : "1px solid #fff"}
fontWeight='normal'>
{status}
</Badge>
</Td>
<Td border={lastItem ? "none" : null} borderBottomColor='#56577A'>
<Text fontSize='sm' color='#fff' fontWeight='normal'>
{date}
</Text>
</Td>
<Td border={lastItem ? "none" : null} borderBottomColor='#56577A'>
<Button p='0px' bg='transparent' variant='no-hover'>
<Text
fontSize='sm'
color='gray.400'
fontWeight='bold'
cursor='pointer'>
Edit
</Text>
</Button>
</Td>
</Tr>
);
}
export default TablesTableRow;
================================================
FILE: src/components/Tables/TimelineRow.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import { Box, Flex, Icon, Text, useColorModeValue } from "@chakra-ui/react";
import React from "react";
function TimelineRow(props) {
const { logo, title, date, color, index, arrLength } = props;
const textColor = useColorModeValue("gray.700", "white.300");
const bgIconColor = useColorModeValue("white.300", "gray.700");
return (
<Flex alignItems='center' minH='78px' justifyContent='start' mb='5px'>
<Flex direction='column' h='100%' align='center'>
<Icon
as={logo}
bg={bgIconColor}
color={color}
h={"20px"}
w={"20px"}
me='16px'
right={document.documentElement.dir === "rtl" ? "-8px" : ""}
left={document.documentElement.dir === "rtl" ? "" : "-8px"}
/>
</Flex>
<Flex direction='column' justifyContent='flex-start' h='100%'>
<Text fontSize='sm' color='#fff' fontWeight='normal' mb='3px'>
{title}
</Text>
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
{date}
</Text>
</Flex>
</Flex>
);
}
export default TimelineRow;
================================================
FILE: src/components/Tables/TransactionRow.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import { Box, Flex, Icon, Text } from "@chakra-ui/react";
import React from "react";
function TransactionRow(props) {
const { name, date, logo, price } = props;
return (
<Flex mb='24px' justifyContent='space-between'>
<Flex alignItems='center'>
<Box
me='14px'
borderRadius='50%'
color={
price[0] === "+"
? "#01B574"
: price[0] === "-"
? "red.500"
: "gray.400"
}
border='1px solid'
display='flex'
alignItems='center'
justifyContent='center'
w='35px'
h='35px'>
<Icon as={logo} w='12px' h='12px' />
</Box>
<Flex direction='column'>
<Text fontSize='sm' color='#fff' mb='4px'>
{name}
</Text>
<Text fontSize={{ sm: "xs", md: "sm" }} color='gray.400'>
{date}
</Text>
</Flex>
</Flex>
<Box
color={
price[0] === "+"
? "#01B574"
: price[0] === "-"
? "red.500"
: "gray.400"
}>
<Text fontSize='sm'>{price}</Text>
</Box>
</Flex>
);
}
export default TransactionRow;
================================================
FILE: src/index.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* 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 ReactDOM from "react-dom";
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
import AuthLayout from "layouts/Auth.js";
import AdminLayout from "layouts/Admin.js";
import RTLLayout from "layouts/RTL.js";
ReactDOM.render(
<HashRouter>
<Switch>
<Route path={`/auth`} component={AuthLayout} />
<Route path={`/admin`} component={AdminLayout} />
<Route path={`/rtl`} component={RTLLayout} />
<Redirect from={`/`} to='/admin/dashboard' />
</Switch>
</HashRouter>,
document.getElementById("root")
);
================================================
FILE: src/layouts/Admin.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Chakra imports
import { ChakraProvider, Portal, useDisclosure } from "@chakra-ui/react";
import Configurator from "components/Configurator/Configurator";
import Footer from "components/Footer/Footer.js";
// Layout components
import AdminNavbar from "components/Navbars/AdminNavbar.js";
import Sidebar from "components/Sidebar/Sidebar.js";
import React, { useState } from "react";
import { Redirect, Route, Switch } from "react-router-dom";
import routes from "routes.js";
// Custom Chakra theme
import theme from "theme/themeAdmin.js";
import FixedPlugin from "../components/FixedPlugin/FixedPlugin";
// Custom components
import MainPanel from "../components/Layout/MainPanel";
import PanelContainer from "../components/Layout/PanelContainer";
import PanelContent from "../components/Layout/PanelContent";
export default function Dashboard(props) {
const { ...rest } = props;
// states and functions
const [sidebarVariant, setSidebarVariant] = useState("transparent");
const [fixed, setFixed] = useState(false);
// ref for main panel div
const mainPanel = React.createRef();
// functions for changing the states from components
const getRoute = () => {
return window.location.pathname !== "/admin/full-screen-maps";
};
const getActiveRoute = (routes) => {
let activeRoute = "Default Brand Text";
for (let i = 0; i < routes.length; i++) {
if (routes[i].collapse) {
let collapseActiveRoute = getActiveRoute(routes[i].views);
if (collapseActiveRoute !== activeRoute) {
return collapseActiveRoute;
}
} else if (routes[i].category) {
let categoryActiveRoute = getActiveRoute(routes[i].views);
if (categoryActiveRoute !== activeRoute) {
return categoryActiveRoute;
}
} else {
if (
window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1
) {
return routes[i].name;
}
}
}
return activeRoute;
};
// This changes navbar state(fixed or not)
const getActiveNavbar = (routes) => {
let activeNavbar = false;
for (let i = 0; i < routes.length; i++) {
if (routes[i].category) {
let categoryActiveNavbar = getActiveNavbar(routes[i].views);
if (categoryActiveNavbar !== activeNavbar) {
return categoryActiveNavbar;
}
} else {
if (
window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1
) {
if (routes[i].secondaryNavbar) {
return routes[i].secondaryNavbar;
}
}
}
}
return activeNavbar;
};
const getRoutes = (routes) => {
return routes.map((prop, key) => {
if (prop.collapse) {
return getRoutes(prop.views);
}
if (prop.category === "account") {
return getRoutes(prop.views);
}
if (prop.layout === "/admin") {
return (
<Route
path={prop.layout + prop.path}
component={prop.component}
key={key}
/>
);
} else {
return null;
}
});
};
const { isOpen, onOpen, onClose } = useDisclosure();
document.documentElement.dir = "ltr";
// Chakra Color Mode
return (
<ChakraProvider theme={theme} resetCss={false}>
<Sidebar
routes={routes}
logoText={"VISION UI FREE"}
display='none'
sidebarVariant={sidebarVariant}
{...rest}
/>
<MainPanel
ref={mainPanel}
w={{
base: "100%",
xl: "calc(100% - 275px)",
}}>
<Portal>
<AdminNavbar
onOpen={onOpen}
logoText={"VISION UI FREE"}
brandText={getActiveRoute(routes)}
secondary={getActiveNavbar(routes)}
fixed={fixed}
{...rest}
/>
</Portal>
{getRoute() ? (
<PanelContent>
<PanelContainer>
<Switch>
{getRoutes(routes)}
<Redirect from='/admin' to='/admin/dashboard' />
</Switch>
</PanelContainer>
</PanelContent>
) : null}
<Footer />
<Portal>
<FixedPlugin
secondary={getActiveNavbar(routes)}
fixed={fixed}
onOpen={onOpen}
/>
</Portal>
<Configurator
secondary={getActiveNavbar(routes)}
isOpen={isOpen}
onClose={onClose}
isChecked={fixed}
onSwitch={(value) => {
setFixed(value);
}}
onOpaque={() => setSidebarVariant("opaque")}
onTransparent={() => setSidebarVariant("transparent")}
/>
</MainPanel>
</ChakraProvider>
);
}
================================================
FILE: src/layouts/Auth.js
================================================
// chakra imports
import { Box, ChakraProvider, Portal } from "@chakra-ui/react";
import Footer from "components/Footer/Footer.js";
// core components
import AuthNavbar from "components/Navbars/AuthNavbar.js";
import React from "react";
import { Redirect, Route, Switch } from "react-router-dom";
import routes from "routes.js";
import theme from "theme/themeAuth.js";
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
export default function Pages(props) {
const { ...rest } = props;
// ref for the wrapper div
const wrapper = React.createRef();
React.useEffect(() => {
document.body.style.overflow = "unset";
// Specify how to clean up after this effect:
return function cleanup() {};
});
const getActiveRoute = (routes) => {
let activeRoute = "Default Brand Text";
for (let i = 0; i < routes.length; i++) {
if (routes[i].collapse) {
let collapseActiveRoute = getActiveRoute(routes[i].views);
if (collapseActiveRoute !== activeRoute) {
return collapseActiveRoute;
}
} else if (routes[i].category) {
let categoryActiveRoute = getActiveRoute(routes[i].views);
if (categoryActiveRoute !== activeRoute) {
return categoryActiveRoute;
}
} else {
if (
window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1
) {
return routes[i].name;
}
}
}
return activeRoute;
};
const getActiveNavbar = (routes) => {
let activeNavbar = false;
for (let i = 0; i < routes.length; i++) {
if (routes[i].category) {
let categoryActiveNavbar = getActiveNavbar(routes[i].views);
if (categoryActiveNavbar !== activeNavbar) {
return categoryActiveNavbar;
}
} else {
if (
window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1
) {
if (routes[i].secondaryNavbar) {
return routes[i].secondaryNavbar;
}
}
}
}
return activeNavbar;
};
const getRoutes = (routes) => {
return routes.map((prop, key) => {
if (prop.collapse) {
return getRoutes(prop.views);
}
if (prop.category === "account") {
return getRoutes(prop.views);
}
if (prop.layout === "/auth") {
return (
<Route
path={prop.layout + prop.path}
component={prop.component}
key={key}
/>
);
} else {
return null;
}
});
};
const navRef = React.useRef();
document.documentElement.dir = "ltr";
return (
<ChakraProvider theme={theme} resetCss={false} w='100%'>
<Box ref={navRef} w='100%'>
<Portal containerRef={navRef}>
<AuthNavbar
secondary={getActiveNavbar(routes)}
logoText='VISION UI FREE'
/>
</Portal>
<Box w='100%'>
<Box ref={wrapper} w='100%'>
<Switch>
{getRoutes(routes)}
<Redirect from='/auth' to='/auth/login-page' />
</Switch>
</Box>
</Box>
</Box>
</ChakraProvider>
);
}
================================================
FILE: src/layouts/RTL.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Chakra imports
import { ChakraProvider, Portal, useDisclosure } from "@chakra-ui/react";
import { RtlProvider } from "components/RTLProvider/RTLProvider";
import Configurator from "components/Configurator/Configurator";
import Footer from "components/Footer/Footer.js";
// Layout components
import AdminNavbar from "components/Navbars/AdminNavbar.js";
import Sidebar from "components/Sidebar/Sidebar.js";
import React, { useState } from "react";
import { Redirect, Route, Switch } from "react-router-dom";
import routes from "routes.js";
// Custom Chakra theme
import theme from "theme/themeAdmin";
import FixedPlugin from "../components/FixedPlugin/FixedPlugin";
// Custom components
import MainPanel from "../components/Layout/MainPanel";
import PanelContainer from "../components/Layout/PanelContainer";
import PanelContent from "../components/Layout/PanelContent";
export default function Dashboard(props) {
const { ...rest } = props;
// states and functions
const [sidebarVariant, setSidebarVariant] = useState("transparent");
const [fixed, setFixed] = useState(false);
// ref for main panel div
const mainPanel = React.createRef();
const getRoute = () => {
return window.location.pathname !== "/admin/full-screen-maps";
};
const getActiveRoute = (routes) => {
let activeRoute = "Default Brand Text";
for (let i = 0; i < routes.length; i++) {
if (routes[i].collapse) {
let collapseActiveRoute = getActiveRoute(routes[i].views);
if (collapseActiveRoute !== activeRoute) {
return collapseActiveRoute;
}
} else if (routes[i].category) {
let categoryActiveRoute = getActiveRoute(routes[i].views);
if (categoryActiveRoute !== activeRoute) {
return categoryActiveRoute;
}
} else {
if (
window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1
) {
return routes[i].name;
}
}
}
return activeRoute;
};
// This changes navbar state(fixed or not)
const getActiveNavbar = (routes) => {
let activeNavbar = false;
for (let i = 0; i < routes.length; i++) {
if (routes[i].category) {
let categoryActiveNavbar = getActiveNavbar(routes[i].views);
if (categoryActiveNavbar !== activeNavbar) {
return categoryActiveNavbar;
}
} else {
if (
window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1
) {
if (routes[i].secondaryNavbar) {
return routes[i].secondaryNavbar;
}
}
}
}
return activeNavbar;
};
const getRoutes = (routes) => {
return routes.map((prop, key) => {
if (prop.collapse) {
return getRoutes(prop.views);
}
if (prop.category === "account") {
return getRoutes(prop.views);
}
if (prop.layout === "/rtl" || prop.layout === "/admin") {
return (
<Route
path={prop.layout + prop.path}
component={prop.component}
key={key}
/>
);
} else {
return null;
}
});
};
const { isOpen, onOpen, onClose } = useDisclosure();
document.documentElement.dir = "rtl";
// Chakra Color Mode
return (
<ChakraProvider theme={theme} resetCss={false}>
<RtlProvider>
<Sidebar
routes={routes}
logoText={"VISION UI FREE"}
display='none'
sidebarVariant={sidebarVariant}
{...rest}
/>
<MainPanel
variant='rtl'
ref={mainPanel}
w={{
base: "100%",
xl: "calc(100% - 275px)",
}}>
<Portal>
<AdminNavbar
onOpen={onOpen}
logoText={"VISION UI FREE"}
brandText={getActiveRoute(routes)}
secondary={getActiveNavbar(routes)}
fixed={fixed}
{...rest}
/>
</Portal>
{getRoute() ? (
<PanelContent>
<PanelContainer>
<Switch>
{getRoutes(routes)}
<Redirect from='/rtl' to='/rtl/rtl-support-page' />
</Switch>
</PanelContainer>
</PanelContent>
) : null}
<Footer />
<Portal>
<FixedPlugin
secondary={getActiveNavbar(routes)}
fixed={fixed}
onOpen={onOpen}
/>
</Portal>
<Configurator
secondary={getActiveNavbar(routes)}
isOpen={isOpen}
onClose={onClose}
isChecked={fixed}
onSwitch={(value) => {
setFixed(value);
}}
onOpaque={() => setSidebarVariant("opaque")}
onTransparent={() => setSidebarVariant("transparent")}
/>
</MainPanel>
</RtlProvider>
</ChakraProvider>
);
}
================================================
FILE: src/routes.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// import
import Dashboard from "views/Dashboard/Dashboard.js";
import Tables from "views/Dashboard/Tables.js";
import Billing from "views/Dashboard/Billing.js";
import RTLPage from "views/RTL/RTLPage.js";
import Profile from "views/Dashboard/Profile.js";
import SignIn from "views/Pages/SignIn.js";
import SignUp from "views/Pages/SignUp.js";
import {
HomeIcon,
StatsIcon,
CreditIcon,
PersonIcon,
DocumentIcon,
RocketIcon,
SupportIcon,
} from "components/Icons/Icons";
var dashRoutes = [
{
path: "/dashboard",
name: "Dashboard",
rtlName: "لوحة القيادة",
icon: <HomeIcon color='inherit' />,
component: Dashboard,
layout: "/admin",
},
{
path: "/tables",
name: "Tables",
rtlName: "لوحة القيادة",
icon: <StatsIcon color='inherit' />,
component: Tables,
layout: "/admin",
},
{
path: "/billing",
name: "Billing",
rtlName: "لوحة القيادة",
icon: <CreditIcon color='inherit' />,
component: Billing,
layout: "/admin",
},
{
path: "/rtl-support-page",
name: "RTL",
rtlName: "آرتيإل",
icon: <SupportIcon color='inherit' />,
component: RTLPage,
layout: "/rtl",
},
{
name: "ACCOUNT PAGES",
category: "account",
rtlName: "صفحات",
state: "pageCollapse",
views: [
{
path: "/profile",
name: "Profile",
rtlName: "لوحة القيادة",
icon: <PersonIcon color='inherit' />,
secondaryNavbar: true,
component: Profile,
layout: "/admin",
},
{
path: "/signin",
name: "Sign In",
rtlName: "لوحة القيادة",
icon: <DocumentIcon color='inherit' />,
component: SignIn,
layout: "/auth",
},
{
path: "/signup",
name: "Sign Up",
rtlName: "لوحة القيادة",
icon: <RocketIcon color='inherit' />,
secondaryNavbar: true,
component: SignUp,
layout: "/auth",
},
],
},
];
export default dashRoutes;
================================================
FILE: src/theme/additions/card/Card.js
================================================
const Card = {
baseStyle: {
p: "22px",
display: "flex",
flexDirection: "column",
backdropFilter: "blur(120px)",
width: "100%",
borderRadius: "20px",
bg:
"linear-gradient(127.09deg, rgba(6, 11, 40, 0.94) 19.41%, rgba(10, 14, 35, 0.49) 76.65%)",
backgroundClip: "border-box",
},
};
export const CardComponent = {
components: {
Card,
},
};
================================================
FILE: src/theme/additions/card/CardBody.js
================================================
const CardBody = {
baseStyle: {
display: "flex",
width: "100%",
},
};
export const CardBodyComponent = {
components: {
CardBody,
},
};
================================================
FILE: src/theme/additions/card/CardHeader.js
================================================
const CardHeader = {
baseStyle: {
display: "flex",
width: "100%"
},
};
export const CardHeaderComponent = {
components: {
CardHeader,
},
};
================================================
FILE: src/theme/additions/layout/MainPanel.js
================================================
const MainPanel = {
baseStyle: {
float: "right",
maxWidth: "100%",
overflow: "auto",
position: "relative",
maxHeight: "100%",
transition: "all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)",
transitionDuration: ".2s, .2s, .35s",
transitionProperty: "top, bottom, width",
transitionTimingFunction: "linear, linear, ease",
},
variants: {
main: (props) => ({
float: "right",
}),
rtl: (props) => ({
float: "left",
}),
},
defaultProps: {
variant: "main",
},
};
export const MainPanelComponent = {
components: {
MainPanel,
},
};
================================================
FILE: src/theme/additions/layout/PanelContainer.js
================================================
const PanelContainer = {
baseStyle: {
p: "30px 15px",
minHeight: "calc(100vh - 123px)",
},
};
export const PanelContainerComponent = {
components: {
PanelContainer,
},
};
================================================
FILE: src/theme/additions/layout/PanelContent.js
================================================
const PanelContent = {
baseStyle: {
ms: "auto",
me: "auto",
ps: "15px",
pe: "15px",
},
};
export const PanelContentComponent = {
components: {
PanelContent,
},
};
================================================
FILE: src/theme/bgAdmin.js
================================================
import bgBody from "assets/img/background-body-admin.png";
export const bgAdmin = {
styles: {
global: (props) => ({
body: {
bgImage: bgBody,
bgSize: "cover",
bgPosition: "center center",
},
}),
},
};
================================================
FILE: src/theme/bgAuth.js
================================================
export const bgAuth = {
styles: {
global: (props) => ({
body: {
bg:
"linear-gradient(159.02deg, #0F123B 14.25%, #090D2E 56.45%, #020515 86.14%)",
bgSize: "cover",
bgPosition: "center center",
},
}),
},
};
================================================
FILE: src/theme/components/badge.js
================================================
import { baseStyle } from "@chakra-ui/react";
export const badgeStyles = {
components: {
Badge: {
sizes: {
md: {
width: "65px",
height: "25px"
}
},
baseStyle: {
textTransform: "capitalize"
}
}
}
}
================================================
FILE: src/theme/components/button.js
================================================
export const buttonStyles = {
components: {
Button: {
variants: {
"no-hover": {
_hover: {
boxShadow: "none",
},
},
"transparent-with-icon": {
bg: "transparent",
fontWeight: "bold",
borderRadius: "inherit",
cursor: "pointer",
_hover: "none",
_active: {
bg: "transparent",
transform: "none",
borderColor: "transparent",
},
_focus: {
boxShadow: "none",
},
_hover: {
boxShadow: "none",
},
},
brand: {
bg: "brand.200",
color: "#fff",
_hover: {
bg: "brand.300",
},
_active: {
bg: "brand.400",
},
_focus: "none",
},
outlineWhite: {
bg: "transparent",
color: "#fff",
borderColor: "white",
borderWidth: "1px",
_hover: {
bg: "whiteAlpha.100",
},
_active: {
bg: "whiteAlpha.200",
},
_focus: "none",
},
},
baseStyle: {
borderRadius: "12px",
_focus: {
boxShadow: "none",
},
_active: "none",
_focus: "none",
},
},
},
};
================================================
FILE: src/theme/components/drawer.js
================================================
export const drawerStyles = {
components: {
Drawer: {
// 3. We can add a new visual variant
variants: {
"with-shadow": {
placement: "right",
boxShadow: "0 0 2px 2px #efdfde",
bgColor: "red",
},
},
},
},
};
================================================
FILE: src/theme/components/link.js
================================================
export const linkStyles = {
components: {
Link: {
// 3. We can add a new visual variant
decoration: "none",
baseStyle: {
_hover: {
textDecoration: "none",
},
_focus: {
boxShadow: "none",
},
},
},
},
};
================================================
FILE: src/theme/components/switch.js
================================================
export const switchStyles = {
components: {
Switch: {
variants: {
brand: {
bg: "red.500",
_hover: {
bg: "brand.600",
},
_active: {
bg: "brand.700",
},
_focus: "none",
},
},
},
},
};
================================================
FILE: src/theme/foundations/breakpoints.js
================================================
// 1. Import the utilities
import { createBreakpoints } from "@chakra-ui/theme-tools";
// 2. Update the breakpoints as key-value pairs
export const breakpoints = createBreakpoints({
sm: "320px",
md: "768px",
lg: "1024px",
xl: "1440px",
"2xl": "1920px"
});
================================================
FILE: src/theme/styles.js
================================================
export const globalStyles = {
colors: {
gray: {
700: "#1f2733",
},
brand: {
50: "#cbbff8",
100: "#876cea",
200: "#582CFF",
300: "#542de1",
400: "#4a25d0",
500: "#3915bc",
600: "#300eaa",
700: "#1c0377",
800: "#130156",
900: "#0e0042"
},
},
styles: {
global: (props) => ({
body: {
fontFamily: "Plus Jakarta Display",
},
"*::placeholder": {
color: "gray.400",
},
html: {
fontFamily: "Plus Jakarta Display",
},
}),
},
};
================================================
FILE: src/theme/themeAdmin.js
================================================
import { extendTheme } from "@chakra-ui/react";
import { globalStyles } from "./styles";
import { bgAdmin } from "./bgAdmin";
import { breakpoints } from "./foundations/breakpoints";
import { buttonStyles } from "./components/button";
import { badgeStyles } from "./components/badge";
import { linkStyles } from "./components/link";
import { drawerStyles } from "./components/drawer";
import { switchStyles } from "./components/switch";
import { CardComponent } from "./additions/card/Card";
import { CardBodyComponent } from "./additions/card/CardBody";
import { CardHeaderComponent } from "./additions/card/CardHeader";
import { MainPanelComponent } from "./additions/layout/MainPanel";
import { PanelContentComponent } from "./additions/layout/PanelContent";
import { PanelContainerComponent } from "./additions/layout/PanelContainer";
// import { mode } from "@chakra-ui/theme-tools";
export default extendTheme(
{ breakpoints }, // Breakpoints
bgAdmin, // Global styles
globalStyles, // Global styles
buttonStyles, // Button styles
badgeStyles, // Badge styles
linkStyles, // Link styles
drawerStyles, // Sidebar variant for Chakra's drawer
switchStyles, // Switch styles
CardComponent, // Card component
CardBodyComponent, // Card Body component
CardHeaderComponent, // Card Header component
MainPanelComponent, // Main Panel component
PanelContentComponent, // Panel Content component
PanelContainerComponent // Panel Container component
);
================================================
FILE: src/theme/themeAuth.js
================================================
import { extendTheme } from "@chakra-ui/react";
import { globalStyles } from "./styles";
import { bgAuth } from "./bgAuth";
import { breakpoints } from "./foundations/breakpoints";
import { buttonStyles } from "./components/button";
import { badgeStyles } from "./components/badge";
import { linkStyles } from "./components/link";
import { drawerStyles } from "./components/drawer";
import { switchStyles } from "./components/switch";
import { CardComponent } from "./additions/card/Card";
import { CardBodyComponent } from "./additions/card/CardBody";
import { CardHeaderComponent } from "./additions/card/CardHeader";
import { MainPanelComponent } from "./additions/layout/MainPanel";
import { PanelContentComponent } from "./additions/layout/PanelContent";
import { PanelContainerComponent } from "./additions/layout/PanelContainer";
export default extendTheme(
{ breakpoints }, // Breakpoints
bgAuth, // Global styles
globalStyles, // Global styles
buttonStyles, // Button styles
badgeStyles, // Badge styles
linkStyles, // Link styles
drawerStyles, // Sidebar variant for Chakra's drawer
switchStyles, // Switch styles
CardComponent, // Card component
CardBodyComponent, // Card Body component
CardHeaderComponent, // Card Header component
MainPanelComponent, // Main Panel component
PanelContentComponent, // Panel Content component
PanelContainerComponent // Panel Container component
);
================================================
FILE: src/variables/charts.js
================================================
export const barChartDataDashboard = [
{
name: "Sales",
data: [330, 250, 110, 300, 490, 350, 270, 130, 425],
},
];
export const barChartOptionsDashboard = {
chart: {
toolbar: {
show: false,
},
},
tooltip: {
style: {
fontSize: "12px",
fontFamily: "Plus Jakarta Display",
},
onDatasetHover: {
style: {
fontSize: "12px",
fontFamily: "Plus Jakarta Display",
},
},
theme: "dark",
},
xaxis: {
categories: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
show: false,
labels: {
show: false,
style: {
colors: "#fff",
fontSize: "12px",
},
},
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
},
yaxis: {
show: true,
color: "#fff",
labels: {
show: true,
style: {
colors: "#fff",
fontSize: "12px",
fontFamily: "Plus Jakarta Display",
},
},
},
grid: {
show: false,
},
fill: {
colors: "#fff",
},
dataLabels: {
enabled: false,
},
plotOptions: {
bar: {
borderRadius: 8,
columnWidth: "12px",
},
},
responsive: [
{
breakpoint: 768,
options: {
plotOptions: {
bar: {
borderRadius: 0,
},
},
},
},
],
};
export const lineChartDataDashboard = [
{
name: "Mobile apps",
data: [500, 250, 300, 220, 500, 250, 300, 230, 300, 350, 250, 400],
},
{
name: "Websites",
data: [200, 230, 300, 350, 370, 420, 550, 350, 400, 500, 330, 550],
},
];
export const lineChartOptionsDashboard = {
chart: {
toolbar: {
show: false,
},
},
tooltip: {
theme: "dark",
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
},
xaxis: {
type: "datetime",
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
labels: {
style: {
colors: "#c8cfca",
fontSize: "12px",
},
},
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
},
yaxis: {
labels: {
style: {
colors: "#c8cfca",
fontSize: "12px",
},
},
},
legend: {
show: false,
},
grid: {
strokeDashArray: 5,
borderColor: "#56577A"
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
type: "vertical",
shadeIntensity: 0,
gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
inverseColors: true,
opacityFrom: 0.8,
opacityTo: 0,
stops: [],
},
colors: ["#2CD9FF", "#582CFF"],
},
colors: ["#2CD9FF", "#582CFF"],
};
export const lineChartDataProfile1 = [
{
name: "Mobile apps",
data: [100, 250, 300, 220, 500, 250, 300, 230, 300, 350, 250, 400],
},
];
export const lineChartOptionsProfile1 = {
chart: {
height: "50px",
toolbar: {
show: false,
},
redrawOnParentResize: true,
},
tooltip: {
theme: "dark",
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
},
xaxis: {
type: "datetime",
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
labels: {
show: false,
style: {
colors: "#c8cfca",
fontSize: "12px",
},
},
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
},
yaxis: {
show: false,
labels: {
style: {
colors: "#c8cfca",
fontSize: "12px",
},
},
},
legend: {
show: false,
},
grid: {
show: false,
strokeDashArray: 5,
borderColor: "#56577A"
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
type: "vertical",
shadeIntensity: 0,
gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
inverseColors: true,
opacityFrom: 0.8,
opacityTo: 0,
stops: [],
},
colors: ["#01B574"],
},
colors: ["#01B574"],
};
export const lineChartDataProfile2 = [
{
name: "Mobile apps",
data: [100, 250, 300, 220, 500, 250, 300, 230, 300, 350, 250, 400],
},
];
export const lineChartOptionsProfile2 = {
chart: {
height: "50px",
toolbar: {
show: false,
},
redrawOnParentResize: true
},
tooltip: {
theme: "dark",
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
},
xaxis: {
type: "datetime",
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
labels: {
show: false,
style: {
colors: "#c8cfca",
fontSize: "12px",
},
},
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
},
yaxis: {
show: false,
labels: {
style: {
colors: "#c8cfca",
fontSize: "12px",
},
},
},
legend: {
show: false,
},
grid: {
show: false,
strokeDashArray: 5,
borderColor: "#56577A"
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
type: "vertical",
shadeIntensity: 0,
gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
inverseColors: true,
opacityFrom: 0.8,
opacityTo: 0,
stops: [],
},
colors: ["#582CFF"],
},
colors: ["#582CFF"],
};
================================================
FILE: src/variables/general.js
================================================
// Assets
import avatar1 from "assets/img/avatars/avatar1.png";
import avatar2 from "assets/img/avatars/avatar2.png";
import avatar3 from "assets/img/avatars/avatar3.png";
import avatar4 from "assets/img/avatars/avatar4.png";
import avatar5 from "assets/img/avatars/avatar5.png";
import avatar7 from "assets/img/avatars/avatar7.png";
import avatar8 from "assets/img/avatars/avatar8.png";
import avatar9 from "assets/img/avatars/avatar9.png";
import avatar10 from "assets/img/avatars/avatar10.png";
// Custom icons
import {
AdobexdLogo,
AtlassianLogo,
InvisionLogo,
JiraLogo,
SlackLogo,
SpotifyLogo,
} from "components/Icons/Icons.js";
import { AiOutlineExclamation } from "react-icons/ai";
import {
FaArrowDown,
FaArrowUp,
FaBell,
FaCreditCard,
FaFilePdf,
FaHtml5,
FaShoppingCart,
} from "react-icons/fa";
import { SiDropbox } from "react-icons/si";
export const dashboardTableData = [
{
logo: AdobexdLogo,
name: "Chakra Soft UI Version",
members: [avatar1, avatar2, avatar3, avatar4, avatar5],
budget: "$14,000",
progression: 60,
},
{
logo: AtlassianLogo,
name: "Add Progress Track",
members: [avatar3, avatar2],
budget: "$3,000",
progression: 10,
},
{
logo: SlackLogo,
name: "Fix Platform Errors",
members: [avatar10, avatar4],
budget: "Not set",
progression: 100,
},
{
logo: SpotifyLogo,
name: "Launch our Mobile App",
members: [avatar2, avatar3, avatar7, avatar8],
budget: "$32,000",
progression: 100,
},
{
logo: JiraLogo,
name: "Add the New Pricing Page",
members: [avatar10, avatar3, avatar7, avatar2, avatar8],
budget: "$400",
progression: 25,
},
{
logo: InvisionLogo,
name: "Redesign New Online Shop",
members: [avatar9, avatar3, avatar2],
budget: "$7,600",
progression: 40,
},
];
export const timelineData = [
{
logo: FaBell,
title: "$2400, Design changes",
date: "22 DEC 7:20 PM",
color: "brand.200",
},
{
logo: FaHtml5,
title: "New order #4219423",
date: "21 DEC 11:21 PM",
color: "orange",
},
{
logo: FaShoppingCart,
title: "Server Payments for April",
date: "21 DEC 9:28 PM",
color: "blue.400",
},
{
logo: FaCreditCard,
title: "New card added for order #3210145",
date: "20 DEC 3:52 PM",
color: "orange.300",
},
{
logo: SiDropbox,
title: "Unlock packages for Development",
date: "19 DEC 11:35 PM",
color: "purple",
},
{
logo: AdobexdLogo,
title: "New order #9851258",
date: "18 DEC 4:41 PM",
},
];
export const rtlDashboardTableData = [
{
logo: AdobexdLogo,
name: "نسخة Vision UI",
members: [avatar1, avatar2, avatar3, avatar4, avatar5],
budget: "$14,000",
progression: 60,
},
{
logo: AtlassianLogo,
name: "إضافة مسار التقدم",
members: [avatar3, avatar2],
budget: "$3,000",
progression: 10,
},
{
logo: SlackLogo,
name: "إصلاح أخطاء النظام الأساسي",
members: [avatar10, avatar4],
budget: "غير مضبوط",
progression: 100,
},
{
logo: SpotifyLogo,
name: "إطلاق تطبيق الهاتف المحمول الخاص بنا",
members: [avatar2, avatar3, avatar7, avatar8],
budget: "$32,000",
progression: 100,
},
{
logo: JiraLogo,
name: "أضف صفحة التسعير الجديدة",
members: [avatar10, avatar3, avatar7, avatar2, avatar8],
budget: "$400",
progression: 25,
},
{
logo: InvisionLogo,
name: "إعادة تصميم متجر جديد على الإنترنت",
members: [avatar9, avatar3, avatar2],
budget: "$7,600",
progression: 40,
},
];
export const rtlTimelineData = [
{
logo: FaBell,
title: "$2400, تغييرات في التصميم",
date: "22 DEC 7:20 PM",
color: "teal.300",
},
{
logo: FaHtml5,
title: "طلب جديد #4219423",
date: "21 DEC 11:21 PM",
color: "orange",
},
{
logo: FaShoppingCart,
title: "مدفوعات الخادم لشهر أبريل",
date: "21 DEC 9:28 PM",
color: "blue.400",
},
{
logo: FaCreditCard,
title: "تمت إضافة بطاقة جديدة للطلب #3210145",
date: "20 DEC 3:52 PM",
color: "orange.300",
},
{
logo: SiDropbox,
title: "فتح الحزم من أجل التنمية",
date: "19 DEC 11:35 PM",
color: "purple",
},
{
logo: AdobexdLogo,
title: "طلب جديد #9851258",
date: "18 DEC 4:41 PM",
},
];
export const tablesTableData = [
{
logo: avatar1,
name: "Esthera Jackson",
email: "alexa@simmmple.com",
subdomain: "Manager",
domain: "Organization",
status: "Online",
date: "14/06/21",
},
{
logo: avatar2,
name: "Alexa Liras",
email: "laurent@simmmple.com",
subdomain: "Programmer",
domain: "Developer",
status: "Offline",
date: "12/05/21",
},
{
logo: avatar3,
name: "Laurent Michael",
email: "laurent@simmmple.com",
subdomain: "Executive",
domain: "Projects",
status: "Online",
date: "07/06/21",
},
{
logo: avatar4,
name: "Freduardo Hill",
email: "freduardo@simmmple.com",
subdomain: "Manager",
domain: "Organization",
status: "Online",
date: "14/11/21",
},
{
logo: avatar5,
name: "Daniel Thomas",
email: "daniel@simmmple.com",
subdomain: "Programmer",
domain: "Developer",
status: "Offline",
date: "21/01/21",
},
{
logo: avatar7,
name: "Mark Wilson",
email: "mark@simmmple.com",
subdomain: "Designer",
domain: "UI/UX Design",
status: "Offline",
date: "04/09/20",
},
];
export const tablesProjectData = [
{
logo: AdobexdLogo,
name: "Vision UI Version",
budget: "$14,000",
status: "Working",
progression: 60,
},
{
logo: AtlassianLogo,
name: "Add Progress Track",
budget: "$3,000",
status: "Canceled",
progression: 10,
},
{
logo: SlackLogo,
name: "Fix Platform Errors",
budget: "Not set",
status: "Done",
progression: 100,
},
{
logo: SpotifyLogo,
name: "Launch our Mobile App",
budget: "$32,000",
status: "Done",
progression: 100,
},
{
logo: JiraLogo,
name: "Add the New Pricing Page",
budget: "$400",
status: "Working",
progression: 25,
},
];
export const invoicesData = [
{
date: "March, 01, 2020",
code: "#MS-415646",
price: "$180",
logo: FaFilePdf,
format: "PDF",
},
{
date: "February, 10, 2020",
code: "#RV-126749",
price: "$250",
logo: FaFilePdf,
format: "PDF",
},
{
date: "April, 05, 2020",
code: "#FB-212562",
price: "$560",
logo: FaFilePdf,
format: "PDF",
},
{
date: "June, 25, 2019",
code: "#QW-103578",
price: "$120",
logo: FaFilePdf,
format: "PDF",
},
{
date: "March, 01, 2019",
code: "#AR-803481",
price: "$300",
logo: FaFilePdf,
format: "PDF",
},
];
export const billingData = [
{
name: "Oliver Liam",
company: "Viking Burrito",
email: "oliver@burrito.com",
number: "FRB1235476",
},
{
name: "Lucas Harper",
company: "Stone Tech Zone",
email: "lucas@stone-tech.com",
number: "FRB1235476",
},
{
name: "Ethan James",
company: "Fiber Notion",
email: "ethan@fiber.com",
number: "FRB1235476",
},
];
export const newestTransactions = [
{
name: "Netflix",
date: "27 March 2021, at 12:30 PM",
price: "- $2,500",
logo: FaArrowDown,
},
{
name: "Apple",
date: "27 March 2021, at 12:30 PM",
price: "+ $2,500",
logo: FaArrowUp,
},
];
export const olderTransactions = [
{
name: "Stripe",
date: "26 March 2021, at 13:45 PM",
price: "+ $800",
logo: FaArrowUp,
},
{
name: "HubSpot",
date: "26 March 2021, at 12:30 PM",
price: "+ $1,700",
logo: FaArrowUp,
},
{
name: "Webflow",
date: "26 March 2021, at 05:00 PM",
price: "Pending",
logo: AiOutlineExclamation,
},
{
name: "Microsoft",
date: "25 March 2021, at 16:30 PM",
price: "- $987",
logo: FaArrowDown,
},
];
================================================
FILE: src/views/Dashboard/Billing.js
================================================
/*!
=========================================================
* Vision UI Free Chakra - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra
* Copyright 2021 Creative Tim (https://www.creative-tim.com/)
* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)
* Design and Coded by Simmmple & Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import React from "react";
// Chakra imports
import { Box, Button, Flex, Grid, Icon, Spacer, Text } from "@chakra-ui/react";
// Images
import BackgroundCard1 from "assets/img/billing-background-card.png";
// Custom components
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import GradientBorder from "components/GradientBorder/GradientBorder";
import IconBox from "components/Icons/IconBox";
import BillingRow from "components/Tables/BillingRow";
import InvoicesRow from "components/Tables/InvoicesRow";
import TransactionRow from "components/Tables/TransactionRow";
// Icons
import { FaPencilAlt, FaRegCalendarAlt } from "react-icons/fa";
import { IoEllipsisHorizontalSharp } from "react-icons/io5";
import { RiMastercardFill } from "react-icons/ri";
import {
BillIcon,
GraphIcon,
MastercardIcon,
VisaIcon,
} from "components/Icons/Icons";
// Data
import {
billingData,
invoicesData,
newestTransactions,
olderTransactions,
} from "variables/general";
function Billing() {
return (
<Flex direction='column' pt={{ base: "120px", md: "75px" }} mx='auto'>
<Grid templateColumns={{ sm: "1fr", lg: "60% 38%" }}>
<Box>
<Grid
templateColumns={{
sm: "1fr",
md: "1fr 1fr",
}}
gap='26px'>
{/* Mastercard */}
<Card
backgroundImage={BackgroundCard1}
backgroundRepeat='no-repeat'
bgSize='cover'
bgPosition='10%'
p='16px'>
<CardBody h='100%' w='100%'>
<Flex
direction='column'
color='white'
h='100%'
p='0px 10px 20px 10px'
w='100%'>
<Flex justify='space-between' align='center'>
<Text fontSize='md' fontWeight='bold'>
Vision UI
</Text>
<Icon
as={RiMastercardFill}
w='48px'
h='auto'
color='gray.400'
/>
</Flex>
<Spacer />
<Flex direction='column'>
<Box>
<Text
fontSize={{ sm: "xl", lg: "lg", xl: "xl" }}
letterSpacing='2px'
fontWeight='bold'>
7812 2139 0823 XXXX
</Text>
</Box>
<Flex mt='14px'>
<Flex direction='column' me='34px'>
<Text fontSize='xs'>VALID THRU</Text>
<Text fontSize='xs' fontWeight='bold'>
05/24
</Text>
</Flex>
<Flex direction='column'>
<Text fontSize='xs'>CVV</Text>
<Text fontSize='xs' fontWeight='bold'>
09X
</Text>
</Flex>
</Flex>
</Flex>
</Flex>
</CardBody>
</Card>
{/* Credit Balance */}
<Card>
<Flex direction='column'>
<Flex
justify='space-between'
p='22px'
mb='18px'
bg='linear-gradient(127.09deg, rgba(34, 41, 78, 0.94) 19.41%, rgba(10, 14, 35, 0.49) 76.
gitextract_95eyr4c7/
├── .gitattributes
├── .gitignore
├── CHANGELOG.md
├── ISSUE_TEMPLATE.md
├── LICENSE
├── README.md
├── commit.sh
├── genezio.yaml
├── gulpfile.js
├── jsconfig.json
├── package.json
├── public/
│ ├── index.html
│ ├── manifest.json
│ └── robots.txt
└── src/
├── components/
│ ├── Card/
│ │ ├── Card.js
│ │ ├── CardBody.js
│ │ └── CardHeader.js
│ ├── Charts/
│ │ ├── BarChart.js
│ │ └── LineChart.js
│ ├── Configurator/
│ │ └── Configurator.js
│ ├── FixedPlugin/
│ │ └── FixedPlugin.js
│ ├── Footer/
│ │ ├── AuthFooter.js
│ │ └── Footer.js
│ ├── GradientBorder/
│ │ └── GradientBorder.js
│ ├── Icons/
│ │ ├── IconBox.js
│ │ └── Icons.js
│ ├── Layout/
│ │ ├── MainPanel.js
│ │ ├── PanelContainer.js
│ │ └── PanelContent.js
│ ├── Menu/
│ │ └── ItemContent.js
│ ├── Navbars/
│ │ ├── AdminNavbar.js
│ │ ├── AdminNavbarLinks.js
│ │ ├── AuthNavbar.js
│ │ └── SearchBar/
│ │ └── SearchBar.js
│ ├── RTLProvider/
│ │ └── RTLProvider.js
│ ├── Separator/
│ │ └── Separator.js
│ ├── Sidebar/
│ │ ├── Sidebar.js
│ │ └── SidebarHelp.js
│ └── Tables/
│ ├── BillingRow.js
│ ├── DashboardTableRow.js
│ ├── InvoicesRow.js
│ ├── TablesProjectRow.js
│ ├── TablesTableRow.js
│ ├── TimelineRow.js
│ └── TransactionRow.js
├── index.js
├── layouts/
│ ├── Admin.js
│ ├── Auth.js
│ └── RTL.js
├── routes.js
├── theme/
│ ├── additions/
│ │ ├── card/
│ │ │ ├── Card.js
│ │ │ ├── CardBody.js
│ │ │ └── CardHeader.js
│ │ └── layout/
│ │ ├── MainPanel.js
│ │ ├── PanelContainer.js
│ │ └── PanelContent.js
│ ├── bgAdmin.js
│ ├── bgAuth.js
│ ├── components/
│ │ ├── badge.js
│ │ ├── button.js
│ │ ├── drawer.js
│ │ ├── link.js
│ │ └── switch.js
│ ├── foundations/
│ │ └── breakpoints.js
│ ├── styles.js
│ ├── themeAdmin.js
│ └── themeAuth.js
├── variables/
│ ├── charts.js
│ └── general.js
└── views/
├── Dashboard/
│ ├── Billing.js
│ ├── Dashboard.js
│ ├── Profile.js
│ └── Tables.js
├── Pages/
│ ├── SignIn.js
│ └── SignUp.js
└── RTL/
└── RTLPage.js
SYMBOL INDEX (47 symbols across 40 files)
FILE: src/components/Card/Card.js
function Card (line 20) | function Card(props) {
FILE: src/components/Card/CardBody.js
function CardBody (line 20) | function CardBody(props) {
FILE: src/components/Card/CardHeader.js
function CardHeader (line 20) | function CardHeader(props) {
FILE: src/components/Charts/BarChart.js
class BarChart (line 22) | class BarChart extends Component {
method constructor (line 23) | constructor(props) {
method componentDidMount (line 31) | componentDidMount() {
method render (line 40) | render() {
FILE: src/components/Charts/LineChart.js
class LineChart (line 22) | class LineChart extends React.Component {
method constructor (line 23) | constructor(props) {
method componentDidMount (line 32) | componentDidMount() {
method render (line 41) | render() {
FILE: src/components/Configurator/Configurator.js
function Configurator (line 41) | function Configurator(props) {
FILE: src/components/FixedPlugin/FixedPlugin.js
function FixedPlugin (line 26) | function FixedPlugin(props) {
FILE: src/components/Footer/AuthFooter.js
function AuthFooter (line 23) | function AuthFooter(props) {
FILE: src/components/Footer/Footer.js
function Footer (line 23) | function Footer(props) {
FILE: src/components/GradientBorder/GradientBorder.js
function GradientBorder (line 22) | function GradientBorder(props) {
FILE: src/components/Icons/IconBox.js
function IconBox (line 22) | function IconBox(props) {
FILE: src/components/Layout/MainPanel.js
function MainPanel (line 20) | function MainPanel(props) {
FILE: src/components/Layout/PanelContainer.js
function PanelContainer (line 20) | function PanelContainer(props) {
FILE: src/components/Layout/PanelContent.js
function PanelContent (line 20) | function PanelContent(props) {
FILE: src/components/Menu/ItemContent.js
function ItemContent (line 24) | function ItemContent(props) {
FILE: src/components/Navbars/AdminNavbar.js
function AdminNavbar (line 33) | function AdminNavbar(props) {
FILE: src/components/Navbars/AdminNavbarLinks.js
function HeaderLinks (line 31) | function HeaderLinks(props) {
FILE: src/components/Navbars/AuthNavbar.js
function AuthNavbar (line 41) | function AuthNavbar(props) {
FILE: src/components/Navbars/SearchBar/SearchBar.js
function SearchBar (line 28) | function SearchBar(props) {
FILE: src/components/RTLProvider/RTLProvider.js
function RtlProvider (line 27) | function RtlProvider({ children }) {
FILE: src/components/Separator/Separator.js
function Separator (line 22) | function Separator(props) {
FILE: src/components/Sidebar/Sidebar.js
function Sidebar (line 28) | function Sidebar(props) {
function SidebarResponsive (line 254) | function SidebarResponsive(props) {
FILE: src/components/Sidebar/SidebarHelp.js
function SidebarHelp (line 25) | function SidebarHelp(props) {
FILE: src/components/Tables/BillingRow.js
function BillingRow (line 23) | function BillingRow(props) {
FILE: src/components/Tables/DashboardTableRow.js
function DashboardTableRow (line 32) | function DashboardTableRow(props) {
FILE: src/components/Tables/InvoicesRow.js
function InvoicesRow (line 21) | function InvoicesRow(props) {
FILE: src/components/Tables/TablesProjectRow.js
function DashboardTableRow (line 32) | function DashboardTableRow(props) {
FILE: src/components/Tables/TablesTableRow.js
function TablesTableRow (line 31) | function TablesTableRow(props) {
FILE: src/components/Tables/TimelineRow.js
function TimelineRow (line 22) | function TimelineRow(props) {
FILE: src/components/Tables/TransactionRow.js
function TransactionRow (line 22) | function TransactionRow(props) {
FILE: src/layouts/Admin.js
function Dashboard (line 36) | function Dashboard(props) {
FILE: src/layouts/Auth.js
function Pages (line 29) | function Pages(props) {
FILE: src/layouts/RTL.js
function Dashboard (line 37) | function Dashboard(props) {
FILE: src/views/Dashboard/Billing.js
function Billing (line 55) | function Billing() {
FILE: src/views/Dashboard/Dashboard.js
function Dashboard (line 69) | function Dashboard() {
FILE: src/views/Dashboard/Profile.js
function Profile (line 67) | function Profile() {
FILE: src/views/Dashboard/Tables.js
function Tables (line 48) | function Tables() {
FILE: src/views/Pages/SignIn.js
function SignIn (line 42) | function SignIn() {
FILE: src/views/Pages/SignUp.js
function SignUp (line 46) | function SignUp() {
FILE: src/views/RTL/RTLPage.js
function Dashboard (line 71) | function Dashboard() {
Condensed preview — 76 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (313K chars).
[
{
"path": ".gitattributes",
"chars": 66,
"preview": "# Auto detect text files and perform LF normalization\n* text=auto\n"
},
{
"path": ".gitignore",
"chars": 37,
"preview": "node_modules\npackage-lock.json\nbuild\n"
},
{
"path": "CHANGELOG.md",
"chars": 700,
"preview": "# Changelog\n## [1.0.2] 2022-07-24\n\n### Update v1.0.2\n\n- We used the Chakra UI Circular Progress instead of the plugins s"
},
{
"path": "ISSUE_TEMPLATE.md",
"chars": 388,
"preview": "<!--\n IMPORTANT: Please use the following link to create a new issue:\n\n https://www.creative-tim.com/new-issue/vision-u"
},
{
"path": "LICENSE",
"chars": 1069,
"preview": "MIT License\n\nCopyright (c) 2022 Creative Tim\n\nPermission is hereby granted, free of charge, to any person obtaining a co"
},
{
"path": "README.md",
"chars": 13121,
"preview": "# [Vision UI Free Chakra](https://demos.creative-tim.com/vision-ui-dashboard-chakra) [![Tweet](https://img.shields.io/tw"
},
{
"path": "commit.sh",
"chars": 0,
"preview": ""
},
{
"path": "genezio.yaml",
"chars": 208,
"preview": "name: vision-ui-dashboard-chakra\nregion: us-east-1\nyamlVersion: 2\nfrontend:\n path: .\n publish: build\n scripts:\n"
},
{
"path": "gulpfile.js",
"chars": 3048,
"preview": "const gulp = require(\"gulp\");\nconst gap = require(\"gulp-append-prepend\");\n\ngulp.task(\"licenses\", async function () {\n /"
},
{
"path": "jsconfig.json",
"chars": 95,
"preview": "{\n \"compilerOptions\": {\n \"baseUrl\": \"src\",\n \"paths\": {\n \"*\": [\"src/*\"]\n }\n }\n}\n"
},
{
"path": "package.json",
"chars": 2362,
"preview": "{\n \"name\": \"vision-dashboard-chakra\",\n \"version\": \"1.0.1\",\n \"private\": true,\n \"homepage\": \"https://demos.creative-ti"
},
{
"path": "public/index.html",
"chars": 3770,
"preview": "<!--/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n===================="
},
{
"path": "public/manifest.json",
"chars": 317,
"preview": "{\n \"short_name\": \"React App\",\n \"name\": \"Create React App Sample\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n "
},
{
"path": "public/robots.txt",
"chars": 67,
"preview": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n"
},
{
"path": "src/components/Card/Card.js",
"chars": 976,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Card/CardBody.js",
"chars": 988,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Card/CardHeader.js",
"chars": 994,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Charts/BarChart.js",
"chars": 1286,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Charts/LineChart.js",
"chars": 1303,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Configurator/Configurator.js",
"chars": 6579,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/FixedPlugin/FixedPlugin.js",
"chars": 1858,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Footer/AuthFooter.js",
"chars": 3063,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Footer/Footer.js",
"chars": 3188,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/GradientBorder/GradientBorder.js",
"chars": 1199,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Icons/IconBox.js",
"chars": 952,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Icons/Icons.js",
"chars": 40072,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Layout/MainPanel.js",
"chars": 991,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Layout/PanelContainer.js",
"chars": 1006,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Layout/PanelContent.js",
"chars": 1000,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Menu/ItemContent.js",
"chars": 1594,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Navbars/AdminNavbar.js",
"chars": 4991,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Navbars/AdminNavbarLinks.js",
"chars": 5710,
"preview": "// Chakra Icons\nimport { BellIcon, SearchIcon } from \"@chakra-ui/icons\";\n// Chakra Imports\nimport {\n Button,\n Flex,\n "
},
{
"path": "src/components/Navbars/AuthNavbar.js",
"chars": 5634,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Navbars/SearchBar/SearchBar.js",
"chars": 1778,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/RTLProvider/RTLProvider.js",
"chars": 1132,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Separator/Separator.js",
"chars": 1009,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Sidebar/Sidebar.js",
"chars": 14095,
"preview": "/*eslint-disable*/\nimport { HamburgerIcon } from \"@chakra-ui/icons\";\n// chakra imports\nimport {\n Box,\n Button,\n Drawe"
},
{
"path": "src/components/Sidebar/SidebarHelp.js",
"chars": 2254,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Tables/BillingRow.js",
"chars": 2707,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Tables/DashboardTableRow.js",
"chars": 2584,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Tables/InvoicesRow.js",
"chars": 1540,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Tables/TablesProjectRow.js",
"chars": 2582,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Tables/TablesTableRow.js",
"chars": 3262,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Tables/TimelineRow.js",
"chars": 1760,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/components/Tables/TransactionRow.js",
"chars": 1888,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/index.js",
"chars": 1228,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/layouts/Admin.js",
"chars": 5403,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/layouts/Auth.js",
"chars": 3759,
"preview": "// chakra imports\nimport { Box, ChakraProvider, Portal } from \"@chakra-ui/react\";\nimport Footer from \"components/Footer/"
},
{
"path": "src/layouts/RTL.js",
"chars": 5611,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/routes.js",
"chars": 2640,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/theme/additions/card/Card.js",
"chars": 388,
"preview": "const Card = {\n baseStyle: {\n p: \"22px\",\n display: \"flex\",\n flexDirection: \"column\",\n backdropFilter: \"blur"
},
{
"path": "src/theme/additions/card/CardBody.js",
"chars": 156,
"preview": "const CardBody = {\n baseStyle: {\n display: \"flex\",\n width: \"100%\",\n },\n};\n\nexport const CardBodyComponent = {\n "
},
{
"path": "src/theme/additions/card/CardHeader.js",
"chars": 161,
"preview": "const CardHeader = {\n baseStyle: {\n display: \"flex\",\n width: \"100%\"\n },\n};\n\nexport const CardHeaderComponent = {"
},
{
"path": "src/theme/additions/layout/MainPanel.js",
"chars": 610,
"preview": "const MainPanel = {\n baseStyle: {\n float: \"right\",\n maxWidth: \"100%\",\n overflow: \"auto\",\n position: \"relati"
},
{
"path": "src/theme/additions/layout/PanelContainer.js",
"chars": 192,
"preview": "const PanelContainer = {\n baseStyle: {\n p: \"30px 15px\",\n minHeight: \"calc(100vh - 123px)\",\n },\n};\n\nexport const "
},
{
"path": "src/theme/additions/layout/PanelContent.js",
"chars": 192,
"preview": "const PanelContent = {\n baseStyle: {\n ms: \"auto\",\n me: \"auto\",\n ps: \"15px\",\n pe: \"15px\",\n },\n};\n\nexport co"
},
{
"path": "src/theme/bgAdmin.js",
"chars": 249,
"preview": "import bgBody from \"assets/img/background-body-admin.png\";\n\nexport const bgAdmin = {\n styles: {\n global: (props) => "
},
{
"path": "src/theme/bgAuth.js",
"chars": 264,
"preview": "export const bgAuth = {\n styles: {\n global: (props) => ({\n body: {\n bg:\n \"linear-gradient(159.0"
},
{
"path": "src/theme/components/badge.js",
"chars": 358,
"preview": "import { baseStyle } from \"@chakra-ui/react\";\n\nexport const badgeStyles = {\n components: {\n Badge: {\n "
},
{
"path": "src/theme/components/button.js",
"chars": 1366,
"preview": "export const buttonStyles = {\n components: {\n Button: {\n variants: {\n \"no-hover\": {\n _hover: {\n"
},
{
"path": "src/theme/components/drawer.js",
"chars": 282,
"preview": "export const drawerStyles = {\n components: {\n Drawer: {\n // 3. We can add a new visual variant\n variants: "
},
{
"path": "src/theme/components/link.js",
"chars": 290,
"preview": "export const linkStyles = {\n components: {\n Link: {\n // 3. We can add a new visual variant\n decoration: \"n"
},
{
"path": "src/theme/components/switch.js",
"chars": 306,
"preview": "export const switchStyles = {\n components: {\n Switch: {\n variants: {\n brand: {\n bg: \"red.500\",\n"
},
{
"path": "src/theme/foundations/breakpoints.js",
"chars": 266,
"preview": "// 1. Import the utilities\nimport { createBreakpoints } from \"@chakra-ui/theme-tools\";\n// 2. Update the breakpoints as k"
},
{
"path": "src/theme/styles.js",
"chars": 576,
"preview": "export const globalStyles = {\n colors: {\n gray: {\n 700: \"#1f2733\",\n },\n brand: {\n 50: \"#cbbff8\",\n "
},
{
"path": "src/theme/themeAdmin.js",
"chars": 1476,
"preview": "import { extendTheme } from \"@chakra-ui/react\";\nimport { globalStyles } from \"./styles\";\nimport { bgAdmin } from \"./bgAd"
},
{
"path": "src/theme/themeAuth.js",
"chars": 1424,
"preview": "import { extendTheme } from \"@chakra-ui/react\";\nimport { globalStyles } from \"./styles\";\nimport { bgAuth } from \"./bgAut"
},
{
"path": "src/variables/charts.js",
"chars": 5781,
"preview": "export const barChartDataDashboard = [\n {\n name: \"Sales\",\n data: [330, 250, 110, 300, 490, 350, 270, 130, 425],\n "
},
{
"path": "src/variables/general.js",
"chars": 8023,
"preview": "// Assets\nimport avatar1 from \"assets/img/avatars/avatar1.png\";\nimport avatar2 from \"assets/img/avatars/avatar2.png\";\nim"
},
{
"path": "src/views/Dashboard/Billing.js",
"chars": 13512,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/views/Dashboard/Dashboard.js",
"chars": 18675,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/views/Dashboard/Profile.js",
"chars": 20438,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/views/Dashboard/Tables.js",
"chars": 5772,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/views/Pages/SignIn.js",
"chars": 6662,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/views/Pages/SignUp.js",
"chars": 11900,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
},
{
"path": "src/views/RTL/RTLPage.js",
"chars": 18721,
"preview": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n========================"
}
]
About this extraction
This page contains the full source code of the creativetimofficial/vision-ui-dashboard-chakra GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 76 files (275.3 KB), approximately 85.1k tokens, and a symbol index with 47 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.