first commit
This commit is contained in:
commit
61b3c4ee2c
|
|
@ -0,0 +1,11 @@
|
|||
# PORT for the main application (frontend/backend or another service).
|
||||
PORT=8200
|
||||
|
||||
# Base URL for the server socket API, used for real-time communication (e.g., WebSockets).
|
||||
REACT_APP_SERVER_SOCKET_API_BASE_URL=185.100.212.76:8000
|
||||
|
||||
# Base URL for the server REST API, used for HTTP requests to the backend server.
|
||||
REACT_APP_SERVER_REST_API_BASE_URL=185.100.212.76:5000
|
||||
|
||||
# Base URL for the server marketplace API.
|
||||
REACT_APP_SERVER_MARKETPLACE_URL=185.100.212.76:50011
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
---
|
||||
name: Bug Report
|
||||
about: Report a bug or issue with the project
|
||||
title: "[Bug] "
|
||||
labels: bug
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
### Bug Description
|
||||
|
||||
Provide a detailed description of the bug or issue.
|
||||
|
||||
|
||||
### Steps to Reproduce
|
||||
|
||||
1. Step one
|
||||
2. Step two
|
||||
3. Step three
|
||||
|
||||
### Expected Behavior
|
||||
|
||||
Explain what you expected to happen.
|
||||
|
||||
|
||||
### Actual Behavior
|
||||
|
||||
Describe what actually happened, including any error messages or logs.
|
||||
|
||||
|
||||
### Screenshots (if applicable)
|
||||
|
||||
If applicable, add screenshots to help explain your problem.
|
||||
|
||||
|
||||
### Environment Information:
|
||||
|
||||
- Operating System: [e.g., macOS, Windows, Linux]
|
||||
- Browser (if applicable): [e.g., Chrome, Firefox]
|
||||
- Version: [e.g., 1.0.0]
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
name: Feature Request
|
||||
about: Suggest a new feature for the project
|
||||
title: "[Feature Request] "
|
||||
labels: enhancement
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
### Feature Request Description
|
||||
|
||||
Provide a clear and concise description of the feature you’d like to request.
|
||||
|
||||
|
||||
### Why Is This Feature Needed?
|
||||
|
||||
Explain why the feature would be useful or necessary.
|
||||
|
||||
|
||||
### Additional Context
|
||||
|
||||
Add any other context or screenshots that may help describe the feature request.
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
### Description
|
||||
|
||||
Please include a summary of the changes and the motivation behind them. Also include any relevant context or links to related issues.
|
||||
|
||||
**Related Issues:**
|
||||
|
||||
- Issue # (if applicable)
|
||||
- Link to related issue or ticket (if applicable)
|
||||
|
||||
### Changes Made
|
||||
|
||||
- Describe what changes were made in this pull request.
|
||||
- Include any relevant details about the implementation.
|
||||
|
||||
### Checklist
|
||||
|
||||
- [ ] I have tested my changes locally.
|
||||
- [ ] I have updated the documentation (if applicable).
|
||||
- [ ] I have included unit tests (if applicable).
|
||||
- [ ] My code follows the project's coding style.
|
||||
|
||||
### Screenshots (if applicable)
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
name: Documentation Update
|
||||
about: Submit a pull request for updating documentation
|
||||
title: "[Docs] "
|
||||
labels: documentation, needs review
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
### Documentation Changes
|
||||
|
||||
Please describe the changes you are making to the documentation.
|
||||
|
||||
### Related Code Changes (if applicable)
|
||||
|
||||
If your documentation relates to any new code changes, please provide context or links to those changes.
|
||||
|
||||
### Reason for Change
|
||||
|
||||
Why are these documentation updates necessary?
|
||||
|
||||
### Screenshots (if applicable)
|
||||
|
||||
If updating visual elements of documentation, provide screenshots or examples.
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
---
|
||||
name: Feature Request
|
||||
about: Submit a pull request for adding a new feature
|
||||
title: "[Feature] "
|
||||
labels: enhancement, needs review
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
### Description of the Feature
|
||||
|
||||
Briefly describe the new feature you are implementing.
|
||||
|
||||
**Related Issue:** (if any)
|
||||
|
||||
### Changes Made
|
||||
|
||||
1. context-menu-list the specific changes made in the code.
|
||||
2. Explain the new functionality and how it improves the project.
|
||||
|
||||
### Testing and Documentation
|
||||
|
||||
1. Steps for testing the new feature.
|
||||
2. Any documentation updates made.
|
||||
|
||||
### Screenshots (if applicable)
|
||||
|
||||
Add any screenshots or visuals demonstrating the feature.
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
name: Deploy Docsify
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
|
||||
jobs:
|
||||
deploy:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: Install Node.js
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm install
|
||||
|
||||
- name: Build Docsify site
|
||||
run: docsify serve docs --port 4000
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
|
||||
# remove zip
|
||||
*.zip
|
||||
**/temp/
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
#!/usr/bin/env bash
|
||||
|
||||
echo "Running pre-commit hook..."
|
||||
|
||||
# Compile TypeScript
|
||||
echo "Compiling TypeScript..."
|
||||
npx tsc scripts/validate-filenames.ts
|
||||
|
||||
# if [ $? -ne 0 ]; then
|
||||
# echo "TypeScript compilation failed. Aborting commit."
|
||||
# exit 1
|
||||
# fi
|
||||
|
||||
echo "TypeScript compilation successful."
|
||||
|
||||
# Run Node.js script
|
||||
echo "Running Node.js script..."
|
||||
node scripts/validate-filenames.js --no-prompt
|
||||
|
||||
if [ $? -ne 0 ]; then
|
||||
echo "Node.js script failed. Aborting commit."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "Pre-commit hook completed successfully."
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
#!/usr/bin/env bash
|
||||
|
||||
echo "Running pre-commit hook..."
|
||||
|
||||
# Compile TypeScript
|
||||
echo "Compiling TypeScript..."
|
||||
npx tsc scripts/validate-filenames.ts
|
||||
|
||||
# if [ $? -ne 0 ]; then
|
||||
# echo "TypeScript compilation failed. Aborting commit."
|
||||
# exit 1
|
||||
# fi
|
||||
|
||||
echo "TypeScript compilation successful."
|
||||
|
||||
# Run Node.js script
|
||||
echo "Running Node.js script..."
|
||||
node scripts/validate-filenames.js --no-prompt
|
||||
|
||||
if [ $? -ne 0 ]; then
|
||||
echo "Node.js script failed. Aborting commit."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "Pre-commit hook completed successfully."
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
# Use the argument for node version (defaults to 'lts' if not provided)
|
||||
ARG NODE_VERSION=lts
|
||||
|
||||
# Stage 1: Build React App
|
||||
FROM node:${NODE_VERSION}-alpine AS development
|
||||
|
||||
# Set the Node.js environment to development
|
||||
ENV NODE_ENV=development
|
||||
|
||||
# Define build arguments for the API base URLs
|
||||
ARG REACT_APP_SERVER_SOCKET_API_BASE_URL
|
||||
ARG REACT_APP_SERVER_REST_API_BASE_URL
|
||||
ARG REACT_APP_SERVER_MARKETPLACE_URL
|
||||
|
||||
# Set environment variables for the API base URLs using the build arguments
|
||||
ENV REACT_APP_SERVER_SOCKET_API_BASE_URL=${REACT_APP_SERVER_SOCKET_API_BASE_URL}
|
||||
ENV REACT_APP_SERVER_REST_API_BASE_URL=${REACT_APP_SERVER_REST_API_BASE_URL}
|
||||
ENV REACT_APP_SERVER_MARKETPLACE_URL=${REACT_APP_SERVER_MARKETPLACE_URL}
|
||||
|
||||
# Set working directory for frontend code
|
||||
WORKDIR /frontend
|
||||
|
||||
# Copy package.json and package-lock.json for npm install
|
||||
COPY package*.json ./
|
||||
|
||||
# Install the latest npm version
|
||||
RUN npm install -g npm
|
||||
|
||||
# Install dependencies (this includes react-scripts)
|
||||
RUN npm install --legacy-peer-deps
|
||||
|
||||
# Copy the rest of the application code
|
||||
COPY . .
|
||||
|
||||
# Run the build command (build the React app)
|
||||
RUN npm run build
|
||||
|
||||
# Stage 2: Serve with Nginx
|
||||
FROM nginx:alpine
|
||||
|
||||
# Copy the built React files from the build stage into Nginx's default HTML folder
|
||||
COPY --from=development /frontend/build /usr/share/nginx/html
|
||||
|
||||
# Optionally copy a custom Nginx config (if needed)
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
# Expose port 80 for Nginx (default HTTP port)
|
||||
EXPOSE 80
|
||||
|
||||
# Start Nginx in the foreground (this is required to keep the container running)
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
## Getting Started
|
||||
|
||||
Follow these steps to set up and run the project locally.
|
||||
|
||||
### Prerequisites
|
||||
|
||||
Ensure you have the following installed on your system:
|
||||
|
||||
- **Node.js**: [Download and install Node.js](https://nodejs.org/)
|
||||
- **npm**: Comes with Node.js, but you can also install [npm separately](https://www.npmjs.com/get-npm)
|
||||
- **yarn (optional)**: If you prefer to use Yarn, [install it here](https://yarnpkg.com/)
|
||||
- **TypeScript**: This project uses TypeScript, and the necessary dependencies will be installed automatically.
|
||||
|
||||
### Installation
|
||||
|
||||
1. Clone the repository:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/S0Vishnu/react-production-project-boilerplate.git
|
||||
cd react-production-project-boilerplate
|
||||
```
|
||||
|
||||
2. Cloning repository with User Credentials:
|
||||
|
||||
```bash
|
||||
git clone https://your_username:password@github.com/S0Vishnu/react-production-project-boilerplate.git
|
||||
cd react-production-project-boilerplate
|
||||
```
|
||||
|
||||
note: if password contains special charecters use:
|
||||
|
||||
- @ → %40
|
||||
- : → %3A
|
||||
- / → %2F
|
||||
- ? → %3F
|
||||
- & → %26
|
||||
- = → %3D
|
||||
- ! → %21
|
||||
|
||||
2. Install the dependencies:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
3. Start server:
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
4. Build the app for production:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
5. Tests
|
||||
|
||||
This project includes both **unit tests** using **Jest** and **end-to-end (E2E) tests** using **Cypress**. Here’s how you can run and manage these tests.
|
||||
|
||||
**Unit Tests (Jest)**
|
||||
Unit tests are located in the `src/tests/unit/` directory. They test individual components and functions to ensure they work as expected. **Jest** is used for running these tests.
|
||||
|
||||
**Running Unit Tests**
|
||||
To run the unit tests, use the following command:
|
||||
|
||||
```bash
|
||||
npm run test
|
||||
```
|
||||
|
||||
**End-to-End (E2E) Tests (Cypress)**
|
||||
Cypress can be run in two modes
|
||||
|
||||
1. Interactive Mode:
|
||||
|
||||
```bash
|
||||
npm run cypress:open
|
||||
```
|
||||
|
||||
2. Headless Mode:
|
||||
|
||||
```bash
|
||||
npm run cypress:run
|
||||
```
|
||||
|
||||
### Run Documentation(Docsify)
|
||||
|
||||
1. Installation (if needed):
|
||||
|
||||
```bash
|
||||
npm i docsify-cli -g
|
||||
```
|
||||
|
||||
2. Run Command:
|
||||
|
||||
```bash
|
||||
docsify serve docs
|
||||
```
|
||||
|
|
@ -0,0 +1 @@
|
|||
/.obsidian
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
# Boilerplate Project
|
||||
|
||||
A **Boilerplate Project** designed to jumpstart your development process with a clean, organized, and scalable structure.
|
||||
|
||||
## Features
|
||||
|
||||
- **Pre-configured Tooling**: Includes [Tool1], [Tool2], and [Tool3] for seamless development.
|
||||
- **Modular Structure**: Organized folder structure for scalability and maintainability.
|
||||
- **Best Practices**: Follows industry standards for coding, linting, and testing.
|
||||
- **Cross-Environment Compatibility**: Ready for local, staging, and production environments.
|
||||
|
||||
## Technologies Used
|
||||
|
||||
- **Frontend**: React
|
||||
- **Backend**: Node.js
|
||||
- **Database**: [MongoDB, PostgreSQL, MySQL, etc.]
|
||||
- **Build Tools**: Webpack
|
||||
- **Testing**: Jest
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
- [Get Started](/README.md)
|
||||
|
||||
<!-- Documetations Section (start)-->
|
||||
|
||||
<!-- Documetations Section (end)-->
|
||||
|
||||
- [Git Commands](./documents/gitNotes.md)
|
||||
- [Notes and Guidlines](./documents/notes.md)
|
||||
- [Project Structure](./documents/projectStructure.md)
|
||||
- [How to Document](./documents/documentationGuide.md)
|
||||
- [How to Write a Markdown (.md)](./documents/markdownGuide.md)
|
||||
- [Docsify Overview](./documents/docsifyGuide.md)
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<svg width="800" height="574" viewBox="0 0 800 574" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M424.4 459.9C424.4 442.9 438.2 429.1 455.2 429.1" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M254.1 459.9C254.1 442.9 240.3 429.1 223.3 429.1M164.5 552.1H378.4" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M315.8 567.901C324.526 567.901 331.6 560.827 331.6 552.101C331.6 543.375 324.526 536.301 315.8 536.301C307.074 536.301 300 543.375 300 552.101C300 560.827 307.074 567.901 315.8 567.901Z" fill="#4ED1A1" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M362.7 567.901C371.427 567.901 378.5 560.827 378.5 552.101C378.5 543.375 371.427 536.301 362.7 536.301C353.974 536.301 346.9 543.375 346.9 552.101C346.9 560.827 353.974 567.901 362.7 567.901Z" fill="#4ED1A1" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M242.5 567.901C251.226 567.901 258.3 560.827 258.3 552.101C258.3 543.375 251.226 536.301 242.5 536.301C233.774 536.301 226.7 543.375 226.7 552.101C226.7 560.827 233.774 567.901 242.5 567.901Z" fill="#4ED1A1" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M776.2 429.1H179.9" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M485.2 444.901C493.927 444.901 501 437.827 501 429.101C501 420.375 493.927 413.301 485.2 413.301C476.474 413.301 469.4 420.375 469.4 429.101C469.4 437.827 476.474 444.901 485.2 444.901Z" fill="#9F5EFF" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M315.8 444.901C324.526 444.901 331.6 437.827 331.6 429.101C331.6 420.375 324.526 413.301 315.8 413.301C307.074 413.301 300 420.375 300 429.101C300 437.827 307.074 444.901 315.8 444.901Z" fill="#9F5EFF" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M776.2 444.901C784.926 444.901 792 437.827 792 429.101C792 420.375 784.926 413.301 776.2 413.301C767.474 413.301 760.4 420.375 760.4 429.101C760.4 437.827 767.474 444.901 776.2 444.901Z" fill="#9F5EFF" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M254.1 459.9C254.1 476.9 267.9 490.7 284.9 490.7H392.8M84.9004 275C84.9004 292 98.7004 305.8 115.7 305.8H133" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M315.8 506.401C324.526 506.401 331.6 499.327 331.6 490.601C331.6 481.875 324.526 474.801 315.8 474.801C307.074 474.801 300 481.875 300 490.601C300 499.327 307.074 506.401 315.8 506.401Z" fill="#4ED1A1" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M362.7 506.401C371.427 506.401 378.5 499.327 378.5 490.601C378.5 481.875 371.427 474.801 362.7 474.801C353.974 474.801 346.9 481.875 346.9 490.601C346.9 499.327 353.974 506.401 362.7 506.401Z" fill="#4ED1A1" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M392.8 490.601H393.7C410.7 490.601 424.5 476.801 424.5 459.801" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M57.2 306.1H21.5" stroke="#CCCCCC" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" stroke-dasharray="2 10 2 10"/>
|
||||
<path d="M762.1 306.1H244.9" stroke="#CCCCCC" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" stroke-dasharray="2 10 2 10"/>
|
||||
<path d="M531.5 367.6H21.2998" stroke="#CCCCCC" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" stroke-dasharray="2 10 2 10"/>
|
||||
<path d="M761.5 367.6H709.7" stroke="#CCCCCC" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" stroke-dasharray="2 10 2 10"/>
|
||||
<path d="M761.3 244.6H679" stroke="#CCCCCC" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" stroke-dasharray="2 10 2 10"/>
|
||||
<path d="M84.8996 275.4C84.8996 258.4 71.0996 244.6 54.0996 244.6M211.7 275C211.7 292 197.9 305.8 180.9 305.8H132.9M211.7 275.4C211.7 258.4 225.5 244.6 242.5 244.6M273.2 429.1C256.2 429.1 242.4 415.3 242.4 398.3V336.5C242.4 319.5 228.6 305.7 211.6 305.7" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M148.7 567.901C157.426 567.901 164.5 560.827 164.5 552.101C164.5 543.375 157.426 536.301 148.7 536.301C139.974 536.301 132.9 543.375 132.9 552.101C132.9 560.827 139.974 567.901 148.7 567.901Z" fill="#4ED1A1" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M645 244.6H39.2002" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M23.7399 260.402C32.4652 260.27 39.4312 253.09 39.299 244.365C39.1669 235.639 31.9865 228.673 23.2613 228.806C14.5361 228.938 7.57003 236.118 7.7022 244.843C7.83437 253.569 15.0147 260.535 23.7399 260.402Z" fill="#B3E3FF" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M315.8 260.401C324.526 260.401 331.6 253.327 331.6 244.601C331.6 235.875 324.526 228.801 315.8 228.801C307.074 228.801 300 235.875 300 244.601C300 253.327 307.074 260.401 315.8 260.401Z" fill="#B3E3FF" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M645 260.401C653.726 260.401 660.8 253.327 660.8 244.601C660.8 235.875 653.726 228.801 645 228.801C636.274 228.801 629.2 235.875 629.2 244.601C629.2 253.327 636.274 260.401 645 260.401Z" fill="#B3E3FF" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M49 139.1H91.5V176.6H49V139.1Z" fill="#B3E3FF" stroke="#646464" strokeWidth="4" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M62.6004 162.399H61.4004L58.9004 156.099H60.3004L62.1004 160.899L63.9004 156.099H65.2004L62.6004 162.399ZM67.3004 155.099C67.8004 154.299 68.7004 153.699 69.9004 153.699C71.1004 153.699 71.9004 154.199 72.5004 155.099C73.1004 155.899 73.3004 156.999 73.3004 158.199C73.3004 159.399 73.1004 160.399 72.5004 161.299C72.0004 162.099 71.1004 162.699 69.9004 162.699C68.7004 162.699 67.9004 162.199 67.3004 161.299C66.7004 160.499 66.5004 159.399 66.5004 158.199C66.5004 156.999 66.7004 155.899 67.3004 155.099ZM68.5004 160.899C68.8004 161.199 69.2004 161.399 69.8004 161.399C70.4004 161.399 70.8004 161.199 71.1004 160.899C71.6004 160.399 71.8004 159.499 71.8004 158.199C71.8004 156.899 71.6004 155.999 71.1004 155.499C70.8004 155.199 70.4004 154.999 69.8004 154.999C69.2004 154.999 68.8004 155.199 68.5004 155.499C68.0004 155.999 67.8004 156.899 67.8004 158.199C67.8004 159.499 68.0004 160.299 68.5004 160.899ZM75.8004 160.599C76.3004 160.599 76.7004 160.999 76.7004 161.499C76.7004 161.999 76.3004 162.399 75.8004 162.399C75.3004 162.399 74.9004 161.999 74.9004 161.499C74.9004 160.999 75.3004 160.599 75.8004 160.599ZM79.7004 162.399V156.499H77.7004V155.599C78.9004 155.599 79.7004 154.899 79.9004 153.999H81.0004V162.399H79.7004Z" fill="#1D1D1D"/>
|
||||
<path d="M70.3002 210.7V193.1M78.5002 204.2L70.3002 212.4L62.2002 204.2" stroke="#646464" strokeWidth="4" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M294.6 139.1H337.1V176.6H294.6V139.1Z" fill="#B3E3FF" stroke="#646464" strokeWidth="4" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M306.5 162.399H305.3L302.8 156.099H304.2L306 160.899L307.8 156.099H309.1L306.5 162.399ZM311.2 155.099C311.7 154.299 312.6 153.699 313.8 153.699C315 153.699 315.8 154.199 316.4 155.099C317 155.899 317.2 156.999 317.2 158.199C317.2 159.399 317 160.399 316.4 161.299C315.9 162.099 315 162.699 313.8 162.699C312.6 162.699 311.8 162.199 311.2 161.299C310.6 160.499 310.4 159.399 310.4 158.199C310.4 156.999 310.6 155.899 311.2 155.099ZM312.4 160.899C312.7 161.199 313.1 161.399 313.7 161.399C314.3 161.399 314.7 161.199 315 160.899C315.5 160.399 315.7 159.499 315.7 158.199C315.7 156.899 315.5 155.999 315 155.499C314.7 155.199 314.3 154.999 313.7 154.999C313.1 154.999 312.7 155.199 312.4 155.499C311.9 155.999 311.7 156.899 311.7 158.199C311.7 159.499 311.9 160.299 312.4 160.899ZM319.7 160.599C320.2 160.599 320.6 160.999 320.6 161.499C320.6 161.999 320.2 162.399 319.7 162.399C319.2 162.399 318.8 161.999 318.8 161.499C318.8 160.999 319.2 160.599 319.7 160.599ZM322.7 156.799V156.499C322.7 155.099 323.8 153.799 325.6 153.799C327.4 153.799 328.4 154.999 328.4 156.399C328.4 157.499 327.8 158.399 326.8 158.999L325.1 160.099C324.6 160.399 324.2 160.799 324.1 161.299H328.4V162.499H322.5C322.5 161.099 323.1 160.099 324.5 159.099L325.9 158.199C326.7 157.699 327.1 157.099 327.1 156.399C327.1 155.599 326.6 154.899 325.5 154.899C324.4 154.899 323.9 155.699 323.9 156.599V156.999L322.7 156.799Z" fill="#1D1D1D"/>
|
||||
<path d="M315.8 210.7V193.1M324 204.2L315.8 212.4L307.7 204.2" stroke="#646464" strokeWidth="4" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M623.8 139.1H666.3V176.6H623.8V139.1Z" fill="#B3E3FF" stroke="#646464" strokeWidth="4" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M636.8 162.399H635.6L633.1 156.099H634.5L636.3 160.899L638.1 156.099H639.4L636.8 162.399ZM642.4 162.399V156.499H640.4V155.599C641.6 155.599 642.4 154.899 642.6 153.999H643.7V162.399H642.4ZM647 160.599C647.5 160.599 647.9 160.999 647.9 161.499C647.9 161.999 647.5 162.399 647 162.399C646.5 162.399 646.1 161.999 646.1 161.499C646.1 160.999 646.5 160.599 647 160.599ZM650.6 155.099C651.1 154.299 652 153.699 653.2 153.699C654.4 153.699 655.2 154.199 655.8 155.099C656.4 155.899 656.6 156.999 656.6 158.199C656.6 159.399 656.4 160.399 655.8 161.299C655.3 162.099 654.4 162.699 653.2 162.699C652 162.699 651.2 162.199 650.6 161.299C650 160.499 649.8 159.399 649.8 158.199C649.8 156.999 650.1 155.899 650.6 155.099ZM651.9 160.899C652.2 161.199 652.6 161.399 653.2 161.399C653.8 161.399 654.2 161.199 654.5 160.899C655 160.399 655.2 159.499 655.2 158.199C655.2 156.899 655 155.999 654.5 155.499C654.2 155.199 653.8 154.999 653.2 154.999C652.6 154.999 652.2 155.199 651.9 155.499C651.4 155.999 651.2 156.899 651.2 158.199C651.2 159.499 651.4 160.299 651.9 160.899Z" fill="#1D1D1D"/>
|
||||
<path d="M645 210.7V193.1M653.2 204.2L645 212.4L636.9 204.2" stroke="#646464" strokeWidth="4" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M64.4996 429.1H20.5996" stroke="#CCCCCC" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" stroke-dasharray="2 10 2 10"/>
|
||||
<path d="M246.9 490.6H21.2002" stroke="#CCCCCC" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" stroke-dasharray="2 10 2 10"/>
|
||||
<path d="M762.5 490.6H425.1" stroke="#CCCCCC" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" stroke-dasharray="2 10 2 10"/>
|
||||
<path d="M109.9 552.1H21.0996" stroke="#CCCCCC" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" stroke-dasharray="2 10 2 10"/>
|
||||
<path d="M762.3 552.1H393.8" stroke="#CCCCCC" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" stroke-dasharray="2 10 2 10"/>
|
||||
<path d="M283.5 5.19922H379.7V55.1992H283.5V5.19922Z" fill="#4CD3D6" stroke="#646464" strokeWidth="4" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M308.8 31.8008H307.2V36.1008H305.7V25.6008H309.7C311.7 25.6008 313 27.0008 313 28.8008C313 30.3008 312 31.5008 310.4 31.8008L312.9 36.3008H311.2L308.8 31.8008ZM309.5 30.5008C310.7 30.5008 311.5 29.8008 311.5 28.7008C311.5 27.6008 310.7 26.9008 309.5 26.9008H307.3V30.5008H309.5ZM321.6 34.1008C321.2 35.4008 320 36.4008 318.4 36.4008C316.5 36.4008 314.8 35.0008 314.8 32.5008C314.8 30.2008 316.4 28.7008 318.3 28.7008C320.5 28.7008 321.8 30.2008 321.8 32.5008V33.0008H316.4C316.4 34.3008 317.4 35.2008 318.6 35.2008C319.8 35.2008 320.4 34.6008 320.6 33.7008L321.6 34.1008ZM320.2 31.8008C320.2 30.8008 319.5 30.0008 318.2 30.0008C317 30.0008 316.3 30.9008 316.2 31.8008H320.2ZM324.2 36.2008V25.3008H325.6V36.2008H324.2ZM335.1 34.1008C334.7 35.4008 333.5 36.4008 331.9 36.4008C330 36.4008 328.3 35.0008 328.3 32.5008C328.3 30.2008 329.9 28.7008 331.8 28.7008C334 28.7008 335.3 30.2008 335.3 32.5008V33.0008H329.9C329.9 34.3008 330.9 35.2008 332.1 35.2008C333.3 35.2008 333.9 34.6008 334.1 33.7008L335.1 34.1008ZM333.7 31.8008C333.7 30.8008 333 30.0008 331.7 30.0008C330.5 30.0008 329.8 30.9008 329.7 31.8008H333.7ZM339.4 32.1008L341.4 31.8008C341.8 31.7008 342 31.5008 342 31.3008C342 30.6008 341.5 30.0008 340.4 30.0008C339.4 30.0008 338.9 30.6008 338.8 31.5008L337.4 31.2008C337.6 29.8008 338.8 28.9008 340.4 28.9008C342.6 28.9008 343.4 30.1008 343.4 31.5008V35.0008C343.4 35.6008 343.5 36.0008 343.5 36.2008H342C342 36.0008 341.9 35.7008 341.9 35.2008C341.6 35.7008 340.9 36.4008 339.6 36.4008C338.1 36.4008 337.2 35.4008 337.2 34.2008C337.2 33.0008 338.2 32.2008 339.4 32.1008ZM341.9 33.1008V32.8008L339.7 33.1008C339.1 33.2008 338.7 33.5008 338.7 34.2008C338.7 34.7008 339.2 35.2008 339.9 35.2008C341 35.2008 341.9 34.7008 341.9 33.1008ZM346.9 33.9008C347 34.7008 347.6 35.2008 348.6 35.2008C349.4 35.2008 349.8 34.7008 349.8 34.2008C349.8 33.8008 349.5 33.4008 348.9 33.3008L347.7 33.0008C346.6 32.8008 345.9 32.0008 345.9 31.0008C345.9 29.8008 347.1 28.7008 348.5 28.7008C350.5 28.7008 351.1 30.0008 351.2 30.6008L350 31.1008C349.9 30.7008 349.6 29.9008 348.5 29.9008C347.8 29.9008 347.3 30.4008 347.3 30.9008C347.3 31.3008 347.6 31.7008 348.1 31.8008L349.3 32.1008C350.6 32.4008 351.3 33.2008 351.3 34.2008C351.3 35.2008 350.4 36.4008 348.7 36.4008C346.7 36.4008 345.9 35.1008 345.8 34.3008L346.9 33.9008ZM360 34.1008C359.6 35.4008 358.4 36.4008 356.8 36.4008C354.9 36.4008 353.2 35.0008 353.2 32.5008C353.2 30.2008 354.8 28.7008 356.7 28.7008C358.9 28.7008 360.2 30.2008 360.2 32.5008V33.0008H354.8C354.8 34.3008 355.8 35.2008 357 35.2008C358.2 35.2008 358.8 34.6008 359 33.7008L360 34.1008ZM358.6 31.8008C358.6 30.8008 357.9 30.0008 356.6 30.0008C355.4 30.0008 354.7 30.9008 354.6 31.8008H358.6Z" fill="#1D1D1D"/>
|
||||
<path d="M421.3 5.19922H517.5V55.1992H421.3V5.19922Z" fill="#9F5EFF" stroke="#646464" strokeWidth="4" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M441.7 36.2008V25.6008H445.4C448.1 25.6008 450.5 27.4008 450.5 30.9008C450.5 34.4008 448.1 36.2008 445.4 36.2008H441.7ZM445.3 34.9008C447.3 34.9008 448.9 33.6008 448.9 30.9008C448.9 28.2008 447.3 26.9008 445.3 26.9008H443.1V34.9008H445.3ZM459.3 34.1008C458.9 35.4008 457.7 36.4008 456.1 36.4008C454.2 36.4008 452.5 35.0008 452.5 32.5008C452.5 30.2008 454.1 28.7008 455.9 28.7008C458.1 28.7008 459.4 30.2008 459.4 32.5008V33.0008H454C454 34.3008 455 35.2008 456.2 35.2008C457.4 35.2008 458 34.6008 458.2 33.7008L459.3 34.1008ZM457.9 31.8008C457.9 30.8008 457.2 30.0008 455.9 30.0008C454.7 30.0008 454 30.9008 453.9 31.8008H457.9ZM465.4 36.2008H464L461 29.0008H462.6L464.7 34.6008L466.8 29.0008H468.3L465.4 36.2008ZM476.1 34.1008C475.7 35.4008 474.5 36.4008 472.9 36.4008C471 36.4008 469.3 35.0008 469.3 32.5008C469.3 30.2008 470.9 28.7008 472.8 28.7008C475 28.7008 476.3 30.2008 476.3 32.5008V33.0008H470.9C470.9 34.3008 471.9 35.2008 473.1 35.2008C474.3 35.2008 474.9 34.6008 475.1 33.7008L476.1 34.1008ZM474.7 31.8008C474.7 30.8008 474 30.0008 472.7 30.0008C471.5 30.0008 470.8 30.9008 470.7 31.8008H474.7ZM478.7 36.2008V25.3008H480.1V36.2008H478.7ZM490.1 32.6008C490.1 34.8008 488.6 36.4008 486.4 36.4008C484.2 36.4008 482.7 34.8008 482.7 32.6008C482.7 30.4008 484.2 28.8008 486.4 28.8008C488.5 28.7008 490.1 30.4008 490.1 32.6008ZM488.6 32.6008C488.6 30.9008 487.6 30.0008 486.4 30.0008C485.2 30.0008 484.2 30.9008 484.2 32.6008C484.2 34.3008 485.2 35.2008 486.4 35.2008C487.6 35.2008 488.6 34.2008 488.6 32.6008ZM492.6 39.0008V29.0008H494V30.1008C494.4 29.4008 495.2 28.8008 496.4 28.8008C498.6 28.8008 499.7 30.5008 499.7 32.6008C499.7 34.7008 498.5 36.4008 496.3 36.4008C495.2 36.4008 494.3 35.9008 494 35.2008V39.0008H492.6ZM496.1 30.1008C494.8 30.1008 494 31.2008 494 32.6008C494 34.1008 494.9 35.2008 496.1 35.2008C497.4 35.2008 498.2 34.1008 498.2 32.6008C498.3 31.1008 497.5 30.1008 496.1 30.1008Z" fill="white"/>
|
||||
<path d="M145.8 5.19922H242V55.1992H145.8V5.19922Z" fill="#FF5E33" stroke="#646464" strokeWidth="4" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M180.9 36.1992V31.4992H175.5V36.1992H174V25.5992H175.5V30.0992H180.9V25.5992H182.4V36.1992H180.9ZM192.4 32.5992C192.4 34.7992 190.9 36.3992 188.7 36.3992C186.5 36.3992 185 34.7992 185 32.5992C185 30.3992 186.5 28.7992 188.7 28.7992C190.9 28.6992 192.4 30.3992 192.4 32.5992ZM191 32.5992C191 30.8992 190 29.9992 188.8 29.9992C187.6 29.9992 186.6 30.8992 186.6 32.5992C186.6 34.2992 187.6 35.1992 188.8 35.1992C190 35.1992 191 34.1992 191 32.5992ZM196.8 28.9992H198.4V30.2992H196.8V33.9992C196.8 34.6992 197.1 34.9992 197.8 34.9992C198 34.9992 198.2 34.9992 198.4 34.8992V36.0992C198.3 36.0992 197.9 36.1992 197.4 36.1992C196.2 36.1992 195.4 35.3992 195.4 34.0992V30.0992H194V28.9992H194.4C195.2 28.9992 195.5 28.4992 195.5 27.8992V26.6992H196.8V28.9992ZM204.6 25.3992V26.6992C204.5 26.6992 204.3 26.5992 204 26.5992C203.5 26.5992 202.9 26.7992 202.9 27.7992V28.9992H207.7V36.1992H206.3V30.2992H202.9V36.1992H201.4V30.2992H200.1V28.9992H201.4V27.7992C201.4 26.1992 202.5 25.2992 203.8 25.2992C204.2 25.2992 204.5 25.3992 204.6 25.3992ZM206.9 25.1992C207.5 25.1992 207.9 25.5992 207.9 26.1992C207.9 26.7992 207.4 27.1992 206.9 27.1992C206.3 27.1992 205.9 26.6992 205.9 26.1992C205.9 25.5992 206.4 25.1992 206.9 25.1992ZM212.4 32.4992L209.8 28.9992H211.5L213.3 31.4992L215 28.9992H216.7L214.1 32.4992C214.5 33.0992 216.3 35.5992 216.8 36.1992H215.1L213.2 33.4992L211.4 36.1992H209.7L212.4 32.4992Z" fill="white"/>
|
||||
<path d="M559.1 5.19922H655.3V55.1992H559.1V5.19922Z" fill="#4ED1A1" stroke="#646464" strokeWidth="4" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M581.6 35.6996V25.0996H588.1V26.4996H583.1V29.8996H587.6V31.2996H583.1V35.7996L581.6 35.6996ZM596.3 33.5996C595.9 34.8996 594.7 35.8996 593.1 35.8996C591.2 35.8996 589.5 34.4996 589.5 31.9996C589.5 29.6996 591.1 28.1996 593 28.1996C595.2 28.1996 596.5 29.6996 596.5 31.9996V32.4996H591.1C591.1 33.7996 592.1 34.6996 593.3 34.6996C594.5 34.6996 595.1 34.0996 595.3 33.1996L596.3 33.5996ZM594.8 31.2996C594.8 30.2996 594.1 29.4996 592.8 29.4996C591.6 29.4996 590.9 30.3996 590.8 31.2996H594.8ZM600.6 31.5996L602.6 31.2996C603 31.1996 603.2 30.9996 603.2 30.7996C603.2 30.0996 602.7 29.4996 601.6 29.4996C600.6 29.4996 600.1 30.0996 600 30.9996L598.7 30.6996C598.9 29.2996 600.1 28.3996 601.7 28.3996C603.9 28.3996 604.7 29.5996 604.7 30.9996V34.5996C604.7 35.1996 604.8 35.5996 604.8 35.7996H603.4C603.4 35.5996 603.3 35.2996 603.3 34.7996C603 35.2996 602.3 35.9996 601 35.9996C599.5 35.9996 598.6 34.9996 598.6 33.7996C598.4 32.4996 599.3 31.6996 600.6 31.5996ZM603.1 32.5996V32.2996L600.9 32.5996C600.3 32.6996 599.9 32.9996 599.9 33.6996C599.9 34.1996 600.4 34.6996 601.1 34.6996C602.2 34.6996 603.1 34.1996 603.1 32.5996ZM609.3 28.4996H610.9V29.7996H609.3V33.5996C609.3 34.2996 609.6 34.5996 610.3 34.5996C610.5 34.5996 610.7 34.5996 610.9 34.4996V35.6996C610.8 35.6996 610.4 35.7996 609.9 35.7996C608.7 35.7996 607.9 34.9996 607.9 33.6996V29.6996H606.5V28.3996H606.9C607.7 28.3996 608 27.8996 608 27.2996V26.0996H609.3V28.4996ZM616.1 35.8996C614.4 35.8996 613.4 34.5996 613.4 32.9996V28.4996H614.8V32.7996C614.8 33.7996 615.3 34.6996 616.4 34.6996C617.5 34.6996 618.1 33.8996 618.1 32.8996V28.5996H619.5V34.4996C619.5 35.0996 619.5 35.5996 619.6 35.7996H618.3C618.3 35.5996 618.2 35.1996 618.2 34.8996C617.9 35.5996 617 35.8996 616.1 35.8996ZM626.8 29.8996H626.2C625 29.8996 624.2 30.4996 624.2 32.0996V35.6996H622.8V28.4996H624.2V29.7996C624.7 28.6996 625.6 28.3996 626.4 28.3996H626.9V29.8996H626.8ZM635.2 33.5996C634.8 34.8996 633.6 35.8996 632 35.8996C630.1 35.8996 628.4 34.4996 628.4 31.9996C628.4 29.6996 630 28.1996 631.9 28.1996C634.1 28.1996 635.4 29.6996 635.4 31.9996V32.4996H630C630 33.7996 631 34.6996 632.2 34.6996C633.4 34.6996 634 34.0996 634.2 33.1996L635.2 33.5996ZM633.8 31.2996C633.8 30.2996 633.1 29.4996 631.8 29.4996C630.6 29.4996 629.9 30.3996 629.8 31.2996H633.8Z" fill="#1D1D1D"/>
|
||||
<path d="M696.8 5.19922H793V55.1992H696.8V5.19922Z" fill="#4ED1A1" stroke="#646464" strokeWidth="4" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M719.4 35.6996V25.0996H725.9V26.4996H720.9V29.8996H725.4V31.2996H720.9V35.7996L719.4 35.6996ZM734 33.5996C733.6 34.8996 732.4 35.8996 730.8 35.8996C728.9 35.8996 727.2 34.4996 727.2 31.9996C727.2 29.6996 728.8 28.1996 730.6 28.1996C732.8 28.1996 734.1 29.6996 734.1 31.9996V32.4996H728.7C728.7 33.7996 729.7 34.6996 730.9 34.6996C732.1 34.6996 732.7 34.0996 732.9 33.1996L734 33.5996ZM732.6 31.2996C732.6 30.2996 731.9 29.4996 730.6 29.4996C729.4 29.4996 728.7 30.3996 728.6 31.2996H732.6ZM738.4 31.5996L740.3 31.2996C740.7 31.1996 740.9 30.9996 740.9 30.7996C740.9 30.0996 740.4 29.4996 739.3 29.4996C738.3 29.4996 737.8 30.0996 737.7 30.9996L736.3 30.6996C736.5 29.2996 737.7 28.3996 739.3 28.3996C741.5 28.3996 742.3 29.5996 742.3 30.9996V34.5996C742.3 35.1996 742.4 35.5996 742.4 35.7996H741C741 35.5996 740.9 35.2996 740.9 34.7996C740.6 35.2996 739.9 35.9996 738.6 35.9996C737.1 35.9996 736.2 34.9996 736.2 33.7996C736.2 32.4996 737.1 31.6996 738.4 31.5996ZM740.9 32.5996V32.2996L738.7 32.5996C738.1 32.6996 737.7 32.9996 737.7 33.6996C737.7 34.1996 738.1 34.6996 738.9 34.6996C739.9 34.6996 740.9 34.1996 740.9 32.5996ZM747.1 28.4996H748.7V29.7996H747.1V33.5996C747.1 34.2996 747.4 34.5996 748.1 34.5996C748.3 34.5996 748.5 34.5996 748.7 34.4996V35.6996C748.6 35.6996 748.2 35.7996 747.7 35.7996C746.5 35.7996 745.7 34.9996 745.7 33.6996V29.6996H744.3V28.3996H744.7C745.5 28.3996 745.8 27.8996 745.8 27.2996V26.0996H747.1V28.4996ZM753.9 35.8996C752.2 35.8996 751.2 34.5996 751.2 32.9996V28.4996H752.6V32.7996C752.6 33.7996 753.1 34.6996 754.2 34.6996C755.3 34.6996 755.9 33.8996 755.9 32.8996V28.5996H757.3V34.4996C757.3 35.0996 757.3 35.5996 757.4 35.7996H756.1C756.1 35.5996 756 35.1996 756 34.8996C755.7 35.5996 754.8 35.8996 753.9 35.8996ZM764.5 29.8996H763.9C762.7 29.8996 761.9 30.4996 761.9 32.0996V35.6996H760.5V28.4996H761.9V29.7996C762.4 28.6996 763.3 28.3996 764.1 28.3996H764.6V29.8996H764.5ZM773 33.5996C772.6 34.8996 771.4 35.8996 769.8 35.8996C767.9 35.8996 766.2 34.4996 766.2 31.9996C766.2 29.6996 767.8 28.1996 769.7 28.1996C771.9 28.1996 773.2 29.6996 773.2 31.9996V32.4996H767.8C767.8 33.7996 768.8 34.6996 770 34.6996C771.2 34.6996 771.8 34.0996 772 33.1996L773 33.5996ZM771.6 31.2996C771.6 30.2996 770.9 29.4996 769.6 29.4996C768.4 29.4996 767.7 30.3996 767.6 31.2996H771.6Z" fill="#1D1D1D"/>
|
||||
<path d="M84.9004 275V398.4C84.9004 415.4 98.7004 429.2 115.7 429.2H211.4" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M195.6 444.8C204.271 444.8 211.3 437.771 211.3 429.1C211.3 420.43 204.271 413.4 195.6 413.4C186.93 413.4 179.9 420.43 179.9 429.1C179.9 437.771 186.93 444.8 195.6 444.8Z" fill="#9F5EFF" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M148.7 444.901C157.426 444.901 164.5 437.827 164.5 429.101C164.5 420.375 157.426 413.301 148.7 413.301C139.974 413.301 132.9 420.375 132.9 429.101C132.9 437.827 139.974 444.901 148.7 444.901Z" fill="#9F5EFF" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M148.7 321.901C157.426 321.901 164.5 314.827 164.5 306.101C164.5 297.375 157.426 290.301 148.7 290.301C139.974 290.301 132.9 297.375 132.9 306.101C132.9 314.827 139.974 321.901 148.7 321.901Z" fill="#FF5E33" stroke="#646464" strokeWidth="4" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M536.5 398.4C536.5 415.4 522.7 429.2 505.7 429.2M760.5 429.2H737.5C720.5 429.2 706.7 415.4 706.7 398.4C706.7 381.4 692.9 367.6 675.9 367.6H568.1H567.2C550.2 367.6 536.4 381.4 536.4 398.4" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M645 383.401C653.726 383.401 660.8 376.327 660.8 367.601C660.8 358.875 653.726 351.801 645 351.801C636.274 351.801 629.2 358.875 629.2 367.601C629.2 376.327 636.274 383.401 645 383.401Z" fill="#4CD3D6" stroke="#646464" strokeWidth="4" strokeMiterlimit="10" strokeLinejoin="round"/>
|
||||
<path d="M598.2 383.401C606.926 383.401 614 376.327 614 367.601C614 358.875 606.926 351.801 598.2 351.801C589.474 351.801 582.4 358.875 582.4 367.601C582.4 376.327 589.474 383.401 598.2 383.401Z" fill="#4CD3D6" stroke="#646464" strokeWidth="4" strokeMiterlimit="10" strokeLinejoin="round"/>
|
||||
<path d="M148.7 444.9V536.4M164.5 305.7H211.7M645 351.9V260.4" stroke="#646464" strokeWidth="4" strokeMiterlimit="10"/>
|
||||
<path d="M8 5.19922H104.2V55.1992H8V5.19922Z" fill="#B3E3FF" stroke="#646464" strokeWidth="4" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M40.9004 36.2988V26.2988H42.9004L45.3004 33.3988C45.5004 34.0988 45.7004 34.5988 45.8004 34.8988C45.9004 34.4988 46.1004 33.9988 46.3004 33.2988L48.7004 26.2988H50.5004V36.2988H49.2004V27.8988L46.3004 36.2988H45.1004L42.2004 27.7988V36.2988H40.9004Z" fill="#414141"/>
|
||||
<path d="M57.9008 35.3988C57.4008 35.7988 57.0008 36.0988 56.6008 36.1988C56.2008 36.3988 55.7008 36.3988 55.2008 36.3988C54.4008 36.3988 53.8008 36.1988 53.4008 35.7988C53.0008 35.3988 52.8008 34.8988 52.8008 34.2988C52.8008 33.8988 52.9008 33.5988 53.0008 33.2988C53.2008 32.9988 53.4008 32.7988 53.6008 32.5988C53.9008 32.3988 54.2008 32.2988 54.5008 32.1988C54.7008 32.0988 55.1008 32.0988 55.6008 31.9988C56.6008 31.8988 57.3008 31.6988 57.8008 31.5988C57.8008 31.3988 57.8008 31.2988 57.8008 31.2988C57.8008 30.7988 57.7008 30.3988 57.5008 30.1988C57.2008 29.8988 56.7008 29.7988 56.1008 29.7988C55.5008 29.7988 55.1008 29.8988 54.8008 30.0988C54.5008 30.2988 54.3008 30.6988 54.2008 31.1988L53.0008 30.9988C53.1008 30.4988 53.3008 30.0988 53.5008 29.7988C53.8008 29.4988 54.1008 29.1988 54.6008 29.0988C55.1008 28.8988 55.6008 28.7988 56.2008 28.7988C56.8008 28.7988 57.3008 28.8988 57.7008 28.9988C58.1008 29.0988 58.4008 29.2988 58.6008 29.5988C58.8008 29.7988 58.9008 30.0988 59.0008 30.3988C59.0008 30.5988 59.1008 30.9988 59.1008 31.4988V33.0988C59.1008 34.1988 59.1008 34.9988 59.2008 35.2988C59.3008 35.5988 59.4008 35.8988 59.5008 36.1988H58.2008C58.0008 36.0988 57.9008 35.7988 57.9008 35.3988ZM57.8008 32.6988C57.4008 32.8988 56.7008 32.9988 55.8008 33.1988C55.3008 33.2988 54.9008 33.3988 54.7008 33.3988C54.5008 33.3988 54.3008 33.5988 54.2008 33.7988C54.1008 33.9988 54.0008 34.1988 54.0008 34.3988C54.0008 34.6988 54.1008 34.9988 54.4008 35.1988C54.6008 35.3988 55.0008 35.4988 55.5008 35.4988C56.0008 35.4988 56.4008 35.3988 56.8008 35.1988C57.2008 34.9988 57.4008 34.6988 57.6008 34.2988C57.7008 33.9988 57.8008 33.5988 57.8008 33.0988V32.6988Z" fill="#414141"/>
|
||||
<path d="M61.6006 27.6988V26.2988H62.8006V27.6988H61.6006ZM61.6006 36.2988V28.9988H62.8006V36.2988H61.6006Z" fill="#414141"/>
|
||||
<path d="M65.4004 36.2988V28.9988H66.5004V29.9988C67.0004 29.1988 67.8004 28.7988 68.8004 28.7988C69.2004 28.7988 69.6004 28.8988 70.0004 28.9988C70.4004 29.1988 70.6004 29.3988 70.8004 29.5988C71.0004 29.7988 71.1004 30.1988 71.2004 30.4988C71.2004 30.6988 71.3004 31.0988 71.3004 31.6988V36.1988H70.1004V31.7988C70.1004 31.2988 70.1004 30.8988 70.0004 30.6988C69.9004 30.4988 69.7004 30.2988 69.5004 30.0988C69.3004 29.9988 69.0004 29.8988 68.6004 29.8988C68.1004 29.8988 67.6004 30.0988 67.2004 30.3988C66.8004 30.6988 66.6004 31.3988 66.6004 32.2988V36.2988H65.4004Z" fill="#414141"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 26 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
|
@ -0,0 +1,35 @@
|
|||
# Quick start
|
||||
|
||||
It is recommended to install `docsify-cli` globally, which helps initializing and previewing the website locally.
|
||||
|
||||
```bash
|
||||
npm i docsify-cli -g
|
||||
```
|
||||
|
||||
### Initialize
|
||||
|
||||
If you want to write the documentation in the `./docs` subdirectory, you can use the `init` command.
|
||||
|
||||
```bash
|
||||
docsify init ./docs
|
||||
```
|
||||
|
||||
### Writing content
|
||||
|
||||
After the `init` is complete, you can see the file list in the `./docs` subdirectory.
|
||||
|
||||
- `index.html` as the entry file
|
||||
- `README.md` as the home page
|
||||
- `.nojekyll` prevents GitHub Pages from ignoring files that begin with an underscore
|
||||
|
||||
You can easily update the documentation in `./docs/README.md`, of course you can add more pages.
|
||||
|
||||
### Preview your site
|
||||
|
||||
Run the local server with `docsify serve`. You can preview your site in your browser on `http://localhost:3000`.
|
||||
|
||||
```bash
|
||||
docsify serve docs
|
||||
```
|
||||
|
||||
?> For more use cases of `docsify-cli`, head over to the [docsify-cli documentation](https://github.com/docsifyjs/docsify-cli).
|
||||
|
|
@ -0,0 +1,380 @@
|
|||
# Why Documentation is Important for Developers
|
||||
|
||||
Documentation helps developers work efficiently and ensures projects run smoothly. Here’s why it’s crucial:
|
||||
|
||||
1. **Knowledge Sharing**: It helps team members understand the system and communicate effectively, especially when new people join the project.
|
||||
|
||||
2. **Code Maintenance**: Good documentation makes it easier to fix bugs, make updates, and keep the code consistent.
|
||||
|
||||
3. **Project Longevity**: It ensures that project knowledge is preserved, so future developers can maintain or improve the code without confusion.
|
||||
|
||||
4. **Troubleshooting**: Developers can quickly find solutions to problems or understand past decisions, saving time and reducing errors.
|
||||
|
||||
5. **Testing and Quality**: Documentation helps ensure the right testing processes are followed, leading to better-quality code.
|
||||
|
||||
6. **Efficiency**: It saves time by reducing the need to explain things repeatedly or search for answers.
|
||||
|
||||
In short, internal documentation keeps projects organized, helps teams collaborate, and ensures the software can be maintained and improved over time.
|
||||
|
||||
---
|
||||
|
||||
## Guide to Writing Modular Documentation for React Projects
|
||||
|
||||
Modular documentation refers to organizing your documentation into independent, reusable sections or modules. Each module typically covers a specific part of your project, making it easier to update and navigate.
|
||||
|
||||
In the context of React, modular documentation should cover both React components and the overall architecture of the app.
|
||||
|
||||
### Split Documentation into Smaller Sections
|
||||
|
||||
When documenting, break down each part of your codebase into its smallest logical unit:
|
||||
|
||||
1. **Functions**: Explain its purpose, inputs (arguments), and outputs (returns).
|
||||
2. **Components**: Detail props, their types, default values, and the UI they render.
|
||||
3. **Utilities/Helpers**: Document what a utility does, its inputs, and outputs.
|
||||
4. **APIs**: Cover the endpoint, request format, and expected response.
|
||||
|
||||
Each section should have a consistent structure for easy understanding and reference.
|
||||
|
||||
## Documenting Functions
|
||||
|
||||
#### Structure for Documenting Functions
|
||||
|
||||
1. **Function Name**: A short and descriptive name.
|
||||
2. **Purpose**: Briefly explain what the function does.
|
||||
3. **Inputs**:
|
||||
- List each parameter.
|
||||
- Include types and default values if applicable.
|
||||
4. **Output**: Describe the return value and its type.
|
||||
5. **Code Examples**: Provide a usage example.
|
||||
|
||||
#### Example: Utility Function Documentation
|
||||
|
||||
````markdown
|
||||
## `formatDate`
|
||||
|
||||
### Purpose
|
||||
|
||||
The `formatDate` function converts a `Date` object into a human-readable string format.
|
||||
|
||||
### Inputs
|
||||
|
||||
| Parameter | Type | Default Value | Description |
|
||||
| --------- | -------- | ------------- | -------------------------- |
|
||||
| `date` | `Date` | - | The date object to format. |
|
||||
| `locale` | `string` | `"en-US"` | The locale for formatting. |
|
||||
|
||||
### Output
|
||||
|
||||
Returns a `string` representing the formatted date.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
import { formatDate } from "./utils";
|
||||
|
||||
const date = new Date("2024-11-21");
|
||||
console.log(formatDate(date)); // Output: "November 21, 2024"
|
||||
```
|
||||
````
|
||||
|
||||
## Documenting Components
|
||||
|
||||
#### Structure for Documenting Components
|
||||
|
||||
1. **Component Name**: Name of the React component.
|
||||
2. **Purpose**: Explain what the component is for and its use case.
|
||||
3. **Props**:
|
||||
- List each prop.
|
||||
- Include type, whether it’s required, and default value.
|
||||
4. **Behavior**: Describe what the component does and any side effects.
|
||||
5. **Output**: Explain what the component renders or returns.
|
||||
6. **Code Examples**: Show how to use the component.
|
||||
|
||||
#### Example: Component Documentation
|
||||
|
||||
`````markdown
|
||||
## `Button`
|
||||
|
||||
### Purpose
|
||||
|
||||
The `Button` component renders a clickable button with customizable styles and behavior.
|
||||
|
||||
### Props
|
||||
|
||||
| Prop Name | Type | Required | Default Value | Description |
|
||||
| ---------- | ---------- | -------- | ------------- | ---------------------------------- |
|
||||
| `label` | `string` | Yes | - | The text displayed on the button. |
|
||||
| `onClick` | `function` | No | `() => {}` | The function to call when clicked. |
|
||||
| `disabled` | `boolean` | No | `false` | Disables the button if true. |
|
||||
| `style` | `object` | No | `{}` | Inline styles for the button. |
|
||||
|
||||
### Behavior
|
||||
|
||||
- If `disabled` is true, the button cannot be clicked.
|
||||
- The `onClick` function will only be called when the button is enabled.
|
||||
|
||||
### Output
|
||||
|
||||
Renders a `<button>` element styled based on the passed props.
|
||||
|
||||
### Example
|
||||
|
||||
```jsx
|
||||
import Button from "./components/Button";
|
||||
|
||||
<Button
|
||||
label="Submit"
|
||||
onClick={() => console.log("Clicked")}
|
||||
disabled={false}
|
||||
style={{ color: "white", backgroundColor: "blue" }}
|
||||
/>;
|
||||
```
|
||||
|
||||
## Documenting Advanced Components
|
||||
|
||||
For components with complex functionality (e.g., controlled components, form components, or components interacting with APIs), follow these additional guidelines:
|
||||
|
||||
1. **State Management**: Document the state it manages and how to interact with it.
|
||||
2. **Lifecycle**: If it uses React lifecycle methods or hooks, explain their purpose.
|
||||
3. **Events**: Document events (e.g., `onChange`, `onBlur`) and their payloads.
|
||||
|
||||
#### Example: Complex Component Documentation
|
||||
|
||||
````markdown
|
||||
## `SearchBar`
|
||||
|
||||
### Purpose
|
||||
|
||||
The `SearchBar` component provides a text input for users to search and emits search queries through the `onSearch` event.
|
||||
|
||||
### Props
|
||||
|
||||
| Prop Name | Type | Required | Default Value | Description |
|
||||
| ------------- | ---------- | -------- | ------------- | -------------------------------------------- |
|
||||
| `placeholder` | `string` | No | `"Search..."` | The placeholder text for the input. |
|
||||
| `onSearch` | `function` | Yes | - | Callback fired when the search is submitted. |
|
||||
| `debounce` | `number` | No | `300` | Time in milliseconds to debounce user input. |
|
||||
|
||||
### Behavior
|
||||
|
||||
1. The component manages the `inputValue` state.
|
||||
2. After the user stops typing for the `debounce` duration, it triggers the `onSearch` callback with the input value.
|
||||
|
||||
### Output
|
||||
|
||||
Renders:
|
||||
|
||||
- A `<div>` wrapper.
|
||||
- An `<input>` field styled with default or custom styles.
|
||||
|
||||
### Example
|
||||
|
||||
```jsx
|
||||
import SearchBar from "./components/SearchBar";
|
||||
|
||||
<SearchBar
|
||||
placeholder="Search items..."
|
||||
onSearch={(query) => console.log(query)}
|
||||
debounce={500}
|
||||
/>;
|
||||
```
|
||||
````
|
||||
`````
|
||||
|
||||
## Documenting Custom Hooks
|
||||
|
||||
#### Structure for Documenting Hooks
|
||||
|
||||
1. **Hook Name**: Name of the hook.
|
||||
2. **Purpose**: Why it’s used and what it does.
|
||||
3. **Inputs**: Parameters passed to the hook.
|
||||
4. **State/Outputs**: State or values returned by the hook.
|
||||
5. **Usage**: Show an example.
|
||||
|
||||
#### Example: Hook Documentation
|
||||
|
||||
````markdown
|
||||
## `useFetch`
|
||||
|
||||
### Purpose
|
||||
|
||||
The `useFetch` hook manages data fetching and provides loading, error, and response states.
|
||||
|
||||
### Inputs
|
||||
|
||||
| Parameter | Type | Required | Default Value | Description |
|
||||
| --------- | -------- | -------- | ------------- | ------------------------------------- |
|
||||
| `url` | `string` | Yes | - | The endpoint to fetch data from. |
|
||||
| `options` | `object` | No | `{}` | Fetch options like headers or method. |
|
||||
|
||||
### State/Outputs
|
||||
|
||||
| State Name | Type | Description |
|
||||
| ---------- | --------- | ---------------------------------------- |
|
||||
| `data` | `any` | The response data from the API. |
|
||||
| `loading` | `boolean` | Indicates if the request is in progress. |
|
||||
| `error` | `object` | The error object if the request fails. |
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
import { useFetch } from "./hooks/useFetch";
|
||||
|
||||
const MyComponent = () => {
|
||||
const { data, loading, error } = useFetch("/api/data");
|
||||
|
||||
if (loading) return <p>Loading...</p>;
|
||||
if (error) return <p>Error: {error.message}</p>;
|
||||
|
||||
return <div>{JSON.stringify(data)}</div>;
|
||||
};
|
||||
```
|
||||
````
|
||||
|
||||
#### General Best Practices for Modular Documentation
|
||||
|
||||
1. **Be Consistent**: Use the same format for all functions, components, and hooks.
|
||||
2. **Focus on Inputs and Outputs**: Developers care about what they give and what they get.
|
||||
3. **Use Examples**: Code examples make documentation actionable.
|
||||
4. **Avoid Overloading**: Document each function/component in its own file if it’s complex.
|
||||
5. **Explain Behavior**: Describe any side effects, state changes, or interactions.
|
||||
|
||||
---
|
||||
|
||||
## Guide to Managing Files and Folders for Documentation in Docsify
|
||||
|
||||
Docsify is a flexible tool for generating documentation from markdown files. To keep your Docsify-based project well-organized, here’s a guide on how to manage files and folders effectively.
|
||||
|
||||
#### 1. Project Structure Overview
|
||||
|
||||
A clean folder structure is crucial for scalability, readability, and ease of maintenance. Below is a suggested structure:
|
||||
|
||||
```
|
||||
/docs # Root folder for your Docsify project
|
||||
│
|
||||
├── /assets/ # Static resources (images, videos, files, etc.)
|
||||
│ └── /images/ # Folder for images used in your docs
|
||||
│ └── gitWorkFlow.svg # Example image used in documentation
|
||||
│ └── /videos/ # Folder for tutorial videos or related media
|
||||
│ └── walkthrough.mp4 # old walkthrough presentation
|
||||
│
|
||||
├── /documents/ # Folder for the main documentation content
|
||||
│ └── docsifyGuide.md # Documentation for setting up and using Docsify
|
||||
│ └── projectStructure.md # Explanation of the project structure and organization
|
||||
│ └── /components/ # Folder for documentation on different components
|
||||
│ └── input.md # Input component documentation
|
||||
│ └── others.md # Other components documentation
|
||||
│ └── etc.md # Any additional miscellaneous documentation
|
||||
│
|
||||
├── /style/ # Folder for custom styles
|
||||
│ └── style.css # Custom CSS file for styling the documentation
|
||||
│
|
||||
└── index.html # Main entry point for Docsify (loads the documentation)
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### 2. Folder Breakdown
|
||||
|
||||
- **/docs**: This is the core folder that contains all of your Markdown (`.md`) files. You can organize these files by sections or topics such as guides, API references, and tutorials. Subfolders like `/guide`, `/reference`, or `/tutorials` help keep related files together.
|
||||
|
||||
- **/assets**: This folder is for any images, diagrams, videos, or other static files referenced in your documentation. It's best to organize your media into subfolders based on the section they belong to.
|
||||
|
||||
Example:
|
||||
|
||||
```
|
||||
/assets
|
||||
├── /images/
|
||||
│ ├── diagram1.png
|
||||
│ └── screenshot.png
|
||||
└── /videos/
|
||||
└── tutorial.mp4
|
||||
```
|
||||
|
||||
- **/lib**: If you want to add custom JavaScript or other scripts to enhance Docsify’s functionality, place them in the `/lib` folder. This can include themes, custom navigation, or interactive features.
|
||||
|
||||
---
|
||||
|
||||
#### 3. Naming Conventions
|
||||
|
||||
Use simple, descriptive names for your files and folders. Avoid spaces in filenames—use hyphens (`-`) instead. For example:
|
||||
|
||||
- **Correct**: `installation-guide.md`, `api-reference.md`
|
||||
- **Incorrect**: `installation guide.md`, `api reference.md`
|
||||
|
||||
This keeps URLs and links consistent and easier to handle.
|
||||
|
||||
---
|
||||
|
||||
#### 4. Organizing Documentation Files
|
||||
|
||||
1. **Homepage (index.md)**:
|
||||
The `index.md` file serves as the homepage for your documentation. It should provide an introduction to the project and link to other sections of your documentation.
|
||||
|
||||
2. **Guide Section**:
|
||||
Place introductory content, installation instructions, and tutorials in the `/guide` folder. Each file should be named based on its content (e.g., `installation.md`, `getting-started.md`).
|
||||
|
||||
3. **Reference Section**:
|
||||
For API documentation or technical references, create a `/reference` folder. You might have files like `api-reference.md`, `config.md`, or `troubleshooting.md`.
|
||||
|
||||
4. **Assets**:
|
||||
Organize images, videos, or diagrams in the `/assets` folder. Keep this structure consistent across sections (e.g., `/assets/images/`, `/assets/videos/`).
|
||||
|
||||
---
|
||||
|
||||
#### 5. Writing the \_sidebar.md File
|
||||
|
||||
The `_sidebar.md` file controls the sidebar navigation in Docsify. It defines the links that appear on the sidebar, which can point to sections of the documentation or external URLs.
|
||||
|
||||
Here’s how to structure the `_sidebar.md` file:
|
||||
|
||||
- **Basic Structure**:
|
||||
You can list the sections of your documentation as clickable links. Use Markdown syntax to link to the different `.md` files within your `/docs` folder.
|
||||
|
||||
Example:
|
||||
|
||||
```markdown
|
||||
- [Home](/) # Link to the homepage
|
||||
- [Getting Started](/guide/intro.md) # Link to the "Getting Started" guide
|
||||
- [API Reference](/reference/api.md) # Link to the API documentation
|
||||
- [Installation](/guide/installation.md) # Link to the installation guide
|
||||
```
|
||||
|
||||
- **Nested Links**:
|
||||
To organize sections into subcategories, you can nest links under headings. This helps create a hierarchical structure in the sidebar.
|
||||
|
||||
Example:
|
||||
|
||||
```markdown
|
||||
- [Home](/)
|
||||
- [Guide](/guide/intro.md)
|
||||
- [Introduction](/guide/intro.md)
|
||||
- [Usage](/guide/usage.md)
|
||||
- [API Reference](/reference/api.md)
|
||||
- [Authentication](/reference/authentication.md)
|
||||
- [Endpoints](/reference/endpoints.md)
|
||||
```
|
||||
|
||||
- **External Links**:
|
||||
You can also add external links to resources outside of your Docsify project.
|
||||
|
||||
Example:
|
||||
|
||||
```markdown
|
||||
- [External Resource](https://example.com)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### 6. Managing Large Projects
|
||||
|
||||
For large documentation projects, it’s best to break content into smaller, manageable sections. This will help keep the documentation organized and make it easier for team members to collaborate.
|
||||
|
||||
- **Modular Sections**:
|
||||
Use subfolders like `/getting-started/`, `/setup/`, and `/troubleshooting/` to logically divide your content. Each section should have its own introduction, details, and examples.
|
||||
|
||||
- **Indexing**:
|
||||
Consider creating an `index.md` in each major folder (e.g., `/guide/index.md`, `/reference/index.md`) for clarity and easy navigation.
|
||||
|
||||
---
|
||||
|
|
@ -0,0 +1,338 @@
|
|||
## Git basic Workflow
|
||||
|
||||
<p align="center">
|
||||
<img src="../assets/images/gitWorkFlow.svg" alt="Git basic Workflow">
|
||||
<p align="center">Fig.1 - Git basic Workflow</p>
|
||||
</p>
|
||||
|
||||
---
|
||||
|
||||
## Git Commands
|
||||
|
||||
1. Initialize git:
|
||||
|
||||
```bash
|
||||
git init
|
||||
```
|
||||
|
||||
2. Check remote repository:
|
||||
|
||||
```bash
|
||||
git remote
|
||||
git remote -v
|
||||
```
|
||||
|
||||
3. Connect to remote repository (optional):
|
||||
If remote repository is not connected use,
|
||||
|
||||
```bash
|
||||
git remote add origin http://185.100.212.76:7776/Vishnu/modeling_app.git
|
||||
```
|
||||
|
||||
To change url use,
|
||||
|
||||
```bash
|
||||
git remote set-url origin http://185.100.212.76:7776/Vishnu/modeling_app.git
|
||||
```
|
||||
|
||||
4. Fetch from origin:
|
||||
|
||||
On fetch mention --all to pull all branches or mention remote_name and branch_name to fetch a particular branch.
|
||||
Use --force to perform force Pull.
|
||||
|
||||
```bash
|
||||
git fetch
|
||||
git pull
|
||||
```
|
||||
|
||||
5. Staging and Commit changes:
|
||||
|
||||
- "." indicated all changed files will be staged.
|
||||
- For, specific file replace "." with the path to the specific file or directory(folder).
|
||||
- "commit message" - replace text in this phrase to your commit discription.
|
||||
|
||||
**Staging**
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git add path/to/directory_or_file
|
||||
```
|
||||
|
||||
To Unstage all files that were added to the staging area but does not affect the working directory:
|
||||
|
||||
```bash
|
||||
git reset
|
||||
```
|
||||
|
||||
**Commit**
|
||||
|
||||
```bash
|
||||
git commit -m "commit message"
|
||||
```
|
||||
|
||||
Creates a new commit that undoes the changes introduced by the specified commit, use --hard for discarding all changes since that commit (Warning: This command can permanently delete data.):
|
||||
|
||||
```bash
|
||||
git revert commit_hash
|
||||
```
|
||||
|
||||
6. Inspecting Commits:
|
||||
|
||||
- View the commit history:
|
||||
|
||||
```bash
|
||||
git log
|
||||
```
|
||||
|
||||
- View a graph of commits:
|
||||
|
||||
```bash
|
||||
git log --graph --oneline --all
|
||||
```
|
||||
|
||||
7. Push to remote repository:
|
||||
|
||||
- If the branch is creted for the first time and dose not located in the remote repsitory. Use,
|
||||
|
||||
```bash
|
||||
git push --set-upstream origin new_branch_name
|
||||
```
|
||||
|
||||
- Normal push
|
||||
|
||||
```bash
|
||||
git push origin new_branch_name
|
||||
```
|
||||
|
||||
- Force push and Safer force push
|
||||
|
||||
```bash
|
||||
git push --force
|
||||
git push --force-with-lease
|
||||
```
|
||||
|
||||
- Delete branch in remote repository
|
||||
|
||||
```bash
|
||||
git push origin --delete branch_name
|
||||
```
|
||||
|
||||
8. Creating and Switching Branches:
|
||||
|
||||
- To check current branch name. Use,
|
||||
|
||||
```bash
|
||||
git remote
|
||||
```
|
||||
|
||||
- To checkout from current branch and move to another branch. Use,
|
||||
|
||||
```bash
|
||||
git checkout branch_name
|
||||
```
|
||||
|
||||
- To checkout from current branch and create new branch. Use,
|
||||
|
||||
```bash
|
||||
git checkout -b new_branch_name
|
||||
```
|
||||
|
||||
9. Merging branches:
|
||||
|
||||
- Merges the specified branch to the current active branch:
|
||||
|
||||
```bash
|
||||
git merge branch_name
|
||||
```
|
||||
|
||||
- This will only perform the merge if it can be fast-forwarded. If a fast-forward isn't possible, Git will abort the merge:
|
||||
|
||||
```bash
|
||||
git merge --ff-only branch_name
|
||||
```
|
||||
|
||||
- Provide a custom merge commit message:
|
||||
|
||||
```bash
|
||||
git merge -m "Custom merge message" branch_name
|
||||
```
|
||||
|
||||
- Merge without committing automatically:
|
||||
|
||||
```bash
|
||||
git merge --no-commit branch_name
|
||||
```
|
||||
|
||||
- Continue the merge after resolving conflicts:
|
||||
|
||||
```bash
|
||||
git merge --continue
|
||||
```
|
||||
|
||||
- Abort a merge in progress:
|
||||
|
||||
```bash
|
||||
git merge --abort
|
||||
```
|
||||
|
||||
10. Stash changes:
|
||||
|
||||
- Stashes changes made in current branch:
|
||||
|
||||
```bash
|
||||
git stash
|
||||
```
|
||||
|
||||
- Stashes changes made in current branch with message:
|
||||
|
||||
```bash
|
||||
git stash save "message"
|
||||
```
|
||||
|
||||
- Apply Latest stash and apply and remove form stash list:
|
||||
|
||||
```bash
|
||||
git stash apply
|
||||
git stash pop
|
||||
```
|
||||
|
||||
- View Stash:
|
||||
|
||||
```bash
|
||||
git stash list
|
||||
```
|
||||
|
||||
- Clear all stashes:
|
||||
|
||||
```bash
|
||||
git stash clear
|
||||
```
|
||||
|
||||
- Remove the latest stash:
|
||||
|
||||
```bash
|
||||
git stash drop
|
||||
```
|
||||
|
||||
11. Branch commands:
|
||||
|
||||
- To View all local and remote branches
|
||||
|
||||
```bash
|
||||
git branch
|
||||
git branch -a
|
||||
```
|
||||
|
||||
- To Create branch
|
||||
|
||||
```bash
|
||||
git branch branch_name
|
||||
```
|
||||
|
||||
- To switch between branch
|
||||
|
||||
```bash
|
||||
git checkout branch_name
|
||||
```
|
||||
|
||||
Alternatively if you want to bring the changes to the new branch,
|
||||
|
||||
```bash
|
||||
git switch branch_name
|
||||
```
|
||||
|
||||
- To switch between branch
|
||||
|
||||
```bash
|
||||
git checkout -b branch_name
|
||||
```
|
||||
|
||||
Alternatively,
|
||||
|
||||
```bash
|
||||
git switch -c branch_name
|
||||
```
|
||||
|
||||
- To rename branch
|
||||
|
||||
```bash
|
||||
git branch -m old_branch_name new_branch_name
|
||||
```
|
||||
|
||||
- To Delete branch (use -D to force delete)
|
||||
|
||||
```bash
|
||||
git branch -d branch_name
|
||||
```
|
||||
|
||||
12. Other git comments consiered usefull in previous encounters:
|
||||
|
||||
- press q to exit git response
|
||||
|
||||
- Prevent git from creating **zoneIdentifier** files
|
||||
|
||||
```bash
|
||||
git config core.protectNTFS false
|
||||
```
|
||||
---
|
||||
|
||||
## Git Branching
|
||||
|
||||
<p align="center">
|
||||
<img src="../assets/images/gitBranching.svg" alt="Git Branching">
|
||||
<p align="center">Fig.2 - Git Branching</p>
|
||||
</p>
|
||||
|
||||
This diagram represents a branching model for managing the development of a software project. It uses different branches to organize and control how code changes are developed, tested, and released. Here’s a breakdown of the key concepts, simplified for someone new:
|
||||
|
||||
### **Main Components**
|
||||
1. **Main Branch** (blue line):
|
||||
- This branch represents the "production" or "live" version of the project.
|
||||
- Only stable and tested versions of the code are added here.
|
||||
- Releases like `v0.1`, `v0.2`, and `v1.0` are tagged here.
|
||||
|
||||
2. **Develop Branch** (purple line):
|
||||
- This is where active development happens.
|
||||
- Features or fixes are integrated here before they are prepared for a release.
|
||||
- It acts as a staging area for new work to ensure it’s functional and complete.
|
||||
|
||||
3. **Feature Branches** (green lines):
|
||||
- These branches are used to develop specific features or tasks.
|
||||
- Developers create a new branch for each feature and work on it independently.
|
||||
- Once complete, they are merged into the **Develop Branch**.
|
||||
|
||||
4. **Release Branch** (teal line):
|
||||
- Before a release is finalized, a release branch is created.
|
||||
- Final fixes and testing are done here to ensure stability.
|
||||
- Once complete, it is merged into both **Main** and **Develop** branches to mark the release.
|
||||
|
||||
5. **Hotfix Branch** (red line):
|
||||
- This branch is for urgent fixes to the live code.
|
||||
- If an issue is found in the **Main Branch** (e.g., a bug in `v0.1`), a **Hotfix Branch** is created.
|
||||
- After fixing, it is merged into both **Main** and **Develop** to ensure the fix is applied everywhere.
|
||||
|
||||
### **Workflow Summary**
|
||||
1. **Start a Feature:**
|
||||
- Create a feature branch from the **Develop Branch**.
|
||||
- Work on your task and complete it.
|
||||
|
||||
2. **Integrate Your Work:**
|
||||
- When your feature is ready, merge it back into the **Develop Branch**.
|
||||
|
||||
3. **Prepare a Release:**
|
||||
- When the team decides to release a version, a **Release Branch** is created from **Develop**.
|
||||
- Final adjustments are made before merging it into **Main**.
|
||||
|
||||
4. **Fix Urgent Problems:**
|
||||
- If a critical issue is found in production, create a **Hotfix Branch** from **Main**, fix it, and merge it into both **Main** and **Develop**.
|
||||
|
||||
This system helps keep work organized, ensures stability for the live version, and allows teams to work on different features or fixes simultaneously. It’s designed to make collaboration and code integration smoother.
|
||||
|
||||
---
|
||||
|
||||
## Aditional notes
|
||||
|
||||
**On start the app asks wheather to pull from git or not.**
|
||||
|
||||
- If you are connected to the remote repository, type "y" or "yes" to perform the pull action. The app will automatically abort the start process if the pull operation encounters any issues to prevent abnormalities.
|
||||
- If you are not connected to the remote repository, type "n" or "no" to skip the pull action and proceed with starting the app.
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
# How to Write a Markdown (.md) File for Large-Scale Projects
|
||||
|
||||
## Introduction
|
||||
|
||||
Markdown (MD) is a lightweight markup language widely used in software development for documentation purposes. It is simple, easy to read, and can be converted to HTML, making it ideal for collaborative and large-scale projects. This guide will help you create well-structured, clear, and professional Markdown files tailored for use in large-scale projects.
|
||||
|
||||
---
|
||||
|
||||
## Obsidian
|
||||
|
||||
#### What is Obsidian
|
||||
|
||||
Obsidian is a powerful, feature-rich note-taking and knowledge management application designed for individuals and teams. It is highly customizable and based on plain text Markdown files, making it a versatile tool for creating, organizing, and connecting ideas. It’s particularly popular among professionals, students, and researchers who use it for personal knowledge management (PKM), journaling, writing, and task management.
|
||||
|
||||
All notes in Obsidian are plain text Markdown files stored locally on your computer. This ensures that your notes are portable, future-proof, and easy to access outside the application.
|
||||
|
||||
#### How to Get Started
|
||||
1. Download and Install:
|
||||
- [Obsidian’s website](https://obsidian.md/) provides downloads for all major platforms.
|
||||
|
||||
2. Create a Vault:
|
||||
- A "vault" is a folder where all your Markdown notes are stored. You can have multiple vaults for different purposes.
|
||||
|
||||
3. Start Taking Notes:
|
||||
- Create new notes using Markdown syntax and link them using Note Name.
|
||||
|
||||
4. For more:
|
||||
- [Read official Obsidian documentation](https://help.obsidian.md/Home)
|
||||
|
||||
---
|
||||
|
||||
## Understanding Markdown Syntax
|
||||
|
||||
Markdown provides a straightforward syntax for formatting text. Below are the essential elements you'll need to master:
|
||||
|
||||
#### **1. Headers**
|
||||
|
||||
Headers define the structure of your document. Use `#` to denote headings, with more `#` symbols indicating smaller headings.
|
||||
|
||||
- Example:
|
||||
|
||||
```markdown
|
||||
# Main Header
|
||||
|
||||
## Subheader
|
||||
|
||||
### Sub-Subheader
|
||||
```
|
||||
|
||||
#### **2. Lists**
|
||||
|
||||
Markdown supports ordered and unordered lists for organizing information.
|
||||
|
||||
- Unordered list:
|
||||
```markdown
|
||||
- Item 1
|
||||
- Item 2
|
||||
```
|
||||
- Ordered list:
|
||||
```markdown
|
||||
1. Step 1
|
||||
2. Step 2
|
||||
```
|
||||
|
||||
#### **3. Text Formatting**
|
||||
|
||||
- Bold: `**bold text**`
|
||||
- Italic: `*italic text*`
|
||||
- Inline Code: `` `inline code` ``
|
||||
- Strikethrough: `~~strikethrough~~`
|
||||
|
||||
#### **4. Links and Images**
|
||||
|
||||
- Link: `[Link Text](URL)`
|
||||
- Image: ``
|
||||
|
||||
#### **5. Tables**
|
||||
|
||||
Tables are useful for presenting structured data.
|
||||
|
||||
- Example:
|
||||
```markdown
|
||||
| Header 1 | Header 2 |
|
||||
| -------- | -------- |
|
||||
| Row 1 | Data |
|
||||
| Row 2 | Data |
|
||||
```
|
||||
|
||||
#### **6. Code Blocks**
|
||||
|
||||
Use triple backticks to include code blocks. Specify the programming language for syntax highlighting.
|
||||
|
||||
- Example:
|
||||
````markdown
|
||||
```jsx
|
||||
console.log("Hello world");
|
||||
```
|
||||
````
|
||||
|
||||
---
|
||||
|
||||
## Key Guidelines for Large-Scale Projects
|
||||
|
||||
#### **1. Understand the Project Structure**
|
||||
|
||||
Before you start writing, familiarize yourself with the project's directory and the purpose of the documentation. In large projects, MD files often serve specific roles, such as:
|
||||
|
||||
- **README.md**: A high-level overview of the project.
|
||||
- **CONTRIBUTING.md**: Guidelines for contributing to the project.
|
||||
- **CHANGELOG.md**: Records of changes made over time.
|
||||
- **API.md**: Detailed documentation of APIs.
|
||||
|
||||
#### **2. Write for Your Audience**
|
||||
|
||||
- Identify the primary readers of the document (e.g., developers, testers, stakeholders).
|
||||
- Use technical terms appropriately and explain jargon when necessary.
|
||||
|
||||
#### **3. Maintain Consistency**
|
||||
|
||||
- Follow a consistent style, tone, and structure across all Markdown files.
|
||||
- Adhere to any project-specific conventions or style guides.
|
||||
|
||||
#### **4. Use Comments Wisely**
|
||||
|
||||
Markdown does not support native comments, but you can use HTML-style comments for notes that should not appear in the rendered file.
|
||||
|
||||
- Example:
|
||||
```markdown
|
||||
<!-- This is a comment -->
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Checklist for Writing a Quality Markdown File
|
||||
|
||||
1. **Start with a Purpose**
|
||||
Begin your document with a clear purpose or summary of what it covers.
|
||||
|
||||
2. **Follow a Logical Flow**
|
||||
Organize information hierarchically using headings and subheadings.
|
||||
|
||||
3. **Be Concise and Clear**
|
||||
Avoid redundant information. Use simple language where possible.
|
||||
|
||||
4. **Incorporate Visual Aids**
|
||||
Use tables, images, or diagrams to explain complex topics.
|
||||
|
||||
5. **Test and Validate**
|
||||
|
||||
- Render your Markdown file locally or in the project’s preferred Markdown viewer to ensure formatting works as expected.
|
||||
- Use tools like **MarkdownLint** to check for common syntax errors.
|
||||
|
||||
6. **Link to Other Resources**
|
||||
Provide hyperlinks to related MD files or external resources.
|
||||
|
||||
7. **Version Control**
|
||||
Use version control (e.g., Git) to track changes and maintain a clear history of updates.
|
||||
|
||||
---
|
||||
|
||||
## Example: Simple README.md Template
|
||||
|
||||
````markdown
|
||||
# Project Title
|
||||
|
||||
## Description
|
||||
|
||||
Provide a brief overview of the project, its purpose, and key features.
|
||||
|
||||
## Installation
|
||||
|
||||
Explain how to set up the project.
|
||||
|
||||
```bash
|
||||
# Example installation command
|
||||
pip install project-name
|
||||
```
|
||||
````
|
||||
|
||||
## Usage
|
||||
|
||||
Provide examples of how to use the project.
|
||||
|
||||
```python
|
||||
# Example usage
|
||||
from project import feature
|
||||
feature.run()
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## External Resources
|
||||
|
||||
1. ▶️ [The Only Markdown Crash Course You Will Ever Need](https://www.youtube.com/watch?v=_PPWWRV6gbA&ab_channel=WebDevSimplified)
|
||||
2. 📄 [Basic writing and formatting syntax](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax)
|
||||
|
||||
---
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
## /temp/ files
|
||||
|
||||
I’ve set up the repository to ignore all folders named `temp`. This is a space you can use for temporary or experimental files without worrying about affecting the application or pushing these files to Gitea.
|
||||
|
||||
- **Purpose**: Use the `temp` folder to store temporary files, logs, or scripts for testing purposes.
|
||||
- **Ignored by Git**: All `temp` folders are excluded from version control using the `.gitignore` rule `**/temp/`. These files will not be committed or pushed to the repository.
|
||||
- **Best Practices**: Please avoid storing critical or shared files here. Use it for temporary work only, and clean up files when no longer needed.
|
||||
|
||||
This should help us maintain a clean repository while giving everyone the freedom to experiment.
|
||||
|
||||
---
|
||||
|
||||
## Standardized File Structure and Coding Guidelines
|
||||
|
||||
To improve our codebase's readability, maintainability, and scalability, we’re adopting a standardized file structure and coding practices. Here’s a summary:
|
||||
|
||||
1. **File Structure**:
|
||||
|
||||
- **Components (`.tsx`)**: All files that return HTML/JSX will be React components with a `.tsx` extension. They should focus on UI logic and presentation.
|
||||
|
||||
- **Purpose**: Files with the `.tsx` extension are reserved for React components that return JSX/HTML.
|
||||
- **Location**: Components should be organized based on their purpose or scope within the application. Example:
|
||||
```
|
||||
src/
|
||||
components/
|
||||
Header.tsx
|
||||
Footer.tsx
|
||||
pages/
|
||||
Home.tsx
|
||||
About.tsx
|
||||
```
|
||||
- **Naming Convention**: Component filenames should use PascalCase, matching the component name (e.g., `Header.tsx` for a `Header` component).
|
||||
- **Example**:
|
||||
|
||||
```tsx
|
||||
/**
|
||||
* Header component that displays the application's navigation bar.
|
||||
*
|
||||
* @returns {JSX.Element} A navigation bar with links.
|
||||
*/
|
||||
const Header: React.FC = () => {
|
||||
return (
|
||||
<header>
|
||||
<nav>
|
||||
<a href="/">Home</a>
|
||||
<a href="/about">About</a>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
```
|
||||
|
||||
- **Functions (`.ts`)**: All helper functions or business logic will go into `.ts` files, separate from the components.
|
||||
- **Purpose**: Files with the `.ts` extension are for helper functions, utility logic, or other non-React code that does not return JSX/HTML.
|
||||
- **Location**: Place utility files in a `utils` directory or within a directory relevant to their context. Example:
|
||||
```
|
||||
src/
|
||||
utils/
|
||||
calculateTotal.ts
|
||||
formatDate.ts
|
||||
hooks/
|
||||
useFetch.ts
|
||||
```
|
||||
- **Naming Convention**: Use camelCase for filenames that describe the primary function (e.g., `calculateTotal.ts` for a `calculateTotal` function).
|
||||
- **Example**:
|
||||
```ts
|
||||
/**
|
||||
* Calculates the total price based on items and tax rate.
|
||||
*
|
||||
* @param {number[]} prices - Array of item prices.
|
||||
* @param {number} taxRate - Tax rate as a decimal.
|
||||
* @returns {number} Total price including tax.
|
||||
*/
|
||||
export const calculateTotal = (
|
||||
prices: number[],
|
||||
taxRate: number
|
||||
): number => {
|
||||
const subtotal = prices.reduce((sum, price) => sum + price, 0);
|
||||
return subtotal + subtotal * taxRate;
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Commenting Standards
|
||||
|
||||
To improve code readability and understanding, every function and component should include comments explaining its purpose, inputs, and outputs. Here’s how we’ll approach this:
|
||||
|
||||
1. **React Components**:
|
||||
|
||||
- Include a **high-level description** of what the component does.
|
||||
- Specify the **props** it accepts, along with their types.
|
||||
- Specify the **return type** (`JSX.Element` for React components).
|
||||
|
||||
**Example**:
|
||||
|
||||
```tsx
|
||||
/**
|
||||
* Button component that triggers an action when clicked.
|
||||
*
|
||||
* @param {object} props - The props object.
|
||||
* @param {string} props.label - The text to display on the button.
|
||||
* @param {() => void} props.onClick - The callback function triggered when the button is clicked.
|
||||
* @returns {JSX.Element} A styled button element.
|
||||
*/
|
||||
const Button: React.FC<{ label: string; onClick: () => void }> = ({
|
||||
label,
|
||||
onClick,
|
||||
}) => {
|
||||
return <button onClick={onClick}>{label}</button>;
|
||||
};
|
||||
|
||||
export default Button;
|
||||
```
|
||||
|
||||
2. **Functions**:
|
||||
|
||||
- Include a **detailed description** of what the function does.
|
||||
- Specify the **parameters**, their types, and what they represent.
|
||||
- Specify the **return type** and what it represents.
|
||||
|
||||
**Example**:
|
||||
|
||||
```ts
|
||||
/**
|
||||
* Converts a date string to a readable format.
|
||||
*
|
||||
* @param {string} date - A date string in ISO format (e.g., "2024-11-21").
|
||||
* @returns {string} The formatted date (e.g., "November 21, 2024").
|
||||
*/
|
||||
export const formatDate = (date: string): string => {
|
||||
const options: Intl.DateTimeFormatOptions = {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
};
|
||||
return new Date(date).toLocaleDateString(undefined, options);
|
||||
};
|
||||
```
|
||||
|
||||
3. **Commenting Standards**:
|
||||
|
||||
- Each function and component should have a comment explaining:
|
||||
- What it does.
|
||||
- The props or parameters it accepts (including types).
|
||||
- What it returns and why.
|
||||
|
||||
4. **Why This Matters**:
|
||||
- This structure helps us maintain a clean, modular codebase. It also makes the project easier to navigate for new and existing team members.
|
||||
|
||||
---
|
||||
|
||||
## File Naming Guidelines
|
||||
|
||||
To maintain consistency and professionalism in our codebase, we are standardizing the way we name files. This is crucial for readability, collaboration, and avoiding potential issues across different operating systems.
|
||||
We are introducing a standardized **file naming convention** to maintain consistency across the codebase. Here are the key points:
|
||||
|
||||
1. **File Naming**:
|
||||
|
||||
- All file names must follow the **camelCase** convention (e.g., `headerComponent.tsx`, `calculateTotal.ts`).
|
||||
- This ensures uniformity and avoids case sensitivity issues.
|
||||
|
||||
2. **Pre-Commit Hook**:
|
||||
|
||||
- A pre-commit hook will automatically rename files to camelCase if they don’t comply.
|
||||
- Please double-check that your imports match the updated file names to avoid runtime errors.
|
||||
|
||||
3. **What You Need to Do**:
|
||||
|
||||
- Name files correctly in camelCase from the start.
|
||||
- If a file is renamed during a commit, ensure all imports are updated to reflect the new name.
|
||||
|
||||
4. **Why This Matters**:
|
||||
- Consistent file naming improves readability and reduces issues when working in teams or across different operating systems.
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
# Project Folder Structure
|
||||
|
||||
This document provides a detailed description of the purpose of each folder in the project by root level, along with the folder hierarchy.
|
||||
|
||||
## Folder Hierarchy
|
||||
|
||||
```
|
||||
📁 src
|
||||
├── 📁 assets
|
||||
├── 📁 components
|
||||
├── 📁 functions
|
||||
├── 📁 hooks
|
||||
├── 📁 modules
|
||||
│ ├── 📁 builder
|
||||
│ ├── 📁 simulation
|
||||
│ └── 📁 visualization
|
||||
├── 📁 services
|
||||
├── 📁 store
|
||||
├── 📁 styles
|
||||
├── 📁 tests
|
||||
├── 📁 types
|
||||
├── 📁 utils
|
||||
├── App.css
|
||||
├── App.tsx
|
||||
├── index.css
|
||||
├── main.tsx
|
||||
└── vite-env.d.ts
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Description of Each Folder
|
||||
|
||||
### 📁 `src`
|
||||
The root directory for all source code related to the application.
|
||||
|
||||
#### 📁 `assets`
|
||||
- **Purpose:** Contains static assets such as images, icons, fonts, or other resources.
|
||||
- **Example:**
|
||||
- `react.svg`: A static SVG file used in the project.
|
||||
|
||||
#### 📁 `components`
|
||||
- **Purpose:** Contains reusable React components, serving as building blocks for the user interface.
|
||||
- **Example:**
|
||||
- Buttons, modals, headers, and forms.
|
||||
|
||||
#### 📁 `functions`
|
||||
- **Purpose:** Stores pure functions or logic that can be reused across the application.
|
||||
- **Example:**
|
||||
- Utility functions for data transformation or computation.
|
||||
|
||||
#### 📁 `hooks`
|
||||
- **Purpose:** Holds custom React hooks for managing specific logic or behaviors.
|
||||
- **Example:**
|
||||
- Hooks for state management, API calls, or reusable effects.
|
||||
|
||||
#### 📁 `modules`
|
||||
- **Purpose:** Organizes high-level, feature-specific code into subdirectories.
|
||||
- **📁 builder:** Manages functionalities and components related to building or configuring features.
|
||||
- **📁 simulation:** Handles processes or logic related to simulations or dynamic scenarios.
|
||||
- **📁 visualization:** Focuses on displaying data visually, such as charts, graphs, or interactive UI elements.
|
||||
|
||||
#### 📁 `services`
|
||||
- **Purpose:** Encapsulates external service interactions, such as API calls or library integrations.
|
||||
- **Example:**
|
||||
- REST API clients or authentication handlers.
|
||||
|
||||
#### 📁 `store`
|
||||
- **Purpose:** Contains state management logic and configurations for tools like Redux or Zustand.
|
||||
- **Example:**
|
||||
- Redux slices, context providers, or global state stores.
|
||||
|
||||
#### 📁 `styles`
|
||||
- **Purpose:** Includes global CSS, SCSS, or theming resources.
|
||||
- **Example:**
|
||||
- Global styles, theme variables, or resets.
|
||||
|
||||
#### 📁 `tests`
|
||||
- **Purpose:** Stores test files for unit testing, integration testing, and mock data.
|
||||
- **Example:**
|
||||
- Test files (`*.test.tsx`, `*.spec.ts`) or mock utilities.
|
||||
|
||||
#### 📁 `types`
|
||||
- **Purpose:** Contains shared TypeScript type definitions and interfaces.
|
||||
- **Example:**
|
||||
- Type declarations for props, data models, or API responses.
|
||||
|
||||
#### 📁 `utils`
|
||||
- **Purpose:** Includes general-purpose utility files that don’t fit into other specific folders.
|
||||
- **Example:**
|
||||
- Helper functions like debouncers or date formatters.
|
||||
|
||||
---
|
||||
|
||||
## Root-Level Files
|
||||
|
||||
### `App.tsx`
|
||||
- **Purpose:** The root React component, initializing the main application layout and logic.
|
||||
|
||||
### `index.css`
|
||||
- **Purpose:** Contains global styles applied throughout the application.
|
||||
|
||||
### `main.tsx`
|
||||
- **Purpose:** The entry point of the app, rendering the React application and setting up the React DOM.
|
||||
|
||||
### `vite-env.d.ts`
|
||||
- **Purpose:** TypeScript environment configuration file for Vite.
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Documentation</title>
|
||||
|
||||
<!-- Docsify Vue Theme -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css"
|
||||
/>
|
||||
|
||||
<!-- Link to your custom styles -->
|
||||
<link rel="stylesheet" href="./styles/style.css" />
|
||||
|
||||
<!-- Docsify Search Plugin (Make sure it's the correct version) -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/docsify-search@1.7.0/dist/docsify-search.min.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
<!-- Docsify Script -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
|
||||
|
||||
<!-- Docsify Search Plugin Script -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
|
||||
|
||||
<!-- Docsify Image Preview Plugin -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
|
||||
|
||||
<!-- Docsify Theme Toggle Button and Search Integration -->
|
||||
<script>
|
||||
window.$docsify = {
|
||||
loadSidebar: true,
|
||||
loadNavbar: true,
|
||||
subMaxLevel: 2,
|
||||
auto2top: true,
|
||||
|
||||
search: {
|
||||
insertBefore: ".sidebar-nav", // Ensure the search bar is placed before the sidebar-nav element
|
||||
paths: "auto", // Automatically index all markdown files
|
||||
placeholder: "Search documentation...", // Placeholder text
|
||||
noData: "No results!", // Message when no results are found
|
||||
},
|
||||
|
||||
plugins: [
|
||||
function (hook, vm) {
|
||||
// Function to add the theme toggle button
|
||||
function addThemeToggle() {
|
||||
const themeButtonHtml = `
|
||||
<div class="theme-toggle-container">
|
||||
Theme :
|
||||
<button id="theme-toggle">🌙</button>
|
||||
</div>
|
||||
`;
|
||||
// Append the theme button inside the sidebar or navbar
|
||||
const sidebar = document.querySelector(".sidebar");
|
||||
if (sidebar) {
|
||||
sidebar.insertAdjacentHTML("beforebegin", themeButtonHtml);
|
||||
}
|
||||
|
||||
// Handle the theme toggle functionality
|
||||
const themeToggleBtn = document.getElementById("theme-toggle");
|
||||
themeToggleBtn.addEventListener("click", () => {
|
||||
// Toggle the dark-theme class
|
||||
const isDark = document.body.classList.toggle("dark-theme");
|
||||
themeToggleBtn.textContent = isDark ? "🌞" : "🌙";
|
||||
|
||||
// Optionally save the user's theme preference to localStorage
|
||||
localStorage.setItem("theme", isDark ? "dark" : "light");
|
||||
});
|
||||
|
||||
// Check if there's a saved theme in localStorage
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
if (savedTheme === "dark") {
|
||||
document.body.classList.add("dark-theme");
|
||||
themeToggleBtn.textContent = "🌞"; // Set the button to indicate light theme
|
||||
}
|
||||
}
|
||||
|
||||
// Run the theme toggle setup after each page load
|
||||
hook.afterEach(function (html) {
|
||||
// Make sure the theme toggle button is added after the page content changes
|
||||
if (!document.getElementById("theme-toggle")) {
|
||||
addThemeToggle();
|
||||
}
|
||||
});
|
||||
},
|
||||
],
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
/* Default light theme (comes from the vue.css theme) */
|
||||
|
||||
/* Dark theme styles */
|
||||
body.dark-theme {
|
||||
background-color: #323232;
|
||||
color: #f2f2f2;
|
||||
}
|
||||
body.dark-theme .sidebar-toggle span {
|
||||
background-color: #127efa;
|
||||
}
|
||||
body.dark-theme .markdown-section code,
|
||||
body.dark-theme .markdown-section pre {
|
||||
background-color: #131313;
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
/* Sidebar Dark Mode */
|
||||
body.dark-theme .sidebar {
|
||||
background-color: #131313;
|
||||
color: #f2f2f2;
|
||||
}
|
||||
body.dark-theme .sidebar ul li a {
|
||||
color: #f2f2f2;
|
||||
}
|
||||
body.dark-theme .anchor span {
|
||||
color: #f2f2f2;
|
||||
}
|
||||
body.dark-theme .sidebar ul li.active > a {
|
||||
color: #1e90ff;
|
||||
}
|
||||
|
||||
/* Change link colors in dark theme */
|
||||
body.dark-theme a {
|
||||
color: #1e90ff;
|
||||
}
|
||||
|
||||
/* Customize header (if needed) */
|
||||
body.dark-theme .header {
|
||||
background-color: #232323;
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
/* Optional: Customize any other element */
|
||||
body.dark-theme .content {
|
||||
background-color: #323232;
|
||||
color: #f2f2f2;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
body.dark-theme .markdown-section h1,
|
||||
body.dark-theme .markdown-section h2,
|
||||
body.dark-theme .markdown-section h3,
|
||||
body.dark-theme .markdown-section h4,
|
||||
body.dark-theme .markdown-section strong {
|
||||
color: #e3e3e3;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
body.dark-theme .sidebar ul li a:hover::after {
|
||||
background-color: #323232;
|
||||
}
|
||||
|
||||
/* Other over written styles */
|
||||
|
||||
.sidebar-toggle {
|
||||
background: transparent;
|
||||
}
|
||||
.markdown-section code,
|
||||
.markdown-section pre {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.markdown-section code::after,
|
||||
.markdown-section pre::after {
|
||||
display: none;
|
||||
}
|
||||
.content {
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
top: 0;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
.theme-toggle-container {
|
||||
position: fixed;
|
||||
top: 8px;
|
||||
left: 38px;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.theme-toggle-container button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
margin: 0;
|
||||
/* padding: 0 0 0 15px; */
|
||||
}
|
||||
.sidebar li {
|
||||
padding: 0 0 0 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sidebar ul li a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebar ul li a:hover::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 30px;
|
||||
background-color: #e5ebec;
|
||||
z-index: -1;
|
||||
}
|
||||
.app-nav.no-badge {
|
||||
margin: 8px;
|
||||
}
|
||||
.app-nav.no-badge ul {
|
||||
padding: 0;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
video {
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
server {
|
||||
listen 3000;
|
||||
server_name localhost;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
location / {
|
||||
try_files $uri /index.html;
|
||||
}
|
||||
|
||||
# Redirect 404 errors to index.html (for React Router)
|
||||
error_page 404 /index.html;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,71 @@
|
|||
{
|
||||
"name": "dwinzo-app",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@react-three/csg": "^3.2.0",
|
||||
"@react-three/drei": "^9.113.0",
|
||||
"@react-three/fiber": "^8.17.7",
|
||||
"@react-three/postprocessing": "^2.16.3",
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"@turf/turf": "^7.1.0",
|
||||
"@types/jest": "^27.5.2",
|
||||
"@types/react": "^18.3.5",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@use-gesture/react": "^10.3.1",
|
||||
"chart.js": "^4.4.8",
|
||||
"glob": "^11.0.0",
|
||||
"gsap": "^3.12.5",
|
||||
"postprocessing": "^6.36.4",
|
||||
"prompt-sync": "^4.2.0",
|
||||
"react": "^18.3.1",
|
||||
"react-chartjs-2": "^5.3.0",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^7.4.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-toastify": "^10.0.5",
|
||||
"sass": "^1.78.0",
|
||||
"socket.io-client": "^4.8.1",
|
||||
"three": "^0.168.0",
|
||||
"typescript": "^4.9.5",
|
||||
"web-vitals": "^2.1.4",
|
||||
"zustand": "^5.0.0-rc.2"
|
||||
},
|
||||
"scripts": {
|
||||
"prepare": "husky",
|
||||
"prestart": "tsc scripts/git-prompt.ts && node scripts/git-prompt.js",
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "jest",
|
||||
"cypress:open": "cypress open",
|
||||
"cypress:run": "cypress run"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.9.1",
|
||||
"@types/three": "^0.169.0",
|
||||
"cypress": "^13.14.2",
|
||||
"dotenv": "^16.4.5",
|
||||
"husky": "^9.1.6",
|
||||
"ts-node": "^10.9.2"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1", user-scalable=no" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
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>Dwinzo (beta)</title>
|
||||
</head>
|
||||
<body data-theme="light">
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<div id="root-over"></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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
|
|
@ -0,0 +1 @@
|
|||
*.js
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
|
||||
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
Git Pull Setup
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
|
||||
|
||||
import { execSync } from 'child_process';
|
||||
const prompt = require('prompt-sync')();
|
||||
|
||||
// Ask user whether to pull from Git
|
||||
const pull_remote_repository: string = prompt('Do you want to pull from Git? (yes/no): ');
|
||||
|
||||
if (pull_remote_repository.toLowerCase() === 'yes' || pull_remote_repository.toLowerCase() === 'y') {
|
||||
console.log('Pulling latest changes from Git...');
|
||||
try {
|
||||
execSync('git fetch', { stdio: 'inherit' }); // Execute git fetch
|
||||
execSync('git pull', { stdio: 'inherit', timeout: 5000 }); // Execute git pull with timeout of 5s
|
||||
console.log('Pull successful!');
|
||||
} catch (err: any) {
|
||||
// If there's an error, log it and exit with an error code
|
||||
if (err.signal === 'SIGTERM') {
|
||||
console.error('Git pull timed out.');
|
||||
} else {
|
||||
console.error('Error pulling from Git:', err);
|
||||
}
|
||||
process.exit(1); // Exit with non-zero code to signal failure
|
||||
}
|
||||
} else {
|
||||
console.log('Skipping Git pull.');
|
||||
}
|
||||
|
||||
|
||||
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
husky initialization
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
|
||||
|
||||
import * as fs from "fs";
|
||||
import * as path from "path";
|
||||
|
||||
const source = path.join(__dirname, "..", ".husky", "pre-commit");
|
||||
const destinationDir = path.join(__dirname, "..", ".husky", "_");
|
||||
const destination = path.join(destinationDir, "pre-commit");
|
||||
console.log('source: ', source);
|
||||
console.log('destination: ', destination);
|
||||
|
||||
// Verify if the source file exists
|
||||
if (!fs.existsSync(source)) {
|
||||
console.error("Source file does not exist:", source);
|
||||
process.exit(1); // Exit with an error code
|
||||
}
|
||||
|
||||
// Ensure the destination directory exists
|
||||
if (!fs.existsSync(destinationDir)) {
|
||||
fs.mkdirSync(destinationDir, { recursive: true });
|
||||
}
|
||||
|
||||
// Read and write the content manually
|
||||
fs.readFile(source, "utf-8", (readErr, data) => {
|
||||
if (readErr) {
|
||||
console.error("Failed to read source file:", readErr);
|
||||
return;
|
||||
}
|
||||
else {
|
||||
// console.log(`sourceData :`, data);
|
||||
}
|
||||
|
||||
fs.writeFile(destination, data.toString(), (writeErr) => {
|
||||
if (writeErr) {
|
||||
console.error("Failed to write to destination file:", writeErr);
|
||||
} else {
|
||||
// console.log('Data to be written in destination: ', data.toString());
|
||||
console.log("Successfully copied pre-commit hook to", destination);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
import * as glob from 'glob';
|
||||
import * as path from 'path';
|
||||
import * as fs from 'fs';
|
||||
const prompt = require('prompt-sync')();
|
||||
|
||||
// Function to check if a filename is in camelCase
|
||||
function isCamelCase(filename: string): boolean {
|
||||
const camelCasePattern = /^[a-z]+([A-Z][a-z]*)*$/; // Regular expression to match camelCase pattern
|
||||
return camelCasePattern.test(filename);
|
||||
}
|
||||
|
||||
// Function to convert a filename to camelCase
|
||||
function toCamelCase(filename: string): string {
|
||||
return filename
|
||||
.replace(/[_-]+(.)?/g, (_, chr) => (chr ? chr.toUpperCase() : ''))
|
||||
.replace(/^[A-Z]/, (firstChar) => firstChar.toLowerCase()); // Ensure the first letter is lowercase
|
||||
}
|
||||
|
||||
// Function to get all non-camelCase filenames in the specified directory
|
||||
function getNonCamelCaseFiles(directory: string): string[] {
|
||||
const files = glob.sync(`${directory}/**/*.*`); // Get all files in the specified directory
|
||||
return files.filter((filePath) => {
|
||||
const filename = path.basename(filePath, path.extname(filePath)); // Get the filename without the extension
|
||||
return !isCamelCase(filename); // Filter non-camelCase files
|
||||
});
|
||||
}
|
||||
|
||||
// Function to prompt the user for renaming non-camelCase files or proceed automatically in non-interactive mode
|
||||
function promptUserForRenaming(nonCamelCaseFiles: string[]): boolean {
|
||||
if (process.stdout.isTTY) {
|
||||
// If running interactively, prompt the user
|
||||
const answer: string = prompt('Do you want to rename these files to camelCase? (yes/no): ');
|
||||
return answer.toLowerCase() === 'yes' || answer.toLowerCase() === 'y';
|
||||
} else {
|
||||
// If running in non-interactive mode, log default action and proceed without prompt
|
||||
console.log("Running in non-interactive mode. Defaulting to renaming files.");
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// Function to rename files to camelCase
|
||||
function renameFiles(nonCamelCaseFiles: string[]): void {
|
||||
nonCamelCaseFiles.forEach((filePath) => {
|
||||
const dir = path.dirname(filePath); // Get the directory path
|
||||
const ext = path.extname(filePath); // Get the file extension
|
||||
const oldFilename = path.basename(filePath, ext); // Get the filename without extension
|
||||
const newFilename = toCamelCase(oldFilename) + ext; // Convert to camelCase and add back the extension
|
||||
const newFilePath = path.join(dir, newFilename); // Generate the new file path
|
||||
|
||||
try {
|
||||
fs.renameSync(filePath, newFilePath); // Rename the file
|
||||
console.log(`✅ Renamed: ${filePath} -> ${newFilePath}`);
|
||||
} catch (error) {
|
||||
console.error(`❌ Error renaming ${filePath}:`, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Main function to execute the script
|
||||
function main(): void {
|
||||
const directory = 'src'; // Specify your target directory
|
||||
const nonCamelCaseFiles = getNonCamelCaseFiles(directory); // Get non-camelCase files
|
||||
|
||||
if (nonCamelCaseFiles.length > 0) {
|
||||
console.error('❌ The following files are not in camelCase:');
|
||||
nonCamelCaseFiles.forEach((file) => console.error(`- ${file}`));
|
||||
|
||||
// Prompt user for renaming in interactive mode or proceed automatically in non-interactive mode
|
||||
renameFiles(nonCamelCaseFiles);
|
||||
} else {
|
||||
console.log('✅ All filenames are in camelCase.');
|
||||
}
|
||||
}
|
||||
|
||||
// Execute the main function
|
||||
main();
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import React from "react";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import App from "./app";
|
||||
|
||||
test("renders learn react link", () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import React from "react";
|
||||
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
||||
import Dashboard from "./pages/Dashboard";
|
||||
import Project from "./pages/Project";
|
||||
import UserAuth from "./pages/UserAuth";
|
||||
import ToastProvider from "./components/templates/ToastProvider";
|
||||
import "./styles/main.scss"
|
||||
|
||||
const App: React.FC = () => {
|
||||
return (
|
||||
<ToastProvider>
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route
|
||||
path="/"
|
||||
element={<UserAuth />}
|
||||
/>
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
<Route path="/project" element={<Project />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
</ToastProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 600 B |
Binary file not shown.
|
After Width: | Height: | Size: 527 B |
Binary file not shown.
|
After Width: | Height: | Size: 699 B |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 388 B |
Binary file not shown.
|
After Width: | Height: | Size: 886 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 421 B |
Binary file not shown.
|
After Width: | Height: | Size: 420 B |
Binary file not shown.
|
After Width: | Height: | Size: 421 B |
Binary file not shown.
|
After Width: | Height: | Size: 806 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 185 B |
Binary file not shown.
|
After Width: | Height: | Size: 498 B |
Binary file not shown.
|
After Width: | Height: | Size: 609 B |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
|
|
@ -0,0 +1,181 @@
|
|||
export function ThroughputIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="19"
|
||||
height="18"
|
||||
viewBox="0 0 19 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M10.124 7.90083L10.4726 8.94104L10.7027 9.64579C11.3046 11.5148 11.5973 12.6497 11.5973 13.1545C11.5973 14.3435 10.6334 15.3073 9.44448 15.3073C8.25553 15.3073 7.2917 14.3435 7.2917 13.1545C7.2917 12.5891 7.65886 11.2334 8.41633 8.94104L8.76493 7.90083C8.98524 7.25142 9.90372 7.25142 10.124 7.90083ZM9.44448 2.39062C13.4076 2.39062 16.6204 5.6034 16.6204 9.56655C16.6204 11.0058 16.1951 12.3836 15.4109 13.5546C15.1904 13.884 14.7447 13.9722 14.4154 13.7516C14.0861 13.5311 13.9979 13.0854 14.2184 12.7561C14.8456 11.8196 15.1852 10.7193 15.1852 9.56655C15.1852 6.39603 12.615 3.82581 9.44448 3.82581C6.27396 3.82581 3.70374 6.39603 3.70374 9.56655C3.70374 10.7193 4.04341 11.8196 4.67054 12.7561C4.89104 13.0854 4.80285 13.5311 4.47354 13.7516C4.14423 13.9722 3.69852 13.884 3.47801 13.5546C2.69389 12.3836 2.26855 11.0058 2.26855 9.56655C2.26855 5.6034 5.48133 2.39062 9.44448 2.39062ZM9.44448 10.4269L9.20879 11.188L9.04587 11.7413C8.83445 12.4807 8.72689 12.9596 8.72689 13.1545C8.72689 13.5508 9.04817 13.8721 9.44448 13.8721C9.8408 13.8721 10.1621 13.5508 10.1621 13.1545C10.1621 12.9161 10.0013 12.2533 9.6864 11.2087L9.44448 10.4269Z"
|
||||
fill="#507BDC"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function WavyIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="23"
|
||||
height="14"
|
||||
viewBox="0 0 23 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1.18555 4.05158C5.78508 -0.579547 8.49818 0.564217 13.3917 4.05158C16.4663 6.5364 18.2747 6.48932 21.6392 4.05158"
|
||||
stroke="#A2A2A0"
|
||||
strokeWidth="1.31959"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M1.18555 10.6492C5.78508 6.01811 8.49818 7.16187 13.3917 10.6492C16.4663 13.1341 18.2747 13.087 21.6392 10.6492"
|
||||
stroke="#A2A2A0"
|
||||
strokeWidth="1.31959"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function WalletIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="24"
|
||||
height="23"
|
||||
viewBox="0 0 24 23"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4.94644 4.81951H19.0089C19.1732 4.81943 19.3373 4.82985 19.5002 4.85071C19.445 4.46301 19.3118 4.09051 19.1088 3.75567C18.9057 3.42084 18.6369 3.13059 18.3186 2.90244C18.0003 2.67429 17.6391 2.51296 17.2568 2.42817C16.8745 2.34338 16.4789 2.3369 16.094 2.40911L4.52895 4.38357H4.51577C3.78983 4.52239 3.14427 4.93312 2.71094 5.53186C3.36379 5.0675 4.14529 4.81847 4.94644 4.81951V4.81951Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M19.0098 5.875H4.94726C4.20159 5.87581 3.4867 6.17239 2.95943 6.69966C2.43216 7.22693 2.13558 7.94183 2.13477 8.6875V17.125C2.13558 17.8707 2.43216 18.5856 2.95943 19.1128C3.4867 19.6401 4.20159 19.9367 4.94726 19.9375H19.0098C19.7554 19.9367 20.4703 19.6401 20.9976 19.1128C21.5249 18.5856 21.8214 17.8707 21.8223 17.125V8.6875C21.8214 7.94183 21.5249 7.22693 20.9976 6.69966C20.4703 6.17239 19.7554 5.87581 19.0098 5.875V5.875ZM16.9224 14.3125C16.6442 14.3125 16.3723 14.23 16.1411 14.0755C15.9098 13.921 15.7296 13.7014 15.6232 13.4444C15.5167 13.1874 15.4889 12.9047 15.5431 12.6319C15.5974 12.3591 15.7313 12.1085 15.928 11.9119C16.1247 11.7152 16.3752 11.5813 16.648 11.527C16.9208 11.4728 17.2035 11.5006 17.4605 11.607C17.7175 11.7135 17.9371 11.8937 18.0916 12.125C18.2461 12.3562 18.3286 12.6281 18.3286 12.9062C18.3286 13.2792 18.1804 13.6369 17.9167 13.9006C17.653 14.1643 17.2953 14.3125 16.9224 14.3125Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M2.15625 11.6523V7.27978C2.15625 6.32749 2.68359 4.73096 4.51392 4.38511C6.06738 4.09375 7.60547 4.09375 7.60547 4.09375C7.60547 4.09375 8.61621 4.79687 7.78125 4.79687C6.94629 4.79687 6.96826 5.87353 7.78125 5.87353C8.59424 5.87353 7.78125 6.90625 7.78125 6.90625L4.50732 10.6196L2.15625 11.6523Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function GlobeIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="23"
|
||||
height="23"
|
||||
viewBox="0 0 23 23"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.5 2.35938C6.452 2.35938 2.35938 6.452 2.35938 11.5C2.35938 16.548 6.452 20.6406 11.5 20.6406C16.548 20.6406 20.6406 16.548 20.6406 11.5C20.6406 6.452 16.548 2.35938 11.5 2.35938Z"
|
||||
fill="white"
|
||||
stroke="#6f42c1"
|
||||
strokeWidth="0.75"
|
||||
strokeMiterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M11.5001 2.35938C8.94824 2.35938 6.54883 6.452 6.54883 11.5C6.54883 16.548 8.94824 20.6406 11.5001 20.6406C14.052 20.6406 16.4515 16.548 16.4515 11.5C16.4515 6.452 14.052 2.35938 11.5001 2.35938Z"
|
||||
fill="white"
|
||||
stroke="#6f42c1"
|
||||
strokeWidth="0.75"
|
||||
strokeMiterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M5.40625 5.40625C7.08672 6.59937 9.20224 7.31084 11.5001 7.31084C13.798 7.31084 15.9136 6.59937 17.594 5.40625"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M5.40625 5.40625C7.08672 6.59937 9.20224 7.31084 11.5001 7.31084C13.798 7.31084 15.9136 6.59937 17.594 5.40625"
|
||||
stroke="#6f42c1"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M17.594 17.594C15.9136 16.4009 13.798 15.6895 11.5001 15.6895C9.20224 15.6895 7.08672 16.4009 5.40625 17.594"
|
||||
stroke="#6f42c1"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M11.5 2.35938V20.6406"
|
||||
stroke="#6f42c1"
|
||||
strokeWidth="0.75"
|
||||
strokeMiterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M20.6406 11.5H2.35938"
|
||||
stroke="#6f42c1"
|
||||
strokeWidth="0.75"
|
||||
strokeMiterlimit="10"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function DocumentIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="23"
|
||||
height="23"
|
||||
viewBox="0 0 23 23"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.9062 10.1055H19.0586C19.1021 10.1055 19.1438 10.1228 19.1746 10.1535C19.2054 10.1843 19.2227 10.226 19.2227 10.2695V18.5312C19.2227 19.2741 18.9276 19.9864 18.4023 20.5117C17.8771 21.0369 17.1647 21.332 16.4219 21.332H6.57812C5.83531 21.332 5.12292 21.0369 4.59767 20.5117C4.07243 19.9864 3.77734 19.2741 3.77734 18.5312V4.46875C3.77734 3.72594 4.07243 3.01355 4.59767 2.4883C5.12292 1.96305 5.83531 1.66797 6.57812 1.66797H10.6211C10.6646 1.66797 10.7063 1.68525 10.7371 1.71602C10.7679 1.74679 10.7852 1.78852 10.7852 1.83203V7.98437C10.7852 8.54692 11.0086 9.08643 11.4064 9.48421C11.8042 9.882 12.3437 10.1055 12.9062 10.1055ZM7.98437 17.1367H15.0156C15.2052 17.1367 15.387 17.0614 15.5211 16.9273C15.6552 16.7933 15.7305 16.6115 15.7305 16.4219C15.7305 16.2323 15.6552 16.0505 15.5211 15.9164C15.387 15.7823 15.2052 15.707 15.0156 15.707H7.98437C7.79479 15.707 7.61296 15.7823 7.4789 15.9164C7.34484 16.0505 7.26953 16.2323 7.26953 16.4219C7.26953 16.6115 7.34484 16.7933 7.4789 16.9273C7.61296 17.0614 7.79479 17.1367 7.98437 17.1367ZM7.98437 13.6211H15.0156C15.2052 13.6211 15.387 13.5458 15.5211 13.4117C15.6552 13.2777 15.7305 13.0958 15.7305 12.9062C15.7305 12.7167 15.6552 12.5348 15.5211 12.4008C15.387 12.2667 15.2052 12.1914 15.0156 12.1914H7.98437C7.79479 12.1914 7.61296 12.2667 7.4789 12.4008C7.34484 12.5348 7.26953 12.7167 7.26953 12.9062C7.26953 13.0958 7.34484 13.2777 7.4789 13.4117C7.61296 13.5458 7.79479 13.6211 7.98437 13.6211Z"
|
||||
fill="white"
|
||||
stroke="#0075FF"
|
||||
strokeWidth="0.0234375"
|
||||
/>
|
||||
<path
|
||||
d="M12.3447 2.22723L18.6644 8.54696C18.675 8.55761 18.6822 8.57115 18.6851 8.58589C18.6881 8.60062 18.6866 8.61588 18.6808 8.62976C18.6751 8.64364 18.6654 8.65552 18.6529 8.66389C18.6404 8.67226 18.6258 8.67677 18.6107 8.67683H12.9063C12.7229 8.67683 12.547 8.60398 12.4174 8.47432C12.2877 8.34466 12.2148 8.1688 12.2148 7.98542V2.28091C12.2149 2.2659 12.2194 2.25124 12.2278 2.23878C12.2362 2.22631 12.248 2.2166 12.2619 2.21086C12.2758 2.20512 12.2911 2.20361 12.3058 2.20652C12.3205 2.20944 12.3341 2.21663 12.3447 2.22722C12.3447 2.22722 12.3447 2.22722 12.3447 2.22723Z"
|
||||
fill="white"
|
||||
stroke="#0075FF"
|
||||
strokeWidth="0.0234375"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function CartIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1.33337 2L1.50998 2.05887C2.39001 2.35221 2.83002 2.49888 3.08169 2.84807C3.33337 3.19725 3.33337 3.66106 3.33337 4.58869V6.33333C3.33337 8.21893 3.33337 9.16173 3.91916 9.74753C4.50495 10.3333 5.44775 10.3333 7.33337 10.3333H8.66671M12.6667 10.3333H11.3334"
|
||||
stroke={"white"}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M5.00005 12C5.55233 12 6.00005 12.4477 6.00005 13C6.00005 13.5523 5.55233 14 5.00005 14C4.44776 14 4.00005 13.5523 4.00005 13C4.00005 12.4477 4.44776 12 5.00005 12Z"
|
||||
stroke={"white"}
|
||||
/>
|
||||
<path
|
||||
d="M11 12C11.5523 12 12 12.4477 12 13C12 13.5523 11.5523 14 11 14C10.4478 14 10 13.5523 10 13C10 12.4477 10.4478 12 11 12Z"
|
||||
stroke={"white"}
|
||||
/>
|
||||
<path
|
||||
d="M3.33337 4H5.33337M3.66671 8.66667H10.6812C11.3208 8.66667 11.6406 8.66667 11.8911 8.50153C12.1416 8.33633 12.2676 8.0424 12.5195 7.45453L12.8052 6.78787C13.3449 5.52863 13.6148 4.89902 13.3184 4.44951C13.0219 4 12.337 4 10.967 4H8.00004"
|
||||
stroke={"white"}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
export function FlipXAxisIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1 9.0568V2.94321C1 2.09213 1 1.6666 1.27121 1.52703C1.54242 1.38746 1.88869 1.6348 2.58123 2.12947L3.37186 2.6942C3.67979 2.91415 3.83375 3.02413 3.91687 3.18565C4 3.34718 4 3.53639 4 3.9148V8.08525C4 8.46365 4 8.65285 3.91687 8.8144C3.83375 8.9759 3.67979 9.0859 3.37186 9.30585L2.58124 9.87055C1.88869 10.3653 1.54242 10.6126 1.27121 10.473C1 10.3335 1 9.9079 1 9.0568Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M8.84612 2.99935L8.8461 2.99936C8.68674 3.11318 8.58748 3.18452 8.51591 3.2461C8.45011 3.30271 8.42848 3.33407 8.41656 3.3572L8.84612 2.99935ZM8.84612 2.99935L9.63671 2.43462C9.63671 2.43462 9.63672 2.43462 9.63672 2.43462C9.99337 2.17987 10.2264 2.01464 10.403 1.92406C10.487 1.88093 10.5331 1.86801 10.555 1.86465C10.5651 1.88444 10.5813 1.92948 10.5951 2.02293C10.624 2.21925 10.625 2.50491 10.625 2.94321V9.0568C10.625 9.49511 10.624 9.78078 10.5951 9.9771C10.5813 10.0705 10.5651 10.1156 10.5551 10.1354C10.5331 10.132 10.487 10.1191 10.403 10.076C10.2264 9.98539 9.99337 9.82016 9.63672 9.5654L9.63671 9.5654L8.84611 9.0007L8.84611 9.00069M8.84612 2.99935L8.84611 9.00069M8.84611 9.00069C8.68675 8.88688 8.58748 8.81553 8.51591 8.75395C8.45015 8.69737 8.4285 8.666 8.41657 8.64287C8.40466 8.61972 8.39169 8.5839 8.38386 8.49735C8.37535 8.40331 8.375 8.28108 8.375 8.08525V3.9148C8.375 3.71896 8.37535 3.59672 8.38386 3.50269M8.84611 9.00069L8.38386 3.50269M8.38386 3.50269C8.39168 3.41623 8.40463 3.38041 8.41652 3.35729L8.38386 3.50269ZM10.5715 1.86435C10.5713 1.86468 10.5689 1.86476 10.565 1.86363C10.5698 1.86345 10.5718 1.86402 10.5715 1.86435ZM10.5501 1.85597C10.5469 1.85343 10.5456 1.85142 10.5457 1.85105C10.5458 1.85068 10.5474 1.85195 10.5501 1.85597ZM10.5457 10.149C10.5456 10.1486 10.5469 10.1466 10.5501 10.1441C10.5475 10.1481 10.5458 10.1493 10.5457 10.149ZM10.565 10.1364C10.5689 10.1353 10.5713 10.1353 10.5716 10.1357C10.5718 10.136 10.5698 10.1366 10.565 10.1364Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M6 7V5"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M6 3V1"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M6 11V9"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function FlipYAxisIcon() {
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.0568 11H2.94321C2.09213 11 1.6666 11 1.52703 10.7288C1.38746 10.4576 1.6348 10.1113 2.12947 9.41877L2.6942 8.62814C2.91415 8.32021 3.02413 8.16625 3.18565 8.08313C3.34718 8 3.53639 8 3.9148 8H8.08525C8.46365 8 8.65285 8 8.8144 8.08313C8.9759 8.16625 9.0859 8.32021 9.30585 8.62814L9.87055 9.41876C10.3653 10.1113 10.6126 10.4576 10.473 10.7288C10.3335 11 9.9079 11 9.0568 11Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M2.99935 3.15388L2.99936 3.1539C3.11318 3.31326 3.18452 3.41252 3.2461 3.48409C3.30271 3.54989 3.33407 3.57152 3.3572 3.58344L2.99935 3.15388ZM2.99935 3.15388L2.43462 2.36329C2.43462 2.36329 2.43462 2.36328 2.43462 2.36328C2.17987 2.00663 2.01464 1.7736 1.92406 1.59704C1.88093 1.51299 1.86801 1.46687 1.86465 1.44495C1.88444 1.43495 1.92948 1.41866 2.02293 1.4049C2.21925 1.37599 2.50491 1.375 2.94321 1.375L9.0568 1.375C9.49511 1.375 9.78078 1.37599 9.9771 1.4049C10.0705 1.41866 10.1156 1.43494 10.1354 1.44495C10.132 1.46687 10.1191 1.51299 10.076 1.59705C9.98539 1.7736 9.82016 2.00663 9.5654 2.36328L9.5654 2.36329L9.0007 3.15389L9.00069 3.15389M2.99935 3.15388L9.00069 3.15389M9.00069 3.15389C8.88688 3.31325 8.81553 3.41252 8.75395 3.48409C8.69737 3.54985 8.666 3.5715 8.64287 3.58343C8.61972 3.59534 8.5839 3.60831 8.49735 3.61614C8.40331 3.62465 8.28108 3.625 8.08525 3.625L3.9148 3.625C3.71896 3.625 3.59672 3.62465 3.50269 3.61614M9.00069 3.15389L3.50269 3.61614M3.50269 3.61614C3.41623 3.60832 3.38041 3.59537 3.35729 3.58348L3.50269 3.61614ZM1.86435 1.42845C1.86468 1.42867 1.86476 1.43108 1.86363 1.43501C1.86345 1.4302 1.86402 1.42823 1.86435 1.42845ZM1.85597 1.4499C1.85343 1.45311 1.85142 1.45444 1.85105 1.4543C1.85068 1.45416 1.85195 1.45255 1.85597 1.4499ZM10.149 1.45429C10.1486 1.45443 10.1466 1.4531 10.1441 1.44989C10.1481 1.45254 10.1493 1.45415 10.149 1.45429ZM10.1364 1.435C10.1353 1.43107 10.1353 1.42867 10.1357 1.42845C10.136 1.42823 10.1366 1.4302 10.1364 1.435Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M7 6H5"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M3 6H1"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M11 6H9"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>;
|
||||
}
|
||||
export function FlipZAxisIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_111_550)">
|
||||
<path
|
||||
d="M9.04893 11.25H2.95106C2.10217 11.25 1.67773 11.25 1.53852 11.0466C1.39931 10.8432 1.64602 10.5835 2.13942 10.0641L2.7027 9.47111C2.92208 9.24016 3.03177 9.12469 3.19288 9.06234C3.35399 9 3.54271 9 3.92015 9H8.07988C8.4573 9 8.64602 9 8.80715 9.06234C8.96823 9.12469 9.07795 9.24016 9.29734 9.4711L9.86058 10.0641C10.354 10.5835 10.6007 10.8432 10.4615 11.0466C10.3223 11.25 9.89784 11.25 9.04893 11.25Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M2.97458 2.27061L2.97459 2.27063C3.21361 2.52227 3.26241 2.56246 3.32818 2.58793L2.97458 2.27061ZM2.97458 2.27061L2.4113 1.67767C2.4113 1.67767 2.4113 1.67766 2.4113 1.67766C2.1834 1.43775 2.03311 1.27814 1.94303 1.15861C1.96477 1.15501 1.99023 1.15144 2.01993 1.14815C2.22388 1.12557 2.51696 1.125 2.95106 1.125L9.04893 1.125C9.48304 1.125 9.77613 1.12557 9.98008 1.14815C10.0098 1.15144 10.0352 1.15501 10.057 1.15862C9.9669 1.27813 9.81662 1.43775 9.5887 1.67766L9.58869 1.67767L9.02545 2.27062L9.02544 2.27063M2.97458 2.27061L9.02544 2.27063M9.02544 2.27063C8.78635 2.52233 8.73756 2.56249 8.67176 2.58797C8.59172 2.6189 8.48853 2.625 8.07988 2.625L3.92015 2.625C3.51141 2.625 3.40826 2.61889 3.32825 2.58796L9.02544 2.27063Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M7 6.75H5"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M3 6.75H1"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M7.5 4.94853H10.2794C10.7911 4.94853 11.2059 5.36332 11.2059 5.875C11.2059 6.38668 10.7911 6.80147 10.2794 6.80147H9.35294M7.5 4.94853L8.32353 4.125M7.5 4.94853L8.32353 5.77206"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_111_550">
|
||||
<rect
|
||||
width="12"
|
||||
height="12"
|
||||
fill="white"
|
||||
transform="matrix(0 -1 1 0 0 12)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function RenameIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.03566 0.857117C4.85815 0.857117 4.71423 1.00103 4.71423 1.17855C4.71423 1.35606 4.85815 1.49997 5.03566 1.49997H5.67852V10.5H5.03566C4.85815 10.5 4.71423 10.6439 4.71423 10.8214C4.71423 10.9989 4.85815 11.1428 5.03566 11.1428H6.96423C7.14175 11.1428 7.28566 10.9989 7.28566 10.8214C7.28566 10.6439 7.14175 10.5 6.96423 10.5H6.32138V1.49997H6.96423C7.14175 1.49997 7.28566 1.35606 7.28566 1.17855C7.28566 1.00103 7.14175 0.857117 6.96423 0.857117H5.03566Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M5.25 3H2.625C2.21079 3 1.875 3.33579 1.875 3.75V8.25C1.875 8.66421 2.21079 9 2.625 9H5.25M6.75 9H9.375C9.78921 9 10.125 8.66421 10.125 8.25V3.75C10.125 3.33579 9.78921 3 9.375 3H6.75"
|
||||
stroke="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,513 @@
|
|||
export function SearchIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M17.682 17.3859C17.8951 17.5615 18.2102 17.5311 18.3859 17.318C18.5615 17.1049 18.5311 16.7898 18.318 16.6141L17.682 17.3859ZM15.2256 10.8149C15.2256 13.1933 13.277 15.1298 10.8628 15.1298V16.1298C13.8199 16.1298 16.2256 13.7549 16.2256 10.8149H15.2256ZM10.8628 15.1298C8.44862 15.1298 6.5 13.1933 6.5 10.8149H5.5C5.5 13.7549 7.9057 16.1298 10.8628 16.1298V15.1298ZM6.5 10.8149C6.5 8.4365 8.44862 6.5 10.8628 6.5V5.5C7.9057 5.5 5.5 7.87489 5.5 10.8149H6.5ZM10.8628 6.5C13.277 6.5 15.2256 8.4365 15.2256 10.8149H16.2256C16.2256 7.87489 13.8199 5.5 10.8628 5.5V6.5ZM14.1274 14.4565L17.682 17.3859L18.318 16.6141L14.7634 13.6848L14.1274 14.4565Z"
|
||||
fill="var(--text-disabled)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function ArrowIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M4 5L6.5 7.51615L9 5L4 5Z" fill="var(--text-color)" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function FocusIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7.31999 1.56H9.89999C10.0325 1.56 10.14 1.66745 10.14 1.8V4.14M10.14 7.5V9.9C10.14 10.0325 10.0325 10.14 9.89999 10.14H7.31999M4.55999 10.14H1.91999C1.78744 10.14 1.67999 10.0325 1.67999 9.9V7.5M1.67999 4.14V1.8C1.67999 1.66745 1.78744 1.56 1.91999 1.56H4.55999"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<circle
|
||||
cx="6"
|
||||
cy="5.87999"
|
||||
r="0.95"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function LockIcon({ isLocked }: { isLocked: boolean }) {
|
||||
return isLocked ? (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M3.5 5.0144C3.73571 5 4.0263 5 4.4 5H7.6C7.9737 5 8.2643 5 8.5 5.0144M3.5 5.0144C3.20584 5.03235 2.99715 5.07275 2.81902 5.1635C2.53677 5.3073 2.3073 5.53675 2.16349 5.819C2 6.1399 2 6.5599 2 7.4V8.1C2 8.9401 2 9.3601 2.16349 9.681C2.3073 9.96325 2.53677 10.1927 2.81902 10.3365C3.13988 10.5 3.55992 10.5 4.4 10.5H7.6C8.4401 10.5 8.8601 10.5 9.181 10.3365C9.46325 10.1927 9.6927 9.96325 9.8365 9.681C10 9.3601 10 8.9401 10 8.1V7.4C10 6.5599 10 6.1399 9.8365 5.819C9.6927 5.53675 9.46325 5.3073 9.181 5.1635C9.00285 5.07275 8.79415 5.03235 8.5 5.0144M3.5 5.0144V4C3.5 2.61929 4.61929 1.5 6 1.5C7.3807 1.5 8.5 2.61929 8.5 4V5.0144"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8.292 3C7.9062 2.11705 7.02515 1.5 6 1.5C4.61929 1.5 3.5 2.61929 3.5 4V5.0144M3.5 5.0144C3.73571 5 4.0263 5 4.4 5H7.6C8.4401 5 8.8601 5 9.181 5.1635C9.46325 5.3073 9.6927 5.53675 9.8365 5.819C10 6.1399 10 6.5599 10 7.4V8.1C10 8.9401 10 9.3601 9.8365 9.681C9.6927 9.96325 9.46325 10.1927 9.181 10.3365C8.8601 10.5 8.4401 10.5 7.6 10.5H4.4C3.55992 10.5 3.13988 10.5 2.81902 10.3365C2.53677 10.1927 2.3073 9.96325 2.16349 9.681C2 9.3601 2 8.9401 2 8.1V7.4C2 6.5599 2 6.1399 2.16349 5.819C2.3073 5.53675 2.53677 5.3073 2.81902 5.1635C2.99715 5.07275 3.20584 5.03235 3.5 5.0144Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function EyeIcon({ isClosed }: { isClosed: boolean }) {
|
||||
return isClosed ? (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_889_1582)">
|
||||
<path
|
||||
d="M1.52462 4.65539C1.50864 4.60647 1.5 4.55424 1.5 4.5C1.5 4.22386 1.72386 4 2 4C2.22985 4 2.42348 4.1551 2.48194 4.36634C3.52484 7.8593 8.4728 7.8601 9.5174 4.36868C9.5751 4.15624 9.7693 4 10 4C10.2761 4 10.5 4.22386 10.5 4.5C10.5 4.5534 10.4916 4.60485 10.4761 4.6531C10.2758 5.3241 9.96205 5.8938 9.56935 6.3622L10.2072 7C10.4024 7.19525 10.4024 7.51185 10.2072 7.7071C10.0119 7.90235 9.6953 7.90235 9.50005 7.7071L8.84435 7.0514C8.48725 7.3213 8.0956 7.53275 7.6843 7.6858L7.8632 8.35355C7.9347 8.6203 7.7764 8.89445 7.50965 8.9659C7.2429 9.0374 6.96875 8.8791 6.8973 8.61235L6.71555 7.9341C6.2418 8.0042 5.7582 8.0042 5.28445 7.9341L5.1027 8.61235C5.03125 8.8791 4.75708 9.0374 4.49035 8.9659C4.22361 8.89445 4.06533 8.6203 4.1368 8.35355L4.31572 7.6858C3.90446 7.53275 3.5128 7.3213 3.15573 7.05145L2.50009 7.7071C2.30482 7.90235 1.98824 7.90235 1.79298 7.7071C1.59771 7.51185 1.59771 7.19525 1.79298 7L2.43074 6.36225C2.03845 5.89435 1.72505 5.3254 1.52462 4.65539Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_889_1582">
|
||||
<rect width="12" height="12" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7.50035 6C7.50035 6.82845 6.8288 7.5 6.00035 7.5C5.17195 7.5 4.50036 6.82845 4.50036 6C4.50036 5.17155 5.17195 4.5 6.00035 4.5C6.8288 4.5 7.50035 5.17155 7.50035 6Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.0006 2.5C3.76177 2.5 1.86663 3.97144 1.22949 6C1.86662 8.02855 3.76177 9.5 6.0006 9.5C8.2394 9.5 10.1345 8.02855 10.7717 6C10.1345 3.97146 8.2394 2.5 6.0006 2.5Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function KebebIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="6" cy="3" r="1" fill="var(--text-color)" />
|
||||
<circle cx="6" cy="6" r="1" fill="var(--text-color)" />
|
||||
<circle cx="6" cy="9" r="1" fill="var(--text-color)" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function AddIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6 2L6 10M2 6H10"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.705882"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function RmoveIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M3 6.5H9" stroke="var(--text-color)" strokeLinecap="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function CloseIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M3.87868 8.62132L8.12132 4.37868"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M3.87866 4.37868L8.1213 8.62132"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function SettingsIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_111_481)">
|
||||
<path
|
||||
d="M6 7.5C6.82843 7.5 7.5 6.82843 7.5 6C7.5 5.17157 6.82843 4.5 6 4.5C5.17157 4.5 4.5 5.17157 4.5 6C4.5 6.82843 5.17157 7.5 6 7.5Z"
|
||||
stroke="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M6.8827 1.07612C6.6989 1 6.46595 1 6 1C5.53405 1 5.3011 1 5.1173 1.07612C4.87228 1.17761 4.67761 1.37229 4.57611 1.61731C4.52978 1.72917 4.51165 1.85925 4.50455 2.04899C4.49413 2.32784 4.35113 2.58594 4.10947 2.72546C3.86782 2.86498 3.57279 2.85977 3.32609 2.72938C3.15822 2.64065 3.0365 2.59131 2.91647 2.57551C2.65352 2.54089 2.38759 2.61214 2.17718 2.7736C2.01937 2.89469 1.90288 3.09645 1.66991 3.49996C1.43694 3.90348 1.32046 4.10524 1.29449 4.30245C1.25988 4.5654 1.33113 4.83133 1.49259 5.04175C1.56628 5.1378 1.66985 5.2185 1.83059 5.3195C2.0669 5.468 2.21894 5.72095 2.21893 6C2.21891 6.27905 2.06687 6.53195 1.83059 6.6804C1.66982 6.78145 1.56624 6.8622 1.49254 6.95825C1.33108 7.16865 1.25983 7.43455 1.29445 7.6975C1.32041 7.8947 1.43689 8.0965 1.66986 8.5C1.90284 8.9035 2.01932 9.1053 2.17713 9.22635C2.38754 9.3878 2.65347 9.45905 2.91642 9.42445C3.03644 9.40865 3.15816 9.3593 3.32602 9.2706C3.57273 9.1402 3.86778 9.135 4.10945 9.2745C4.35112 9.41405 4.49413 9.67215 4.50455 9.95105C4.51165 10.1407 4.52978 10.2708 4.57611 10.3827C4.67761 10.6277 4.87228 10.8224 5.1173 10.9239C5.3011 11 5.53405 11 6 11C6.46595 11 6.6989 11 6.8827 10.9239C7.1277 10.8224 7.3224 10.6277 7.42385 10.3827C7.4702 10.2708 7.48835 10.1407 7.49545 9.951C7.50585 9.67215 7.64885 9.41405 7.8905 9.2745C8.13215 9.13495 8.4272 9.1402 8.67395 9.2706C8.8418 9.3593 8.9635 9.4086 9.0835 9.4244C9.34645 9.45905 9.6124 9.3878 9.8228 9.22635C9.9806 9.10525 10.0971 8.9035 10.33 8.49995C10.563 8.09645 10.6795 7.8947 10.7055 7.6975C10.7401 7.43455 10.6688 7.1686 10.5074 6.9582C10.4337 6.86215 10.3301 6.7814 10.1693 6.6804C9.9331 6.53195 9.78105 6.279 9.78105 5.99995C9.78105 5.7209 9.9331 5.46805 10.1693 5.3196C10.3301 5.21855 10.4337 5.13785 10.5074 5.04175C10.6689 4.83136 10.7401 4.56543 10.7055 4.30248C10.6796 4.10527 10.5631 3.90351 10.3301 3.5C10.0971 3.09648 9.98065 2.89472 9.82285 2.77363C9.61245 2.61218 9.3465 2.54092 9.08355 2.57554C8.96355 2.59134 8.84185 2.64068 8.67395 2.7294C8.42725 2.85979 8.1322 2.86501 7.89055 2.72548C7.64885 2.58595 7.50585 2.32783 7.49545 2.04897C7.48835 1.85924 7.4702 1.72916 7.42385 1.61731C7.3224 1.37229 7.1277 1.17761 6.8827 1.07612Z"
|
||||
stroke="var(--text-color)"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_111_481">
|
||||
<rect width="12" height="12" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HelpIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_111_484)">
|
||||
<path
|
||||
d="M6 12C2.6862 12 0 9.3138 0 6C0 2.6862 2.6862 0 6 0C9.3138 0 12 2.6862 12 6C12 9.3138 9.3138 12 6 12ZM3.552 4.3404V4.4016C3.552 4.48117 3.58361 4.55747 3.63987 4.61373C3.69613 4.66999 3.77244 4.7016 3.852 4.7016H4.4502C4.48952 4.7016 4.52845 4.69386 4.56478 4.67881C4.6011 4.66376 4.63411 4.64171 4.66191 4.61391C4.68971 4.58611 4.71176 4.5531 4.72681 4.51678C4.74186 4.48045 4.7496 4.44152 4.7496 4.4022C4.7496 3.6282 5.3484 3.2148 6.1536 3.2148C6.9384 3.2148 7.4544 3.6282 7.4544 4.2168C7.4544 4.7736 7.1652 5.0322 6.4428 5.3628L6.2364 5.4552C5.6274 5.724 5.4 6.126 5.4 6.8286V6.9C5.4 6.97957 5.43161 7.05587 5.48787 7.11213C5.54413 7.16839 5.62044 7.2 5.7 7.2H6.2982C6.33752 7.2 6.37645 7.19226 6.41278 7.17721C6.4491 7.16216 6.48211 7.14011 6.50991 7.11231C6.53771 7.08451 6.55976 7.0515 6.57481 7.01518C6.58986 6.97885 6.5976 6.93992 6.5976 6.9006C6.5976 6.591 6.6804 6.4668 6.9276 6.3534L7.1346 6.2604C8.0016 5.868 8.652 5.352 8.652 4.2264V4.1646C8.652 2.9778 7.62 2.1 6.1536 2.1C4.6668 2.1 3.552 2.9568 3.552 4.3404ZM5.1 8.9946C5.1 9.5148 5.4954 9.9 5.9946 9.9C6.5046 9.9 6.9 9.5148 6.9 8.9946C6.9 8.4744 6.5046 8.1 5.9946 8.1C5.4954 8.1 5.1 8.4744 5.1 8.9946Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_111_484">
|
||||
<rect width="12" height="12" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function TrashIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_111_486)">
|
||||
<path
|
||||
d="M4.70587 5.32353V9.02941M7.17646 5.32353V9.02941M9.64704 2.85294V10.2647C9.64704 10.947 9.094 11.5 8.41175 11.5H3.47057C2.78834 11.5 2.23528 10.947 2.23528 10.2647V2.85294M0.999985 2.85294H10.8823M7.7941 2.85294V2.23529C7.7941 1.55306 7.24106 1 6.55881 1H5.32351C4.64128 1 4.08822 1.55306 4.08822 2.23529V2.85294"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_111_486">
|
||||
<rect width="12" height="12" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function FilterIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.86655 10V3.33333"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.86655 16.6666V13.3333"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M13.0667 5.83336V3.33336"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M13.0667 16.6666V9.16664"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.86666 13.3333C7.78714 13.3333 8.53333 12.5871 8.53333 11.6667C8.53333 10.7462 7.78714 10 6.86666 10C5.94619 10 5.2 10.7462 5.2 11.6667C5.2 12.5871 5.94619 13.3333 6.86666 13.3333Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M13.0667 9.16669C13.9871 9.16669 14.7333 8.4205 14.7333 7.50003C14.7333 6.57955 13.9871 5.83336 13.0667 5.83336C12.1462 5.83336 11.4 6.57955 11.4 7.50003C11.4 8.4205 12.1462 9.16669 13.0667 9.16669Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function EyeDroperIcon({ isActive }: { isActive: boolean }) {
|
||||
return (
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.5625 3.5L10.0625 7"
|
||||
stroke={
|
||||
isActive ? "var(--highlight-accent-color)" : "var(--text-color)"
|
||||
}
|
||||
strokeWidth="0.875"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.4375 4.37266L10.0625 1.74766C10.5437 1.26641 11.3312 1.26641 11.8125 1.74766C12.2937 2.22891 12.2937 3.01641 11.8125 3.49766L9.1875 6.12266"
|
||||
stroke={
|
||||
isActive ? "var(--highlight-accent-color)" : "var(--text-color)"
|
||||
}
|
||||
strokeWidth="0.875"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.30625 4.50391L2.49375 9.31641C2.23125 9.57891 2.14375 9.88516 2.14375 10.2352C1.925 10.3664 1.75 10.6289 1.75 10.9352C1.75 11.4164 2.14375 11.8102 2.625 11.8102C2.93125 11.8102 3.19375 11.6352 3.36875 11.4164C3.675 11.4164 4.025 11.2852 4.2875 11.0664L9.1 6.25391"
|
||||
stroke={
|
||||
isActive ? "var(--highlight-accent-color)" : "var(--text-color)"
|
||||
}
|
||||
strokeWidth="0.875"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function TickIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M3 6.5L4.84616 8.5L9 4"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function UndoIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.76516 1.73483C3.91161 1.88128 3.91161 2.11872 3.76516 2.26516L2.90533 3.125H7.5C9.0878 3.125 10.375 4.41218 10.375 6C10.375 7.5878 9.0878 8.875 7.5 8.875H4C3.79289 8.875 3.625 8.7071 3.625 8.5C3.625 8.2929 3.79289 8.125 4 8.125H7.5C8.6736 8.125 9.625 7.1736 9.625 6C9.625 4.82639 8.6736 3.875 7.5 3.875H2.90533L3.76516 4.73483C3.91161 4.88128 3.91161 5.1187 3.76516 5.26515C3.61872 5.4116 3.38128 5.4116 3.23483 5.26515L1.73483 3.76516C1.58839 3.61872 1.58839 3.38128 1.73483 3.23483L3.23483 1.73483C3.38128 1.58839 3.61872 1.58839 3.76516 1.73483Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function RedoIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M8.23484 1.73483C8.08839 1.88128 8.08839 2.11872 8.23484 2.26516L9.09467 3.125H4.5C2.9122 3.125 1.625 4.41218 1.625 6C1.625 7.5878 2.9122 8.875 4.5 8.875H8C8.20711 8.875 8.375 8.7071 8.375 8.5C8.375 8.2929 8.20711 8.125 8 8.125H4.5C3.3264 8.125 2.375 7.1736 2.375 6C2.375 4.82639 3.3264 3.875 4.5 3.875H9.09467L8.23484 4.73483C8.08839 4.88128 8.08839 5.1187 8.23484 5.26515C8.38128 5.4116 8.61872 5.4116 8.76517 5.26515L10.2652 3.76516C10.4116 3.61872 10.4116 3.38128 10.2652 3.23483L8.76517 1.73483C8.61872 1.58839 8.38128 1.58839 8.23484 1.73483Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function ResizeHeightIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="15"
|
||||
height="7"
|
||||
viewBox="0 0 15 7"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="1.5" cy="1.63281" r="1.5" fill="var(--text-disabled)" />
|
||||
<circle cx="5.3667" cy="1.63281" r="1.5" fill="var(--text-disabled)" />
|
||||
<circle cx="9.2334" cy="1.63281" r="1.5" fill="var(--text-disabled)" />
|
||||
<circle cx="13.1001" cy="1.63281" r="1.5" fill="var(--text-disabled)" />
|
||||
<circle cx="1.5" cy="5.5" r="1.5" fill="var(--text-disabled)" />
|
||||
<circle cx="5.3667" cy="5.5" r="1.5" fill="var(--text-disabled)" />
|
||||
<circle cx="9.2334" cy="5.5" r="1.5" fill="var(--text-disabled)" />
|
||||
<circle cx="13.1001" cy="5.5" r="1.5" fill="var(--text-disabled)" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function RemoveIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M3 6.5H9" stroke="var(--text-color)" strokeLinecap="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function InfoIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.46289 7.75441C5.46289 7.68342 5.47691 7.6131 5.50422 7.54758C5.53158 7.48201 5.57156 7.42254 5.62201 7.37257C5.67246 7.3226 5.73231 7.2831 5.79807 7.25636C5.86388 7.22963 5.93425 7.21619 6.00529 7.21681C6.11003 7.21873 6.21188 7.25142 6.29814 7.31089C6.38435 7.37036 6.45121 7.45398 6.49019 7.55118C6.52921 7.64843 6.53862 7.75499 6.5174 7.85757C6.49614 7.96014 6.44511 8.05417 6.37071 8.12795C6.29631 8.20168 6.20185 8.25184 6.09908 8.27219C5.99631 8.29254 5.8898 8.28212 5.79294 8.24224C5.69603 8.2024 5.61308 8.13486 5.55438 8.04808C5.49567 7.96134 5.46385 7.8592 5.46289 7.75441ZM5.63564 6.44401L5.56844 3.93842C5.56206 3.87819 5.56844 3.81729 5.58716 3.75968C5.60583 3.70207 5.63641 3.64902 5.67692 3.604C5.71743 3.55897 5.76697 3.52297 5.82227 3.49832C5.87761 3.47368 5.93751 3.46094 5.99804 3.46094C6.05862 3.46094 6.11852 3.47368 6.17387 3.49832C6.22916 3.52297 6.2787 3.55897 6.31921 3.604C6.35972 3.64902 6.3903 3.70207 6.40897 3.75968C6.42769 3.81729 6.43407 3.87819 6.42769 3.93842L6.36529 6.44401C6.36529 6.54073 6.32689 6.63356 6.25844 6.70196C6.19004 6.77036 6.09721 6.80881 6.00049 6.80881C5.90372 6.80881 5.81094 6.77036 5.74254 6.70196C5.67414 6.63356 5.63564 6.54073 5.63564 6.44401Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M6.00006 10.3175C8.45219 10.3175 10.4401 8.32963 10.4401 5.8775C10.4401 3.42536 8.45219 1.4375 6.00006 1.4375C3.54792 1.4375 1.56006 3.42536 1.56006 5.8775C1.56006 8.32963 3.54792 10.3175 6.00006 10.3175Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.72"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function AI_Icon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M7.90908 14.9119C7.70892 12.2881 5.62382 10.203 3 10.0028C5.62382 9.80267 7.70892 7.71753 7.90908 5.09375C8.10925 7.71753 10.1944 9.80267 12.8182 10.0028C10.1944 10.203 8.10925 12.2881 7.90908 14.9119Z"
|
||||
fill="var(--primary-color)"
|
||||
/>
|
||||
<path
|
||||
d="M14.0454 18.5888C13.9383 17.809 13.4611 16.3226 11.5908 16.1342C13.4611 15.9458 13.9383 14.4595 14.0454 13.6797C14.2337 15.5499 15.7201 16.0272 16.4999 16.1342C15.7201 16.2412 14.2337 16.7185 14.0454 18.5888Z"
|
||||
fill="var(--primary-color)"
|
||||
/>
|
||||
<path
|
||||
d="M14.0454 1.40625C14.2337 3.27654 15.7201 3.7538 16.4999 3.86079C15.7201 3.9678 14.2337 4.44505 14.0454 6.31533C13.9383 5.53553 13.4611 4.04915 11.5908 3.86079C13.4611 3.67243 13.9383 2.18606 14.0454 1.40625Z"
|
||||
fill="var(--primary-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
// module icons
|
||||
export function BuilderIcon({ isActive }: { isActive: boolean }) {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.25 6.25C12.25 6.66421 11.9142 7 11.5 7H3.5C3.08579 7 2.75 6.66421 2.75 6.25V4.5C2.75 4.08579 3.08579 3.75 3.5 3.75H11.5C11.9142 3.75 12.25 4.08579 12.25 4.5V6.25ZM13.375 4.5C13.375 4.08579 13.7108 3.75 14.125 3.75H16.5C16.9142 3.75 17.25 4.08579 17.25 4.5V6.25C17.25 6.66421 16.9142 7 16.5 7H14.125C13.7108 7 13.375 6.66421 13.375 6.25V4.5ZM3.5 15.75C3.08579 15.75 2.75 15.4142 2.75 15V13.25C2.75 12.8358 3.08579 12.5 3.5 12.5H11.5C11.9142 12.5 12.25 12.8358 12.25 13.25V15C12.25 15.4142 11.9142 15.75 11.5 15.75H3.5ZM14.125 15.75C13.7108 15.75 13.375 15.4142 13.375 15V13.25C13.375 12.8358 13.7108 12.5 14.125 12.5H16.5C16.9142 12.5 17.25 12.8358 17.25 13.25V15C17.25 15.4142 16.9142 15.75 16.5 15.75H14.125ZM8.5 11.375C8.08579 11.375 7.75 11.0392 7.75 10.625V8.875C7.75 8.46079 8.08579 8.125 8.5 8.125H16.5C16.9142 8.125 17.25 8.46079 17.25 8.875V10.625C17.25 11.0392 16.9142 11.375 16.5 11.375H8.5ZM5.875 8.125C6.28921 8.125 6.625 8.46079 6.625 8.875V10.625C6.625 11.0392 6.28921 11.375 5.875 11.375H3.5C3.08579 11.375 2.75 11.0392 2.75 10.625V8.875C2.75 8.46079 3.08579 8.125 3.5 8.125H5.875Z"
|
||||
stroke={isActive ? "none" : "var(--text-color)"}
|
||||
fill={isActive ? "var(--primary-color)" : "none"}
|
||||
strokeWidth="1"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function SimulationIcon({ isActive }: { isActive: boolean }) {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.3077 11.3433C12.3077 11.874 12.1503 12.3927 11.8555 12.834C11.5607 13.2752 11.1416 13.6191 10.6513 13.8222C10.1611 14.0253 9.62157 14.0784 9.10109 13.9749C8.58061 13.8713 8.10252 13.6158 7.72728 13.2406C7.35204 12.8653 7.09649 12.3872 6.99296 11.8667C6.88943 11.3463 6.94257 10.8068 7.14565 10.3165C7.34873 9.82622 7.69263 9.40717 8.13387 9.11235C8.57511 8.81752 9.09387 8.66016 9.62454 8.66016C10.3362 8.66016 11.0186 8.94284 11.5218 9.44603C12.025 9.94921 12.3077 10.6317 12.3077 11.3433Z"
|
||||
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
fill={isActive ? "var(--primary-color)" : "none"}
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<path
|
||||
d="M9.62477 5.30814C10.3657 5.30814 10.9663 4.70749 10.9663 3.96657C10.9663 3.22564 10.3657 2.625 9.62477 2.625C8.88384 2.625 8.2832 3.22564 8.2832 3.96657C8.2832 4.70749 8.88384 5.30814 9.62477 5.30814Z"
|
||||
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
fill={isActive ? "var(--primary-color)" : "none"}
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<path
|
||||
d="M3.59157 17.3745C4.33249 17.3745 4.93314 16.7739 4.93314 16.033C4.93314 15.292 4.33249 14.6914 3.59157 14.6914C2.85064 14.6914 2.25 15.292 2.25 16.033C2.25 16.7739 2.85064 17.3745 3.59157 17.3745Z"
|
||||
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
fill={isActive ? "var(--primary-color)" : "none"}
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<path
|
||||
d="M15.658 17.3745C16.3989 17.3745 16.9995 16.7739 16.9995 16.033C16.9995 15.292 16.3989 14.6914 15.658 14.6914C14.917 14.6914 14.3164 15.292 14.3164 16.033C14.3164 16.7739 14.917 17.3745 15.658 17.3745Z"
|
||||
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
fill={isActive ? "var(--primary-color)" : "none"}
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<path
|
||||
d="M7.50308 12.9844L4.65137 15.211"
|
||||
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<path
|
||||
d="M14.5978 15.211L11.7461 12.9844"
|
||||
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<path
|
||||
d="M9.625 8.659V5.30859"
|
||||
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
strokeWidth="1"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function VisualizationIcon({ isActive }: { isActive: boolean }) {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10 3.33203V16.6654"
|
||||
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.1665 7.5V16.6667"
|
||||
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M5.8335 7.5V16.6667"
|
||||
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function CartIcon({ isActive }: { isActive: boolean }) {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1.33337 2L1.50998 2.05887C2.39001 2.35221 2.83002 2.49888 3.08169 2.84807C3.33337 3.19725 3.33337 3.66106 3.33337 4.58869V6.33333C3.33337 8.21893 3.33337 9.16173 3.91916 9.74753C4.50495 10.3333 5.44775 10.3333 7.33337 10.3333H8.66671M12.6667 10.3333H11.3334"
|
||||
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M5.00005 12C5.55233 12 6.00005 12.4477 6.00005 13C6.00005 13.5523 5.55233 14 5.00005 14C4.44776 14 4.00005 13.5523 4.00005 13C4.00005 12.4477 4.44776 12 5.00005 12Z"
|
||||
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M11 12C11.5523 12 12 12.4477 12 13C12 13.5523 11.5523 14 11 14C10.4478 14 10 13.5523 10 13C10 12.4477 10.4478 12 11 12Z"
|
||||
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M3.33337 4H5.33337M3.66671 8.66667H10.6812C11.3208 8.66667 11.6406 8.66667 11.8911 8.50153C12.1416 8.33633 12.2676 8.0424 12.5195 7.45453L12.8052 6.78787C13.3449 5.52863 13.6148 4.89902 13.3184 4.44951C13.0219 4 12.337 4 10.967 4H8.00004"
|
||||
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,638 @@
|
|||
export function ZoneIcon({ isActive }: { isActive: boolean }) {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_111_378)">
|
||||
<path
|
||||
d="M1.66665 16.6667H2.49998V17.5H0.833313V15.8333H1.66665V16.6667ZM18.3333 16.6667H17.5V17.5H19.1666V15.8333H18.3333V16.6667ZM0.833313 4.16667H1.66665V3.33333H2.49998V2.5H0.833313V4.16667ZM1.66665 5.83333H0.833313V7.5H1.66665V5.83333ZM1.66665 9.16667H0.833313V10.8333H1.66665V9.16667ZM18.3333 7.5H19.1666V5.83333H18.3333V7.5ZM18.3333 10.8333H19.1666V9.16667H18.3333V10.8333ZM1.66665 12.5H0.833313V14.1667H1.66665V12.5ZM18.3333 14.1667H19.1666V12.5H18.3333V14.1667ZM4.16665 3.33333H5.83331V2.5H4.16665V3.33333ZM9.16665 3.33333V2.5H7.49998V3.33333H9.16665ZM10.8333 3.33333H12.5V2.5H10.8333V3.33333ZM15.8333 2.5H14.1666V3.33333H15.8333V2.5ZM4.16665 17.5H5.83331V16.6667H4.16665V17.5ZM7.49998 17.5H9.16665V16.6667H7.49998V17.5ZM10.8333 17.5H12.5V16.6667H10.8333V17.5ZM14.1666 17.5H15.8333V16.6667H14.1666V17.5ZM17.5 3.33333H18.3333V4.16667H19.1666V2.5H17.5V3.33333ZM10.4166 6.66667V8.33333C10.4164 8.55428 10.3286 8.76611 10.1723 8.92235C10.0161 9.07858 9.80426 9.16645 9.58331 9.16667H4.16665C3.9457 9.16645 3.73387 9.07858 3.57763 8.92235C3.4214 8.76611 3.33353 8.55428 3.33331 8.33333V6.66667C3.33353 6.44572 3.4214 6.23389 3.57763 6.07765C3.73387 5.92142 3.9457 5.83355 4.16665 5.83333H9.58331C9.80426 5.83355 10.0161 5.92142 10.1723 6.07765C10.3286 6.23389 10.4164 6.44572 10.4166 6.66667ZM9.58415 8.33333L9.58331 6.66667H4.16665V8.33333H9.58415ZM16.6666 11.6667V13.3333C16.6664 13.5543 16.5786 13.7661 16.4223 13.9223C16.2661 14.0786 16.0543 14.1664 15.8333 14.1667H11.25C11.029 14.1664 10.8172 14.0786 10.661 13.9223C10.5047 13.7661 10.4169 13.5543 10.4166 13.3333V11.6667C10.4169 11.4457 10.5047 11.2339 10.661 11.0777C10.8172 10.9214 11.029 10.8336 11.25 10.8333H15.8333C16.0543 10.8336 16.2661 10.9214 16.4223 11.0777C16.5786 11.2339 16.6664 11.4457 16.6666 11.6667ZM15.8341 13.3333L15.8333 11.6667H11.25V13.3333H15.8341Z"
|
||||
fill={
|
||||
isActive ? "var(--highlight-accent-color)" : "var(--text-color)"
|
||||
}
|
||||
/>
|
||||
<path
|
||||
d="M7.7443 13.5777V11.911C7.74408 11.69 7.65621 11.4782 7.49998 11.322C7.34375 11.1657 7.13191 11.0779 6.91097 11.0777H4.16665C3.9457 11.0779 3.73387 11.1657 3.57764 11.322C3.4214 11.4782 3.33353 11.69 3.33331 11.911V13.5777C3.33353 13.7986 3.4214 14.0104 3.57764 14.1667C3.73387 14.3229 3.9457 14.4108 4.16665 14.411H6.91097C7.13191 14.4108 7.34375 14.3229 7.49998 14.1667C7.65621 14.0104 7.74408 13.7986 7.7443 13.5777Z"
|
||||
fill={
|
||||
isActive ? "var(--highlight-accent-color)" : "var(--text-color)"
|
||||
}
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_111_378">
|
||||
<rect width="20" height="20" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function AsileIcon({ isActive }: { isActive: boolean }) {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M3.25821 9.16667H1.13638L1.13638 13.4832L3.25821 9.16667Z"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M4.57633 16.6667H1.53737L5.22405 9.16667L8.26301 9.16667L4.57633 16.6667Z"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M9.82919 16.6667H6.79023L10.4769 9.16667L13.5159 9.16667L9.82919 16.6667Z"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M15.1917 16.6667H12.1528L15.8395 9.16667L18.8637 9.16667V9.1967L15.1917 16.6667Z"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M18.8637 14.3162V16.6667H17.7083L18.8637 14.3162Z"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M7.75002 0.833332L10 3.08333L4.75002 8.33333H2.50002V6.08333L7.75002 0.833332Z"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function FloorIcon({ isActive }: { isActive: boolean }) {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
opacity="0.3"
|
||||
x="3.33333"
|
||||
y="3.33333"
|
||||
width="12.5"
|
||||
height="12.5"
|
||||
fill="var(--text-disabled)"
|
||||
/>
|
||||
<path
|
||||
d="M15.8333 15.8333V3.33333H3.33333V15.8333"
|
||||
stroke={
|
||||
isActive ? "var(--highlight-accent-color)" : "var(--text-color)"
|
||||
}
|
||||
/>
|
||||
<path
|
||||
d="M11.0833 6.66667L13.3333 8.91667L8.08333 14.1667H5.83333V11.9167L11.0833 6.66667Z"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<circle
|
||||
cx="3.30001"
|
||||
cy="3.3"
|
||||
r="1.2"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<circle
|
||||
cx="15.8"
|
||||
cy="3.3"
|
||||
r="1.2"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<circle
|
||||
cx="15.8"
|
||||
cy="15.8"
|
||||
r="1.2"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<circle
|
||||
cx="3.30001"
|
||||
cy="15.8"
|
||||
r="1.2"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function WallIcon({ isActive }: { isActive: boolean }) {
|
||||
return isActive ? (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_204_497)">
|
||||
<path
|
||||
d="M12.6101 7.17339H6.72171V10.7064H12.6101V7.17339Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M18.4986 7.17339H12.6102V10.7064H18.4986V7.17339Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.72172 7.17339H0.833313V10.7064H6.72172V7.17339Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.5544 10.7064H9.66595V14.2395H15.5544V10.7064Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.66594 10.7064H3.77753V14.2395H9.66594V10.7064Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.5544 3.64035H9.66595V7.1734H15.5544V3.64035Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.66594 3.64035H3.77753V7.1734H9.66594V3.64035Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.89941 14.8451L17.2484 5.49617L20.7194 8.96713L11.3704 18.3161H7.89941V14.8451Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeWidth="1.08709"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_204_497">
|
||||
<rect width="20" height="20" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_111_392)">
|
||||
<path
|
||||
d="M12.6101 7.17339H6.72173V10.7064H12.6101V7.17339Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M18.4986 7.17339H12.6102V10.7064H18.4986V7.17339Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.72174 7.17339H0.833328V10.7064H6.72174V7.17339Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.5544 10.7064H9.66596V14.2395H15.5544V10.7064Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.66594 10.7064H3.77753V14.2395H9.66594V10.7064Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.5544 3.64035H9.66596V7.1734H15.5544V3.64035Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.66594 3.64035H3.77753V7.1734H9.66594V3.64035Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.89942 14.8451L17.2484 5.49617L20.7194 8.96713L11.3704 18.3161H7.89942V14.8451Z"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--background-color)"
|
||||
strokeWidth="1.08709"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_111_392">
|
||||
<rect width="20" height="20" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function WindowIcon({ isActive }: { isActive: boolean }) {
|
||||
return isActive ? (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10 2.5V17.5V2.5ZM15.8333 10H4.16667H15.8333ZM15.8333 8.33333C15.8333 6.78624 15.2188 5.30251 14.1248 4.20854C13.0308 3.11458 11.5471 2.5 10 2.5C8.4529 2.5 6.96917 3.11458 5.87521 4.20854C4.78125 5.30251 4.16667 6.78624 4.16667 8.33333V17.5H15.8333V8.33333Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
/>
|
||||
<path
|
||||
d="M10 2.5V17.5M10 2.5C11.5471 2.5 13.0308 3.11458 14.1248 4.20854C15.2188 5.30251 15.8333 6.78624 15.8333 8.33333V17.5H4.16667V8.33333C4.16667 6.78624 4.78125 5.30251 5.87521 4.20854C6.96917 3.11458 8.4529 2.5 10 2.5ZM15.8333 10H4.16667"
|
||||
stroke="var(--accent-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10 2.5V17.5M10 2.5C11.5471 2.5 13.0308 3.11458 14.1248 4.20854C15.2188 5.30251 15.8333 6.78624 15.8333 8.33333V17.5H4.16667V8.33333C4.16667 6.78624 4.78125 5.30251 5.87522 4.20854C6.96918 3.11458 8.45291 2.5 10 2.5ZM15.8333 10H4.16667"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function DoorIcon({ isActive }: { isActive: boolean }) {
|
||||
return isActive ? (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10.8333 16.0525V3.94749C10.8333 3.41696 10.3442 3.0215 9.8254 3.13266L5.65873 4.02552C5.27451 4.10785 5.00001 4.4474 5.00001 4.84035V15.1597C5.00001 15.5526 5.27451 15.8922 5.65873 15.9745L9.8254 16.8674C10.3442 16.9785 10.8333 16.5831 10.8333 16.0525Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
/>
|
||||
<path
|
||||
d="M12.9167 4.16667H14.1667C14.6269 4.16667 15 4.53977 15 5.00001V14.5833C15 15.0436 14.6269 15.4167 14.1667 15.4167H12.9167M5.00001 4.84035V15.1597C5.00001 15.5526 5.27451 15.8922 5.65873 15.9745L9.8254 16.8674C10.3442 16.9785 10.8333 16.5831 10.8333 16.0525V3.94749C10.8333 3.41696 10.3442 3.0215 9.8254 3.13266L5.65873 4.02552C5.27451 4.10785 5.00001 4.4474 5.00001 4.84035Z"
|
||||
stroke="var(--highlight-accent-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<ellipse
|
||||
cx="8.75001"
|
||||
cy="10"
|
||||
rx="0.416667"
|
||||
ry="0.833333"
|
||||
fill="var(--accent-color)"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.9167 4.16667H14.1667C14.6269 4.16667 15 4.53976 15 5V14.5833C15 15.0436 14.6269 15.4167 14.1667 15.4167H12.9167M5.00002 4.84035V15.1597C5.00002 15.5526 5.27452 15.8922 5.65874 15.9745L9.82541 16.8673C10.3442 16.9785 10.8333 16.583 10.8333 16.0525V3.94749C10.8333 3.41695 10.3442 3.02149 9.82541 3.13266L5.65874 4.02551C5.27452 4.10785 5.00002 4.4474 5.00002 4.84035Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<ellipse
|
||||
cx="8.75001"
|
||||
cy="10"
|
||||
rx="0.416667"
|
||||
ry="0.833333"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function PillerIcon({ isActive }: { isActive: boolean }) {
|
||||
return isActive ? (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7 5L5.5 6V18.5H14.5V6.5L13.5 5H7Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
/>
|
||||
<path
|
||||
d="M14.7545 1.94309H5.22935C4.9007 1.94074 4.57782 2.04074 4.29614 2.23213C4.01447 2.42352 3.78489 2.69889 3.63259 3.02804C3.4803 3.35718 3.41117 3.72738 3.4328 4.098C3.45444 4.46862 3.56599 4.82535 3.75522 5.12904C3.94445 5.43272 4.20405 5.67163 4.50553 5.81955C4.807 5.96747 5.13871 6.01868 5.46425 5.96756C5.78978 5.91644 6.09657 5.76497 6.35094 5.52976C6.60531 5.29456 6.79744 4.98471 6.90624 4.63423H13.1088C13.2185 4.98209 13.4107 5.2892 13.6644 5.522C13.918 5.75479 14.2234 5.90432 14.5472 5.95425C14.871 6.00417 15.2007 5.95258 15.5003 5.80509C15.7999 5.65761 16.0578 5.41991 16.246 5.11797C16.4341 4.81603 16.5452 4.46146 16.5671 4.093C16.589 3.72454 16.5209 3.35636 16.3702 3.02869C16.2195 2.70102 15.992 2.42646 15.7125 2.235C15.4331 2.04355 15.1125 1.94257 14.7857 1.94309H14.7545Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeMiterlimit="10"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M14.7545 1.9431H5.22935C4.9007 1.94074 4.57782 2.04075 4.29614 2.23214C4.01447 2.42352 3.78489 2.6989 3.63259 3.02804C3.4803 3.35719 3.41117 3.72738 3.4328 4.098C3.45444 4.46863 3.56599 4.82535 3.75522 5.12904C3.94445 5.43273 4.20405 5.67164 4.50553 5.81955C4.807 5.96747 5.13871 6.01868 5.46425 5.96756C5.78978 5.91644 6.09657 5.76497 6.35094 5.52977C6.60531 5.29456 6.79744 4.98472 6.90624 4.63423H13.1088C13.2185 4.9821 13.4107 5.2892 13.6644 5.522C13.918 5.7548 14.2234 5.90433 14.5472 5.95425C14.871 6.00418 15.2007 5.95258 15.5003 5.8051C15.7999 5.65761 16.0578 5.41992 16.246 5.11798C16.4341 4.81604 16.5452 4.46147 16.5671 4.093C16.589 3.72454 16.5209 3.35636 16.3702 3.02869C16.2195 2.70102 15.992 2.42646 15.7125 2.23501C15.4331 2.04355 15.1125 1.94257 14.7857 1.9431H14.7545Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeMiterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M14.3445 18.7347V5.86805"
|
||||
stroke="var(--text-color)"
|
||||
strokeMiterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M5.65552 18.7347V5.86805"
|
||||
stroke="var(--text-color)"
|
||||
strokeMiterlimit="10"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function CommentIcon({ isActive }: { isActive: boolean }) {
|
||||
return isActive ? (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4.50833 16.6667H10C11.5423 16.6654 13.0365 16.1295 14.2279 15.1502C15.4194 14.1709 16.2345 12.8087 16.5343 11.2958C16.8341 9.78295 16.6 8.21292 15.872 6.85324C15.144 5.49356 13.9671 4.42835 12.5418 3.83909C11.1165 3.24983 9.53103 3.17298 8.05542 3.62164C6.57982 4.07029 5.30542 5.01669 4.44935 6.2996C3.59328 7.5825 3.2085 9.12253 3.36057 10.6573C3.68484 12.4117 4.0765 13.3117 5.28333 14.7167C5.44034 14.8705 5.5302 15.0802 5.53333 15.3C5.53287 15.4103 5.51054 15.5193 5.46762 15.6209C5.42471 15.7224 5.36207 15.8145 5.28333 15.8917L4.50833 16.6667Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
/>
|
||||
<path
|
||||
d="M6.66666 8.33333H13.3333"
|
||||
stroke="var(--accent-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.66666 11.6667H13.3333"
|
||||
stroke="var(--accent-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4.15478 16.3131L3.30122 17.1667H4.50833H10H10.0004C11.6584 17.1654 13.2646 16.5892 14.5454 15.5365C15.8263 14.4837 16.7025 13.0194 17.0247 11.393C17.347 9.76667 17.0954 8.07889 16.3128 6.61724C15.5302 5.15558 14.2651 4.01048 12.7329 3.37703C11.2007 2.74358 9.49625 2.66096 7.90998 3.14327C6.3237 3.62557 4.95373 4.64295 4.03345 6.02207C3.11317 7.40119 2.69954 9.05673 2.86301 10.7066L2.86508 10.7275L2.8689 10.7482C3.03455 11.6444 3.22303 12.3548 3.5379 13.0295C3.8533 13.7053 4.28368 14.3202 4.90405 15.0425L4.91804 15.0588L4.93338 15.0738C4.99509 15.1343 5.03087 15.2163 5.03329 15.3025C5.03252 15.3451 5.02362 15.3871 5.00706 15.4263C4.98989 15.4669 4.96483 15.5037 4.93334 15.5346L4.93332 15.5346L4.92978 15.5381L4.15478 16.3131Z"
|
||||
stroke="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M6.66666 8.33333H13.3333"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.66666 11.6667H13.3333"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function FreeMoveIcon({ isActive }: { isActive: boolean }) {
|
||||
return isActive ? (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4.52948 11.2231L4.5297 11.2238C4.57639 11.37 4.62642 11.5411 4.68209 11.7315C5.02786 12.9139 5.59104 14.8398 6.92229 16.1733C8.01267 17.2528 9.37219 17.8333 11.2539 17.8333C12.7432 17.8333 13.9578 17.426 14.7979 16.6258C15.6333 15.8298 16.1667 14.58 16.1667 12.7517V5.48155C16.1667 5.38231 16.1346 5.31585 16.0979 5.27755C16.0663 5.24462 15.9931 5.19203 15.8225 5.19203C15.6652 5.19203 15.6035 5.24099 15.5775 5.26928C15.5444 5.30544 15.5114 5.37398 15.5114 5.48155V10.3909V11.2748L14.7538 10.8194C14.5073 10.6712 14.2271 10.535 13.9286 10.4193L13.6092 10.2956V9.95311V3.05037C13.6092 2.95469 13.5773 2.88608 13.5381 2.84499C13.5043 2.80944 13.4337 2.76081 13.2816 2.76081C13.1295 2.76081 13.0589 2.80945 13.025 2.845C12.9859 2.8861 12.9539 2.95471 12.9539 3.05037V9.51534V10.1002L12.3762 10.0093C12.0954 9.96505 11.8148 9.9356 11.5263 9.92086L11.0518 9.89662V9.42151V2.44843C11.0518 2.34942 11.0199 2.28465 10.9849 2.24804C10.9548 2.21665 10.8855 2.16667 10.7242 2.16667C10.5629 2.16667 10.4936 2.21665 10.4635 2.24805C10.4284 2.28467 10.3965 2.34944 10.3965 2.44843V9.47624V9.91041L9.96665 9.9713C9.6443 10.017 9.36015 10.0684 9.12277 10.1315L8.49442 10.2984V9.64822V3.4725C8.49442 3.37299 8.46214 3.30493 8.42514 3.26578C8.39386 3.23267 8.3248 3.18294 8.16676 3.18294C8.00276 3.18294 7.93529 3.23378 7.90656 3.2644C7.87167 3.30161 7.8391 3.36909 7.8391 3.4725V11.0163C7.8391 11.4317 7.81744 11.7993 7.74531 12.0757C7.70946 12.2131 7.64994 12.374 7.53699 12.5086C7.40837 12.6617 7.21968 12.7671 6.99152 12.7671C6.77109 12.7671 6.6027 12.6614 6.49863 12.5746C6.39098 12.4848 6.301 12.3729 6.22702 12.2662C6.07833 12.0517 5.93685 11.773 5.80731 11.493C5.69222 11.2442 5.57693 10.9728 5.46725 10.7147C5.45175 10.6782 5.43636 10.642 5.4211 10.6061C5.2955 10.311 5.17904 10.0416 5.0709 9.82454C4.85819 9.39911 4.72377 9.19607 4.59853 9.08661C4.50746 9.007 4.39371 8.95217 4.1196 8.95217C4.1196 8.95217 4.11946 8.95217 4.11917 8.95218L4.11791 8.95224L4.11306 8.95265C4.10879 8.95312 4.10293 8.95397 4.09552 8.95549C4.08045 8.95856 4.06138 8.96386 4.03928 8.97213C3.99404 8.98906 3.94671 9.01448 3.90579 9.04474C3.86843 9.07237 3.84566 9.09712 3.83408 9.11299C3.84264 9.27737 3.92405 9.5635 4.07023 9.96621C4.11734 10.096 4.17089 10.2372 4.22604 10.3827C4.3328 10.6642 4.4456 10.9617 4.52948 11.2231Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
stroke="var(--highlight-accent-color)"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M16.6667 12.7517C16.6667 16.6057 14.4072 18.3333 11.2539 18.3333C9.25097 18.3333 7.76123 17.708 6.56942 16.5275C4.91414 14.8702 4.36788 12.3609 4.05339 11.3759C3.80507 10.602 3.33332 9.60916 3.33332 9.08537C3.33332 8.74923 3.80507 8.45218 4.1196 8.45218C4.83136 8.45218 5.09621 8.75703 5.5183 9.60133C5.98178 10.5316 6.54456 12.2671 6.99152 12.2671C7.24806 12.2671 7.3391 11.8371 7.3391 11.0163V3.4725C7.3391 3.05818 7.60395 2.68294 8.16676 2.68294C8.72128 2.68294 8.99442 3.05818 8.99442 3.4725V9.64822C9.25927 9.57788 9.56547 9.52314 9.89652 9.47625V2.44843C9.89652 2.0341 10.1697 1.66668 10.7242 1.66668C11.2787 1.66668 11.5518 2.0341 11.5518 2.44843V9.42151C11.858 9.43716 12.156 9.46844 12.4539 9.51534V3.05037C12.4539 2.63605 12.7354 2.26081 13.2816 2.26081C13.8279 2.26081 14.1092 2.63605 14.1092 3.05037V9.95311C14.432 10.0782 14.7383 10.2267 15.0114 10.3909V5.48156C15.0114 5.06723 15.268 4.69203 15.8225 4.69203C16.3935 4.69203 16.6667 5.06723 16.6667 5.48156V12.7517Z"
|
||||
stroke="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function DeleteIcon({ isActive }: { isActive: boolean }) {
|
||||
return isActive ? (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M15 5V15C15 15.9205 14.2538 16.6667 13.3333 16.6667H6.66666C5.74619 16.6667 4.99999 15.9205 4.99999 15V5M3.33333 5H16.6667H3.33333Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
/>
|
||||
<path
|
||||
d="M15 5V15C15 15.9205 14.2538 16.6667 13.3333 16.6667H6.66666C5.74619 16.6667 4.99999 15.9205 4.99999 15V5M3.33333 5H16.6667"
|
||||
stroke="var(--highlight-accent-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12.5 5V4.16667C12.5 3.24619 11.7538 2.5 10.8333 2.5H9.16667C8.24619 2.5 7.5 3.24619 7.5 4.16667V5"
|
||||
stroke="var(--highlight-accent-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M8.33331 8.33333V13.3333M11.6666 8.33333V13.3333"
|
||||
stroke="var(--accent-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8.33332 8.33333V13.3333M11.6667 8.33333V13.3333M15 5V15C15 15.9205 14.2538 16.6667 13.3333 16.6667H6.66666C5.74618 16.6667 4.99999 15.9205 4.99999 15V5M3.33332 5H16.6667M12.5 5V4.16667C12.5 3.24619 11.7538 2.5 10.8333 2.5H9.16666C8.24618 2.5 7.49999 3.24619 7.49999 4.16667V5"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function CursorIcon({ isActive }: { isActive: boolean }) {
|
||||
return isActive ? (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M13.9284 10.6169C15.3983 9.82645 16.1332 9.43125 16.3192 8.95548C16.4806 8.54266 16.4352 8.07759 16.1971 7.70373C15.9226 7.27292 15.1251 7.02726 13.5301 6.53593L7.50159 4.67891C6.15581 4.26436 5.48292 4.05709 5.03794 4.22513C4.65059 4.37141 4.34871 4.68287 4.2146 5.0746C4.06054 5.52461 4.28873 6.1907 4.74513 7.52288L6.76674 13.4239C7.32812 15.0625 7.60882 15.8819 8.0565 16.1423C8.44476 16.3681 8.91825 16.3923 9.32748 16.2071C9.79936 15.9935 10.1619 15.207 10.8871 13.634L11.4229 12.4718C11.5383 12.2214 11.596 12.0962 11.6751 11.9869C11.7451 11.8898 11.8275 11.8023 11.92 11.7263C12.0243 11.6408 12.1457 11.5755 12.3885 11.4449L13.9284 10.6169Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M13.9284 10.6169C15.3983 9.82645 16.1332 9.43125 16.3192 8.95548C16.4806 8.54266 16.4352 8.07759 16.1971 7.70373C15.9226 7.27292 15.1251 7.02726 13.5301 6.53593L7.50159 4.67891C6.15581 4.26436 5.48292 4.05709 5.03794 4.22513C4.65059 4.37141 4.34871 4.68287 4.2146 5.0746C4.06054 5.52461 4.28873 6.1907 4.74513 7.52288L6.76674 13.4239C7.32812 15.0625 7.60882 15.8819 8.0565 16.1423C8.44476 16.3681 8.91825 16.3923 9.32748 16.2071C9.79936 15.9935 10.1619 15.207 10.8871 13.634L11.4229 12.4718C11.5383 12.2214 11.596 12.0962 11.6751 11.9869C11.7451 11.8898 11.8275 11.8023 11.92 11.7263C12.0243 11.6408 12.1457 11.5755 12.3885 11.4449L13.9284 10.6169Z"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function PlayIcon({ isActive }: { isActive: boolean }) {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M15.9111 8.51444C17.363 9.37988 17.363 11.6201 15.9111 12.4856L7.14505 17.7109C5.73403 18.552 4 17.4572 4 15.7253V5.27468C4 3.54276 5.73403 2.44801 7.14505 3.28911L15.9111 8.51444Z"
|
||||
stroke={isActive ? "none" : "var(--text-color)"}
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "none"}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function PenIcon({ isActive }: { isActive: boolean }) {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.5 15.5L12.7929 16.7929C13.1834 17.1834 13.8166 17.1834 14.2071 16.7929L16.2929 14.7071C16.6834 14.3166 16.6834 13.6834 16.2929 13.2929L15 12M11.5 15.5L5.58952 13.6474C5.22732 13.5568 4.94573 13.2721 4.85925 12.9089L2.5 3M11.5 15.5L15 12M2.5 3L12.4089 5.35925C12.7721 5.44573 13.0568 5.72732 13.1474 6.08952L15 12M2.5 3L7.29941 7.78644M9 8.5C9 9.05228 8.55228 9.5 8 9.5C7.44772 9.5 7 9.05228 7 8.5C7 7.94772 7.44772 7.5 8 7.5C8.55228 7.5 9 7.94772 9 8.5Z"
|
||||
stroke={
|
||||
isActive ? "var(--highlight-accent-color)" : "var(--text-color)"
|
||||
}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function SaveTemplateIcon({ isActive }: { isActive: boolean }) {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M17.5 13.4104V9.24922C17.5 5.67539 17.5 3.88847 16.4017 2.77822C15.3033 1.66797 13.5355 1.66797 10 1.66797C6.46447 1.66797 4.6967 1.66797 3.59835 2.77822C2.5 3.88847 2.5 5.67539 2.5 9.24922V13.4104C2.5 15.9909 2.5 17.2811 3.11176 17.8449C3.40351 18.1138 3.77179 18.2827 4.1641 18.3276C4.98668 18.4217 5.94727 17.5721 7.86847 15.8728C8.71767 15.1217 9.14233 14.7461 9.63358 14.6472C9.8755 14.5985 10.1245 14.5985 10.3664 14.6472C10.8577 14.7461 11.2823 15.1217 12.1315 15.8728C14.0527 17.5721 15.0133 18.4217 15.8359 18.3276C16.2282 18.2827 16.5965 18.1138 16.8882 17.8449C17.5 17.2811 17.5 15.9909 17.5 13.4104Z"
|
||||
stroke={
|
||||
isActive ? "var(--highlight-accent-color)" : "var(--text-color)"
|
||||
}
|
||||
/>
|
||||
<path
|
||||
d="M12.5 5H7.5"
|
||||
stroke={
|
||||
isActive ? "var(--highlight-accent-color)" : "var(--text-color)"
|
||||
}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
export function ProjectIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11 5.29844V4.51127C11 3.70744 10.2251 3.1309 9.45518 3.36188L5.85518 4.44188C5.3476 4.59416 5 5.06134 5 5.59127V13.4056C5 13.9355 5.3476 14.4027 5.85518 14.555L9.45518 15.635C10.2251 15.866 11 15.2894 11 14.4856V13.6984M11 5.29844H13.4C13.7314 5.29844 14 5.56707 14 5.89844V13.0984C14 13.4298 13.7314 13.6984 13.4 13.6984H11M11 5.29844V13.6984"
|
||||
stroke="var(--accent-color)"
|
||||
strokeWidth="1.2"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function ToggleSidebarIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
x="3.5"
|
||||
y="5.13672"
|
||||
width="17"
|
||||
height="13.7273"
|
||||
rx="3.59091"
|
||||
stroke="var(--accent-color)"
|
||||
/>
|
||||
<rect
|
||||
x="8.72729"
|
||||
y="5.45312"
|
||||
width="0.818182"
|
||||
height="13.0909"
|
||||
fill="var(--accent-color)"
|
||||
/>
|
||||
<circle
|
||||
cx="6.27271"
|
||||
cy="8.72834"
|
||||
r="0.818182"
|
||||
fill="var(--accent-color)"
|
||||
/>
|
||||
<circle
|
||||
cx="6.27271"
|
||||
cy="11.1815"
|
||||
r="0.818182"
|
||||
fill="var(--accent-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function AppDockIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<ellipse cx="3" cy="3" rx="2" ry="2" fill="var(--text-color)" />
|
||||
<ellipse cx="10" cy="3" rx="2" ry="2" fill="var(--text-color)" />
|
||||
<ellipse cx="17" cy="3" rx="2" ry="2" fill="var(--text-color)" />
|
||||
<ellipse cx="3" cy="10" rx="2" ry="2" fill="var(--text-color)" />
|
||||
<ellipse cx="10" cy="10" rx="2" ry="2" fill="var(--text-color)" />
|
||||
<ellipse cx="17" cy="10" rx="2" ry="2" fill="var(--text-color)" />
|
||||
<ellipse cx="3" cy="17" rx="2" ry="2" fill="var(--text-color)" />
|
||||
<ellipse cx="10" cy="17" rx="2" ry="2" fill="var(--text-color)" />
|
||||
<ellipse cx="17" cy="17" rx="2" ry="2" fill="var(--text-color)" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
export function LogoIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="16" cy="16" r="12" fill="var(--accent-color)" />
|
||||
<circle
|
||||
cx="16.0522"
|
||||
cy="16.054"
|
||||
r="8.45217"
|
||||
stroke="var(--background-color)"
|
||||
strokeWidth="0.313043"
|
||||
/>
|
||||
<path
|
||||
d="M14.9362 15.3506L14.9146 15.2009C18.5863 14.6717 20.6134 12.573 21.3145 11.6953L21.4328 11.7897C20.7203 12.6813 18.6614 14.8137 14.9362 15.3506Z"
|
||||
fill="var(--background-color)"
|
||||
stroke="var(--background-color)"
|
||||
strokeWidth="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M14.9522 15.8332C15.2664 15.8332 15.5211 15.5785 15.5211 15.2643C15.5211 14.95 15.2664 14.6953 14.9522 14.6953C14.6379 14.6953 14.3832 14.95 14.3832 15.2643C14.3832 15.5785 14.6379 15.8332 14.9522 15.8332Z"
|
||||
fill="var(--background-color)"
|
||||
stroke="var(--background-color)"
|
||||
strokeWidth="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M21.3523 12.3332C21.6665 12.3332 21.9212 12.0785 21.9212 11.7643C21.9212 11.45 21.6665 11.1953 21.3523 11.1953C21.038 11.1953 20.7833 11.45 20.7833 11.7643C20.7833 12.0785 21.038 12.3332 21.3523 12.3332Z"
|
||||
fill="var(--background-color)"
|
||||
stroke="var(--background-color)"
|
||||
strokeWidth="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M12.7492 22.3039C12.0462 21.4187 10.9309 19.5722 11.358 17.1484L11.5069 17.1749C11.0901 19.5401 12.1804 21.3445 12.8674 22.2096L12.7492 22.3039Z"
|
||||
fill="var(--background-color)"
|
||||
stroke="var(--background-color)"
|
||||
strokeWidth="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M11.4319 17.759C11.7461 17.759 12.0008 17.5043 12.0008 17.1901C12.0008 16.8758 11.7461 16.6211 11.4319 16.6211C11.1176 16.6211 10.8629 16.8758 10.8629 17.1901C10.8629 17.5043 11.1176 17.759 11.4319 17.759Z"
|
||||
fill="var(--background-color)"
|
||||
stroke="var(--background-color)"
|
||||
strokeWidth="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M12.7907 22.802C13.1049 22.802 13.3597 22.5473 13.3597 22.233C13.3597 21.9188 13.1049 21.6641 12.7907 21.6641C12.4765 21.6641 12.2217 21.9188 12.2217 22.233C12.2217 22.5473 12.4765 22.802 12.7907 22.802Z"
|
||||
fill="var(--background-color)"
|
||||
stroke="var(--background-color)"
|
||||
strokeWidth="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M21.7637 17.7187L21.6123 17.7145C21.6652 15.823 20.9421 14.0126 19.576 12.617C18.1535 11.1635 16.168 10.3387 14.1231 10.3506L14.1221 10.1993C16.2045 10.1912 18.2332 11.0285 19.6841 12.5111C21.0791 13.9363 21.8175 15.7859 21.7637 17.7187Z"
|
||||
fill="var(--background-color)"
|
||||
stroke="var(--background-color)"
|
||||
strokeWidth="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M21.6779 18.259C21.9921 18.259 22.2469 18.0043 22.2469 17.6901C22.2469 17.3758 21.9921 17.1211 21.6779 17.1211C21.3637 17.1211 21.1089 17.3758 21.1089 17.6901C21.1089 18.0043 21.3637 18.259 21.6779 18.259Z"
|
||||
fill="var(--background-color)"
|
||||
stroke="var(--background-color)"
|
||||
strokeWidth="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M14.1504 10.8567C14.4646 10.8567 14.7194 10.602 14.7194 10.2877C14.7194 9.97349 14.4646 9.71875 14.1504 9.71875C13.8362 9.71875 13.5814 9.97349 13.5814 10.2877C13.5814 10.602 13.8362 10.8567 14.1504 10.8567Z"
|
||||
fill="var(--background-color)"
|
||||
stroke="var(--background-color)"
|
||||
strokeWidth="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M17.0921 21.9098C12.5278 21.6847 9.43341 18.6962 8.05921 15.9744C7.04899 13.9733 6.89101 12.0235 7.64701 10.8856C8.13487 10.1512 8.85147 9.76527 9.94784 9.84153L9.79132 9.99806C8.74942 9.92522 8.22889 10.2831 7.77291 10.9693C7.04697 12.062 7.20838 13.9536 8.19419 15.9062C9.54902 18.59 12.6001 21.5366 17.0995 21.7585L17.0921 21.9098Z"
|
||||
fill="var(--background-color)"
|
||||
stroke="var(--background-color)"
|
||||
strokeWidth="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M10.6783 22.9379C8.56905 22.5921 7.13331 20.8917 7.03163 18.8823C6.93397 16.9494 8.12376 14.6516 11.0021 13.875L11.0414 14.0211C8.24462 14.7757 7.08812 17.0023 7.18295 18.8747C7.24576 20.1169 7.88473 21.5215 9.42609 22.2311C9.79584 22.4013 9.79131 22.364 10.2087 22.5205L10.6783 22.9379Z"
|
||||
fill="var(--background-color)"
|
||||
stroke="var(--background-color)"
|
||||
strokeWidth="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M10.9948 14.5286C11.3091 14.5286 11.5638 14.2738 11.5638 13.9596C11.5638 13.6454 11.3091 13.3906 10.9948 13.3906C10.6806 13.3906 10.4259 13.6454 10.4259 13.9596C10.4259 14.2738 10.6806 14.5286 10.9948 14.5286Z"
|
||||
fill="var(--background-color)"
|
||||
stroke="var(--background-color)"
|
||||
strokeWidth="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M20.5275 25.0396C20.4619 25.0396 20.3955 25.0366 20.3281 25.0303C19.0498 24.9115 17.8919 23.7306 17.2303 21.8712L17.3729 21.8203C18.0141 23.6229 19.124 24.7664 20.3421 24.8796C20.9978 24.942 21.5783 24.6777 21.8595 24.1942C22.1507 23.6941 22.141 23.2311 21.703 22.6036L21.8595 22.4471C22.3326 23.125 22.3121 23.7169 21.9903 24.2703C21.7082 24.7549 21.159 25.0396 20.5275 25.0396Z"
|
||||
fill="var(--background-color)"
|
||||
stroke="var(--background-color)"
|
||||
strokeWidth="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M17.0674 22.3957C17.3817 22.3957 17.6364 22.141 17.6364 21.8268C17.6364 21.5125 17.3817 21.2578 17.0674 21.2578C16.7532 21.2578 16.4985 21.5125 16.4985 21.8268C16.4985 22.141 16.7532 22.3957 17.0674 22.3957Z"
|
||||
fill="var(--background-color)"
|
||||
stroke="var(--background-color)"
|
||||
strokeWidth="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M18.6394 9.77763L18.4955 9.73042C18.8393 8.68792 19.4466 8.01625 20.1621 7.88813C20.6025 7.80864 21.0355 7.95895 21.2909 8.27915C21.5433 8.59551 21.7114 8.89502 21.5304 9.32094L21.3739 9.16442C21.5325 8.79116 21.3894 8.64514 21.1729 8.37357C20.9522 8.09696 20.5751 7.96803 20.1889 8.03723C19.5297 8.15506 18.9652 8.7896 18.6394 9.77763Z"
|
||||
fill="var(--background-color)"
|
||||
stroke="var(--background-color)"
|
||||
strokeWidth="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M18.5795 10.2981C18.8937 10.2981 19.1484 10.0434 19.1484 9.72912C19.1484 9.41489 18.8937 9.16016 18.5795 9.16016C18.2652 9.16016 18.0105 9.41489 18.0105 9.72912C18.0105 10.0434 18.2652 10.2981 18.5795 10.2981Z"
|
||||
fill="var(--background-color)"
|
||||
stroke="var(--background-color)"
|
||||
strokeWidth="0.2"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function LogoIconLarge() {
|
||||
return (
|
||||
<svg
|
||||
width="90"
|
||||
height="90"
|
||||
viewBox="0 0 90 90"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="45" cy="45" r="45" fill="#FCFDFD" />
|
||||
<circle
|
||||
cx="45.1957"
|
||||
cy="45.1957"
|
||||
r="31.2826"
|
||||
stroke="var(--accent-color)"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<path
|
||||
d="M40.7635 42.6069L40.7992 42.8543L41.0466 42.8187C55.1005 40.7931 62.8733 32.7466 65.5682 29.3739L65.7243 29.1786L65.5289 29.0225L65.0855 28.6684L64.8902 28.5124L64.7342 28.7077C62.1284 31.9696 54.5784 39.79 40.8943 41.7624L40.6468 41.798L40.6825 42.0455L40.7635 42.6069Z"
|
||||
fill="var(--accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
<path
|
||||
d="M41.0707 44.3747C42.2491 44.3747 43.2043 43.4194 43.2043 42.2411C43.2043 41.0627 42.2491 40.1074 41.0707 40.1074C39.8923 40.1074 38.9371 41.0627 38.9371 42.2411C38.9371 43.4194 39.8923 44.3747 41.0707 44.3747Z"
|
||||
fill="var(--accent-color)"
|
||||
/>
|
||||
<path
|
||||
d="M65.071 31.2502C66.2494 31.2502 67.2046 30.2949 67.2046 29.1165C67.2046 27.9382 66.2494 26.9829 65.071 26.9829C63.8926 26.9829 62.9374 27.9382 62.9374 29.1165C62.9374 30.2949 63.8926 31.2502 65.071 31.2502Z"
|
||||
fill="var(--accent-color)"
|
||||
/>
|
||||
<path
|
||||
d="M32.6135 68.7896L32.7693 68.9857L32.9651 68.8296L33.4085 68.4763L33.6037 68.3207L33.4485 68.1253C30.8927 64.9067 26.8518 58.2123 28.3971 49.4438L28.4404 49.1979L28.1946 49.1542L27.6362 49.0551L27.3898 49.0114L27.3463 49.2579C25.7268 58.4481 29.957 65.4445 32.6135 68.7896Z"
|
||||
fill="var(--accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
<path
|
||||
d="M27.8694 51.592C29.0478 51.592 30.003 50.6367 30.003 49.4583C30.003 48.28 29.0478 47.3247 27.8694 47.3247C26.691 47.3247 25.7358 48.28 25.7358 49.4583C25.7358 50.6367 26.691 51.592 27.8694 51.592Z"
|
||||
fill="var(--accent-color)"
|
||||
/>
|
||||
<path
|
||||
d="M32.9652 70.5041C34.1435 70.5041 35.0988 69.5488 35.0988 68.3704C35.0988 67.1921 34.1435 66.2368 32.9652 66.2368C31.7868 66.2368 30.8315 67.1921 30.8315 68.3704C30.8315 69.5488 31.7868 70.5041 32.9652 70.5041Z"
|
||||
fill="var(--accent-color)"
|
||||
/>
|
||||
<path
|
||||
d="M66.6067 51.6991L66.8567 51.7061L66.8636 51.4561C67.0676 44.1377 64.271 37.1369 58.994 31.7455C53.5053 26.1369 45.8325 22.9707 37.957 23.0012L37.7063 23.0022L37.708 23.2529L37.7118 23.8203L37.7135 24.0701L37.9632 24.0686C45.5642 24.0244 52.9448 27.0906 58.2312 32.4925L58.2312 32.4925C63.3084 37.6792 65.9926 44.4033 65.7964 51.4263L65.7894 51.6762L66.0393 51.6832L66.6067 51.6991Z"
|
||||
fill="var(--accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
<path
|
||||
d="M66.2922 53.467C67.4705 53.467 68.4258 52.5117 68.4258 51.3333C68.4258 50.155 67.4705 49.1997 66.2922 49.1997C65.1138 49.1997 64.1585 50.155 64.1585 51.3333C64.1585 52.5117 65.1138 53.467 66.2922 53.467Z"
|
||||
fill="var(--accent-color)"
|
||||
/>
|
||||
<path
|
||||
d="M38.0639 25.7077C39.2423 25.7077 40.1976 24.7524 40.1976 23.5741C40.1976 22.3957 39.2423 21.4404 38.0639 21.4404C36.8856 21.4404 35.9303 22.3957 35.9303 23.5741C35.9303 24.7524 36.8856 25.7077 38.0639 25.7077Z"
|
||||
fill="var(--accent-color)"
|
||||
/>
|
||||
<path
|
||||
d="M13.468 25.6899C12.0099 27.8846 11.446 30.8409 11.7162 34.1762C11.9865 37.5136 13.093 41.2489 14.9988 45.024L15.222 44.9113L14.9988 45.024C20.182 55.2899 31.8559 66.569 49.0829 67.4189L49.3326 67.4312L49.3449 67.1815L49.3729 66.6141L49.3853 66.3644L49.1356 66.352C32.3736 65.5252 21.002 54.548 15.9513 44.5429L15.7295 44.6549L15.9513 44.5429C14.1144 40.9044 13.0501 37.3314 12.7802 34.1684C12.5101 31.0029 13.0366 28.2674 14.3566 26.2805C15.1989 25.0129 16.086 24.0714 17.2249 23.4752C18.3626 22.8796 19.7779 22.6151 21.6999 22.7494L21.8136 22.7574L21.8942 22.6768L22.4811 22.0899L22.8692 21.7018L22.3217 21.6637C20.2328 21.5184 18.4886 21.8123 17.0275 22.5047C15.5655 23.1975 14.4036 24.2815 13.468 25.6899ZM13.468 25.6899L13.6762 25.8282L13.468 25.6899Z"
|
||||
fill="var(--accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
<path
|
||||
d="M25.003 71.2683L25.8544 71.4079L25.2096 70.8347L23.4487 69.2695L23.414 69.2386L23.3704 69.2223C22.7326 68.9831 22.3525 68.8627 22.0397 68.7635C21.9653 68.7399 21.8947 68.7175 21.8253 68.6951C21.4708 68.5802 21.1376 68.4592 20.4524 68.1438C14.7739 65.5298 12.4176 60.3578 12.1857 55.7717L12.1857 55.7717C11.8358 48.8628 16.101 40.6225 26.4705 37.8248L26.7118 37.7597L26.6468 37.5184L26.4993 36.9706L26.4342 36.7291L26.1927 36.7943C15.2798 39.7386 10.7471 48.4657 11.1189 55.8257L11.1189 55.8257C11.5061 63.4757 16.9748 69.952 25.003 71.2683Z"
|
||||
fill="var(--accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
<path
|
||||
d="M26.2306 39.4767C27.409 39.4767 28.3642 38.5215 28.3642 37.3431C28.3642 36.1647 27.409 35.2095 26.2306 35.2095C25.0522 35.2095 24.097 36.1647 24.097 37.3431C24.097 38.5215 25.0522 39.4767 26.2306 39.4767Z"
|
||||
fill="var(--accent-color)"
|
||||
/>
|
||||
<path
|
||||
d="M61.2074 79.1064L61.2074 79.1064C61.4678 79.1305 61.7244 79.1422 61.978 79.1422C64.4196 79.1422 66.5696 78.04 67.6795 76.1331L67.6795 76.133C68.2962 75.0725 68.6727 74.0249 68.6539 72.9029C68.6351 71.7796 68.2207 70.6132 67.3137 69.3137L67.1429 69.069L66.9319 69.28L66.345 69.8669L66.1969 70.015L66.3168 70.1868C67.1247 71.3442 67.4824 72.2492 67.5231 73.0742C67.5638 73.8967 67.2914 74.6784 66.7571 75.5963L66.757 75.5963C65.7608 77.3086 63.6885 78.2699 61.3064 78.0434L61.3058 78.0433C56.8839 77.6324 52.7763 73.4613 50.384 66.736L50.3002 66.5003L50.0645 66.5843L49.5296 66.775L49.2943 66.8589L49.378 67.0943C51.8719 74.1037 56.2694 78.6473 61.2074 79.1064Z"
|
||||
fill="var(--accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
<path
|
||||
d="M49.0029 68.9821C50.1813 68.9821 51.1366 68.0268 51.1366 66.8485C51.1366 65.6701 50.1813 64.7148 49.0029 64.7148C47.8246 64.7148 46.8693 65.6701 46.8693 66.8485C46.8693 68.0268 47.8246 68.9821 49.0029 68.9821Z"
|
||||
fill="var(--accent-color)"
|
||||
/>
|
||||
<path
|
||||
d="M55.0569 21.9844L54.8197 21.9066L54.2803 21.7295L54.0424 21.6515L54.1208 21.4137C55.4226 17.4661 57.749 14.8415 60.5635 14.3374C62.2955 14.0248 64.0152 14.6136 65.0364 15.8938M55.0569 21.9844L64.203 16.5598C64.2457 16.6134 64.2872 16.6652 64.3275 16.7154C64.6827 17.1587 64.939 17.4786 65.0681 17.8299C65.2013 18.1927 65.2025 18.6117 64.9221 19.2718L64.8561 19.427L64.9754 19.5463L65.5624 20.1332L65.8243 20.3952L65.9692 20.0542C66.3303 19.2044 66.3477 18.464 66.1387 17.7763C65.9332 17.1 65.5135 16.4918 65.0364 15.8938M55.0569 21.9844L55.1351 21.7473M55.0569 21.9844L55.1351 21.7473M65.0364 15.8938L64.841 16.0497M65.0364 15.8938L64.841 16.0497M64.841 16.0497C65.7364 17.172 66.3488 18.2377 65.8379 19.7016M64.841 16.0497C63.8831 14.849 62.2595 14.2853 60.6078 14.5834L65.8379 19.7016M65.8379 19.7016L65.9159 19.7797L65.7391 19.9565L65.5091 19.8587C65.5224 19.8272 65.5353 19.7959 65.5476 19.7649M65.8379 19.7016L65.5476 19.7649M65.5476 19.7649L65.1522 19.3695C65.715 18.0447 65.2644 17.4833 64.5263 16.5635L65.5476 19.7649ZM55.1351 21.7473C56.3456 18.077 58.4148 15.8065 60.7524 15.3887L60.7525 15.3886M55.1351 21.7473L60.7525 15.3886M60.7525 15.3886C62.1223 15.1432 63.4396 15.6032 64.2029 16.5597L60.7525 15.3886Z"
|
||||
fill="var(--accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
<path
|
||||
d="M54.673 23.6159C55.8513 23.6159 56.8066 22.6606 56.8066 21.4823C56.8066 20.3039 55.8513 19.3486 54.673 19.3486C53.4946 19.3486 52.5393 20.3039 52.5393 21.4823C52.5393 22.6606 53.4946 23.6159 54.673 23.6159Z"
|
||||
fill="var(--accent-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
export function CleanPannel() {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_1782_1158)">
|
||||
<path d="M12 0H0V12H12V0Z" fill="white" fillOpacity="0.01" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5 1.47852H7V3.47853H10.75V5.47853H1.25V3.47853H5V1.47852Z"
|
||||
stroke="#2B3344"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path d="M2 10H10V5.5H2V10Z" stroke="#2B3344" strokeLinejoin="round" />
|
||||
<path
|
||||
d="M4 9.97439V8.47852"
|
||||
stroke="#2B3344"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6 9.97461V8.47461"
|
||||
stroke="#2B3344"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M8 9.97439V8.47852"
|
||||
stroke="#2B3344"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M3 10H9"
|
||||
stroke="#2B3344"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1782_1158">
|
||||
<rect width="12" height="12" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function EyeIcon({ fill }: { fill?: string }) {
|
||||
return (
|
||||
<svg
|
||||
width="14"
|
||||
height="15"
|
||||
viewBox="0 0 14 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8.75047 7.4375C8.75047 8.40402 7.967 9.1875 7.00047 9.1875C6.034 9.1875 5.25049 8.40402 5.25049 7.4375C5.25049 6.47097 6.034 5.6875 7.00047 5.6875C7.967 5.6875 8.75047 6.47097 8.75047 7.4375Z"
|
||||
stroke={fill}
|
||||
strokeOpacity="1"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.00086 3.35419C4.3889 3.35419 2.1779 5.07087 1.43457 7.43752C2.17789 9.80416 4.3889 11.5209 7.00086 11.5209C9.6128 11.5209 11.8238 9.80416 12.5671 7.43752C11.8238 5.07088 9.6128 3.35419 7.00086 3.35419Z"
|
||||
stroke={fill}
|
||||
strokeOpacity="1"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function LockIcon({ fill }: { fill?: string }) {
|
||||
return (
|
||||
<svg
|
||||
width="14"
|
||||
height="15"
|
||||
viewBox="0 0 14 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4.0835 6.28763C4.35849 6.27083 4.69751 6.27083 5.1335 6.27083H8.86683C9.30281 6.27083 9.64185 6.27083 9.91683 6.28763M4.0835 6.28763C3.74031 6.30857 3.49683 6.35571 3.28901 6.46158C2.95973 6.62935 2.69201 6.89704 2.52423 7.22633C2.3335 7.60072 2.3335 8.09072 2.3335 9.07083V9.8875C2.3335 10.8676 2.3335 11.3576 2.52423 11.732C2.69201 12.0613 2.95973 12.329 3.28901 12.4967C3.66336 12.6875 4.1534 12.6875 5.1335 12.6875H8.86683C9.84695 12.6875 10.3369 12.6875 10.7113 12.4967C11.0406 12.329 11.3083 12.0613 11.4761 11.732C11.6668 11.3576 11.6668 10.8676 11.6668 9.8875V9.07083C11.6668 8.09072 11.6668 7.60072 11.4761 7.22633C11.3083 6.89704 11.0406 6.62935 10.7113 6.46158C10.5035 6.35571 10.26 6.30857 9.91683 6.28763M4.0835 6.28763V5.10417C4.0835 3.49334 5.38933 2.1875 7.00016 2.1875C8.61098 2.1875 9.91683 3.49334 9.91683 5.10417V6.28763"
|
||||
stroke={fill}
|
||||
strokeOpacity="1"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
export function StockIncreseIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="9"
|
||||
height="9"
|
||||
viewBox="0 0 9 9"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_3050_69519)">
|
||||
<path
|
||||
d="M7.80766 6.99219H1.17811C0.752382 6.99219 0.407227 7.33734 0.407227 7.76307C0.407227 8.18879 0.752382 8.53395 1.17811 8.53395H7.80766C8.23339 8.53395 8.57854 8.18879 8.57854 7.76307C8.57854 7.33733 8.23339 6.99219 7.80766 6.99219Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M2.05066 6.50215C2.47639 6.50215 2.82154 6.15699 2.82154 5.73127V2.7865C2.82154 2.36078 2.47639 2.01562 2.05066 2.01562C1.62494 2.01562 1.27979 2.36078 1.27979 2.7865V5.73127C1.27977 6.15699 1.62494 6.50215 2.05066 6.50215Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M4.49598 6.49421C4.9217 6.49421 5.26686 6.14905 5.26686 5.72333V1.80213C5.26686 1.37641 4.9217 1.03125 4.49598 1.03125C4.07025 1.03125 3.7251 1.37641 3.7251 1.80213V5.72333C3.7251 6.14905 4.07023 6.49421 4.49598 6.49421Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M6.92957 6.50192C7.35529 6.50192 7.70042 6.15677 7.70042 5.73104V0.83338C7.70046 0.407655 7.35532 0.0625 6.92957 0.0625C6.50385 0.0625 6.15869 0.407655 6.15869 0.83338V5.73103C6.15869 6.15677 6.50385 6.50192 6.92957 6.50192Z"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<rect
|
||||
x="0.27293"
|
||||
y="0.066387"
|
||||
width="8.45313"
|
||||
height="8.45313"
|
||||
stroke="url(#paint0_linear_3050_69519)"
|
||||
strokeWidth="0.0233989"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_3050_69519"
|
||||
x1="4.4995"
|
||||
y1="0.0546875"
|
||||
x2="4.4995"
|
||||
y2="8.53122"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#31B2B9" />
|
||||
<stop offset="1" stop-color="#FBD8B8" />
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_3050_69519">
|
||||
<rect
|
||||
x="0.26123"
|
||||
y="0.0546875"
|
||||
width="8.47653"
|
||||
height="8.47653"
|
||||
fill="white"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
export function AnalysisIcon({ isActive }: { isActive: boolean }) {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M17.5002 12.4987L15.1418 10.1404M10.8335 14.1654H5.8335M7.50016 10.832H5.8335M10.8335 8.33203C10.8335 8.82648 10.9801 9.30983 11.2548 9.72096C11.5295 10.1321 11.92 10.4525 12.3768 10.6417C12.8336 10.8309 13.3363 10.8805 13.8212 10.784C14.3062 10.6875 14.7516 10.4494 15.1013 10.0998C15.4509 9.75017 15.689 9.30471 15.7855 8.81976C15.8819 8.3348 15.8324 7.83214 15.6432 7.37532C15.454 6.91851 15.1335 6.52806 14.7224 6.25336C14.3113 5.97865 13.8279 5.83203 13.3335 5.83203C12.6705 5.83203 12.0346 6.09542 11.5657 6.56426C11.0969 7.03311 10.8335 7.66899 10.8335 8.33203Z"
|
||||
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.1667 14.1667V16.6667C14.1667 16.8877 14.0789 17.0996 13.9226 17.2559C13.7663 17.4122 13.5543 17.5 13.3333 17.5H3.33333C3.11232 17.5 2.90036 17.4122 2.74408 17.2559C2.5878 17.0996 2.5 16.8877 2.5 16.6667V3.33333C2.5 3.11232 2.5878 2.90036 2.74408 2.74408C2.90036 2.5878 3.11232 2.5 3.33333 2.5H13.3333"
|
||||
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function MechanicsIcon({ isActive }: { isActive: boolean }) {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M17.69 11.7629L16.4912 11.5885C16.4161 11.5828 16.3514 11.5356 16.3226 11.466L15.9339 10.5281C15.9049 10.4588 15.917 10.3794 15.9662 10.3224L16.6834 9.35896C16.7973 9.22544 16.7898 9.02639 16.6655 8.90212L16.098 8.3348C15.974 8.21053 15.7746 8.20247 15.6414 8.31697L14.6776 9.03387C14.621 9.08282 14.541 9.09546 14.4719 9.0667L13.5338 8.67776C13.4644 8.64929 13.417 8.58341 13.4109 8.50918L13.2372 7.31068C13.2234 7.1352 13.0772 7 12.9018 7H12.0991C11.9234 7 11.7772 7.1352 11.7637 7.31068L11.5893 8.50918C11.5839 8.58399 11.5364 8.64929 11.4671 8.67776L10.5286 9.0667C10.4593 9.09546 10.3799 9.08282 10.3227 9.03387L9.35945 8.31697C9.22628 8.20276 9.0272 8.2105 8.90264 8.3348L8.33532 8.90212C8.21105 9.02639 8.20357 9.22547 8.31746 9.35896L9.03439 10.3227C9.08302 10.3794 9.09598 10.4591 9.06693 10.5281L8.67825 11.466C8.65007 11.5356 8.58448 11.5828 8.50996 11.5889L7.31062 11.7629C7.13569 11.7767 7.00049 11.9229 7.00049 12.0986V12.901C7.00049 13.0765 7.13572 13.2232 7.31062 13.2364L8.50996 13.4105C8.58448 13.4165 8.65007 13.464 8.67825 13.5333L9.06693 14.4712C9.09598 14.5408 9.08305 14.6205 9.03439 14.6772L8.31746 15.641C8.20354 15.7744 8.21102 15.9729 8.33532 16.0978L8.90264 16.6651C9.0272 16.7894 9.22628 16.7969 9.35945 16.6827L10.3227 15.9654C10.3799 15.9171 10.4593 15.9042 10.5286 15.9333L11.4671 16.3216C11.5364 16.3507 11.5839 16.4157 11.5897 16.4908L11.7637 17.6893C11.7775 17.8645 11.9234 18 12.0991 18H12.9018C13.0776 18 13.2234 17.8645 13.2372 17.6893L13.411 16.4908C13.417 16.4157 13.4645 16.3507 13.5338 16.3216L14.4722 15.9333C14.5413 15.9042 14.6213 15.9171 14.6779 15.9654L15.6414 16.6827C15.7746 16.7969 15.974 16.7894 16.098 16.6651L16.6656 16.0978C16.7902 15.9729 16.7974 15.7744 16.6834 15.641L15.9662 14.6772C15.9179 14.6205 15.9049 14.5408 15.934 14.4712L16.3226 13.5333C16.3514 13.464 16.4161 13.4165 16.4912 13.4105L17.69 13.2364C17.8652 13.2232 18.0004 13.0765 18.0004 12.901V12.0986C18.0004 11.9228 17.8652 11.7767 17.69 11.7629ZM13.8191 13.8187C13.4667 14.1706 12.9987 14.3645 12.5004 14.3645C12.0024 14.3645 11.5337 14.1706 11.1816 13.8187C10.8295 13.466 10.6353 12.9979 10.6353 12.4997C10.6353 12.0017 10.8295 11.5333 11.1816 11.1812C11.5337 10.8285 12.0024 10.6351 12.5004 10.6351C12.9987 10.6351 13.4667 10.8285 13.8191 11.1812C14.1712 11.5333 14.3652 12.0017 14.3652 12.4997C14.3652 12.9979 14.1713 13.466 13.8191 13.8187Z"
|
||||
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M6.7961 8.78085C6.92052 8.73626 6.98909 8.60354 6.95416 8.47635L6.77216 7.58599C6.75759 7.53147 6.77438 7.47339 6.81595 7.43541L7.37949 6.92253C7.42078 6.88482 7.48083 6.87353 7.53285 6.89334L8.39565 7.15458C8.51874 7.20111 8.65747 7.1455 8.71367 7.02603L8.96969 6.48121C9.02637 6.36145 8.98098 6.21939 8.86644 6.1544L8.11541 5.65637C8.06665 5.62829 8.03718 5.57515 8.04024 5.51899L8.07603 4.75805C8.07906 4.70161 8.11263 4.65178 8.1636 4.62864L8.96614 4.20052C9.08642 4.14683 9.14452 4.00865 9.09994 3.88532L8.89619 3.31844C8.85132 3.19427 8.7186 3.12546 8.59144 3.16042L7.70081 3.34183C7.64628 3.35726 7.58873 3.34019 7.5505 3.29832L7.03784 2.73511C6.99958 2.69324 6.98804 2.63436 7.00837 2.58151L7.26967 1.71923C7.31617 1.59562 7.2606 1.45713 7.14084 1.40122L6.59627 1.14492C6.47679 1.08873 6.33417 1.13362 6.26894 1.24841L5.77118 1.99948C5.74335 2.04823 5.69024 2.07764 5.63405 2.07492L4.87311 2.03885C4.81695 2.03638 4.76629 2.00167 4.74345 1.951L4.31589 1.14877C4.26165 1.02849 4.12399 0.970357 4.0001 1.01498L3.43353 1.21897C3.30936 1.26359 3.24055 1.39603 3.27579 1.52319L3.45748 2.4141C3.47235 2.46804 3.45556 2.52642 3.41372 2.56413L2.85014 3.07729C2.8083 3.115 2.74912 3.12657 2.69626 3.10676L1.83398 2.84521C1.71093 2.79843 1.57244 2.85459 1.516 2.97404L1.25995 3.51864C1.20379 3.63812 1.24865 3.78074 1.3632 3.84569L2.11423 4.34373C2.16323 4.37156 2.19242 4.42442 2.1894 4.48058L2.1536 5.24152C2.15141 5.29824 2.11698 5.34779 2.06606 5.37091L1.26353 5.79899C1.14318 5.85296 1.08511 5.99089 1.12973 6.11423L1.33373 6.68107C1.37832 6.80524 1.51103 6.87405 1.63795 6.8394L2.52914 6.65716C2.58311 6.64228 2.64146 6.65935 2.67916 6.70119L3.19176 7.26449C3.23003 7.30633 3.24107 7.36579 3.2212 7.41838L2.95996 8.28065C2.91371 8.40399 2.96935 8.54247 3.08879 8.59863L3.63336 8.85466C3.75312 8.91109 3.89543 8.86567 3.9607 8.75141L4.45818 8.0001C4.48626 7.95165 4.53911 7.9219 4.59555 7.92517L5.35652 7.96097C5.41296 7.96375 5.46307 7.99732 5.48646 8.04879L5.91374 8.85074C5.96827 8.97108 6.10564 9.02971 6.2295 8.98509L6.7961 8.78085ZM5.58891 6.31659C5.23732 6.44295 4.85716 6.42533 4.51878 6.2662C4.18043 6.10707 3.92493 5.82571 3.79802 5.47385C3.67166 5.12201 3.68928 4.7421 3.84844 4.40403C4.00754 4.0654 4.28917 3.8099 4.64076 3.68329C4.99259 3.55662 5.37251 3.57424 5.71058 3.73393C6.04865 3.89251 6.3047 4.17389 6.43159 4.52573C6.55798 4.87759 6.54008 5.25723 6.38123 5.59561C6.22154 5.93365 5.94043 6.18967 5.58891 6.31659Z"
|
||||
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function PropertiesIcon({ isActive }: { isActive: boolean }) {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M17.4254 15.3839L8.67142 6.79353C8.79789 6.57037 8.90139 6.337 8.97464 6.09625C8.98245 6.01909 8.99808 5.93903 9.02639 5.85746C9.04151 5.81156 9.05423 5.76468 9.06692 5.71831C9.26711 4.6353 8.94923 3.4756 8.11182 2.63819C7.84716 2.37353 7.54982 2.16113 7.23341 2C7.21778 2 7.20216 2.00197 7.18703 2.00538L6.90578 2.07422C6.85303 2.08791 6.80762 2.12109 6.78028 2.16797C6.75294 2.21435 6.74562 2.2705 6.76025 2.32275L7.36475 4.49367C7.38722 4.57474 7.35694 4.66067 7.28906 4.70999L5.91552 5.70756C5.87352 5.73734 5.82177 5.75052 5.77049 5.74368L4.31101 5.54249C4.23142 5.53174 4.16648 5.47512 4.14498 5.39796L3.50685 3.10504C3.47754 3.00104 3.3711 2.93804 3.26613 2.96391L2.89697 3.05426C2.87794 3.05913 2.86085 3.06891 2.84375 3.07916C2.41994 3.67339 2.20606 4.37117 2.20312 5.0699C2.20947 5.94687 2.54541 6.82188 3.21435 7.49082C4.02148 8.29748 5.12649 8.61389 6.17581 8.46592C6.32718 8.44395 6.46537 8.42879 6.59231 8.42001C6.7134 8.38679 6.83256 8.34335 6.95072 8.29598C8.41851 9.78233 15.631 17.1784 15.631 17.1784C16.1266 17.674 16.9298 17.674 17.4254 17.1784C17.921 16.6828 17.921 15.8796 17.4254 15.3839ZM16.9767 16.7297C16.7291 16.9777 16.3277 16.9777 16.0797 16.7297C15.8316 16.4821 15.8316 16.0802 16.0797 15.8322C16.3277 15.5846 16.7291 15.5846 16.9767 15.8322C17.2247 16.0802 17.2247 16.4821 16.9767 16.7297Z"
|
||||
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M14.6953 6.25784L16.1182 5.89699L17.4878 3.50488L16.8243 2.8755L16.1612 2.24609L13.8442 3.73926L13.5586 5.17824L11.0991 7.77054L12.2183 8.8682L14.6953 6.25784Z"
|
||||
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M7.56537 10.7632C7.28215 11.0083 6.8808 10.7046 6.35539 11.2588L2.88271 14.918C2.18837 15.6494 2.21865 16.8057 2.95009 17.5C3.68153 18.1944 4.83732 18.1641 5.53164 17.4327L9.00482 13.7725C9.53023 13.2188 9.20647 12.8345 9.43598 12.5386C9.48285 12.4776 9.52582 12.4356 9.56879 12.4038C8.91157 11.731 8.28266 11.0874 7.73821 10.5312C7.71528 10.6084 7.66303 10.6792 7.56537 10.7632Z"
|
||||
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function SimulationIcon({ isActive }: { isActive: boolean }) {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M6.44104 7.04762C6.57815 6.98413 6.73614 6.98413 6.87325 7.04762L12.0161 9.42958C12.198 9.51377 12.3143 9.69589 12.3143 9.89624V15.8512C12.3143 16.0347 12.2165 16.2043 12.0577 16.2962L6.9148 19.2736C6.75547 19.3659 6.55881 19.3659 6.39949 19.2736L1.25661 16.2962C1.09779 16.2043 1 16.0347 1 15.8512V9.89624C1 9.69589 1.11635 9.51377 1.29815 9.42958L6.44104 7.04762ZM2.02857 10.7297L6.14286 12.794V17.9366L2.02857 15.5546V10.7297ZM7.17143 17.9366L11.2857 15.5546V10.7297L7.17143 12.794V17.9366ZM6.65714 11.9013L10.6163 9.91477L6.65714 8.08106L2.69798 9.91477L6.65714 11.9013Z"
|
||||
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M12.441 1.04762C12.5781 0.984127 12.7361 0.984127 12.8732 1.04762L18.0161 3.42958C18.198 3.51377 18.3143 3.69589 18.3143 3.89624V9.85116C18.3143 10.0347 18.2165 10.2043 18.0577 10.2962L12.9148 13.2736C12.7555 13.3659 12.5588 13.3659 12.3995 13.2736L7.25661 10.2962C7.09779 10.2043 7 10.0347 7 9.85116V3.89624C7 3.69589 7.11635 3.51377 7.29815 3.42958L12.441 1.04762ZM8.02857 4.72968L12.1429 6.79403V11.9366L8.02857 9.55463V4.72968ZM13.1714 11.9366L17.2857 9.55463V4.72968L13.1714 6.79403V11.9366ZM12.6571 5.90129L16.6163 3.91477L12.6571 2.08106L8.69798 3.91477L12.6571 5.90129Z"
|
||||
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { Canvas } from "@react-three/fiber";
|
||||
import Throughput from "./cards/Throughput";
|
||||
import ReturnOfInvestment from "./cards/ReturnOfInvestment";
|
||||
import ProductionCapacity from "./cards/ProductionCapacity";
|
||||
import { OrbitControls } from "@react-three/drei";
|
||||
import StateWorking from "./cards/StateWorking";
|
||||
|
||||
const CardsScene = () => {
|
||||
return (
|
||||
<div className="cards-scene" style={{ width: "100%", height: "100%" }}>
|
||||
<Canvas>
|
||||
{/* 3d-cards */}
|
||||
|
||||
{/* <Throughput /> */}
|
||||
{/* <ReturnOfInvestment /> */}
|
||||
{/* <ProductionCapacity /> */}
|
||||
{/* <StateWorking /> */}
|
||||
|
||||
<OrbitControls />
|
||||
</Canvas>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardsScene;
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
import { Html } from "@react-three/drei";
|
||||
import React from "react";
|
||||
import { Bar } from "react-chartjs-2";
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
BarElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
TooltipItem, // Import TooltipItem for typing
|
||||
} from "chart.js";
|
||||
|
||||
// Register ChartJS components
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
BarElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend
|
||||
);
|
||||
|
||||
const ProductionCapacity = () => {
|
||||
// Chart data for a week
|
||||
const chartData = {
|
||||
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // Days of the week
|
||||
datasets: [
|
||||
{
|
||||
label: "Production Capacity (units/day)",
|
||||
data: [1500, 1600, 1400, 1700, 1800, 1900, 2000], // Example daily production data
|
||||
backgroundColor: "#6f42c1", // Theme color
|
||||
borderColor: "#6f42c1",
|
||||
borderWidth: 1,
|
||||
borderRadius: 8, // Rounded corners for the bars
|
||||
borderSkipped: false, // Ensure all corners are rounded
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// Chart options
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false, // Hide legend
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: "Weekly Production Capacity",
|
||||
font: {
|
||||
size: 16,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
// Explicitly type the context parameter
|
||||
label: (context: TooltipItem<"bar">) => {
|
||||
const value = context.parsed.y; // Extract the y-axis value
|
||||
return `${value} units`; // Customize tooltip to display "units"
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false, // Hide x-axis grid lines
|
||||
},
|
||||
},
|
||||
y: {
|
||||
display: false, // Remove the y-axis completely
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Html position={[0, 0, 0]} transform occlude>
|
||||
<div className="productionCapacity-wrapper card">
|
||||
<div className="headeproductionCapacityr-wrapper">
|
||||
<div className="header">Production Capacity</div>
|
||||
<div className="production-capacity">
|
||||
<div className="value">1,200</div>{" "}
|
||||
<div className="value">units/hour</div>
|
||||
</div>
|
||||
<div className="production-capacity">
|
||||
<div className="current">
|
||||
<div className="key">Current</div>
|
||||
<div className="value">1500</div>
|
||||
</div>
|
||||
<div className="target">
|
||||
<div className="key">Target</div>
|
||||
<div className="value">2.345</div>
|
||||
</div>
|
||||
{/* <div className="value">units/hour</div> */}
|
||||
</div>
|
||||
</div>{" "}
|
||||
<div className="bar-chart charts">
|
||||
{/* Bar Chart */}
|
||||
<Bar data={chartData} options={chartOptions} />
|
||||
</div>
|
||||
</div>
|
||||
</Html>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductionCapacity;
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
import { Html } from "@react-three/drei";
|
||||
import React from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Tooltip,
|
||||
ChartData,
|
||||
ChartOptions,
|
||||
} from "chart.js";
|
||||
import { WavyIcon } from "../../../icons/3dChartIcons";
|
||||
|
||||
// Register Chart.js components
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Tooltip
|
||||
);
|
||||
|
||||
// Define Props for SmoothLineGraphComponent
|
||||
interface SmoothLineGraphProps {
|
||||
data: ChartData<"line">; // Type for chart data
|
||||
options?: ChartOptions<"line">; // Type for chart options (optional)
|
||||
}
|
||||
|
||||
// SmoothLineGraphComponent using react-chartjs-2
|
||||
const SmoothLineGraphComponent: React.FC<SmoothLineGraphProps> = ({
|
||||
data,
|
||||
options,
|
||||
}) => {
|
||||
return <Line data={data} options={options} />;
|
||||
};
|
||||
|
||||
const ReturnOfInvestment = () => {
|
||||
// Improved sample data for the smooth curve graph (single day)
|
||||
const graphData: ChartData<"line"> = {
|
||||
labels: [
|
||||
"12 AM",
|
||||
"3 AM",
|
||||
"6 AM",
|
||||
"9 AM",
|
||||
"12 PM",
|
||||
"3 PM",
|
||||
"6 PM",
|
||||
"9 PM",
|
||||
"12 AM",
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: "Investment",
|
||||
data: [100, 250, 400, 400, 500, 600, 700, 800, 900], // Example investment growth
|
||||
borderColor: "rgba(75, 192, 192, 1)", // Light blue color
|
||||
backgroundColor: "rgba(75, 192, 192, 0.2)",
|
||||
fill: true,
|
||||
tension: 0.4, // Smooth curve effect
|
||||
pointRadius: 0, // Hide dots
|
||||
pointHoverRadius: 0, // Hide hover dots
|
||||
},
|
||||
{
|
||||
label: "Return",
|
||||
data: [100, 200, 500, 250, 300, 350, 400, 450, 500], // Example return values
|
||||
borderColor: "rgba(255, 99, 132, 1)", // Pink color
|
||||
backgroundColor: "rgba(255, 99, 132, 0.2)",
|
||||
fill: true,
|
||||
tension: 0.4, // Smooth curve effect
|
||||
pointRadius: 0, // Hide dots
|
||||
pointHoverRadius: 0, // Hide hover dots
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// Options for the smooth curve graph
|
||||
const graphOptions: ChartOptions<"line"> = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
tooltip: {
|
||||
enabled: true, // Enable tooltips on hover
|
||||
mode: "index", // Show both datasets' values at the same index
|
||||
intersect: false, // Allow hovering anywhere on the graph
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false, // Hide x-axis grid lines
|
||||
},
|
||||
ticks: {
|
||||
display: false, // Hide x-axis labels
|
||||
},
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
display: false, // Hide y-axis grid lines
|
||||
},
|
||||
ticks: {
|
||||
display: false, // Hide y-axis labels
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Html position={[0, 0, 0]} transform occlude>
|
||||
<div className="returnOfInvestment card">
|
||||
<div className="header">Return of Investment</div>
|
||||
<div className="lineGraph charts">
|
||||
{/* Smooth curve graph with two datasets */}
|
||||
<SmoothLineGraphComponent data={graphData} options={graphOptions} />
|
||||
</div>
|
||||
<div className="returns-wrapper">
|
||||
<div className="icon">
|
||||
<WavyIcon />
|
||||
</div>
|
||||
<div className="value">5.78</div>
|
||||
<div className="key">Years</div>
|
||||
</div>
|
||||
<div className="footer">
|
||||
in <span>5y</span> with avg <span>7%</span> yearly return
|
||||
</div>
|
||||
</div>
|
||||
</Html>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReturnOfInvestment;
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
import { Html } from "@react-three/drei";
|
||||
import image from "../../../../assets/image/temp/image.png";
|
||||
const StateWorking = () => {
|
||||
const datas = [
|
||||
{ key: "Oil Tank:", value: "24/341" },
|
||||
{ key: "Oil Refin:", value: 36.023 },
|
||||
{ key: "Transmission:", value: 36.023 },
|
||||
{ key: "Fuel:", value: 36732 },
|
||||
{ key: "Power:", value: 1300 },
|
||||
{ key: "Time:", value: 13 - 9 - 2023 },
|
||||
];
|
||||
return (
|
||||
<Html position={[0, 0, 0]} transform occlude>
|
||||
<div className="stateWorking-wrapper card">
|
||||
<div className="header-wrapper">
|
||||
<div className="header">
|
||||
<span>State</span>
|
||||
<span>
|
||||
Working <span>.</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="img">
|
||||
<img src={image} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
{/* Data */}
|
||||
<div className="data-wrapper">
|
||||
{datas.map((data, index) => (
|
||||
<div className="data-table" key={index}>
|
||||
<div className="data">{data.key}</div>
|
||||
<div className="key">{data.value}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Html>
|
||||
);
|
||||
};
|
||||
|
||||
export default StateWorking;
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
import { Html } from "@react-three/drei";
|
||||
import React from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
ChartData,
|
||||
ChartOptions,
|
||||
} from "chart.js";
|
||||
import { ThroughputIcon } from "../../../icons/3dChartIcons";
|
||||
|
||||
// Register Chart.js components
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend
|
||||
);
|
||||
|
||||
// Define Props for LineGraphComponent
|
||||
interface LineGraphProps {
|
||||
data: ChartData<"line">; // Type for chart data
|
||||
options?: ChartOptions<"line">; // Type for chart options (optional)
|
||||
}
|
||||
|
||||
// LineGraphComponent using react-chartjs-2
|
||||
const LineGraphComponent: React.FC<LineGraphProps> = ({ data, options }) => {
|
||||
return <Line data={data} options={options} />;
|
||||
};
|
||||
|
||||
const Throughput = () => {
|
||||
// Sample data for the line graph
|
||||
const graphData: ChartData<"line"> = {
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Throughput",
|
||||
data: [1000, 1200, 1100, 1300, 1250, 1400], // Example throughput values
|
||||
borderColor: "rgba(75, 192, 192, 1)",
|
||||
backgroundColor: "rgba(75, 192, 192, 0.2)",
|
||||
fill: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// Options for the line graph
|
||||
const graphOptions: ChartOptions<"line"> = {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: "top",
|
||||
display: false,
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: "Throughput Over Time",
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: true, // Show vertical grid lines
|
||||
},
|
||||
ticks: {
|
||||
display: false, // Hide x-axis labels
|
||||
},
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
display: false, // Hide horizontal grid lines
|
||||
},
|
||||
ticks: {
|
||||
display: false, // Hide y-axis labels
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Html position={[0, 0, 0]} transform occlude>
|
||||
<div className="throughput-wrapper">
|
||||
<div className="header">Throughput</div>
|
||||
<div className="display-value">
|
||||
<div className="left">
|
||||
<div className="icon">
|
||||
<ThroughputIcon />
|
||||
</div>
|
||||
<div className="value-container">
|
||||
<div className="value-wrapper">
|
||||
<div className="value">1,200</div>
|
||||
<div className="key"> Units/hr</div>
|
||||
</div>
|
||||
<div className="total-sales">
|
||||
<div className="value">316</div>
|
||||
<div className="key">sales</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right">
|
||||
<div className="percent-increase">5.77%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="line-graph">
|
||||
{/* Line graph using react-chartjs-2 */}
|
||||
<LineGraphComponent data={graphData} options={graphOptions} />
|
||||
</div>
|
||||
<div className="footer">
|
||||
You made an extra <span className="value">$1256.13</span> this month
|
||||
</div>
|
||||
</div>
|
||||
</Html>
|
||||
);
|
||||
};
|
||||
|
||||
export default Throughput;
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import React, { useState } from "react";
|
||||
import Search from "../../ui/inputs/Search";
|
||||
|
||||
const Assets: React.FC = () => {
|
||||
const [searchValue, setSearchValue] = useState<string>("");
|
||||
|
||||
const handleSearchChange = (value: string) => {
|
||||
setSearchValue(value);
|
||||
console.log(value); // Log the search value if needed
|
||||
};
|
||||
return (
|
||||
<div className="assets-container">
|
||||
<Search onChange={handleSearchChange} />
|
||||
{searchValue ? (
|
||||
<div className="searched-content">
|
||||
<p>Results for "{searchValue}"</p>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Assets;
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import React from "react";
|
||||
import { ToggleSidebarIcon } from "../../icons/HeaderIcons";
|
||||
import { LogoIcon } from "../../icons/Logo";
|
||||
import FileMenu from "../../ui/FileMenu";
|
||||
import useToggleStore from "../../../store/useUIToggleStore";
|
||||
|
||||
const Header: React.FC = () => {
|
||||
const { toggleUI, setToggleUI } = useToggleStore();
|
||||
return (
|
||||
<div className="header-container">
|
||||
<div className="header-content">
|
||||
<div className="logo-container">
|
||||
<LogoIcon />
|
||||
</div>
|
||||
<div className="header-title">
|
||||
<FileMenu />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`toggle-sidebar-ui-button ${!toggleUI ? "active" : ""}`}
|
||||
onClick={() => {
|
||||
setToggleUI(!toggleUI);
|
||||
}}
|
||||
>
|
||||
<ToggleSidebarIcon />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React, { useState } from "react";
|
||||
import Search from "../../ui/inputs/Search";
|
||||
import DropDownList from "../../ui/list/DropDownList";
|
||||
|
||||
const Outline: React.FC = () => {
|
||||
const [searchValue, setSearchValue] = useState<string>("");
|
||||
|
||||
const handleSearchChange = (value: string) => {
|
||||
setSearchValue(value);
|
||||
console.log(value); // Log the search value if needed
|
||||
};
|
||||
|
||||
const dropdownItems = [
|
||||
{ id: "1", name: "Ground Floor" },
|
||||
{ id: "2", name: "Floor 1" },
|
||||
]; // Example dropdown items
|
||||
|
||||
return (
|
||||
<div className="outline-container">
|
||||
<Search onChange={handleSearchChange} />
|
||||
{searchValue ? (
|
||||
<div className="searched-content">
|
||||
<p>Results for "{searchValue}"</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="outline-content-container">
|
||||
<DropDownList
|
||||
value="Layers"
|
||||
items={dropdownItems}
|
||||
defaultOpen={true}
|
||||
showKebabMenu={false}
|
||||
showFocusIcon={true}
|
||||
/>
|
||||
<DropDownList
|
||||
value="Scene"
|
||||
items={dropdownItems}
|
||||
defaultOpen={true}
|
||||
listType="outline"
|
||||
showKebabMenu={false}
|
||||
showAddIcon={false}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Outline;
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import ToggleHeader from "../../ui/inputs/ToggleHeader";
|
||||
import Outline from "./Outline";
|
||||
import Header from "./Header";
|
||||
import useToggleStore from "../../../store/useUIToggleStore";
|
||||
import Assets from "./Assets";
|
||||
import useModuleStore from "../../../store/useModuleStore";
|
||||
import Widgets from "./visualization/widgets/Widgets";
|
||||
import Templates from "./visualization/Templates";
|
||||
import Search from "../../ui/inputs/Search";
|
||||
|
||||
const SideBarLeft: React.FC = () => {
|
||||
const [activeOption, setActiveOption] = useState("Widgets");
|
||||
|
||||
const { toggleUI } = useToggleStore();
|
||||
const { activeModule } = useModuleStore();
|
||||
|
||||
// Reset activeOption whenever activeModule changes
|
||||
useEffect(() => {
|
||||
setActiveOption("Outline");
|
||||
if (activeModule === "visualization") setActiveOption("Widgets");
|
||||
}, [activeModule]);
|
||||
|
||||
const handleToggleClick = (option: string) => {
|
||||
setActiveOption(option); // Update the active option
|
||||
};
|
||||
|
||||
const handleSearchChange = (value: string) => {
|
||||
// Log the search value for now
|
||||
console.log(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="sidebar-left-wrapper">
|
||||
<Header />
|
||||
{toggleUI && (
|
||||
<div className="sidebar-left-container">
|
||||
{activeModule === "visualization" ? (
|
||||
<>
|
||||
<ToggleHeader
|
||||
options={["Widgets", "Templates"]}
|
||||
activeOption={activeOption}
|
||||
handleClick={handleToggleClick}
|
||||
/>
|
||||
<Search onChange={handleSearchChange} />
|
||||
<div className="sidebar-left-content-container">
|
||||
{activeOption === "Widgets" ? <Widgets /> : <Templates />}
|
||||
</div>
|
||||
</>
|
||||
) : activeModule === "market" ? (
|
||||
<></>
|
||||
) : (
|
||||
<>
|
||||
<ToggleHeader
|
||||
options={["Outline", "Assets"]}
|
||||
activeOption={activeOption}
|
||||
handleClick={handleToggleClick}
|
||||
/>
|
||||
<div className="sidebar-left-content-container">
|
||||
{activeOption === "Outline" ? <Outline /> : <Assets />}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SideBarLeft;
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
import useTemplateStore from "../../../../store/useTemplateStore";
|
||||
import { useSelectedZoneStore } from "../../../../store/useZoneStore";
|
||||
|
||||
const Templates = () => {
|
||||
const { templates, removeTemplate } = useTemplateStore();
|
||||
const { setSelectedZone } = useSelectedZoneStore();
|
||||
|
||||
console.log("templates: ", templates);
|
||||
const handleDeleteTemplate = (id: string) => {
|
||||
removeTemplate(id);
|
||||
};
|
||||
|
||||
const handleLoadTemplate = (template: any) => {
|
||||
setSelectedZone((prev) => ({
|
||||
...prev,
|
||||
panelOrder: template.panelOrder,
|
||||
activeSides: Array.from(
|
||||
new Set([...prev.activeSides, ...template.panelOrder])
|
||||
),
|
||||
widgets: template.widgets,
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="template-list"
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
|
||||
gap: "1rem",
|
||||
padding: "1rem",
|
||||
}}
|
||||
>
|
||||
{templates.map((template) => (
|
||||
<div
|
||||
key={template.id}
|
||||
className="template-item"
|
||||
style={{
|
||||
border: "1px solid #e0e0e0",
|
||||
borderRadius: "8px",
|
||||
padding: "1rem",
|
||||
transition: "box-shadow 0.3s ease",
|
||||
}}
|
||||
>
|
||||
{template.snapshot && (
|
||||
<div style={{ position: "relative", paddingBottom: "56.25%" }}>
|
||||
{" "}
|
||||
{/* 16:9 aspect ratio */}
|
||||
<img
|
||||
src={template.snapshot} // Corrected from template.image to template.snapshot
|
||||
alt={`${template.name} preview`}
|
||||
style={{
|
||||
position: "absolute",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "contain",
|
||||
borderRadius: "4px",
|
||||
cursor: "pointer",
|
||||
transition: "transform 0.3s ease",
|
||||
// ':hover': {
|
||||
// transform: 'scale(1.05)'
|
||||
// }
|
||||
}}
|
||||
onClick={() => handleLoadTemplate(template)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
onClick={() => handleLoadTemplate(template)}
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
fontWeight: "500",
|
||||
// ':hover': {
|
||||
// textDecoration: 'underline'
|
||||
// }
|
||||
}}
|
||||
>
|
||||
{template.name}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDeleteTemplate(template.id)}
|
||||
style={{
|
||||
padding: "0.25rem 0.5rem",
|
||||
background: "#ff4444",
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
cursor: "pointer",
|
||||
transition: "opacity 0.3s ease",
|
||||
// ':hover': {
|
||||
// opacity: 0.8
|
||||
// }
|
||||
}}
|
||||
aria-label="Delete template"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{templates.length === 0 && (
|
||||
<div
|
||||
style={{
|
||||
textAlign: "center",
|
||||
color: "#666",
|
||||
padding: "2rem",
|
||||
gridColumn: "1 / -1",
|
||||
}}
|
||||
>
|
||||
No saved templates yet. Create one in the visualization view!
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Templates;
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
import React, { useEffect, useRef, useMemo } from "react";
|
||||
import { Chart } from "chart.js/auto";
|
||||
// import { useThemeStore } from "../../../../../store/useThemeStore";
|
||||
|
||||
// Define Props Interface
|
||||
interface ChartComponentProps {
|
||||
type: any; // Type of chart (e.g., "bar", "line", etc.)
|
||||
title: string; // Title of the chart
|
||||
fontFamily?: string; // Optional font family for the chart title
|
||||
fontSize?: string; // Optional font size for the chart title
|
||||
fontWeight?: "Light" | "Regular" | "Bold"; // Optional font weight for the chart title
|
||||
data: {
|
||||
labels: string[]; // Labels for the x-axis
|
||||
datasets: {
|
||||
data: number[]; // Data points for the chart
|
||||
backgroundColor: string; // Background color for the chart
|
||||
borderColor: string; // Border color for the chart
|
||||
borderWidth: number; // Border width for the chart
|
||||
}[];
|
||||
}; // Data for the chart
|
||||
}
|
||||
|
||||
const ChartComponent = ({
|
||||
type,
|
||||
title,
|
||||
fontFamily,
|
||||
fontSize,
|
||||
fontWeight = "Regular", // Default to "Regular"
|
||||
data: propsData,
|
||||
}: ChartComponentProps) => {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
// const { themeColor } = useThemeStore();
|
||||
|
||||
// Memoize Theme Colors to Prevent Unnecessary Recalculations
|
||||
// const buttonActionColor = useMemo(
|
||||
// () => themeColor[0] || "#5c87df",
|
||||
// [themeColor]
|
||||
// );
|
||||
// const buttonAbortColor = useMemo(
|
||||
// () => themeColor[1] || "#ffffff",
|
||||
// [themeColor]
|
||||
// );
|
||||
|
||||
// Memoize Font Weight Mapping
|
||||
const chartFontWeightMap = useMemo(
|
||||
() => ({
|
||||
Light: "lighter" as const,
|
||||
Regular: "normal" as const,
|
||||
Bold: "bold" as const,
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
// Parse and Memoize Font Size
|
||||
const fontSizeValue = useMemo(
|
||||
() => (fontSize ? parseInt(fontSize) : 12),
|
||||
[fontSize]
|
||||
);
|
||||
|
||||
// Determine and Memoize Font Weight
|
||||
const fontWeightValue = useMemo(
|
||||
() => chartFontWeightMap[fontWeight],
|
||||
[fontWeight, chartFontWeightMap]
|
||||
);
|
||||
|
||||
// Memoize Chart Font Style
|
||||
const chartFontStyle = useMemo(
|
||||
() => ({
|
||||
family: fontFamily || "Arial",
|
||||
size: fontSizeValue,
|
||||
weight: fontWeightValue,
|
||||
color: "#2B3344",
|
||||
}),
|
||||
[fontFamily, fontSizeValue, fontWeightValue]
|
||||
);
|
||||
|
||||
// Memoize Chart Data
|
||||
const data = useMemo(() => propsData, [propsData]);
|
||||
|
||||
// Memoize Chart Options
|
||||
const options = useMemo(
|
||||
() => ({
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: title,
|
||||
font: chartFontStyle,
|
||||
align: "start", // Left align the title
|
||||
padding: {
|
||||
top: 10, // Add padding above the title
|
||||
bottom: 20, // Add padding between the title and the chart
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
}),
|
||||
[title, chartFontStyle]
|
||||
);
|
||||
|
||||
// Initialize Chart on Component Mount
|
||||
useEffect(() => {
|
||||
if (!canvasRef.current) return;
|
||||
|
||||
const ctx = canvasRef.current.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
const chart = new Chart(ctx, { type, data, options });
|
||||
|
||||
// Cleanup: Destroy the chart instance when the component unmounts
|
||||
return () => chart.destroy();
|
||||
}, [type, data, options]); // Only recreate the chart when these dependencies change
|
||||
|
||||
return <canvas ref={canvasRef} style={{ width: "100%", height: "100%" }} />;
|
||||
};
|
||||
|
||||
export default React.memo(ChartComponent, (prevProps, nextProps) => {
|
||||
// Custom comparison function to prevent unnecessary re-renders
|
||||
return (
|
||||
prevProps.type === nextProps.type &&
|
||||
prevProps.title === nextProps.title &&
|
||||
prevProps.fontFamily === nextProps.fontFamily &&
|
||||
prevProps.fontSize === nextProps.fontSize &&
|
||||
prevProps.fontWeight === nextProps.fontWeight &&
|
||||
JSON.stringify(prevProps.data) === JSON.stringify(nextProps.data)
|
||||
);
|
||||
});
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import { useState } from "react";
|
||||
import ToggleHeader from "../../../../ui/inputs/ToggleHeader";
|
||||
import Widgets2D from "./Widgets2D";
|
||||
import Widgets3D from "./Widgets3D";
|
||||
import WidgetsFloating from "./WidgetsFloating";
|
||||
|
||||
const Widgets = () => {
|
||||
const [activeOption, setActiveOption] = useState("Floating");
|
||||
|
||||
const handleToggleClick = (option: string) => {
|
||||
setActiveOption(option);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="widget-left-sideBar">
|
||||
<ToggleHeader
|
||||
options={["2D", "3D", "Floating"]}
|
||||
activeOption={activeOption}
|
||||
handleClick={handleToggleClick}
|
||||
/>
|
||||
{activeOption === "2D" && <Widgets2D />}
|
||||
{activeOption === "3D" && <Widgets3D />}
|
||||
{activeOption === "Floating" && <WidgetsFloating />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Widgets;
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
import React from "react";
|
||||
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
||||
import { ChartType } from "chart.js/auto";
|
||||
import ChartComponent from "./ChartComponent";
|
||||
import { StockIncreseIcon } from "../../../../icons/RealTimeVisulationIcons";
|
||||
|
||||
const chartTypes: ChartType[] = [
|
||||
"bar",
|
||||
"line",
|
||||
"pie",
|
||||
"doughnut",
|
||||
"radar",
|
||||
"polarArea",
|
||||
];
|
||||
|
||||
const sampleData = {
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
|
||||
datasets: [
|
||||
{
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
backgroundColor: "#6f42c1",
|
||||
borderColor: "#ffffff",
|
||||
borderWidth: 1,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
interface WidgetProps {
|
||||
type: ChartType;
|
||||
index: number;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const ChartWidget: React.FC<WidgetProps> = ({ type, index, title }) => {
|
||||
const { setDraggedAsset } = useWidgetStore((state) => state);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`chart chart-${index + 1}`}
|
||||
draggable
|
||||
onDragStart={() => {
|
||||
setDraggedAsset({
|
||||
type,
|
||||
id: `widget-${index + 1}`,
|
||||
title,
|
||||
panel: "top",
|
||||
data: sampleData,
|
||||
});
|
||||
}}
|
||||
onDragEnd={() => setDraggedAsset(null)}
|
||||
>
|
||||
<ChartComponent type={type} title={title} data={sampleData} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ProgressBarWidget = ({
|
||||
id,
|
||||
title,
|
||||
data,
|
||||
}: {
|
||||
id: string;
|
||||
title: string;
|
||||
data: any;
|
||||
}) => {
|
||||
const { setDraggedAsset } = useWidgetStore((state) => state);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="chart progressBar"
|
||||
draggable
|
||||
onDragStart={() => {
|
||||
setDraggedAsset({
|
||||
type: "progress",
|
||||
id,
|
||||
title,
|
||||
panel: "top",
|
||||
data,
|
||||
});
|
||||
}}
|
||||
onDragEnd={() => setDraggedAsset(null)}
|
||||
>
|
||||
<div className="header">{title}</div>
|
||||
{data.stocks.map((stock: any, index: number) => (
|
||||
<div className="stock" key={index}>
|
||||
<span className="stock-item">
|
||||
<span className="stockValues">
|
||||
<div className="key">{stock.key}</div>
|
||||
<div className="value">{stock.value}</div>
|
||||
</span>
|
||||
<div className="stock-description">{stock.description}</div>
|
||||
</span>
|
||||
<div className="icon">
|
||||
<StockIncreseIcon />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Widgets2D = () => {
|
||||
return (
|
||||
<div className="widget2D">
|
||||
<div className="chart-container">
|
||||
{chartTypes.map((type, index) => {
|
||||
const widgetTitle = `Widget ${index + 1}`;
|
||||
return (
|
||||
<ChartWidget
|
||||
key={index}
|
||||
type={type}
|
||||
index={index}
|
||||
title={widgetTitle}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<ProgressBarWidget
|
||||
id="widget-7"
|
||||
title="Widget 7"
|
||||
data={{
|
||||
stocks: [
|
||||
{ key: "units", value: 1000, description: "Initial stock" },
|
||||
],
|
||||
}}
|
||||
/>
|
||||
<ProgressBarWidget
|
||||
id="widget-8"
|
||||
title="Widget 8"
|
||||
data={{
|
||||
stocks: [
|
||||
{ key: "units", value: 1000, description: "Initial stock" },
|
||||
{ key: "units", value: 500, description: "Additional stock" },
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Widgets2D;
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import widget1 from "../../../../../assets/image/3D/ProductionCapacity.png";
|
||||
import widget2 from "../../../../../assets/image/3D/ReturnOfInvestment.png";
|
||||
import widget3 from "../../../../../assets/image/3D/StateWorking.png";
|
||||
import widget4 from "../../../../../assets/image/3D/Throughput.png";
|
||||
const Widgets3D = () => {
|
||||
const widgets = [
|
||||
{ name: "Widget 1", img: widget1 },
|
||||
{ name: "Widget 2", img: widget2 },
|
||||
{ name: "Widget 3", img: widget3 },
|
||||
{ name: "Widget 4", img: widget4 },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="widgets-container widget3D">
|
||||
{widgets?.map((widget, index) => (
|
||||
<div key={index} className="widget-item" draggable>
|
||||
<div className="widget-name">{widget.name}</div>
|
||||
<img
|
||||
className="widget-image"
|
||||
src={widget.img}
|
||||
alt={widget.name}
|
||||
draggable={false}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Widgets3D;
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
import React from "react";
|
||||
import {
|
||||
CartIcon,
|
||||
DocumentIcon,
|
||||
GlobeIcon,
|
||||
WalletIcon,
|
||||
} from "../../../../icons/3dChartIcons";
|
||||
import SimpleCard from "../../../../ui/realTimeVis/floating/SimpleCard";
|
||||
|
||||
import WarehouseThroughput from "../../../../ui/realTimeVis/floating/WarehouseThroughput";
|
||||
import ProductivityDashboard from "../../../../ui/realTimeVis/floating/ProductivityDashboard";
|
||||
import FleetEfficiency from "../../../../ui/realTimeVis/floating/FleetEfficiency";
|
||||
|
||||
interface Widget {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const WidgetsFloating = () => {
|
||||
// const [widgets, setWidgets] = useState<Widget[]>([
|
||||
// { id: "1", name: "Working State Widget" },
|
||||
// { id: "2", name: "Floating Widget 2" },
|
||||
// { id: "3", name: "Floating Widget 3" },
|
||||
// { id: "4", name: "Floating Widget 4" },
|
||||
// ]);
|
||||
|
||||
// Function to handle drag start
|
||||
const handleDragStart = (
|
||||
e: React.DragEvent<HTMLDivElement>,
|
||||
widget: Widget
|
||||
) => {
|
||||
e.dataTransfer.setData("application/json", JSON.stringify(widget));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="floatingWidgets-wrapper">
|
||||
{/* {widgets.map((widget) => (
|
||||
<div
|
||||
key={widget.id}
|
||||
className="floating"
|
||||
draggable
|
||||
onDragStart={(e) => handleDragStart(e, widget)}
|
||||
>
|
||||
{widget.name}
|
||||
</div>
|
||||
))} */}
|
||||
{/* Floating 1 */}
|
||||
<SimpleCard
|
||||
header={"Today’s Money"}
|
||||
icon={WalletIcon}
|
||||
value={"$53,000"}
|
||||
per={"+55%"}
|
||||
/>
|
||||
<SimpleCard
|
||||
header={"Today’s Users"}
|
||||
icon={GlobeIcon}
|
||||
value={"1,200"}
|
||||
per={"+30%"}
|
||||
/>
|
||||
<SimpleCard
|
||||
header={"New Clients"}
|
||||
icon={DocumentIcon}
|
||||
value={"250"}
|
||||
per={"+12%"}
|
||||
/>
|
||||
<SimpleCard
|
||||
header={"Total Sales"}
|
||||
icon={CartIcon}
|
||||
value={"$150,000"}
|
||||
per={"+20%"}
|
||||
/>{" "}
|
||||
<WarehouseThroughput />
|
||||
{/* <ProductivityDashboard /> */}
|
||||
<FleetEfficiency />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WidgetsFloating;
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import React from "react";
|
||||
import { AppDockIcon } from "../../icons/HeaderIcons";
|
||||
import orgImg from "../../../assets/orgTemp.png"
|
||||
|
||||
const Header: React.FC = () => {
|
||||
const guestUsers = [
|
||||
{ value: "Nazria", color: "#43C06D" },
|
||||
{ value: "Name1", color: "#0050EB" },
|
||||
{ value: "Abigail", color: "#FF6600" },
|
||||
{ value: "Jack", color: "#488EF6" },
|
||||
]; // Example guest users array
|
||||
|
||||
return (
|
||||
<div className="header-container">
|
||||
<div className="options-container">
|
||||
<div className="share-button">Share</div>
|
||||
<div className="app-docker-button">
|
||||
<AppDockIcon />
|
||||
</div>
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
<div className="users-container">
|
||||
<div className="guest-users-container">
|
||||
{guestUsers.length > 3 && (
|
||||
<div className="other-guest">+{guestUsers.length - 3}</div>
|
||||
)}
|
||||
{guestUsers.slice(0, 3).map((user, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="user-profile"
|
||||
style={{ background: user.color }}
|
||||
>
|
||||
{user.value[0]}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="user-profile-container">
|
||||
<div className="user-profile" style={{ background: "#48AC2A" }}>
|
||||
V
|
||||
</div>
|
||||
<div className="user-organization">
|
||||
<img src={orgImg} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import Header from "./Header";
|
||||
import useModuleStore from "../../../store/useModuleStore";
|
||||
import {
|
||||
AnalysisIcon,
|
||||
MechanicsIcon,
|
||||
PropertiesIcon,
|
||||
SimulationIcon,
|
||||
} from "../../icons/SimulationIcons";
|
||||
import useToggleStore from "../../../store/useUIToggleStore";
|
||||
import MachineMechanics from "./mechanics/MachineMechanics";
|
||||
import Visualization from "./visualization/Visualization";
|
||||
import GlobalProperties from "./properties/GlobalProperties";
|
||||
import AsstePropertiies from "./properties/AssetProperties";
|
||||
import Analysis from "./analysis/Analysis";
|
||||
import Simulations from "./simulation/Simulations";
|
||||
|
||||
const SideBarRight: React.FC = () => {
|
||||
const { activeModule } = useModuleStore();
|
||||
const [activeList, setActiveList] = useState("properties");
|
||||
const { toggleUI } = useToggleStore();
|
||||
|
||||
// Reset activeList whenever activeModule changes
|
||||
useEffect(() => {
|
||||
setActiveList("properties");
|
||||
}, [activeModule]);
|
||||
|
||||
return (
|
||||
<div className="sidebar-right-wrapper">
|
||||
<Header />
|
||||
{toggleUI && (
|
||||
<div className="sidebar-actions-container">
|
||||
<div
|
||||
className={`sidebar-action-list ${
|
||||
activeList === "properties" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => setActiveList("properties")}
|
||||
>
|
||||
<PropertiesIcon isActive={activeList === "properties"} />
|
||||
</div>
|
||||
{activeModule === "simulation" && (
|
||||
<>
|
||||
<div
|
||||
className={`sidebar-action-list ${
|
||||
activeList === "mechanics" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => setActiveList("mechanics")}
|
||||
>
|
||||
<MechanicsIcon isActive={activeList === "mechanics"} />
|
||||
</div>
|
||||
<div
|
||||
className={`sidebar-action-list ${
|
||||
activeList === "simulations" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => setActiveList("simulations")}
|
||||
>
|
||||
<SimulationIcon isActive={activeList === "simulations"} />
|
||||
</div>
|
||||
<div
|
||||
className={`sidebar-action-list ${
|
||||
activeList === "analysis" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => setActiveList("analysis")}
|
||||
>
|
||||
<AnalysisIcon isActive={activeList === "analysis"} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{/* process builder */}
|
||||
{toggleUI &&
|
||||
activeList === "properties" &&
|
||||
activeModule !== "visualization" && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
<GlobalProperties />
|
||||
{/* <AsstePropertiies /> */}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* simulation */}
|
||||
|
||||
{toggleUI && activeModule === "simulation" && (
|
||||
<>
|
||||
{activeList === "mechanics" && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
<MachineMechanics />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{activeList === "analysis" && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
<Analysis />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{activeList === "simulations" && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
<Simulations />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* realtime visualization */}
|
||||
{toggleUI && activeModule === "visualization" && <Visualization />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SideBarRight;
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
import React, { useState } from "react";
|
||||
import { AI_Icon } from "../../../icons/ExportCommonIcons";
|
||||
import RegularDropDown from "../../../ui/inputs/RegularDropDown";
|
||||
import { AnalysisPresetsType } from "../../../../types/analysis";
|
||||
import RenderAnalysisInputs from "./RenderAnalysisInputs";
|
||||
|
||||
const Analysis: React.FC = () => {
|
||||
const [selectedOption, setSelectedOption] = useState("Throughput time");
|
||||
|
||||
const handleSelect = (option: string) => {
|
||||
setSelectedOption(option); // Normalize for key matching
|
||||
};
|
||||
|
||||
const AnalysisPresets: AnalysisPresetsType = {
|
||||
"Throughput time": [
|
||||
{ type: "default", inputs: { label: "Height", activeOption: "mm" } },
|
||||
{ type: "default", inputs: { label: "Width", activeOption: "mm" } },
|
||||
{ type: "default", inputs: { label: "Length", activeOption: "mtr" } },
|
||||
{ type: "default", inputs: { label: "Thickness", activeOption: "mm" } },
|
||||
{
|
||||
type: "default",
|
||||
inputs: { label: "Raw Material", activeOption: "mm" },
|
||||
},
|
||||
{
|
||||
type: "range",
|
||||
inputs: { label: "Material flow", activeOption: "m/min" },
|
||||
},
|
||||
],
|
||||
"Production capacity": [
|
||||
{ type: "default", inputs: { label: "Height", activeOption: "mm" } },
|
||||
{ type: "default", inputs: { label: "Width", activeOption: "mm" } },
|
||||
{ type: "default", inputs: { label: "Length", activeOption: "mtr" } },
|
||||
{ type: "default", inputs: { label: "Thickness", activeOption: "mm" } },
|
||||
{
|
||||
type: "default",
|
||||
inputs: { label: "Raw Material", activeOption: "mm" },
|
||||
},
|
||||
{
|
||||
type: "range",
|
||||
inputs: { label: "Material flow", activeOption: "m/min" },
|
||||
},
|
||||
{
|
||||
type: "range",
|
||||
inputs: { label: "Shift 1", activeOption: "hr(s)" },
|
||||
},
|
||||
{
|
||||
type: "range",
|
||||
inputs: { label: "Shift 2", activeOption: "hr(s)" },
|
||||
},
|
||||
{
|
||||
type: "range",
|
||||
inputs: { label: "Over time", activeOption: "hr(s)" },
|
||||
},
|
||||
],
|
||||
ROI: [
|
||||
{
|
||||
type: "default",
|
||||
inputs: { label: "Equipment Cost", activeOption: "INR" },
|
||||
},
|
||||
{
|
||||
type: "default",
|
||||
inputs: { label: "Employee Salary", activeOption: "INR" },
|
||||
},
|
||||
{
|
||||
type: "default",
|
||||
inputs: { label: "Labor Cost", activeOption: "INR" },
|
||||
},
|
||||
{
|
||||
type: "default",
|
||||
inputs: { label: "Cost per unit", activeOption: "INR" },
|
||||
},
|
||||
{
|
||||
type: "default",
|
||||
inputs: { label: "Electricity cost", activeOption: "INR" },
|
||||
},
|
||||
{
|
||||
type: "default",
|
||||
inputs: { label: "Upkeep Cost", activeOption: "INR" },
|
||||
},
|
||||
{
|
||||
type: "default",
|
||||
inputs: { label: "Working Hours", activeOption: "Hrs" },
|
||||
},
|
||||
{
|
||||
type: "default",
|
||||
inputs: { label: "Power Usage", activeOption: "KWH" },
|
||||
},
|
||||
{ type: "default", inputs: { label: "KWH", activeOption: "Mos" } },
|
||||
{
|
||||
type: "default",
|
||||
inputs: { label: "Man Power", activeOption: "Person" },
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="analysis-main-wrapper">
|
||||
<div className="analysis-main-container">
|
||||
<div className="header">Object</div>
|
||||
<div className="generate-report-button">
|
||||
<AI_Icon /> Generate Report
|
||||
</div>
|
||||
<div className="analysis-content-container">
|
||||
<div className="dropdown-header-container">
|
||||
<div className="value">Create Analysis</div>
|
||||
</div>
|
||||
<div className="dropdown-content-container">
|
||||
<RegularDropDown
|
||||
header={selectedOption}
|
||||
options={["Throughput time", "Production capacity", "ROI"]}
|
||||
onSelect={handleSelect}
|
||||
search={false}
|
||||
/>
|
||||
</div>
|
||||
{/* Render only the selected option */}
|
||||
<RenderAnalysisInputs
|
||||
keyName={selectedOption}
|
||||
presets={
|
||||
AnalysisPresets[selectedOption as keyof AnalysisPresetsType]
|
||||
}
|
||||
/>
|
||||
<div className="buttons-container">
|
||||
<input type="button" value={"Clear"} className="cancel" />
|
||||
<input type="button" value={"Calculate"} className="submit" />
|
||||
</div>
|
||||
<div className="create-custom-analysis-container">
|
||||
<div className="custom-analysis-header">Create Custom Analysis</div>
|
||||
<div className="content">
|
||||
Click <span>'Create'</span> to enhances decision-making by
|
||||
providing actionable insights, optimizing operations that adapts
|
||||
to the unique challenges.
|
||||
</div>
|
||||
<div className="input">
|
||||
<input type="button" value={"Create"} className="submit" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Analysis;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue