first commit
initialized project updated theme addaptive svg icons defined project structure
This commit is contained in:
commit
cdf8dbbdba
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||
|
||||
```js
|
||||
export default tseslint.config({
|
||||
extends: [
|
||||
// Remove ...tseslint.configs.recommended and replace with this
|
||||
...tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
...tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
...tseslint.configs.stylisticTypeChecked,
|
||||
],
|
||||
languageOptions: {
|
||||
// other options...
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import reactX from 'eslint-plugin-react-x'
|
||||
import reactDom from 'eslint-plugin-react-dom'
|
||||
|
||||
export default tseslint.config({
|
||||
plugins: {
|
||||
// Add the react-x and react-dom plugins
|
||||
'react-x': reactX,
|
||||
'react-dom': reactDom,
|
||||
},
|
||||
rules: {
|
||||
// other rules...
|
||||
// Enable its recommended typescript rules
|
||||
...reactX.configs['recommended-typescript'].rules,
|
||||
...reactDom.configs.recommended.rules,
|
||||
},
|
||||
})
|
||||
```
|
||||
|
|
@ -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,28 @@
|
|||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
|
||||
export default tseslint.config(
|
||||
{ ignores: ['dist'] },
|
||||
{
|
||||
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
plugins: {
|
||||
'react-hooks': reactHooks,
|
||||
'react-refresh': reactRefresh,
|
||||
},
|
||||
rules: {
|
||||
...reactHooks.configs.recommended.rules,
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
},
|
||||
)
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/dwinzo_fill.svg" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<title>Dwinzo (beta)</title>
|
||||
</head>
|
||||
<body data-theme="light">
|
||||
<div id="root"></div>
|
||||
<div id="root-over"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"name": "react",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"path": "^0.12.7",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-router-dom": "^7.3.0",
|
||||
"zustand": "^5.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.21.0",
|
||||
"@types/node": "^22.13.10",
|
||||
"@types/react": "^19.0.10",
|
||||
"@types/react-dom": "^19.0.4",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"eslint": "^9.21.0",
|
||||
"eslint-plugin-react-hooks": "^5.1.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.19",
|
||||
"globals": "^15.15.0",
|
||||
"sass": "^1.85.1",
|
||||
"sass-embedded": "^1.85.1",
|
||||
"typescript": "~5.7.2",
|
||||
"typescript-eslint": "^8.24.1",
|
||||
"vite": "^6.2.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="12" r="12" fill="#FCFDFD"/>
|
||||
<circle cx="12.0522" cy="12.0522" r="8.45217" stroke="#6F42C1" strokeWidth="0.313043"/>
|
||||
<path d="M10.9363 11.3523L10.9147 11.2026C14.5863 10.6734 16.6134 8.57464 17.3146 7.69698L17.4328 7.7914C16.7204 8.68299 14.6614 10.8154 10.9363 11.3523Z" fill="#6F42C1" stroke="#6F42C1" strokeWidth="0.2"/>
|
||||
<path d="M10.9522 11.8333C11.2664 11.8333 11.5212 11.5786 11.5212 11.2643C11.5212 10.9501 11.2664 10.6954 10.9522 10.6954C10.638 10.6954 10.3832 10.9501 10.3832 11.2643C10.3832 11.5786 10.638 11.8333 10.9522 11.8333Z" fill="#6F42C1" stroke="#6F42C1" strokeWidth="0.2"/>
|
||||
<path d="M17.3523 8.33333C17.6665 8.33333 17.9213 8.0786 17.9213 7.76436C17.9213 7.45013 17.6665 7.19539 17.3523 7.19539C17.0381 7.19539 16.7833 7.45013 16.7833 7.76436C16.7833 8.0786 17.0381 8.33333 17.3523 8.33333Z" fill="#6F42C1" stroke="#6F42C1" strokeWidth="0.2"/>
|
||||
<path d="M8.74918 18.3024C8.04625 17.4173 6.93091 15.5707 7.35804 13.147L7.50694 13.1734C7.0901 15.5387 8.18042 17.343 8.86742 18.2082L8.74918 18.3024Z" fill="#6F42C1" stroke="#6F42C1" strokeWidth="0.2"/>
|
||||
<path d="M7.43182 13.7579C7.74605 13.7579 8.00079 13.5032 8.00079 13.1889C8.00079 12.8747 7.74605 12.62 7.43182 12.62C7.11759 12.62 6.86285 12.8747 6.86285 13.1889C6.86285 13.5032 7.11759 13.7579 7.43182 13.7579Z" fill="#6F42C1" stroke="#6F42C1" strokeWidth="0.2"/>
|
||||
<path d="M8.79071 18.8011C9.10494 18.8011 9.35968 18.5464 9.35968 18.2322C9.35968 17.9179 9.10494 17.6632 8.79071 17.6632C8.47648 17.6632 8.22174 17.9179 8.22174 18.2322C8.22174 18.5464 8.47648 18.8011 8.79071 18.8011Z" fill="#6F42C1" stroke="#6F42C1" strokeWidth="0.2"/>
|
||||
<path d="M17.7637 13.7198L17.6123 13.7155C17.6652 11.824 16.9421 10.0136 15.576 8.61802C14.1535 7.16453 12.168 6.33973 10.1231 6.35163L10.1221 6.20031C12.2045 6.19224 14.2332 7.02955 15.6841 8.5121C17.0791 9.93734 17.8175 11.7869 17.7637 13.7198Z" fill="#6F42C1" stroke="#6F42C1" strokeWidth="0.2"/>
|
||||
<path d="M17.6779 14.2579C17.9921 14.2579 18.2469 14.0031 18.2469 13.6889C18.2469 13.3747 17.9921 13.1199 17.6779 13.1199C17.3637 13.1199 17.1089 13.3747 17.1089 13.6889C17.1089 14.0031 17.3637 14.2579 17.6779 14.2579Z" fill="#6F42C1" stroke="#6F42C1" strokeWidth="0.2"/>
|
||||
<path d="M10.1504 6.85543C10.4646 6.85543 10.7194 6.60069 10.7194 6.28646C10.7194 5.97223 10.4646 5.71749 10.1504 5.71749C9.83616 5.71749 9.58142 5.97223 9.58142 6.28646C9.58142 6.60069 9.83616 6.85543 10.1504 6.85543Z" fill="#6F42C1" stroke="#6F42C1" strokeWidth="0.2"/>
|
||||
<path d="M13.0921 17.9118C8.5278 17.6866 5.43338 14.6981 4.05918 11.9763C3.04896 9.97527 2.89098 8.02544 3.64698 6.88751C4.13484 6.15309 4.85144 5.76721 5.94781 5.84347L5.79129 5.99999C4.74939 5.92716 4.22886 6.28505 3.77288 6.97124C3.04694 8.06398 3.20835 9.9555 4.19416 11.9081C5.54899 14.592 8.60003 17.5385 13.0995 17.7604L13.0921 17.9118Z" fill="#6F42C1" stroke="#6F42C1" strokeWidth="0.2"/>
|
||||
<path d="M6.6783 18.9391C4.56908 18.5933 3.13334 16.8929 3.03166 14.8835C2.934 12.9507 4.12379 10.6528 7.00213 9.87621L7.04147 10.0223C4.24465 10.7769 3.08815 13.0035 3.18298 14.8759C3.24579 16.1181 3.88476 17.5227 5.42612 18.2323C5.79587 18.4025 5.79134 18.3652 6.20873 18.5217L6.6783 18.9391Z" fill="#6F42C1" stroke="#6F42C1" strokeWidth="0.2"/>
|
||||
<path d="M6.99481 10.5271C7.30904 10.5271 7.56378 10.2724 7.56378 9.95812C7.56378 9.64389 7.30904 9.38915 6.99481 9.38915C6.68058 9.38915 6.42584 9.64389 6.42584 9.95812C6.42584 10.2724 6.68058 10.5271 6.99481 10.5271Z" fill="#6F42C1" stroke="#6F42C1" strokeWidth="0.2"/>
|
||||
<path d="M16.5275 21.0379C16.4619 21.0379 16.3955 21.0348 16.3281 21.0286C15.0498 20.9098 13.8919 19.7288 13.2303 17.8694L13.3729 17.8186C14.0141 19.6211 15.124 20.7647 16.3421 20.8779C16.9978 20.9402 17.5783 20.6759 17.8595 20.1925C18.1507 19.6923 18.141 19.2293 17.703 18.6018L17.8595 18.4453C18.3326 19.1232 18.3121 19.7151 17.9903 20.2686C17.7082 20.7532 17.159 21.0379 16.5275 21.0379Z" fill="#6F42C1" stroke="#6F42C1" strokeWidth="0.2"/>
|
||||
<path d="M13.0674 18.3952C13.3817 18.3952 13.6364 18.1405 13.6364 17.8262C13.6364 17.512 13.3817 17.2573 13.0674 17.2573C12.7532 17.2573 12.4985 17.512 12.4985 17.8262C12.4985 18.1405 12.7532 18.3952 13.0674 18.3952Z" fill="#6F42C1" stroke="#6F42C1" strokeWidth="0.2"/>
|
||||
<path d="M14.6394 5.77843L14.4955 5.73121C14.8393 4.68871 15.4466 4.01705 16.1621 3.88893C16.6025 3.80943 17.0355 3.95975 17.291 4.27994C17.5434 4.5963 17.7114 4.89582 17.5305 5.32174L17.3739 5.16522C17.5325 4.79196 17.3894 4.64594 17.1729 4.37437C16.9522 4.09775 16.5751 3.96882 16.1889 4.03803C15.5298 4.15586 14.9652 4.7904 14.6394 5.77843Z" fill="#6F42C1" stroke="#6F42C1" strokeWidth="0.2"/>
|
||||
<path d="M14.5795 6.29756C14.8937 6.29756 15.1484 6.04282 15.1484 5.72859C15.1484 5.41436 14.8937 5.15962 14.5795 5.15962C14.2652 5.15962 14.0105 5.41436 14.0105 5.72859C14.0105 6.04282 14.2652 6.29756 14.5795 6.29756Z" fill="#6F42C1" stroke="#6F42C1" strokeWidth="0.2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
|
|
@ -0,0 +1,20 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="12" r="12" fill="#6F42C1"/>
|
||||
<circle cx="12.0522" cy="12.0522" r="8.45217" stroke="#FCFDFD" strokeWidth="0.313043"/>
|
||||
<path d="M10.9363 11.3523L10.9147 11.2026C14.5863 10.6734 16.6134 8.57464 17.3146 7.69698L17.4328 7.7914C16.7204 8.68299 14.6614 10.8154 10.9363 11.3523Z" fill="#FCFDFD" stroke="#FCFDFD" strokeWidth="0.2"/>
|
||||
<path d="M10.9522 11.8333C11.2664 11.8333 11.5212 11.5786 11.5212 11.2643C11.5212 10.9501 11.2664 10.6954 10.9522 10.6954C10.638 10.6954 10.3832 10.9501 10.3832 11.2643C10.3832 11.5786 10.638 11.8333 10.9522 11.8333Z" fill="#FCFDFD" stroke="#FCFDFD" strokeWidth="0.2"/>
|
||||
<path d="M17.3523 8.33333C17.6665 8.33333 17.9213 8.0786 17.9213 7.76436C17.9213 7.45013 17.6665 7.19539 17.3523 7.19539C17.0381 7.19539 16.7833 7.45013 16.7833 7.76436C16.7833 8.0786 17.0381 8.33333 17.3523 8.33333Z" fill="#FCFDFD" stroke="#FCFDFD" strokeWidth="0.2"/>
|
||||
<path d="M8.74918 18.3024C8.04625 17.4173 6.93091 15.5707 7.35804 13.147L7.50694 13.1734C7.0901 15.5387 8.18042 17.343 8.86742 18.2082L8.74918 18.3024Z" fill="#FCFDFD" stroke="#FCFDFD" strokeWidth="0.2"/>
|
||||
<path d="M7.43182 13.7579C7.74605 13.7579 8.00079 13.5032 8.00079 13.1889C8.00079 12.8747 7.74605 12.62 7.43182 12.62C7.11759 12.62 6.86285 12.8747 6.86285 13.1889C6.86285 13.5032 7.11759 13.7579 7.43182 13.7579Z" fill="#FCFDFD" stroke="#FCFDFD" strokeWidth="0.2"/>
|
||||
<path d="M8.79071 18.8011C9.10494 18.8011 9.35968 18.5464 9.35968 18.2322C9.35968 17.9179 9.10494 17.6632 8.79071 17.6632C8.47648 17.6632 8.22174 17.9179 8.22174 18.2322C8.22174 18.5464 8.47648 18.8011 8.79071 18.8011Z" fill="#FCFDFD" stroke="#FCFDFD" strokeWidth="0.2"/>
|
||||
<path d="M17.7637 13.7198L17.6123 13.7155C17.6652 11.824 16.9421 10.0136 15.576 8.61802C14.1535 7.16453 12.168 6.33973 10.1231 6.35163L10.1221 6.20031C12.2045 6.19224 14.2332 7.02955 15.6841 8.5121C17.0791 9.93734 17.8175 11.7869 17.7637 13.7198Z" fill="#FCFDFD" stroke="#FCFDFD" strokeWidth="0.2"/>
|
||||
<path d="M17.6779 14.2579C17.9921 14.2579 18.2469 14.0031 18.2469 13.6889C18.2469 13.3747 17.9921 13.1199 17.6779 13.1199C17.3637 13.1199 17.1089 13.3747 17.1089 13.6889C17.1089 14.0031 17.3637 14.2579 17.6779 14.2579Z" fill="#FCFDFD" stroke="#FCFDFD" strokeWidth="0.2"/>
|
||||
<path d="M10.1504 6.85543C10.4646 6.85543 10.7194 6.60069 10.7194 6.28646C10.7194 5.97223 10.4646 5.71749 10.1504 5.71749C9.83616 5.71749 9.58142 5.97223 9.58142 6.28646C9.58142 6.60069 9.83616 6.85543 10.1504 6.85543Z" fill="#FCFDFD" stroke="#FCFDFD" strokeWidth="0.2"/>
|
||||
<path d="M13.0921 17.9118C8.5278 17.6866 5.43338 14.6981 4.05918 11.9763C3.04896 9.97527 2.89098 8.02544 3.64698 6.88751C4.13484 6.15309 4.85144 5.76721 5.94781 5.84347L5.79129 5.99999C4.74939 5.92716 4.22886 6.28505 3.77288 6.97124C3.04694 8.06398 3.20835 9.9555 4.19416 11.9081C5.54899 14.592 8.60003 17.5385 13.0995 17.7604L13.0921 17.9118Z" fill="#FCFDFD" stroke="#FCFDFD" strokeWidth="0.2"/>
|
||||
<path d="M6.6783 18.9391C4.56908 18.5933 3.13334 16.8929 3.03166 14.8835C2.934 12.9507 4.12379 10.6528 7.00213 9.87621L7.04147 10.0223C4.24465 10.7769 3.08815 13.0035 3.18298 14.8759C3.24579 16.1181 3.88476 17.5227 5.42612 18.2323C5.79587 18.4025 5.79134 18.3652 6.20873 18.5217L6.6783 18.9391Z" fill="#FCFDFD" stroke="#FCFDFD" strokeWidth="0.2"/>
|
||||
<path d="M6.99481 10.5271C7.30904 10.5271 7.56378 10.2724 7.56378 9.95812C7.56378 9.64389 7.30904 9.38915 6.99481 9.38915C6.68058 9.38915 6.42584 9.64389 6.42584 9.95812C6.42584 10.2724 6.68058 10.5271 6.99481 10.5271Z" fill="#FCFDFD" stroke="#FCFDFD" strokeWidth="0.2"/>
|
||||
<path d="M16.5275 21.0379C16.4619 21.0379 16.3955 21.0348 16.3281 21.0286C15.0498 20.9098 13.8919 19.7288 13.2303 17.8694L13.3729 17.8186C14.0141 19.6211 15.124 20.7647 16.3421 20.8779C16.9978 20.9402 17.5783 20.6759 17.8595 20.1925C18.1507 19.6923 18.141 19.2293 17.703 18.6018L17.8595 18.4453C18.3326 19.1232 18.3121 19.7151 17.9903 20.2686C17.7082 20.7532 17.159 21.0379 16.5275 21.0379Z" fill="#FCFDFD" stroke="#FCFDFD" strokeWidth="0.2"/>
|
||||
<path d="M13.0674 18.3952C13.3817 18.3952 13.6364 18.1405 13.6364 17.8262C13.6364 17.512 13.3817 17.2573 13.0674 17.2573C12.7532 17.2573 12.4985 17.512 12.4985 17.8262C12.4985 18.1405 12.7532 18.3952 13.0674 18.3952Z" fill="#FCFDFD" stroke="#FCFDFD" strokeWidth="0.2"/>
|
||||
<path d="M14.6394 5.77843L14.4955 5.73121C14.8393 4.68871 15.4466 4.01705 16.1621 3.88893C16.6025 3.80943 17.0355 3.95975 17.291 4.27994C17.5434 4.5963 17.7114 4.89582 17.5305 5.32174L17.3739 5.16522C17.5325 4.79196 17.3894 4.64594 17.1729 4.37437C16.9522 4.09775 16.5751 3.96882 16.1889 4.03803C15.5298 4.15586 14.9652 4.7904 14.6394 5.77843Z" fill="#FCFDFD" stroke="#FCFDFD" strokeWidth="0.2"/>
|
||||
<path d="M14.5795 6.29756C14.8937 6.29756 15.1484 6.04282 15.1484 5.72859C15.1484 5.41436 14.8937 5.15962 14.5795 5.15962C14.2652 5.15962 14.0105 5.41436 14.0105 5.72859C14.0105 6.04282 14.2652 6.29756 14.5795 6.29756Z" fill="#FCFDFD" stroke="#FCFDFD" strokeWidth="0.2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 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="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,19 @@
|
|||
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';
|
||||
|
||||
const App: React.FC = () => {
|
||||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/" element={<UserAuth />} />
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
<Route path="/project" element={<Project />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
|
@ -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,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 clip-path="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,403 @@
|
|||
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 clip-path="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 clip-path="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 clip-path="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 clip-path="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() {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8.00002 2.00003L6.25002 3.75003L5.8468 3.34681C5.65731 3.15732 5.34844 3.16283 5.16583 3.35896C4.99437 3.54312 4.99701 3.82926 5.17184 4.01023L7.93895 6.87443C8.12606 7.0681 8.43585 7.06999 8.6253 6.8786L8.68128 6.82205C8.86021 6.64129 8.86708 6.35233 8.69694 6.16327L8.28001 5.7L10 4.00003C10.5523 3.44774 10.5523 2.55231 10 2.00003C9.44772 1.44774 8.55232 1.44774 8.00002 2.00003Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M5 5.00005L3.20294 6.7971C2.94351 7.0565 2.8138 7.18625 2.72104 7.3376C2.63879 7.4718 2.57819 7.61815 2.54144 7.7712C2.5 7.9438 2.5 8.12725 2.5 8.49415V9.00005L1.5 10.5L3 9.50005H3.50589C3.87277 9.50005 4.05621 9.50005 4.22885 9.4586C4.3819 9.42185 4.52822 9.36125 4.66242 9.279C4.8138 9.18625 4.94351 9.0565 5.20295 8.7971L6.9 7.02"
|
||||
stroke="var(--text-color)"
|
||||
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
|
||||
fill-rule="evenodd"
|
||||
clip-rule="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
|
||||
fill-rule="evenodd"
|
||||
clip-rule="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>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
// 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,565 @@
|
|||
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 clip-path="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(--primary-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(--primary-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(--primary-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M4.57633 16.6667H1.53737L5.22405 9.16667L8.26301 9.16667L4.57633 16.6667Z"
|
||||
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M9.82919 16.6667H6.79023L10.4769 9.16667L13.5159 9.16667L9.82919 16.6667Z"
|
||||
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M15.1917 16.6667H12.1528L15.8395 9.16667L18.8637 9.16667V9.1967L15.1917 16.6667Z"
|
||||
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M18.8637 14.3162V16.6667H17.7083L18.8637 14.3162Z"
|
||||
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M7.75002 0.833332L10 3.08333L4.75002 8.33333H2.50002V6.08333L7.75002 0.833332Z"
|
||||
fill={isActive ? "var(--primary-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(--primary-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M11.0833 6.66667L13.3333 8.91667L8.08333 14.1667H5.83333V11.9167L11.0833 6.66667Z"
|
||||
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<circle
|
||||
cx="3.30001"
|
||||
cy="3.3"
|
||||
r="1.2"
|
||||
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<circle
|
||||
cx="15.8"
|
||||
cy="3.3"
|
||||
r="1.2"
|
||||
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<circle
|
||||
cx="15.8"
|
||||
cy="15.8"
|
||||
r="1.2"
|
||||
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<circle
|
||||
cx="3.30001"
|
||||
cy="15.8"
|
||||
r="1.2"
|
||||
fill={isActive ? "var(--primary-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 clip-path="url(#clip0_204_497)">
|
||||
<path
|
||||
d="M12.6101 7.17339H6.72171V10.7064H12.6101V7.17339Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M18.4986 7.17339H12.6102V10.7064H18.4986V7.17339Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.72172 7.17339H0.833313V10.7064H6.72172V7.17339Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.5544 10.7064H9.66595V14.2395H15.5544V10.7064Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.66594 10.7064H3.77753V14.2395H9.66594V10.7064Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.5544 3.64035H9.66595V7.1734H15.5544V3.64035Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.66594 3.64035H3.77753V7.1734H9.66594V3.64035Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
stroke="var(--accent-color)"
|
||||
stroke-miterlimit="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 clip-path="url(#clip0_111_392)">
|
||||
<path
|
||||
d="M12.6101 7.17339H6.72173V10.7064H12.6101V7.17339Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M18.4986 7.17339H12.6102V10.7064H18.4986V7.17339Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.72174 7.17339H0.833328V10.7064H6.72174V7.17339Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.5544 10.7064H9.66596V14.2395H15.5544V10.7064Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.66594 10.7064H3.77753V14.2395H9.66594V10.7064Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.5544 3.64035H9.66596V7.1734H15.5544V3.64035Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.66594 3.64035H3.77753V7.1734H9.66594V3.64035Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="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)"
|
||||
stroke-miterlimit="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)"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M14.3445 18.7347V5.86805"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M5.65552 18.7347V5.86805"
|
||||
stroke="var(--text-color)"
|
||||
stroke-miterlimit="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="M6.21757 16.8828L6.21566 16.8809C4.68158 15.3449 4.04131 13.1249 3.70825 11.97C3.65833 11.7969 3.61531 11.6477 3.57721 11.5284C3.50044 11.2891 3.40551 11.0392 3.30564 10.7763C3.24797 10.6245 3.18866 10.4684 3.13024 10.3074C2.98703 9.9129 2.83332 9.45028 2.83332 9.08537C2.83332 8.6844 3.10122 8.39598 3.31123 8.24069C3.53078 8.07835 3.82912 7.95218 4.1196 7.95218C4.55725 7.95218 4.93181 8.04977 5.25662 8.33367C5.54723 8.58768 5.75625 8.95913 5.96553 9.37774L5.96584 9.37836C6.08939 9.62636 6.21705 9.92271 6.34124 10.2145C6.35686 10.2512 6.37243 10.2879 6.38797 10.3244C6.4984 10.5843 6.60695 10.8398 6.7149 11.0731C6.75596 11.1619 6.79562 11.2445 6.8338 11.3204C6.83726 11.2299 6.8391 11.1288 6.8391 11.0163V3.4725C6.8391 3.16159 6.93896 2.83429 7.17719 2.58029C7.42159 2.31972 7.76795 2.18294 8.16676 2.18294C8.56324 2.18294 8.90801 2.32082 9.15193 2.57892C9.2602 2.69348 9.3408 2.82347 9.39652 2.96076V2.44843C9.39652 2.13309 9.50121 1.80699 9.74134 1.55631C9.98647 1.30041 10.331 1.16668 10.7242 1.16668C11.1174 1.16668 11.4619 1.30041 11.707 1.55632C11.9471 1.80701 12.0518 2.13311 12.0518 2.44843V2.54199C12.1086 2.40242 12.1909 2.27083 12.3008 2.15544C12.5442 1.89979 12.8875 1.76081 13.2816 1.76081C13.6757 1.76081 14.019 1.89979 14.2624 2.15545C14.5005 2.40556 14.6092 2.73172 14.6092 3.05037V4.9622C14.6621 4.83073 14.738 4.70531 14.8404 4.59356C15.0814 4.33067 15.4252 4.19203 15.8225 4.19203C16.2229 4.19203 16.5718 4.32703 16.8195 4.58529C17.0621 4.83817 17.1667 5.16647 17.1667 5.48156V12.7517C17.1667 14.7775 16.5703 16.3184 15.4877 17.3498C14.4096 18.3768 12.9178 18.8333 11.2539 18.8333C9.13033 18.8333 7.51063 18.1635 6.21757 16.8828ZM7.1414 11.8084C7.14138 11.8084 7.14074 11.8079 7.1395 11.807C7.14078 11.808 7.14141 11.8085 7.1414 11.8084Z"
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react';
|
||||
|
||||
const Assets: React.FC = () => {
|
||||
return (
|
||||
<div>Assets</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Assets;
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React from 'react';
|
||||
|
||||
const Header: React.FC = () => {
|
||||
return (
|
||||
<div className="header-container">
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react';
|
||||
|
||||
const Outline: React.FC = () => {
|
||||
return (
|
||||
<div>Outline</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Outline;
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import React, { useState } from "react";
|
||||
import ToggleHeader from "../../ui/inputs/ToggleHeader";
|
||||
import Search from "../../ui/inputs/Search";
|
||||
|
||||
const SideBarLeft: React.FC = () => {
|
||||
const [activeOption, setActiveOption] = useState("Option 1");
|
||||
|
||||
const handleToggleClick = (option: string) => {
|
||||
setActiveOption(option); // Update the active option
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div>SideBarLeft</div>
|
||||
<ToggleHeader
|
||||
options={["Outline", "Assets"]}
|
||||
activeOption={activeOption}
|
||||
handleClick={handleToggleClick}
|
||||
/>
|
||||
<Search onChange={(value) => console.log(value)} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SideBarLeft;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react';
|
||||
|
||||
const SideBarRight: React.FC = () => {
|
||||
return (
|
||||
<div>SideBarRight</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SideBarRight;
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { ReactNode } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
// Define the props interface for the component, which requires `children` as a ReactNode type
|
||||
interface PortalProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
// The `RenderOverlay` component allows rendering of its children into a specific DOM node (`root-over`) outside of the regular React component tree
|
||||
const RenderOverlay = ({ children }: PortalProps) => {
|
||||
// Retrieve the DOM element with the id `root-over` which serves as the mounting point for the overlay content.
|
||||
const rootOver = document.getElementById("root-over");
|
||||
|
||||
// If the `rootOver` element exists in the DOM, use `ReactDOM.createPortal` to render the `children` inside this element
|
||||
// `ReactDOM.createPortal` allows rendering outside of the usual React component tree, useful for overlays, modals, and tooltips
|
||||
// If `rootOver` is null (i.e., does not exist), return null, rendering nothing
|
||||
return rootOver ? ReactDOM.createPortal(children, rootOver) : null;
|
||||
};
|
||||
|
||||
// Export the `RenderOverlay` component as the default export for use in other parts of the application
|
||||
export default RenderOverlay;
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
import React from "react";
|
||||
import useModuleStore from "../../store/useModuleStore";
|
||||
import {
|
||||
BuilderIcon,
|
||||
SimulationIcon,
|
||||
VisualizationIcon,
|
||||
} from "../icons/ExportModuleIcons";
|
||||
|
||||
const ModuleToggle: React.FC = () => {
|
||||
const { activeModule, setActiveModule } = useModuleStore();
|
||||
|
||||
return (
|
||||
<div className="module-toggle-container">
|
||||
<div
|
||||
className={`module-list ${activeModule === "builder" && "active"}`}
|
||||
onClick={() => setActiveModule("builder")}
|
||||
>
|
||||
<div className="icon">
|
||||
<BuilderIcon isActive={activeModule === "builder"} />
|
||||
</div>
|
||||
<div className="module">Builder</div>
|
||||
</div>
|
||||
<div
|
||||
className={`module-list ${activeModule === "simulation" && "active"}`}
|
||||
onClick={() => setActiveModule("simulation")}
|
||||
>
|
||||
<div className="icon">
|
||||
<SimulationIcon isActive={activeModule === "simulation"} />
|
||||
</div>
|
||||
<div className="module">Simulation</div>
|
||||
</div>
|
||||
<div
|
||||
className={`module-list ${
|
||||
activeModule === "visualization" && "active"
|
||||
}`}
|
||||
onClick={() => setActiveModule("visualization")}
|
||||
>
|
||||
<div className="icon">
|
||||
<VisualizationIcon isActive={activeModule === "visualization"} />
|
||||
</div>
|
||||
<div className="module">Visualization</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModuleToggle;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react';
|
||||
|
||||
const Tools: React.FC = () => {
|
||||
return (
|
||||
<div>Tools</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tools;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react';
|
||||
|
||||
const ProjectDropDown: React.FC = () => {
|
||||
return (
|
||||
<div>ProjectDropDown</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectDropDown;
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import React, { ChangeEvent } from "react";
|
||||
import { SearchIcon } from "../../icons/ExportCommonIcons";
|
||||
|
||||
interface SearchProps {
|
||||
value?: string; // The current value of the search input
|
||||
placeholder?: string; // Placeholder text for the input
|
||||
onChange: (value: string) => void; // Callback function to handle input changes
|
||||
}
|
||||
|
||||
const Search: React.FC<SearchProps> = ({
|
||||
value,
|
||||
placeholder = "Search",
|
||||
onChange,
|
||||
}) => {
|
||||
// Handle input change
|
||||
const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
onChange(event.target.value); // Call the onChange prop with the new value
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="search-container">
|
||||
<SearchIcon />
|
||||
<input
|
||||
type="search"
|
||||
className="search-input"
|
||||
defaultValue={value}
|
||||
placeholder={placeholder}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Search;
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import React from "react";
|
||||
|
||||
interface ToggleHeaderProps {
|
||||
options: string[]; // Array of strings representing the options
|
||||
activeOption: string; // The currently active option
|
||||
handleClick: (option: string) => void; // Function to handle click events
|
||||
}
|
||||
|
||||
const ToggleHeader: React.FC<ToggleHeaderProps> = ({
|
||||
options,
|
||||
activeOption,
|
||||
handleClick,
|
||||
}) => {
|
||||
return (
|
||||
<div className="toggle-header-container">
|
||||
{options.map((option, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`toggle-header-item ${
|
||||
option === activeOption ? "active" : ""
|
||||
}`}
|
||||
onClick={() => handleClick(option)} // Call handleClick when an option is clicked
|
||||
>
|
||||
{option}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ToggleHeader;
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './styles/main.scss'
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react';
|
||||
|
||||
const Dashboard: React.FC = () => {
|
||||
return (
|
||||
<div>Dashboard</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import React from 'react';
|
||||
import ModuleToggle from '../components/ui/ModuleToggle';
|
||||
import SideBarLeft from '../components/layout/sidebarLeft/SideBarLeft';
|
||||
|
||||
const Project: React.FC = () => {
|
||||
return (
|
||||
<div className="project-main">
|
||||
<ModuleToggle />
|
||||
<SideBarLeft />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Project;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react';
|
||||
|
||||
const UserAuth: React.FC = () => {
|
||||
return (
|
||||
<div>UserAuth</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserAuth;
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
// store/useModuleStore.ts
|
||||
import { create } from 'zustand';
|
||||
|
||||
interface ModuleStore {
|
||||
activeModule: string;
|
||||
setActiveModule: (module: string) => void;
|
||||
}
|
||||
|
||||
const useModuleStore = create<ModuleStore>((set) => ({
|
||||
activeModule: 'builder', // Initial state
|
||||
setActiveModule: (module) => set({ activeModule: module }), // Update state
|
||||
}));
|
||||
|
||||
export default useModuleStore;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
// get rem from pixels
|
||||
|
||||
@function get_rem($px) {
|
||||
@return calc($px / 16 * 1rem);
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
@mixin flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@mixin flex-space-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
// center a element
|
||||
%centered {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
/* ========================================================================
|
||||
Global SCSS Variables
|
||||
========================================================================
|
||||
This file contains the global variables used across the project for
|
||||
colors, typography, spacing, shadows, and other design tokens.
|
||||
======================================================================== */
|
||||
|
||||
@use "functions";
|
||||
|
||||
// ========================================================================
|
||||
// Font Imports
|
||||
// ========================================================================
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
|
||||
|
||||
// ========================================================================
|
||||
// Colors
|
||||
// ========================================================================
|
||||
|
||||
// Text colors
|
||||
$text-color: #2b3344; // Primary text color
|
||||
$text-disabled: #b7b7c6; // Disabled text color
|
||||
$input-text-color: #595965; // Input field text color
|
||||
|
||||
$text-color-dark: #f3f3fd; // Primary text color for dark mode
|
||||
$text-disabled-dark: #6f6f7a; // Disabled text color for dark mode
|
||||
$input-text-color-dark: #b5b5c8; // Input field text color for dark mode
|
||||
|
||||
// Accent colors
|
||||
$accent-color: #6f42c1; // Primary accent color
|
||||
$accent-color-dark: #b392f0; // Primary accent color for dark mode
|
||||
$highlight-accent-color: #e0dfff; // Highlighted accent for light mode
|
||||
$highlight-accent-color-dark: #403e6a; // Highlighted accent for dark mode
|
||||
|
||||
// Background colors
|
||||
$background-color: #fcfdfd; // Main background color
|
||||
$background-color-dark: #19191d; // Main background color for dark mode
|
||||
$background-color-secondary: #e1e0ff80; // Secondary background color
|
||||
$background-color-secondary-dark: #1f1f2399; // Secondary background color for dark mode
|
||||
|
||||
// Border colors
|
||||
$border-color: #e0dfff; // Default border color
|
||||
$border-color-dark: #403e6a; // Border color for dark mode
|
||||
|
||||
// Shadow color
|
||||
$shadow-color: #3c3c431a; // Shadow base color for light and dark mode
|
||||
|
||||
// Gradients
|
||||
$acent-gradient-dark: linear-gradient(
|
||||
90deg,
|
||||
#b392f0 0%,
|
||||
#a676ff 100%
|
||||
); // Dark mode accent gradient
|
||||
$acent-gradient: linear-gradient(
|
||||
90deg,
|
||||
#6f42c1 0%,
|
||||
#925df3 100%
|
||||
); // Light mode accent gradient
|
||||
|
||||
// ========================================================================
|
||||
// Typography
|
||||
// ========================================================================
|
||||
|
||||
// Font Family Variables
|
||||
$font-inter: "Inter", sans-serif; // Inter font
|
||||
$font-josefin-sans: "Josefin Sans", sans-serif; // Josefin Sans font
|
||||
$font-poppins: "Poppins", sans-serif; // Poppins font
|
||||
$font-roboto: "Roboto", sans-serif; // Roboto font
|
||||
|
||||
// Font sizes (converted to rem using a utility function)
|
||||
$tiny: 0.625rem; // Extra small text (10px)
|
||||
$small: 0.75rem; // Small text (12px)
|
||||
$regular: 0.875rem; // Default text size (14px)
|
||||
$large: 1rem; // Large text size (16px)
|
||||
$xlarge: 1.125rem; // Extra large text size (18px)
|
||||
$xxlarge: 1.5rem; // Double extra large text size (24px)
|
||||
$xxxlarge: 2rem; // Triple extra large text size (32px)
|
||||
|
||||
// Font weights
|
||||
$regular-weight: 400; // Regular font weight
|
||||
$medium-weight: 500; // Medium font weight
|
||||
$bold-weight: 600; // Bold font weight
|
||||
|
||||
// ========================================================================
|
||||
// Spacing
|
||||
// ========================================================================
|
||||
|
||||
// Line heights and letter spacings (to be added as needed)
|
||||
|
||||
// ========================================================================
|
||||
// Z-Index Levels
|
||||
// ========================================================================
|
||||
|
||||
// Z-index variables for layering
|
||||
$z-index-drei-html: 1; // For drei's Html components
|
||||
$z-index-ui-base: 10; // Base UI elements
|
||||
$z-index-ui-overlay: 20; // Overlay UI elements (e.g., modals, tooltips)
|
||||
$z-index-ui-popup: 30; // Popups, dialogs, or higher-priority UI elements
|
||||
$z-index-ui-highest: 50; // Highest priority elements (e.g., notifications, loading screens)
|
||||
|
||||
// ========================================================================
|
||||
// Shadows
|
||||
// ========================================================================
|
||||
|
||||
// Box shadow variables
|
||||
$box-shadow-light: 0px 2px 4px $shadow-color; // Light shadow
|
||||
$box-shadow-medium: 0px 4px 8px $shadow-color; // Medium shadow
|
||||
$box-shadow-heavy: 0px 8px 16px $shadow-color; // Heavy shadow
|
||||
|
||||
// ========================================================================
|
||||
// Border Radius
|
||||
// ========================================================================
|
||||
|
||||
// Border radius variables
|
||||
$border-radius-small: 4px; // Small rounded corners
|
||||
$border-radius-medium: 6px; // Medium rounded corners
|
||||
$border-radius-large: 12px; // Large rounded corners
|
||||
$border-radius-circle: 50%; // Fully circular
|
||||
$border-radius-extra-large: 20px; // Extra-large rounded corners
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
@use "../abstracts/variables" as *; // abstracts/variables.scss
|
||||
|
||||
// Light theme styles
|
||||
[data-theme="light"] {
|
||||
// Text and Input colors
|
||||
--text-color: #{$text-color}; // Main text color for light theme
|
||||
--text-disabled: #{$text-disabled}; // Disabled text color
|
||||
--input-text-color: #{$input-text-color}; // Input field text color
|
||||
|
||||
// Accent and Highlight colors
|
||||
--primary-color: #{$background-color}; // Primary color for light theme
|
||||
--accent-color: #{$accent-color}; // Primary accent color for light theme
|
||||
--highlight-accent-color: #{$highlight-accent-color}; // Highlight color for light theme
|
||||
|
||||
// Background colors
|
||||
--background-color: #{$background-color}; // Main background color
|
||||
--background-color-secondary: #{$background-color-secondary}; // Secondary background color
|
||||
|
||||
// Border colors
|
||||
--border-color: #{$border-color}; // Border color for light theme
|
||||
|
||||
// Shadow variables
|
||||
--shadow-main-light: #{$shadow-color}; // Main shadow color
|
||||
--box-shadow-light: 0px 2px 4px var(--shadow-main-light); // Light shadow
|
||||
--box-shadow-medium: 0px 4px 8px var(--shadow-main-light); // Medium shadow
|
||||
--box-shadow-heavy: 0px 8px 16px var(--shadow-main-light); // Heavy shadow
|
||||
|
||||
// Font families
|
||||
--font-inter: #{$font-inter}; // Inter font family
|
||||
--font-josefin-sans: #{$font-josefin-sans}; // Josefin Sans font family
|
||||
--font-poppins: #{$font-poppins}; // Poppins font family
|
||||
--font-roboto: #{$font-roboto}; // Roboto font family
|
||||
}
|
||||
|
||||
// Dark theme styles
|
||||
[data-theme="dark"] {
|
||||
// Text and Input colors
|
||||
--text-color: #{$text-color-dark}; // Main text color for dark theme
|
||||
--text-disabled: #{$text-disabled-dark}; // Disabled text color
|
||||
--input-text-color: #{$input-text-color-dark}; // Input field text color
|
||||
|
||||
// Accent and Highlight colors
|
||||
--accent-color: #{$accent-color-dark}; // Primary accent color for dark theme
|
||||
--highlight-accent-color: #{$highlight-accent-color-dark}; // Highlight color for dark theme
|
||||
|
||||
// Background colors
|
||||
--background-color: #{$background-color-dark}; // Main background color
|
||||
--background-color-secondary: #{$background-color-secondary-dark}; // Secondary background color
|
||||
|
||||
// Border colors
|
||||
--border-color: #{$border-color-dark}; // Border color for dark theme
|
||||
|
||||
// Shadow variables
|
||||
--shadow-main-dark: #{$shadow-color}; // Main shadow color
|
||||
--box-shadow-light: 0px 2px 4px var(--shadow-main-dark); // Light shadow
|
||||
--box-shadow-medium: 0px 4px 8px var(--shadow-main-dark); // Medium shadow
|
||||
--box-shadow-heavy: 0px 8px 16px var(--shadow-main-dark); // Heavy shadow
|
||||
|
||||
// Font families
|
||||
--font-inter: #{$font-inter}; // Inter font family
|
||||
--font-josefin-sans: #{$font-josefin-sans}; // Josefin Sans font family
|
||||
--font-poppins: #{$font-poppins}; // Poppins font family
|
||||
--font-roboto: #{$font-roboto}; // Roboto font family
|
||||
}
|
||||
|
||||
// Root container styles
|
||||
#root {
|
||||
height: 100vh; // Full viewport height
|
||||
width: 100vw; // Full viewport width
|
||||
overflow: hidden; // Prevent scrollbars
|
||||
}
|
||||
|
||||
// Root overlay styles
|
||||
#root-over {
|
||||
position: fixed; // Fix overlay to the viewport
|
||||
top: 0; // Align to the top
|
||||
left: 0; // Align to the left
|
||||
z-index: 99; // Ensure high stacking order
|
||||
}
|
||||
|
||||
body {
|
||||
/* Font Sizes */
|
||||
--font-size-tiny: #{$tiny}; // Extra small text
|
||||
--font-size-small: #{$small}; // Small text
|
||||
--font-size-regular: #{$regular}; // Default text size
|
||||
--font-size-large: #{$large}; // Large text size
|
||||
--font-size-xlarge: #{$xlarge}; // Extra large text size
|
||||
--font-size-xxlarge: #{$xxlarge}; // Double extra large text size
|
||||
--font-size-xxxlarge: #{$xxxlarge}; // Triple extra large text size
|
||||
|
||||
/* Font Weights */
|
||||
--font-weight-regular: #{$regular-weight}; // Regular font weight
|
||||
--font-weight-medium: #{$medium-weight}; // Medium font weight
|
||||
--font-weight-bold: #{$bold-weight}; // Bold font weight
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// Global Typography Styles
|
||||
* {
|
||||
// Setting default font family
|
||||
font-family: var(--font-inter), sans-serif;
|
||||
font-weight: var(--font-weight-regular); // Default font weight
|
||||
font-size: var(--font-size-regular); // Default font size
|
||||
color: var(--text-color); // Default text color
|
||||
}
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
@use "../abstracts/variables" as *;
|
||||
@use "../abstracts/mixins" as *;
|
||||
|
||||
.module-toggle-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: fit-content;
|
||||
gap: 8px;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 32px;
|
||||
transform: translateX(-50%);
|
||||
.module-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 12px;
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
box-shadow: var(--box-shadow-medium);
|
||||
background-color: var(--background-color);
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.module {
|
||||
font-size: var(--font-size-small);
|
||||
z-index: 1;
|
||||
}
|
||||
.icon{
|
||||
@include flex-center;
|
||||
z-index: 1;
|
||||
}
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background-color: var(--highlight-accent-color);
|
||||
transition: width 0.2s;
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
}
|
||||
&:hover{
|
||||
&::after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.active {
|
||||
cursor: default;
|
||||
background-color: var(--accent-color);
|
||||
&::after{
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
.module {
|
||||
color: var(--highlight-accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
@use "../abstracts/mixins" as mixins;
|
||||
|
||||
.flex {
|
||||
@include mixins.flex-center;
|
||||
gap: 14px;
|
||||
}
|
||||
.flex-sb {
|
||||
@include mixins.flex-space-between;
|
||||
gap: 4px;
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
// abstracts
|
||||
@use 'abstracts/variables';
|
||||
@use 'abstracts/mixins';
|
||||
@use 'abstracts/placeholders';
|
||||
@use 'abstracts/functions';
|
||||
|
||||
// base
|
||||
@use 'base/reset';
|
||||
@use 'base/typography';
|
||||
@use 'base/base';
|
||||
|
||||
// components
|
||||
@use 'components/button';
|
||||
@use 'components/form.scss';
|
||||
@use 'components/input';
|
||||
@use 'components/layouts.scss';
|
||||
@use 'components/moduleToggle.scss';
|
||||
@use 'components/templates.scss';
|
||||
@use 'components/tools.scss';
|
||||
|
||||
// layout
|
||||
@use 'layout/grid';
|
||||
@use 'layout/header';
|
||||
@use 'layout/aside';
|
||||
@use 'layout/footer';
|
||||
|
||||
// pages
|
||||
@use 'pages/home';
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: var(--primary-color);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: 282c34;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: var(--button-action-color);
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding: 32px 60px;
|
||||
li{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="vite/client" />
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
export {};
|
||||
// Function to set the theme based on user preference or system default
|
||||
function setTheme() {
|
||||
// Check for saved theme in localStorage
|
||||
const savedTheme: string | null = localStorage.getItem('theme');
|
||||
|
||||
// If no saved theme, use system default preference
|
||||
const systemPrefersDark: boolean = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const defaultTheme: string = savedTheme || (systemPrefersDark ? 'dark' : 'light');
|
||||
|
||||
// Set the theme on page load
|
||||
document.documentElement.setAttribute('data-theme', defaultTheme);
|
||||
}
|
||||
|
||||
// Call the function to set the theme
|
||||
setTheme();
|
||||
|
||||
// Check if the toggle button exists
|
||||
const toggleSwitch: Element | null = document.querySelector('.theme-switch');
|
||||
|
||||
if (toggleSwitch) {
|
||||
toggleSwitch.addEventListener('click', () => {
|
||||
const currentTheme: string | null = document.documentElement.getAttribute('data-theme');
|
||||
|
||||
// Toggle between dark and light themes
|
||||
const newTheme: string = currentTheme === 'dark' ? 'light' : 'dark';
|
||||
document.documentElement.setAttribute('data-theme', newTheme);
|
||||
|
||||
// Save the new preference in localStorage
|
||||
localStorage.setItem('theme', newTheme);
|
||||
});
|
||||
} else {
|
||||
console.warn("Theme switch button not found!");
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 8200,
|
||||
host: true,
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue